{"maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"keywords":["material components","material design","theme"],"dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"description":"The Material Components for the web theming system","readme":"","repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"license":"MIT","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"versions":{"0.1.0":{"name":"@material/theme","version":"0.1.0","license":"Apache-2.0","_id":"@material/theme@0.1.0","maintainers":[{"name":"anonymous","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39a8b46a30781517e2d3db81a253eefc30f351a3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.1.0.tgz","integrity":"sha512-NS4Uw1fPZD9Kz32kQna8Fn2r1ZKeh0Ps/yTA6RnaEUPONvXmbMaBW5caqFstP28MTJXPIPORBRHgSmEMNhx8GQ==","signatures":[{"sig":"MEYCIQCNU79BwMrC8k/4lNg6YRas9//cBU4ooz8Lp3FLZAwAVQIhAMVdvOIocL094avYZn8XYlCI9UV7KzQ/QhzSlnZICnoV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"39a8b46a30781517e2d3db81a253eefc30f351a3","scripts":{},"_npmUser":{"name":"anonymous","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"7.1.0","_npmOperationalInternal":{"tmp":"tmp/theme-0.1.0.tgz_1481824302255_0.724292847327888","host":"packages-12-west.internal.npmjs.com"}},"0.1.1":{"name":"@material/theme","version":"0.1.1","license":"Apache-2.0","_id":"@material/theme@0.1.1","maintainers":[{"name":"anonymous","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df59c1efce70ab7e5ef551f1cb59a4f38ca2a48a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.1.1.tgz","integrity":"sha512-gHMXkVsKyodN6aPnKA9f+tH3HCqwfI/x9WMW2TZcWGVf6h/XY6swiqu6oBDPBsobrB+bHUTazDIuH7Z5lCTlpw==","signatures":[{"sig":"MEYCIQCIf4N4Ek2CQD510WvW8cIO707OswlwUqqebfzeTZQCCQIhAIqAgjX/3nuCZUO/dyQF9Qkh2PLj7z9hdxIhKbELwE29","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"df59c1efce70ab7e5ef551f1cb59a4f38ca2a48a","scripts":{},"_npmUser":{"name":"anonymous","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.1","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"7.2.1","_npmOperationalInternal":{"tmp":"tmp/theme-0.1.1.tgz_1485190186331_0.6219503211323172","host":"packages-18-east.internal.npmjs.com"}},"0.1.2":{"name":"@material/theme","version":"0.1.2","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.1.2","maintainers":[{"name":"anonymous","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b72431d207cef3117404367c80be4801e46fe5da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.1.2.tgz","integrity":"sha512-Qj0k0pEquG5B4/3vcJFj0nrgmqTnL76Tat7SU86sxYIM9WwYBxO1u0sRM9T/M9p4BoHenpBmVsJiU/8I9TaYYQ==","signatures":[{"sig":"MEYCIQDPfq4qXsmBEicAl+G/IqXI7hDbHBDLsXkdVH+FaWnGsgIhAJZfwGMAsQD0hjjX62z/6eQS/JxHUt2L4p9LK7KDwlWH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"b72431d207cef3117404367c80be4801e46fe5da","scripts":{},"_npmUser":{"name":"anonymous","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"7.2.1","_npmOperationalInternal":{"tmp":"tmp/theme-0.1.2.tgz_1487698063064_0.7447015712969005","host":"packages-18-east.internal.npmjs.com"}},"0.1.3":{"name":"@material/theme","version":"0.1.3","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.1.3","maintainers":[{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"mail@sgomes.io"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d4a6857f93066eceea8ad4d26af407de71911ff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.1.3.tgz","integrity":"sha512-aol96XCAXhm87lryREItAFvKQmHfbNBGyl6Sp25KSJPFnKuwvRTEB3mcEkicC5MuiXjvBro6pV9DT5DqoTah9Q==","signatures":[{"sig":"MEQCIAxY+lNfyEi10edVkeRGcXh2+Ax2kBZVoFfk7yfM5VSqAiBoG8SE9KHMs+XLh6sj/R6oD4xUQEj1XAibGuAy0HkWuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"9d4a6857f93066eceea8ad4d26af407de71911ff","scripts":{},"_npmUser":{"name":"anonymous","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"7.6.0","_npmOperationalInternal":{"tmp":"tmp/theme-0.1.3.tgz_1491233293272_0.5831433723215014","host":"packages-18-east.internal.npmjs.com"}},"0.1.4":{"name":"@material/theme","version":"0.1.4","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.1.4","maintainers":[{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"mail@sgomes.io"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d094bc99eff7535eac4650bacadfc10faaba3792","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.1.4.tgz","integrity":"sha512-rgr3jComubg+C4t445ozgnd0QlUA8U+/wOKmjxalu9abFmJZ1zvBwdx8lyrE4/lmo53+mU8jyMJyyTzIF2zyVA==","signatures":[{"sig":"MEYCIQC/SOd2oTYTCxNVn6JKctTevzP0Y5oOzIs0Hg1TOhMEpwIhALtM4nqDFsmvEkmiJvlX9r/Ms0QMTIBKIhZWZ2ZJe5oa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"d094bc99eff7535eac4650bacadfc10faaba3792","scripts":{},"_npmUser":{"name":"anonymous","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"7.6.0","_npmOperationalInternal":{"tmp":"tmp/theme-0.1.4.tgz_1492527090527_0.5367957295384258","host":"packages-18-east.internal.npmjs.com"}},"0.1.5":{"name":"@material/theme","version":"0.1.5","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.1.5","maintainers":[{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"mail@sgomes.io"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c7bd9a1974d8c1c0eacf037e0235aad9c5cb699","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.1.5.tgz","integrity":"sha512-qcizYCGJaI5c/jqqr1XcybuqPBkE8L/sFmfMYn3dU4ZuKn18MO+TIopvFWsRamu0gSRjoIhjPnCpOlAxEbuHvA==","signatures":[{"sig":"MEYCIQCkciOvyCT2rffVbFj0OJDU0/Q7dQrAucCqhxMEV+RkNgIhALEtj8WJEdeF4ECBmCJCwwGOmq50qdhBUNgQErKerU38","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"5c7bd9a1974d8c1c0eacf037e0235aad9c5cb699","scripts":{},"_npmUser":{"name":"anonymous","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"7.2.1","_npmOperationalInternal":{"tmp":"tmp/theme-0.1.5.tgz_1494865576527_0.8858927169349045","host":"packages-18-east.internal.npmjs.com"}},"0.1.6":{"name":"@material/theme","version":"0.1.6","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.1.6","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2044973590a68f608b439d2ce33c17707bc000c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.1.6.tgz","integrity":"sha512-48zIqha5jfxHnPeBQmtDm83M4OVU3bKmcqmgJcJKxkj02L3Qx+L+8bCnOQNwAEBdx5crLi918oJq/Iy7QCpPIg==","signatures":[{"sig":"MEUCIFK3PMV2q7wVYgyURq0OCCOUNBG4YdC1Ys9ucX9ra5z7AiEAtTsBPtDw9Y0xTo2OxIfFBnpTcwBmduq3PLA9DmHW6k4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"a2044973590a68f608b439d2ce33c17707bc000c","scripts":{},"_npmUser":{"name":"anonymous","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"7.2.1","_npmOperationalInternal":{"tmp":"tmp/theme-0.1.6.tgz_1500911370206_0.5979073466733098","host":"s3://npm-registry-packages"}},"0.1.7":{"name":"@material/theme","version":"0.1.7","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.1.7","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d94a7c5099feae9dc318c639802327c7ae82e872","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.1.7.tgz","integrity":"sha512-/JAIfodwr3ixZse87Ebuz42aqriii61lz1cVqM1Z57ohSDFxpU4+uw8D2ZFTX2n7KkDa2GScorf6DXCJoiWRcg==","signatures":[{"sig":"MEUCIAWsfHzPV/PFIR1baWaJMO4Ymdh6Ryi05TajExZVKKa5AiEA5kvWUa9l3HOmmoATcH8w+cWQ8xzM0WK5PHMkM5RRSWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"d94a7c5099feae9dc318c639802327c7ae82e872","scripts":{},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"7.10.1","_npmOperationalInternal":{"tmp":"tmp/theme-0.1.7.tgz_1502138915170_0.6861844870727509","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@material/theme","version":"0.2.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.2.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f54a62e8bcd2a63818419c02f7ec61d9968eff07","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.2.0.tgz","integrity":"sha512-JImkTjEPt6LxjU3eTeZQSZVZfCs8ooCC8nYk736bB3IRMYSJCsX5EZ+ZoEehtqRpS++VLQID3raWdGUy2kNJzA==","signatures":[{"sig":"MEUCIB4SxreZZu2CdZGlcKGACoS7rRpIpTMLcDdvoYzMpwduAiEAj9z2FpPx1d5K8F19Rkxrrqa+16exmmwaJlVJxy2gD6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.1.4","_npmOperationalInternal":{"tmp":"tmp/theme-0.2.0.tgz_1503336487183_0.7892156227026135","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"@material/theme","version":"0.3.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.3.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0e7622c77aebbd9416e6561c31ff4a8338d1f06","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.3.0.tgz","integrity":"sha512-Zq1HZU9nHGZdX/l7Fm5wb6nZvb28YK5TEo4Li+kYKndxCpBFz1qgidIwC0bokBSfw18BvUFdCjgBvRd57wFbiQ==","signatures":[{"sig":"MEUCIH2qnStRunwWyRZp4Y0KW/BVVoWORp38GLeXTLtPAFPPAiEAyL0UrYuff7KwTXpPvPwQXpxUpUWdAxAIhjpcPiD+sX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"d0e7622c77aebbd9416e6561c31ff4a8338d1f06","scripts":{},"_npmUser":{"name":"anonymous","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"7.10.0","_npmOperationalInternal":{"tmp":"tmp/theme-0.3.0.tgz_1504642580300_0.26074540545232594","host":"s3://npm-registry-packages"}},"0.3.1":{"name":"@material/theme","version":"0.3.1","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.3.1","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ff261ff72b3493a5cc6e746da3b472d072aa5a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.3.1.tgz","integrity":"sha512-0PRLqMPCL3mEaUXyc/SWZWDHWjfyS7xXT64h7dT4lwwA0oHpq0OdQaqemYWkI1h+CVHeT0qSwirRNJ0jxBlhtA==","signatures":[{"sig":"MEYCIQCjbSS+nhSoBksWZLNFLI3w1dk2LGbOB8j0cIdYa2Do2gIhAPaBTVCal1n27VBUuiUsD4NQwq68rsz5No5ompad7kWJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"6.9.2","_npmOperationalInternal":{"tmp":"tmp/theme-0.3.1.tgz_1505759758886_0.5343163013458252","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"@material/theme","version":"0.4.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.4.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0aef1a0279b65c15990584fb8b8eca095c734641","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.4.0.tgz","integrity":"sha512-2VXMuMR9yJTnXJF3gt5KmkiYVUA3Ts1TN3ihKKoluZjk8vxpHw1RmG4664Rrdhnoxn4KGdTOsOoAaPseKiL9lw==","signatures":[{"sig":"MEQCIB5/v8ZFC+xY2zppFbL2LkL3iEoRv8DENfjh8b8Q6UknAiBXH2LBF3s/XGkgWadt2Xn7e0bA3oExqVeWzhZIHV/PLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"0aef1a0279b65c15990584fb8b8eca095c734641","scripts":{},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"7.10.1","_npmOperationalInternal":{"tmp":"tmp/theme-0.4.0.tgz_1506978717093_0.37165507208555937","host":"s3://npm-registry-packages"}},"0.24.0":{"name":"@material/theme","version":"0.24.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.24.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fccc30a38c39f5d66912239fbac225684832baa2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.24.0.tgz","integrity":"sha512-a5ZJrW1aQHMQeZVhO9KIyPkVOZe76khfsTcRwf5Aws8ZGAFdtQ2fZXdeREkWDti1ftFyVak1Da1Y3ka0HCwSFQ==","signatures":[{"sig":"MEYCIQCusmN9AVu9Vz0PuEPA0+PrOe0au0IZuRzXd342RvGpOgIhAM/Pp6AK43TK63D8GYrbGi1LyoPcDq+x+gBcHgdA4yHf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"anonymous","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.4.0","_npmOperationalInternal":{"tmp":"tmp/theme-0.24.0.tgz_1509390699181_0.4354064848739654","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@material/theme","version":"0.25.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.25.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"707b4c61ebc62e662d36164c8dd45fcf98bb1444","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.25.0.tgz","integrity":"sha512-12JyZlMStatIecXFfiQrEQb0BBVJOCm4cl54j/R3VkOehcIsvG9Z9Y42AJ/DlyRlbQ7J3rkdevf6c5osQXZvKA==","signatures":[{"sig":"MEUCIGgCov+n4s/KXk05xU4KqQS6I4yleyvEbg0FvsZX33EmAiEA8ZkMcKyyF7+Ds+iiXGKSQQedWl75mjBjiCevgMq2lUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"6.9.2","_npmOperationalInternal":{"tmp":"tmp/theme-0.25.0.tgz_1510603359334_0.08055408741347492","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@material/theme","version":"0.27.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.27.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32fd72addfec09bf22e83f66f36a7ebbdc123461","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.27.0.tgz","integrity":"sha512-H41/AgCfuCN6jziasTiuNnRtASUBAUOwWAVyWHrcUBSyoUgYMsVpalrMk3goVDMiVPVrxL+yjg8uE6t0zemmbw==","signatures":[{"sig":"MEQCIF/fGf75zvtOqd8WVRAI4pSlyc8dq8IskDx6zbf15CgkAiBqxYlUR/zag2aTtX1cRdscZGaYfnb/UygBAcoEKHCxJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.9.2","_npmOperationalInternal":{"tmp":"tmp/theme-0.27.0.tgz_1513020945085_0.23013384151272476","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/theme","version":"0.28.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.28.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dedd6807fcadf9f33fc16c7f4f2a608d4ee51c46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.28.0.tgz","integrity":"sha512-hmlnXFIMGxhLWLNkaYFOQ4rqJhwanPZoHLziHfBDmbeAdfa03aJnIr2JVohmQkmOINA1UlIcTK5QAJAAaOJ47w==","signatures":[{"sig":"MEYCIQDASSvjoz6NmFVFG3yz68WURwdkmMgvgnhY8TVMOF0jOQIhAKs1G0QdQO0xQITUMdfIm6SV5EZNy0a1I9rt2Zc4V/N9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.1.4","_npmOperationalInternal":{"tmp":"tmp/theme-0.28.0.tgz_1515437719898_0.2538379563484341","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@material/theme","version":"0.29.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.29.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1004bc110e8c9af2b78a3e19a023bca26c45ba51","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.29.0.tgz","integrity":"sha512-jehYxuib+zvz5cH6U0Z6SzwfGBhzdFxtqnLBFzKZEmDGyDfUjZeMfDhO0Au8h6BpOyvKZHboufVTMVbdXY10RA==","signatures":[{"sig":"MEYCIQCwbHupN8MorXOgFjl5p/+0TEEvJxpNqq+IYMQ0qWgpWgIhANWwdRkZaNp/OHDLEXwJvzgrJPszD5+yYR7L981ssDam","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"anonymous","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.7.0","_npmOperationalInternal":{"tmp":"tmp/theme-0.29.0.tgz_1516645863984_0.2824748419225216","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@material/theme","version":"0.30.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.30.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"503d7fd5ac88ff70763bb277236ee7188982e5d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.30.0.tgz","integrity":"sha512-jd1iC5qyq5YX4w8sZj9+lXExeK4adXbAjw/lOQuDeT6WSGJf7HovxQlHjlyWJ4p/x0xTGrlaDHnrCxeJQCq4Og==","signatures":[{"sig":"MEUCIFcbMdPZ4YzIGtfSyNpsgnpzHQgeB7tstuU+5sErXo7EAiEAzX6iSfPueEFYvV04OoRWcQqz+4o2COPZfmVOfpc5CXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.1.4","_npmOperationalInternal":{"tmp":"tmp/theme-0.30.0.tgz_1517868185413_0.1117137880064547","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/theme","version":"0.33.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.33.0","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d4c5374fc607648c46bcebe40183ff345e2e027","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.33.0.tgz","fileCount":10,"integrity":"sha512-6uWLB7xypHblYGi43TNxCR8505T5DQUUmWTi/EJg/Q+NvRJy9ZBU5lx9u9bEdXg13wVWlwtA3EqKA3OsOztJSg==","signatures":[{"sig":"MEYCIQC5OoYyCP+MYXOAvuHCUXCkB/me5rDu73KClUP+EC+7RwIhALhyPchZPKtbTLWwcmoN2WxAq1ZebfexB3j7o+/RLEUy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71130},"_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"9.4.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_0.33.0_1521477612164_0.9099039071374844","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/theme","version":"0.34.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.34.0","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0118b935c2ecbcf3b4a1c84cd949e6344fa8bcb5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.34.0.tgz","fileCount":10,"integrity":"sha512-PXFRQ9Q8ycXz9ihb0UAGgnBTVzIq0Qd3jgonHLYMzIL9+8D4BrQqJlM9uyyN5N/7KwesP7ItiumdfZ5f5gfAxw==","signatures":[{"sig":"MEUCIQCfOSBBgDsdz6qlMQPKPgIOcvrvJUSqc02+rOawM9apfgIgeSYlQBhk7mnbjddfBzn8XUYEc5PfrF/U9u28L001bws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50797},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.11.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_0.34.0_1522705930184_0.014818593515037115","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/theme","version":"0.35.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2c76f60b82a53d399b769ef91ec52e83ad3c3bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.35.0.tgz","fileCount":10,"integrity":"sha512-jTjRDPKlWVCNnSs4RRe/eq9+F5lFBzxfbuI7klgCR6jTXRMB93jKKKO7k6chgo9l0oObhLh81ao6sq/eV0WFIw==","signatures":[{"sig":"MEUCIQDclir0IFEz26tOydgfVZFLUYB8cCVa0w2fECb3K2oDwgIgF1ATNhTIO+cLzv3KZ1NsxnXar0sGVZpqgXMLLOr6l0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mD3CRA9TVsSAnZWagAAwysP/2N0a3MItwt+GWzJH+GK\nxXckCEUWSwJPUm+FJ2PS6YSLMoYYwc5gCV3KQRMX78+WJ9WL0ZaPmbEgOo17\nW7KLTlaR9PlJ0VwSDktEj4yIMpZ8pUS1pDrn/9ZrlKsB7B2UwqvyMnbmB9Zv\nmQMzZYOxXJR1tQxRn1uYjpJJxPUICVa/xwljVx3XQ91X7V2e3UetH/nrL9oD\nYO7Q8e3dB+hAbeld0MK8+ulu+pQ9KZ576rd0SlapORo0u02y3XJDmpWqgR+M\nk3xXEJOZO1jns+oAodxqPHqhmPYdIZmX7X7fSx7q8gqyG0sgZXNgqsTTWuIN\nvia2LhecEhCOZOvql+0Bj3t5HyKqDLohf9DKivbsptinrLIv4v2+lGeIh8LA\nyui0HQoeqEPvVqsjGQDz3aEmWXCZUHHdmW2HZYVv/vaG12y9iONfRligOiRN\n93Lpv9PnpniX6Yj04dBhQFC40qLo9g5PN/zHXHhx3DdhneLnsrmUO/TND/Nd\nzBTsl8WuTP0TmDZ+0uRysTFK3vk3M+Auk5iwuIUGnYT6/njkcu4T1ALkzGt8\n4MJ6WNYx8Uc5ObPpJRBDzSD+q166Hh12wV1yLHpBOLuyP82I3UWHWlu1qBF/\nAMGZAisSPxcGd3s47yOlYxHHXIat0dvtY6Nldg+ByKYzLBpldW66F2EBVqxz\nmZHh\r\n=OKah\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components-web.appspot.com/theme/index.html\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/themes.png\" width=\"241\" alt=\"Themes screenshot\">\n  </a>\n</div>-->\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/style/color.html\">Material Design guidelines: Color</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components-web.appspot.com/theme/index.html\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\n**A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background\n\n#### CSS Classes\n\n> **A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\n**A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($property)`\n\nIf `$property` is a literal color value (e.g., `blue`, `#fff`), it is returned verbatim. Otherwise, the value of the\ncorresponding theme property (from `$mdc-theme-property-values`) is returned. If `$property` is not a color and no\nsuch theme property exists, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n","_npmUser":{"name":"anonymous","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.7.0","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_0.35.0_1524523254538_0.11637471020327816","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/theme","version":"0.38.0","keywords":["material components","material design","theme"],"license":"Apache-2.0","_id":"@material/theme@0.38.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1a2247eba4af2ba47da4456921ab420869fda55","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.38.0.tgz","fileCount":10,"integrity":"sha512-mP5+qgICPm/0dD3hKa/hMd8AHerkAaLJgEsvBwTXi+N/kpPo9LIrHg40DvUGPs5w6KD9PUuskb3WGBvYcToHvA==","signatures":[{"sig":"MEUCIQCYJQWnDNkN1YyfsCZ+266LLLLjtv1tIClEglkCNp/mMgIgVO4slmeZdrUgzIPoAcYyIrJIqHifYqscgNXQTZuIP8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0V9CRA9TVsSAnZWagAAockP/0uUixvy9kKSuLuVSeH1\n4IG1zOlrT3O4xjZMOkJXG+WrcmILupN/jlB/ph7Y6k/c+qP4q2oirz/5wK9p\nVoZxv5hpTGjlKWE7b1r6GRWohB93zgnV70JANncVQWZR5s2tj38SzGpx7v9v\nGKquIA3+WHDgjImmVRcFZsMrOmku/gt+oj2OnyYDGXUa17q2b1+52BqqX7FB\nxsFDZuDIw3Ss8xgb5/ZPAeTm4Gl7vxTaESlCglupRWqy0JpzLhPrQfigwaMW\nRBLiTmSLJrEzTB0PtVnwxKsW8Vd9JhyIrWdTKh+pgGDQUBeRTs2zxm7uaT1R\ntNk7rdIz4A7DlGdWJTylTVxBbICPPp2IMPlNxNAbYmXmjsvHtzXq1FDGkeYq\ncXFhOcBg2RVDi7AzgWVapZ6WZvQIqDZ9aBNRXpbFksrf9UqbEdUX4Quw+aEL\n8UHxFlGLxhtuZDxq9SeUcJbOP2Ft21ChaY/VPk+aby0BKBRxfimkQM8mD+Ju\nmxmqgf3MYnaQadrn60yxQw7MV6uW2gu9u9vlJpmOXix8IBpS1S5CZ864D9DR\n0YR4vmebwGjcwFnoiA2XA5IcmRal+caPthMsVIVf8riuNFdkvwo1jI8jLKfg\nWnhNHts+VeZcHnWfrYEaYG7E9Pm3i66N4AxzvvkCa4rgY5unYPYycP4vgEFB\nXs5a\r\n=mnWm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"9.11.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_0.38.0_1532970365122_0.49904794103510897","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/theme","version":"0.39.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@0.39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c7a2167b59e5757737ec3dea43790eeb85778ce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.39.0.tgz","fileCount":10,"integrity":"sha512-i+/xTaYqOslX0DZ13dE9cwbEcqK7+FL2qgBmV6yBduIYsEsC0srxI3qCbvVV6CO0UIHrT+0vgMqtVZu0gjuFlA==","signatures":[{"sig":"MEQCIHpHTfCNW654g2gpL66vI352zx9TwJdDaAonhXqCchqkAiAxnZ75O0LFtVyBMG1Zk8GTXaLCz8BZ7JwRbjYJfJrjVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDd1CRA9TVsSAnZWagAAN3QP/R6zoECPMijStBXdP/YH\nEi9BJDsXgIwfE7MSR/qimIlkzUGxiYBLXai+4E3k2hk5StF7kxEuU8gILlkw\nx4uZNEYXzhsrPrPlO5M4aYxM0/2W/ka3Rk639rYSK9FFFXUl/+8MUUawb3HK\nZ65CPfJGhD3RIvbB8kT153YzHucqWmxZSh0MDGFS1DDFXN1pWAiUjWm9wQfV\nfPf9If0qnQrUv+7NUDkkmk8M9g0m4L7VYhLQcBAUbNNuY4gi8ZrNsJ4f79f7\ni+PpGThWlRwWW0/TtwIPFsOczsNkBx6Pp3yj99ARincF2vXuBLJPhGEjo6um\n6xYayvWA01/14o7MlZBbE8j+xNP5N3IZQXa1YkAI246F4vyK2FuU5gBtmvX8\n9RJOYuXGkkzA+hR8dNIFlajEyaHVdxMdnqru38vf0F/Wj+xUU8AMabx2MVxg\n5MOHUFDCpWLZMId2XuB1veiTSc2h7bNzMbZ/2V3DN0k7MmTh5R/s20sLUYFT\nMwrGP3FYdHOX9sFkhH3VBHKyiP1TtYMMdj7TbRcOKpont2BHrgXNAKfdPI5Z\nvWRARyhgN94J3NXoqDOK4upaAk8S4D3scg7zDAnCTPoYTyOr4kp+MFIYs7y8\n7ks9IxRy8mt8CrjNib23iv/U7UcviFQC4dbPKRIOpTNg8rPB1aYTI7p2hj+u\nt5F+\r\n=u9rl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"9.4.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_0.39.0_1535391604804_0.4962606398837932","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/theme","version":"0.39.1","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@0.39.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fb160222e2b213628b285af26ca65c6f4327fe5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.39.1.tgz","fileCount":10,"integrity":"sha512-c7xjzzHdF4kBl66VJfATBAV9cwD/6TOyVPOWiK5rPxmu9g7uEAe1HmupqJRR1pMFCPX2w85gfvIsxh79EU6YJA==","signatures":[{"sig":"MEYCIQC+akK/t+4eHTFZBAcTrNh+VpCH2ktgK5sOK3ewTJWQLQIhAMZGUqm5twiu+aWPsU8d3RSU7MwRiAigqDag6NtH5B3O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTBCRA9TVsSAnZWagAAZoIP+wSF8AGQNd6EQVK3V9UA\ndk1Ry0hBTJVUmCu6E41IOZ4kh6DXgZ12RMzXZEaUrxdJcZ2NPSCvt0TzeIuW\nlBMhatgUJXSOEG5iWrYM0OKpsDfwtnxUvaCS151uvRIaGUzL53swHb6IatK8\nhZCaAt6gCM4GZ23VziqCXnhQc+u9lYcGxK7715xHpW+2UXIS0IBeSJFRJ/Vh\nn+GkG5uMkuVbSXcDVsjCz4oGNHPqoiJyphUGU2rH52BpHnYSXZqzSugrJKWD\naz9qQRyGYZ6jOOsoAUA7hqu0KLabV97G50uEmJKE4939a7ijgz5GaRCr5QPx\nvfFl8uXZlBK6ZysMXxOzoTe1KwkbnoDecx0HIDqjOEWCARNxAwu07fUSLi3B\nptkGio9J8f83weauRSg5WFZU8DBJIbXVcJKC0pEAmQIReYmACft+qtUlRAst\nOELeyN0XQDbqaGRP6G5bx4lOrn2DaNzJJR7sQZBDLe2MLm8M+HNUR/LlXoD9\nKA9RZHyqqHE6SCVvq39XfxoAO0Bgl9bO6rM0OYRpX5+G7oGXlDQ7xuXMIktU\naoEmG+0gGn33uGDtCtOiZAqMzEUMuzpkos7iNMw4KcFHxoJalgrMfpDGa3cT\nwwrHMe5YqWR1sYvjfgTxtTfeYrrO6lcdtdz7eOzs8R9F89Tlc+jL55LwHkC/\naF66\r\n=vMME\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"9.4.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_0.39.1_1535751360442_0.46355596114202613","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/theme","version":"0.40.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@0.40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b91750bf6334fa7bebf2b1aabb8ec727f519e13","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.40.0.tgz","fileCount":10,"integrity":"sha512-t4Xn15IaM7bAg8EWDkuzfx8xafMXjcMn+cnriPRtZOQ9X8R2gPSIuIQ36EwqFWpGTGMftXJkOEM/KmMLf3rKnQ==","signatures":[{"sig":"MEYCIQCVcFRd/REEg7McJki9kj3mHnqP9oMqX6jq6matrYRBVgIhAMDh/tFToRiC0++TodUF9xc8F740WQ/Zcbs1Z1Bp43Jc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUJfCRA9TVsSAnZWagAAOcMP/iw8FQl+H+5qZO+Rb2Bo\nKc+ZPIhtCtTiPe/mMVrHAbDwVga0Eq53BmSkqtEQoRKoFuQPLwHtuoUKInu5\nb+4ttJm5hNoOzaVimoPP3GUdFpV1D08pPaDAZpHb+5VUrL+9NwIk46fw1f2o\nQ7E15XY9TJMzioJQgXgdFbfOeT4vkJmoCHqUcMgjfWgxPAVHNzfIVkxBmpgR\naleSgo3haFngSjLqeKyav7ZyRwXgyKbvaS/2w60VHDimLb2O6eMsQeAMgR/t\n/wZEKdPSlPkW5pQGQCTz/1dt7IO4PquJYfTAL/eIdhQ24ABxSPlTb8c/QbgG\ngnsmg8Gak4ze4fsCXwIDYA1Da6UiOOrxTbV4TN6476mYvLpd+PHqKtHkTWX4\nBqVgAzV6DG71fpdoa6hj9yDfYrO6KjoZLhTDqfiz+vgI1FGNWOH/5PA2e5Ef\n/M9ICoTGDO/xwXbobABEZ7pqydriJrnrqHd9HFk+wb3Ct3uQgBalDSAc1TC1\nfDGEVqQ9A0GycaaFRH4NMgYSX589Up4nkEZYGeHYiX+BGf/mnUKfhHowrucR\n0Yd2w8E1co5aQpI0c8Pdxr8lEWiuP4W1PMlJOWdFkeMLY6983EeaFQsWHU+6\n3QtdLX2zfO/SZmZnsaJBn4orxpwRZS011OM4W5MtjvKeogQGXlBPCCwCrlJ3\n+yUP\r\n=Gpov\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.9.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_0.40.0_1537819230605_0.06904749413360323","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/theme","version":"0.40.1","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@0.40.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cc3f1bf87ee9581df03e347a1979e53ae617221","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.40.1.tgz","fileCount":10,"integrity":"sha512-cH1CsGIDisEQ2oroZhLTypV0Ir00x3WIwFXnPo7qv3832tuIDkZY623U3rUax6KNPz4Hh1j0tNpTwgrNZwvwWA==","signatures":[{"sig":"MEUCIQD4tRwRSF+Plq5jSwlxIc5gzHQBgrY+P02doN557nPrKwIgUQoLVpjO+ICQ+WrN5usL9ExV+yrfLkM+as7wfAAToSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8PmCRA9TVsSAnZWagAAHJgP/3gKdbLXy9Ip84sovuxG\n3TUjC3GY48uu2/eTfA3v6GuJH1j0vSyp6OkmVJdpDlDw9bstoWLokfjsE3Di\nXEsM1zJp0+Ro/xEAzjNxQagTK5pZgAphuElxZ01M47q+EUWhDZ5qMthncqMC\njJhG3Ju41GtquWeGJudiK93EGWii1j3nITjiH2yX03GN0rYp/0W7DnzC7xqd\neGbGCg10igqty79Zj4gUU7I1Jt5t66NOPJCKELIvUqj1RzCSaF9DoN4aS3qk\ntyO4eTXUVPC+nR/3nHnfloxINqKvtDXV5zJMa5g7O1vKv5IBGCMXRbIp85Mb\ntsQDQ/5VSenfB9Hr4sP7Prf2qUVja803w1P6bh6Z5HVIt8XHoHSM2tycmuy8\nq7/UtEMaSN19zxCcUaF/lsL0XI8IaodgBi+ziHWK7J0ojD8r2jdznoqsfyqZ\ngiXAklKED3jvSyTLvwufQ5cRRYyU6JUNV4OZLZCXHTkYzBQcoAwXqPSFsPyO\nT0NKEUXbBxcqwpzgII30c2qgLW8PIqs43Vyq7lgKACDqJCU3IuLYGwSDmPKA\ncyiFICw1enhFiYJu+xWm4rcLj9MLbGzSyC/gW7nvFV5V8tWoTH/58dE6mDVe\nbtm522l1wZ5kknzNGKjvAYAnXoH8mOflcZSBtVfjYSssLcklvljZxxHxyXLx\nHy4H\r\n=6+/q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"9.11.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_0.40.1_1539032037301_0.9626359013915264","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/theme","version":"0.41.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@0.41.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f8252a872b17845cc661b867cbbf54e51a26759","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.41.0.tgz","fileCount":10,"integrity":"sha512-ohW2JxObKOWvP34EkIIcrEVtL3g0Gs/T3/MdOsM36euyshY8Jwl1f6fjVUQvVjSpixUtSb30/+ulblF8fTOwBg==","signatures":[{"sig":"MEUCICrU8fQ03FAWX1dUMkIqJU8RtJv7UmyuMMgOJp6cyv0YAiEAx+W3dkQeIbblLQDfkSjXRktR874l8/MbMzfFxrobOSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12vSCRA9TVsSAnZWagAAEPQP/1i4vy4vwjG0kITZvw8X\nnc7aJMyu8y079T5jsuUdrhGshsJow9F/A6AqucvctdB/CwvrQNv33wBWoTxQ\nTM6I8j1v6yEBZtYZSXn7H3RxRSa8JcOSGb9WYA1bSF+6zNFLTAXZ3XReF28m\nUJQJHmgn+RlNJ5idSjPzUCE4jX/0W0mJg54oXAojRDSmY8HaLYNHaDuntA3l\nVThSW/xw0xe2eHdWT9FNin0bVYOWfkC2gsrf/6jvSRiktWmoybnnV/ILpE+k\nUaBP6+S2CHb6bKU6ZRYVz6I2s3ilVSaOzIdTlqiq1H4cxNFkxVR7ol/GCXpf\nHEOvYWzkxLU+9MVipt23u3ZxfCtDCdzVPIrMswzEM+/K67l4Nsi+pChmX3CN\nHfHWRQhJPy/e/oYMjoKBKcbQmhKw4oBu4bX/IB2kpEh5KwLDN1qyavsWoRkG\n7QYuFO8uyLVkp1/c8TdXVJN1WCn79W1Q5N+wH3+uif/v57Sz0IWNPEUkoHYC\naejwtpV1cxIVBnQ7FKuTGPN00r8ghQ+imu06AC+dbUGGj8Z8Bx4nYpmqudjl\n+YzwmP/lZgwvapCBgHc9ui96lpH7nxDZfxEzBHlMMyyes8z0TckQc+kx4F8N\nqsIymSPUnJnuUZiZPWQfbtV9W0rW9fEkxhe8C9YZQ73qAHdKGoTTAu7QVJX9\nDNJ3\r\n=Zkmg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.11.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_0.41.0_1540844497869_0.059079864329670384","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/theme","version":"0.43.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@0.43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d9fa113c82e841817882172c152d60d2d203ca6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-0.43.0.tgz","fileCount":12,"integrity":"sha512-/zndZL6EihI18v2mYd4O8xvOBAAXmLeHyHVK28LozSAaJ9okQgD25wq5Ktk95oMTmPIC+rH66KcK6371ivNk8g==","signatures":[{"sig":"MEQCIE7LWwv1yLBDsEWEcsNBedrA8RqY/OWUByq1So5zEwtbAiBcGoPin6FcUNmBMRrcJLg7IllOzQO/d91TfnEtx+NzzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM60fCRA9TVsSAnZWagAApsgP/0jfIdy8sfpeiRuJ0Ayr\nxbRWEJ8nMtYhPXGO+1+NDbz+rse3OF51TzjkLsN5B9FxoOi9qg1iF//h4AWg\n3/mbpEov3yL5hdLw0yhaQKIUuS72A/lDhbAr1anJXkLsDy22ely9a4AcaBlG\nZJaW2kURSHK6Z3fFU1sgRiP4upLAfNKfh5qIc631bgT67s5DNUY00VkadeNY\nHfjs+vR7sRUhDOrYnHxC31FQbQHNgjICm+ENU0nuOG+pcaKf9Tq0DHKCWEwd\nPqYDVwkU3fai6gm2+rNZ834nrxFA5UeEthCZk9mglJhgVBfn2coP6mIVg1ad\nDxCWqK3NjKcZcyvZ92nAp+wa6XnVyviqB07wzh7HKqA98wLYT8Ilah5DRL2o\nW/6BFb2leqg/htXNZkaBuDh5wENm3DglN1X61GkGBv6Ue+v3LKWBLcz9/Zuk\nxYo3TL0S+OtQ9r2cvLCxywyVY3VnOUdUDIo+TEa4VjkLMvjZTB8Zux1+Ju+i\n59mJ+TPwQbrQk5cDn2Zt6LFLLQVa1cUMl7ejuKsSQ+r4if9hVLzSg+RoF3bg\nS8r3MKflDKolewuaPaPfpTbJjkPGUo2pcYLELRUs0CV8RSMeU/nRY4Js7eHF\nShgE+DrSOwNPa0KFSxPbsZGj4yPAx7XpTs9rCpIIF09TJYU3+tm5Dk7rM6p0\nBlzD\r\n=Ja8n\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.14.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_0.43.0_1546890526448_0.8391109053647063","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/theme","version":"1.0.0-0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@1.0.0-0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30267188a09a3dd6df656ccfce9b285d94d8439b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-1.0.0-0.tgz","fileCount":12,"integrity":"sha512-FK9l8++EAHsBsiCU0EYQhCskwzRAbGXtlJwJBqcj8lsJi4pQ8g7L/HolxJvzz73Q/S40Ghc7q6raNxITz1PnpA==","signatures":[{"sig":"MEUCIQDYUZwgIsDCAPjs/qnkVFMdCF11fyEflcoegmvX9TnlsgIgZXbZ+Z4yQjcHbUI38Vx/Nifx642X8rDqQusqjh2lyUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRNCRA9TVsSAnZWagAAqjIP/RsdcN1/qvY420fc/10I\nDnNzzBCUzv1V6S1VoBlliuVpEIlddGsu0F4lyeASIyIugQf91o/QP3xkhe2Z\nmdnoS2/K7VhDr/ydrvAx+yGi1fipyi/22i+/cpANx8fIwlzQsdUCVhQ2G2XU\nfS+tgGByi0eXObAlAi5Bb5jpl/B7BRQtvizF6USP9rV9/4glmbSBrELCvjsN\n3PO5dDGgD2c+AV8rQhYP6PRtu+AVAmQRDGDxFx2u+HRGOpc+2k/qX6Lzaa5M\nJFfzVU0urzK2EiWYa0K7ssFl0AXU3babH7JbwNyst3m4qLkB10bAgGeFjanS\nOH+lI7X4ym6vuQMq5eiLELH5EA7Tcd7lkuJZMWLIJRHz5dEFtGsaWGufY461\nmYp8X+1ZZvRKE5aUAU61iMjuq25vizk1tHhTLgLEFSszW95sGUBd5mPjYVH/\nkHTFd0oDKzV6O9NShC4FsYJB9KgnXHXUGg8/qFUchJajANhP5kSc4Ndgyjxe\npS+9sSSgqoJd7+XPODgSINrWLPA7kq2uuNbPvUdUjjpQNVCb6u3n52nvxkgC\n10EnsPYmznCZeovsJj40agbbmjb3SNTf/XVyaz5pdUPFztKj4uGJwq78WYQp\n4KqZ9gUg5mpKnXxakB7aqRrpU4lpxYgtV9lGxECOmZj0xk4YQusCKjLx3vJq\niNy2\r\n=J/dI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\n**A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background\n\n#### CSS Classes\n\n> **A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\n**A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/feature-targeting":"^0.44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_1.0.0-0_1551311948651_0.12096439034206186","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/theme","version":"1.0.0-1","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@1.0.0-1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c500c41efe6b3685663d51b9f4789b1e977ba2c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-1.0.0-1.tgz","fileCount":12,"integrity":"sha512-weEjGAz/DjskcXINXEPb5W3hRiUNCRSYiYIN+qFjIkesFwxCTUOSuxzzVU7Si5mWnn5Hzw/bzPV8SsyAC5tjTQ==","signatures":[{"sig":"MEQCIHBo5SHJHSvmySUvSCKJoLsaTC0f7WFQVru9+EDYgsMzAiAWDTaeGR7TtYgRssMWvDsECihzre/gqd5HR4y/S6ikVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbWuCRA9TVsSAnZWagAAMxQP/iwd9n6KKA8cUdDhX5M3\nsmk3e67ZDHvTit5eU599gAhtXALP1HqNGUg2qneHG5s1Lz6B0+ryj4d6Yw8t\n/Nb8y0zx2UiKern2XqxnPg77Iu/5jUtvtpfyCn2Z3D5+wjZg29Ix7NuuDSTA\nUifUl5YnQBIeyjV5m+8aayzPmKaPom8rhKKH+UQpMhD4+oGW4IcMCu+KwBLg\ncjmSG2za0qgQZKBwKW4B1WITa5bpioAUzH1TGRoa4RhI03Yc/raQDbnZ+yMy\nD3KwmExUh0vjwUSsYVoGk8rpyFUAMd/k+pSAjzLhZ+Rup2hwCSkMEDKfvSyZ\n6xYQ0WNHnWI54jCieTQVDy/EeGk7XBqNZZEZ1iHcrxn5NnCTm3Xog+JatAiX\n8GhTYHnuc/VWynlVt6VW7BFOK4m7OYsAdMyS5llvc0BPzw1qY9unZgDBTGyQ\nwLfi+L1ld7/GZxtLgFJbA29xEbH7zkdF7zPBG5AH/j+2rWsfQu3lcM4weAO9\nfANaKskZhh4NYi1iiwd4n0h8/xth19N0bZojCvnBSHTvXkJKEWdaUQD0y8uA\nMIaJs231SEC+jGr6ORoKFCloU8o+i+0csplGaLcYqDMZm9fNQHJqF0wYDfot\nV3bMYIjCtEuXzWaF7VCPPMhjfxOjWP21RUpoTJfa8QIsBTuJsbgU/FwDdpb8\n8wB5\r\n=6ayb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\n**A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background\n\n#### CSS Classes\n\n> **A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\n**A note about `<TEXT_STYLE>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_1.0.0-1_1551742382020_0.8741489486063512","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/theme","version":"1.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@1.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fd9ee1bb7fd2a5bdc6b7465cb15fe345e435670","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-1.0.0.tgz","fileCount":12,"integrity":"sha512-Bg/BQLU5MmCwtQ3DHcSs9DodZB8PTvuItv1wXrP54S/wBVwryIB5uMDmERhnItbNnAFbkKhlAuhn1asMmMzfkQ==","signatures":[{"sig":"MEUCIEfsrczxoOhoHnGdpxq8EedJspymLXJEzWFw+GWxWBfiAiEA8Gv5xoGBOos5yF+kN0tz8H4bie9DcgObap/Jqw+wC8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDaiCRA9TVsSAnZWagAAWzoP/jV3TdiWCdL69Z/SvRi/\n1A5k/z+sjglrbus7o6Zm113NkOg6wqKw8tHD6A1gahU9ue9uASrRzEjwyBE6\nlmcyxUSladV45KLyD7eRZwLgWopAxA6S/oQ/9ciOw4FdO7cj0XevxRZBKzw2\nWiMiXJ8LcnKZtzPLlVf4m5ihTQ26gVAFTMJd8YIePWiAxKVFjkxZJRdOZU4m\nvrErk91T1leI3Fk8pnF7ClDUAVlbukKvMzBvNL0C4jR6/bgYGlSs6/x/sGq4\n0HV+vpC/jh5XWH1V2sXtQU3slchWplpgVuwFG3tcOp+mIQiW1RK0Sr+9BFZb\novsGBSkSJaWleNcGsjjULDdQmznSfEPy82LMug+KzBI6Loe1uTNH0gkhbJp1\n9C6FtOOEjmKa4jQ1kp/km4OD4L4tlviO+v8Bz9VypzAqZFC8uxTHYiJSg8zp\nt/nJHsizV82EEI+gPg6hS1qwoW/rEpc2N8RIfXAqoXdwmDpXkLahO6exgGgS\nGqYOif7PObbl+rv7OnP1NjT2A7rXxJO47dcwey3PWOpRS6nv295gfYuZnRko\nzy7IDeR8bzxSkUmArB+jGhTzXdf89pJtfGvgcdocS2yBJAOhFCuSUW4+yA1g\neui1njaNHGe/kwiaZM2yoWG1v4uHMZ4CSSejbUHGdnAx3/rsmIFdNrpzwoFN\nCx9w\r\n=TtP/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_1.0.0_1551906465741_0.06495344528012104","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/theme","version":"1.1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@1.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c95dd804168c23c30589fcf09ecc5af5b3d1adc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-1.1.0.tgz","fileCount":12,"integrity":"sha512-YYUV9Rhbx4r/EMb/zoOYJUWjhXChNaLlH1rqt3vpNVyxRcxGqoVMGp5u1XALBCFiD9dACPKLIkKyRYa928nmPQ==","signatures":[{"sig":"MEUCIQDOthQxs7/Qnl6+ua6gISeUukEsaZkZk5vAUNP/AfMFcAIgDt/LPe6rgwqVQQMpvMSqoMICtZIDbwLLictafG1Fxts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnywCRA9TVsSAnZWagAAeIgP/R2ZKXpQFeBVa5LsfSVr\nfMza986PYq6NDgxLAdGKC+vqg3qeh3/lmHvkNf2Y6v17qQi4aFc2sLJToOaJ\neFUA3xszGJD8U2qqu96M0zB+0xXvIKyi3AH6VfwqgIp+2o3zoOjsPBwZocDJ\npX7OXK2lbxo7/BJaKNJLh93U2itI6wK3rx6eVXcZOQjZHYH758vsGX4nt3aC\nJ2SwimYEgY2XndQ8PQKsdsnVR8ejWnwBFYBqJeHbMUZ8FILDgY7zFSRQy9xT\nA7ClSCm4Q1pdBFC1+RRwSLzOeDUApLAWvQNMPjkLeZ/rHahCXYYmkM+C3e0n\ni8A1BVu39aM4A62CyIYmMoSYIgC10XtjwWurMSXnlPxahP8u9op72QDYha8j\nyvpM5od0gq0tijT6bET7n+6HongXxfBdfoermeMPHWz+z5s5muBScjqRZRLU\ncSQxgAak/InMESrF3Dfyhis/hXHECt+8O0n44ee3+cKtJFIOQHYfpuShOYO8\nE6r/08kQsxlRbpo7IwSwtRQPfQsVCIgbr44o/5k0OW86wnGNArNSW61+PUJu\n1HbP75JrT4TXrAv03Xi/c+hR3LE0dXGXaj0KDokXleL9zCXTP7Z3vbVa4+3j\nve1ZGlJecJGVPAACXi0IuYBiKOu8+0Y0OeBBvFOBA//oTRPwLufdRxtCw+yP\nELXb\r\n=UA81\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.15.3","dependencies":{"@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_1.1.0_1553628335313_0.6514104000708898","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/theme","version":"3.0.0-alpha.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@3.0.0-alpha.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d6ec0108b99cd91ecdee9526c0b35a2d97f3758","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-3.0.0-alpha.0.tgz","fileCount":13,"integrity":"sha512-/Z/WMMHeyS8eLvFPYZKd02pl8c7lwZwKLfz/UsSn9ybrYwkQWlBcVYRC2390+ILNz8ortoDmPIfuDHxQ3yUdug==","signatures":[{"sig":"MEYCIQCLLwGUWsLYSa83Kiyy+f72Wp1GxQv+kiIQwH6gfehS2gIhAKTJ9UaF8QiRY9bezvvu6LwxzIccycJEYqpoqcKkFK5H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpJCRA9TVsSAnZWagAAiRAP/2ZUNprzZhahM58BgA6R\nch522fW2zmz2zvhGvOrNU0RP4iNixzYA/cqhXBd+oP+vSSquIUBNOX8+rhWJ\nTUwQDwgWbHlWhAmNN0AkKJwKTpKeYrgq6fFIjQQ7r6jrttUZHjSgW6xlJNsb\nJDkr7eO/zAmtW5zPXRrMXVTLbbqXaOxepW+7X7d7em8gUrxHU788NLT5GdNM\nvZvftpHMjIQ8ASCi8q+6V48TtqNvv0QxUkUdAOe43AchSHdOM9/WN3Nu6QP7\nRljwmTV8E+e2rGpvVAtaaawOvnrPrdgnFvfBrHZERkiina74nsxwtwKzEtKj\nbN1P64BtokXvzTFp8N5UTTAYeQ8847l4HnCo/U1AxlV5/3w93CEXxAxUFW9N\nkwzOQ5m1qTANuWx75cquJXnyIrrmcKZbaSWEJq8hBmpD/FhVo73btQT5EOu7\nMi2KSW1/aXeeUXrj7HqfyobaFRlFAHem9n/kLasHyyfn45V+EXr8T7YcExuV\nkmh+cDKchPE3sb/7LFVv1PLlGYupbKCF9TgqguUDeZa/c4vWxu5ixL1ADodV\nhabGG93Ogsj7fhNOw7Zl8U51+NUACk1peamne+v9Ksgs6uPhqR3hLW9P/93q\nu3dYOLylli0In9KOweRsNtnG+MXVprSKKauQhNan6mR5g0TPdfPVlz+tbtOo\n3NYy\r\n=86Ea\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"11.9.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_3.0.0-alpha.0_1560312392983_0.8573748698519454","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/theme","version":"3.0.0-alpha.1","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@3.0.0-alpha.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2795f015bfdafaf1e3097fb61e440a58ace705c3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-3.0.0-alpha.1.tgz","fileCount":13,"integrity":"sha512-+Ew0qXaj7PdBEKjUONGFeTgbg/Ey83Hg/irokhyaqv8qTYB0VMh3F4hu1zK7Ddt4w3i7OCYqOtjVMBzZ/ajTTw==","signatures":[{"sig":"MEUCIEYal9TcKwk5bTaOee8W5GqsK3kJ41vV1M/uiR06Jh/AAiEAmaifROv3UKOkEty2fnQ9uCSoxXmUQ2EmbcdY3peN9Fs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUwlCRA9TVsSAnZWagAAnu4P/jXUNzbSgsAqj4DjAv4J\nVT+2eyWKvsqgIjbVaCBT/hUqME5lJA/Av8Z3PuzS8z3QXVz9LsSIfsb6vXNX\n9u9KB0Je2jdygJSClSzrS8F12mtz4cw2g1LoxEi+ad5AVv/PxyP5qz2I114G\nCyBhN6dENTuLtmEmpUQQTwX6tcWTm6+sLHxfnNRsjmKj7YQzXpMrLtXAeWpc\n6Sn0HlpmfBwAn+FFjJAzUdct4dRZCRsEI2Thlh7sVJTsx8lm1DwfAhMhh7nw\nqBdLrHlCh2MbCsQBpf4yCoQ4gd8RptjfNuZ0hXzANXifwj27r34RtT+Oxk7a\nsqZeHhLiWdo2RnJUbf0IncP1/ndBj2N4LVJuaDd0puhcm+sqD2TzKv56M11n\n4BRGQM3K/63rmqDc3X1P7/NZFlnXRqektGYIkza5cApflFJmOALdhY8Ku0Bk\nwPYckXviHRi1QSYOFjYgUuUa+stSXCb3Y0oY4Js3GRWzy6ptmO4ietF+jChK\nEWsc5ATyO+O1SbWNeOF6ekpoULmQPluznIL+UNKnsKOYJexcQzsS7xC/bK8L\nh5YCEE08k0AMnExX40sIMJ7eWLmSILy3TtbWeG4VX1gDBkwtATEn4aoDhov4\n85hbzjY0EntL/E9N9/YePrhNJpafFWxsT9XeL1CQo3OhhvZGnDwSisC9k6gy\nLnxT\r\n=i1qD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"11.9.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_3.0.0-alpha.1_1560366117176_0.9988749226941704","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/theme","version":"3.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@3.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73713a1eb42f934a0f8727c0778273517e59a212","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-3.0.0.tgz","fileCount":14,"integrity":"sha512-X8pto0fvKNVJ1ve1Kl18vOlFe7H3V/8ngDdM5iRvgZchWc3GKxKQU/QqIQJNPxkGLSfBdyPJ6c6pubOpAgEFSA==","signatures":[{"sig":"MEYCIQDBBKBq+H+LXaGcqGC75Io8rH3VK/2SpVEPdUQelw7GLAIhAPYbwoMUY3jBEHgsxy7/nSVmG/oO2dGEM1TBKAd1Pc95","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/kCRA9TVsSAnZWagAAUtcP/3Xw8eG3A/lDb7Ah1k3R\nfmeH53eDirUSAoExnMijXI9baDNFA9qWoKP2HucvMXy4Whkx1L16U5lP6Shf\ncOJsXgAniVcju05VeDg+t61pZ0WH0bItXIFDRHg45e7/QDtFCBcUqlUsPKa8\neiodpTxBkA5c3fVC+9AHvhKLNEU9Nj7VpP9eq22gWBpcJ30QQfN4eSSGXTnO\nyoxWbxpdIsBBDGbx5b8Y8BLVexQI4q8dgHz7Qb5GVtR+RouJ23lB6ebRNdBN\n18sol8HfKaUZd78rn2ou0roWOZX9rupU5W9wIwdBncTGAWSx37wRlXM1xFLX\njFs0LVL3baco1FWIk/OV5lWFEdq6xj20nkampqX7GpEMCVF0CQv/7PNAvhET\n65V4bZcruXQQYoSlruHkqlTXDboj4tbjCl27fUqVX/7e0bd5eWq1TtPydY+y\n3H9xBaVX5C/vThQlptJBRcOn5s2JaspsBglLTHKXG1lCk8Cz3CuEdQ8zzq0h\n031iD4k4zanwYDzwZDc6uXQeV9Vk45EUU5U5lSKjvfpXzZemQuYiCZoxYASy\nZJfhcZgS3Xbsj2AEj9tw0yJvE//YFMhtruUVb5cY+vDu2XBZWIlLhpVLT1uG\naFupdlXwOnqK7cFDrwMrFHeF/qgXfcPn518WOMKr5IiaGQ/X2RPXWX6p4xpW\npcwa\r\n=ijlZ\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"anonymous","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_3.0.0_1561501667747_0.38354843009583006","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/theme","version":"3.1.0-alpha.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@3.1.0-alpha.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6383e61455b5e08289f2ffb903a7dce950f933e3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-3.1.0-alpha.0.tgz","fileCount":14,"integrity":"sha512-u3uS7h3Dds+zguD/AUXU27rZCXqqLwEfu34bK8ofHWfPVsPlJl8p6B4F1yhzrY8pQ7gPO1IkjzOJgXFN6yLZjA==","signatures":[{"sig":"MEYCIQCFoVKnF9oztqo61V+MWBW3EM/ZxwLNn7zXrpTUDyu7GgIhAP7nJT2+sS63PagI95uPhBTUxoRpa8tg/Bm0bzEbWE5f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":69150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEYCRA9TVsSAnZWagAAMb4P/ieghXEfYUuEi0gxDX0l\nQqjA1wYPhzUOu7Nxx2Oe1OHlllPYp7DiR3e4evIxBblhgXhILqKpSu7YlvPr\nJRRANPbtJsBrh2jpTsc9R5t9ZF04I5O9fKkLYhVLd++ohYw5gYbf8pU/qstI\nKggfZX0A1UtY5RIXhWloSos7RSEKUA3LJ5FFcPakfKO8nV0AsfsaGQdGxx5O\n3kcwecOiGGmW01QZV7SYmIuNNMP4t06xWN/z//iW8Ike9WIImzDpcYELIwZj\nnEUa8bWaH5CYJBlTGqTAd7Emn+6CQwoUWwyUdr8kkarmecf0mpivRdmrI1e7\nuBzI9+kmsqFvnES7ggt5tUF3mxRX8cYZ632WjkwGS4pKqshRVmJWq5xrxST+\nMGY7eLpgGvyNHvql28OmipvktDG6v/9k+SuJgeMRA6QG2L5CC0hqHbyLM37q\naH8CSaDDQzMi5HnLxS5o1FF8QxHtyR4YaTTA6ACamkUvwc0ZzfJlDLplPeWJ\nOsMxfEBol0bhAvfkUjx8diFWb7FMAl+k7W2Z56VsMO0E4mEfge5cztr9ly0Z\nPBQrNzNoxiEWbr5LSD8SavEZi9PgrxCqLneNzXVG3YlI8Y9dRc+nE43b9JdU\nnVAEntJnK4Uzy9+acQjOqDsebiUZ0buStBsglZH5JewgeyfRLL39knn2CcYh\nEg0q\r\n=jIJ+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_3.1.0-alpha.0_1563283735481_0.3974121326698796","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/theme","version":"3.1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@3.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d31147bbc9e20bdaa3e322c9e898e4fc98807d8c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-3.1.0.tgz","fileCount":14,"integrity":"sha512-N4JX+akOwg1faAvFvIEhDcwW4cZfUpwEn8lct6Vs3WczjLF6/KdIoLVaYh+eVl1bzfsoIuWvx56j0B1PjXZw9g==","signatures":[{"sig":"MEQCIC9phn922meCnGZY/sSt2DjY20Kc7aChc4UXja44GnxhAiAhiPOuxAa8qz2w7t1Flip8gN8zIUi3A8onjw8CwCN8AA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":69535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjJwCRA9TVsSAnZWagAAEDIP/2z+KPzWrEZe2ueHhaCh\nWS+dYcVrpJ3M0H2wY2nqGFRzj1xAUxi8B8qo75wBBmxvz0+OZ98hVlyGTHF4\nJzCwv6zIqY0TCn21SiJawndOj4lxfyoqPlmqWwRwzn8rx2P+a8BHtOpttEMJ\nPTO0JMq1GWhdfF8Khq5gsES5AN0qDjOo75tZqEYBLrbVGDaNr52K45yls7tK\nLLRkzmyPuTMvMUNmlsOqv68Tb9a9isgePNNVsuyeHqJFNgzJySLHm5nxxlJG\nyJ7P9vfoJ9WiHHfv8rAFkpXHY4fE0gGwJQB8wdhZAQYx7/ZQ1F96CWPTgYew\nOtnk6bm0O3jwV+ZVZgshrnfnt3d4Nm6IcEsW1L6Z2aQFASaoESrqfnXWqPgc\nv5QChqyeIlqJJnTJCS+az/E8sYbW8G26dz6fs5SY4J5rmHOCB2I1g0KlK3Y3\ne3K+RY60fqTRjUr+6B494bNu8OgYYseXCBgE366H/kb5h1GLQPizTLtwrVTF\nV3osM+F0qmyKKTgXaWOqMQBioXcw/HD8z5XOYVODAhFZyCd1hTanoGq6ixDe\nlG5onXpLBzOm/o0aBJCimMPMHQG2SwI9btYAtZgDwskhT/pM8E284iMyGNsT\nvypNVueWiekhlOZrDp+YHfuBwwYrFsJ6aqRQjWkKETkni6o1oN1/Ql2XNv67\n5VQh\r\n=lEaM\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_3.1.0_1563832943716_0.2537655349389971","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/theme","version":"4.0.0-alpha.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-alpha.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"109ff03a66b5aa9a31fdb7cb46a7c05c7b8ea430","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-alpha.0.tgz","fileCount":14,"integrity":"sha512-xzozHeMMH+MtFG+GC0p4w+pDvWmRt+liXEcb1Lz9eI/OXl7HCkLb2pzlAN2Jeotdf8L/PsRQQMxnqNRVT4ayOA==","signatures":[{"sig":"MEUCIER/f9r5eAQ8rA4L5qh5dCj2/p1mq0Mjuc2y7y/VXR+7AiEA3Pec3BEI7QIT0+puGnpCf67iIbK+MjFZnDS8qNLxOrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":69740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz30CRA9TVsSAnZWagAAv6gQAIiVLOoSaArz8+qwYTpN\nOdXfARXURjHZqDIesnYB2ojPDnc9Vvfc1rF82Mcinkntpl7aGkUCDy6rMPrq\ndicys1M/R17e4ONHjPLumyXgKFi+kaLWpYNOHLvCi62mUanbaRNmpeVuqrJO\npv5nUJmSkK9jpWv9IAth9h8KvAi+94PmkJmdFZK0ijpam5GASWN9cfoJ69te\nNUTBN1CVAqc/EZ5JcO1xlYKSptWgIYuBCSaln6XXVdB5ux4Mrc/NaUHBysAU\nyQjoM27sQsyZJXQGkG3KhzTRYzW7svSgG3ue7QMnb+YDksAREVSoq/4hHu/k\nw1AG7pWnpwSPkgvJJmRQOb94d1DbsZoe/ppsgrD373sUX6vxFFIfohK/D0nl\nnZRy1XZYCQINy5yV68l5itSj0wdf7JLySaHPhvcqqECOgFw8JUmLPMvYxVwB\n1Y6Np8VtBIAsh6FNJhrpR0tO3taGlN0puuQMIDgk4ALkmWjL83S/RUQf14My\nvDYZNbHhsYNaY6K6/LgYEVG7Ve5h7l4zxQinER//Zjf3JdB+LHXKoUSzwmAq\nmaqOhPQJUm5K+NQEti6TGZPCN3ViO7EAiedLJ6aA979aiHpAGJt+O5jXVCGZ\nCV56Hd3j8O0A9wL5gixzeqt+SoMHw/Q9UL9jwA68fDemnSKDLsqdGGUCscYW\n2jxU\r\n=95aT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^4.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-alpha.0_1565212147995_0.11207907158584218","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/theme","version":"4.0.0-canary.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b82db737de6c29bba71fe6f398c140053e639a5a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.0.tgz","fileCount":14,"integrity":"sha512-sYEzeQswTVyoDZyfxtyfZZDm4E8BnEFXbCpabJhZy7gNoae3LGIZL+VoGxWrSLKuv3ijZwNIrLdDshOh8syjvw==","signatures":[{"sig":"MEYCIQCN66h8FxRR+Xq7bKFaNXFOCIlGlJmvDNSjynJgEmNlSwIhAKfJ61YqDBQgvac0tzP/dwyhTVui8TZbrWDvd7VXwi5l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEVCRA9TVsSAnZWagAABD4P+gLppdNxDcrFadICrUFf\nPUGXF2a95rUCb3iyz2Mc31uQ7qs6vP81wkVBQbgVBKB0DQlVSogJtlZDqnde\nhgtvjUhp/sW/Pad/OrJ/ZFvfPDCXtJUJdsWPhXnR/iT6nzh65S5OfshSKSiY\nW762mVJ3yXs0Re2HW7m4VGhRXHjIVFvH4uJgd0A/sP2TIdkwYE0TwGBp3jbz\nov07aVHpb2026hGUoPsCt7OVeuZfbVO8g/NanbZD8wdA2HUA2O6JLlDwACcu\nyeUE4sA8UtbwBe4r47AYaKzVRReRcNK8LLIwB7MsDAVG6Ba1CyiRv4nzi+kQ\nd7ZUqIxGE3YeQ6LiEUFDiU7ZJKBTZTzOYz98zyOuQGvsI+w2aqjqKlzE5YDp\nKW+SB4hQTurlucw6gSQ/ClmTxTUifqw1QZt7/IwuQhI72VhT5KJvEhV2Ea9V\nc0pjrSx/aDtFxDZLe9dj5xAO4OFcec7w8g/ENeWXdsnWFtA8o3iUUM9OgHcq\n1gjcbbxKS9fC9dHVr5PM0lkrUJP/UQi3r4h1xKVXs2o3iuRAaW9ydoQo6a1z\nxQZKOOYQ1zxYA3IzXAS9e6W2BLWQPU4wx6f++4AiG1Zlo46OA5QuYhU9WXlL\n1hnLXwmLpJ3ZLzCzU7AaVzaXgZ3A6vQ1T0HYIibaMuabM1E8Mq6+Z9WvAvuc\niZrU\r\n=TQcf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.0_1567658260336_0.2512912272601995","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/theme","version":"4.0.0-canary.1","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1265b05c9cb4fcc473a93dcbf191e24ff58a2da5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.1.tgz","fileCount":14,"integrity":"sha512-BHO07ehlRvF9wCE7PyteMhFfSWb0W5l8xdBJ7LstLccOvwCzl0AV9goqcjGtbKdwyUuKixpQU0HuLiRcucHqDQ==","signatures":[{"sig":"MEUCIQCOnhnkURjqROvarSLfH3sfo7dt+PFS+jDJYo2x/auGUwIgBGtRYiOu5rrTM/r9vtC7S2GWe2bUIa9Q15CQUkTVmCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQNCRA9TVsSAnZWagAA8oUQAIWhZ4y1bLgu5clFgtTs\nSiq3xc3kFx7XnzxMume+xkcwSLDR6qq5E90zzW5YsnyuHjyM4nAmNJ55TnoD\ny/QXZfMD45j3dymP+Htw+J/3+5VuNKksGI6T0UGhuqM3GwXbA8OyKRinXYI0\nTSZ/fbf9BHhHLIFj4xUmykZGtpuUOYRbKHs0qyYXZ8kne94NHLHjDePDPH7T\n1SzXHhJFsOQfl5bKbsZBBGfeeYud41Cznw7v4HqfCx97K4dghbo85s4u6LsB\nHV3M9o80jjo38e+tnnawzCCLGYHaLttWoJxHJqgjVHuJp0diFW27HPPbUIUD\nOVGM5awJ6NK1vfwARjC2EdMODDNx3H58H6ZiucfPBAV/woLgEGZ5VSW/6gs7\nk2mdq4AqkcbKhu8PmVjs1q3dyibEWxfKKvlRO9dSe3PdncX5pLHr9KqG3Vu5\nNtEndRHa199LzjptcIzqlmSxDFfEbpUUkUQm3pLVyRpiJpUWKXnwrS/PVmU5\n/d56IE6NhZAgelmbW6IsbQu0yZZ/zZw5otFLm61RJc8vxEstDt4VZuYEwA6r\nUvYLx6QVWFost2KoHRuZpejMFEok3a3t1JSqGlusfwKQoznQhKhJSF9z1RaR\neFfXE/ymoLc0h7+VEuOYDhtp1aA0M8e7sD+fPm8dDABPVoGJ9D5hIbF6q0sC\n/Aja\r\n=jd3C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.1_1568060428956_0.8883552444541234","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/theme","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.79d881baf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc34a0cc838ea75195151ace84a96983da2b042e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.79d881baf.0.tgz","fileCount":14,"integrity":"sha512-Pk5A1nzbT3vkTr8MlZfhanxN1AlWgo4Htcm4q6KmYCHvgCHfw28XFrc0X6ZohRMXXl5C2O37QBZLeiDFncQ0zQ==","signatures":[{"sig":"MEQCIH9Upx3yonxpXka+FYDPh8Gm81CjCtCKybPd23Jwhi9vAiAQA0i9jYagxiRI4DM76v4m3HI0YqDbofAA4ELHMZsr+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":72361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0jCRA9TVsSAnZWagAAZ+cP/09XTx1loEghkaNqxk9q\ncD5mf1pAiRa6SThcWOpZ+zq4j3rve1DfEcusmwDCt6qTiUV5fyTqentsqWGF\n18AEZP9tx9mJ/g94mtMtWJz9kBTBqO6nvqRJWJ8ThWXu7taebSXyh30NLMFV\nTavt31KS+I+i73rd25s+3ykKV7tes6P14XbMX5pYjFeqZy/Kix22P3RN4WjY\nulHYILFURNiOIk4FED/eANZvF85qroCYBKlQSjRo16WIjZ0KGyQcEFZNEnZ1\nDZK/6zlu4eKpKRgWZDOU9HG4mzWPg4wdbSH+K7bqWfFtQ3gEnltnqIZxg4Zo\ndjscDJB7IwtAE3YIZNhj+LfF6BhTP7w9n/8bTvBPEeHsdWklYgR84l4eN5Gm\niN3AMkl8yO5qywvqLExpPKHR/MvuEnRGgPAktO12nSYG8MfOOzVFS7LqCyPY\nEb8Fcq1KdIuVFOG1JAM/L9tsuF0V/vZW5FQ5AALhUp7SL9CCzTDeKkIpkV4K\nuuYWHLTGmuO98HGl3ycq+76iBQzNAAWsU30yzPn360SmksOvgxJU4dRuU9pt\ni7BcV3nrLO3bfwoHLJ7fNLLxQSN1/T/86Q+Joe1nEqeATQtkoTx0NoUll7lV\nL5u84z1WdoQXmd6Ql0OPXy2XJzLVlJjkNJp4BgOg0NBoW/VcQM5OUuLyyyBJ\np6Z7\r\n=3Nxo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"12.10.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.79d881baf.0_1568341282622_0.837516511800876","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/theme","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"313f75dbdc5bb6c1def3ec487f744b462b94eff2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.e851d4f40.0.tgz","fileCount":14,"integrity":"sha512-071SZ8TYsoBzOvISiIMca9O2/eJNcp7q/KGU/DWeks8wd8ygTd1AQG+jWHrLNM/QLQbGw5drDWxJvLF6XQPYUQ==","signatures":[{"sig":"MEYCIQCS35c854jAuvmdi98zwe6+ldQMOAIltzktl+zmX799EAIhAOw4cdhglMhWhxwOSzHALin0ZhYNa9AXOrnbeWcML3iR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexXpCRA9TVsSAnZWagAAVSYP/RVWU3S3hVAb9L4K9qm+\n1pPmiftB+/AogQ/bOUw7zQKxQS8+g942SQPI2AlQt0M86JQ1XOx+nS7D0fLQ\ntoKceEbgdBXb50om70LOCK6I/KdnGzEiYLZoJrJ43KIoNSaatQ5wannnBCRI\nM7XQxDPQdb/MbwVZEgfhBkp3m+1Xw8OMM/ify41OuucjoOz7ix9AIQyhcSln\nJXNKplk51vLRv/PwiisSCoYZ/ldL1WJYJ4iuhOfazDN4gVWK48dZTDpsk/CW\nXs0LPcaXnmj/qI9D7GElKOs9jlt9N1P8sUPkB1II9uc5B1H8HkzuW8DtZsRz\nmosRIf5MVAs0y7b99OqdWnh4HUzbrTAMq4wFGOCxlBqLQ9r1LBaN9MKJv927\np6Ox6VeFhjmB//O7roqpJmBb02iPh+uoDgivF+rE8cJD0fU9s7BtPLAe3Bbz\nStR44y1DAM8un6SYMIfJqyL7kC4ik7WmZktyM4/8TD/bAZexaHRLj9uoq+FA\naQ71mJchp4BwvddorIICFeWy7bSfpYCH2cmpq45Pb/rWfonjCMwijdhPZtrc\nqD4Bp4EsMOS0K9UDowAgs7dRh7FRqPMdE5czhOIKqcKCWIiwl2KFLTFALZ8L\nGPsg9irWbo9R6v7A78zUSQYAFxE7vPa7wCsGT6RoIq6vR+srr8fzXozc/g8J\nSm/j\r\n=136y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"12.10.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.e851d4f40.0_1568347624956_0.12692259778876025","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/theme","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.905884690.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8969928a2b5cea5aa5d862c3cdb98ff392ad9f6f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.905884690.0.tgz","fileCount":14,"integrity":"sha512-DrEErNH3IOTts/dsE5pUgTJtJm8P+rfgI/3m6WEiw8oiQJnudsYruzPfa91yeT7OHUw9EXnefaFHpK1e8v2sjw==","signatures":[{"sig":"MEQCIArWVJYVRTlbc6loCqCFGFpzj2+AVQSGD0Jh6GLgxa45AiBb6KwVEU9TaAMB8Fk4tpbyCu4f6QN2sqerUOhB6h1WhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB8sCRA9TVsSAnZWagAAMbcP/ijQNwaKMQ7gx5yig/nT\nQ7JhqK29U/cTAZfX1i4wiSNjyXeS1tnvJNkT4DrNeq/ou3hvoSyBYHvIawMk\nIUlWU2s9thFUA5on4GFgNUiGGqd2L1XFPiU1n8U+6Wr//UIhP5HYGTrsL95n\nP2Splht/htMTVclcivBMJVkId9ZRQbpmOGp5C/BYk2y44RlLJihXBgnisvKK\ngzSU2iX6neUUmLp8TJzSmzHPWcPbrtEou06RaQZtor/Eg1JkeNAcDbQ7suhJ\n7nmeiVtfz43gTGh/T79evWh0BsUJwChFTTzOBvgSI0nZLHhZjGsxzxfC/Stc\n1LZ0EfmJ5EthRKnzgUo9IH2mdICp1U3FqPtPg1PXvp4fsEFpkej4Sl9PIf7J\nK21gydCVvtE0vXHeHqu6hNEd1pA11chX59WCz9APPQqAlvsdr5o9J3XFtZhz\n4LUUa6y5cgc7+YQw4NePFsEdH+NaQy0eXA5mGqUwfa4KKOIti5A7aB1X788C\nNzUcXpSoz1OMpyrTBFtvoRZ4sWZnFWkhlq+9K106+5HX5JcrAroKvZvQyogS\nN+bifbMHpxHoyhWJzmrU4OOYqWBvXAVfcQZIWfWTRyCMyUPJ1/nxpxVafJMm\nXYr/1LzABlXWQ1N4BrFv+BQt72XBxTlkX+rERrlm6ByQMG3W675n0Di3H5A5\n0waa\r\n=06dQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"^4.0.0-canary.905884690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.905884690.0_1568677675613_0.5706786941585846","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/theme","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.199534d61.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24ac12f47dc273b21f731538dc60bf696f2d5178","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.199534d61.0.tgz","fileCount":14,"integrity":"sha512-zse7ILUaE060vkqUe/sATyM3ZDnpLT+NTc//Us+tldvkiVPzdnHrjF8QzRModhWepCrrQu2MKo3uT9BcMsd82A==","signatures":[{"sig":"MEUCIQC07ULuserDq1CvH+pUhn7aL1+G39LuU3ntxdNgeTiv1QIgQLnpLytaAadytUZ46yYwdQN27Y6cS9VQb0V9SRSxmGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlufCRA9TVsSAnZWagAA+d8P+wZysr/LufTqGyXBabHP\n11np6Dg4lOaX2LJMS+N1i9biIEWsbz0GoIR7IXrTVfCVNxztSg5tMrVSJFNt\nhvJnUAx7rdkTgBQf6ZIsSd5N7mvJ1K7ypmDd5ugQDaBySk78pjaGWP8jAkmJ\nd5LjUaTbkls1Pt5oLUBY0Y560C9QAnO62C6wwUuhDuwCmA8W7QwD3qeIlNFc\nGiCbN01GGaK7M6/hqT+Dhib4IeC6hJJKfFgrka7Ax31ImD44Jl6UqWcmrAgt\nQ9VSmiJu3NIhvcQW8UQoGCC2wRy/cEP4LcOI2oiZIU0lUUwnkcJTx419bJzB\n1gT3mLQ7O0wfM9tVrsBA/hfx0g3eQWcyCCyY98ijZZM/pEDP4FaH1HPBNARE\nVtM07tUZBUIxglq6/4nD/KRbxglkYAyxx4SeDKx2OnQZpRm5vuYfAQGrareX\nVyEEHW5IJ6cA8hh6HAC4YXXj7bl22MCYpsIV+dvE61jK7blJ3u1FIkC/xZCF\n9Ps5FBYdfBQNc7B4qATYElwQYfZobRVtXBbrNKxr5Q64aOyotHr2En2KX5ci\nQXb3TrtqtdPLNnWVbG446gZi9f04X3rDaGhAC2l1eC8q3DnXemjnVbx19l/N\ncvWQxItYM/janm1FQbB/HhkYR57uZRTty0illfcWVZdlErVGxnr2QtyHA12V\nxm3B\r\n=UpP+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.199534d61.0_1569610654652_0.3251001632668489","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/theme","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"141b36a9662216f4ade6bb2cd8135dd06e8cec34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":14,"integrity":"sha512-z+uZNdjsoBgD++OlYXharIQJ2uMQZbfHJVSa++fMFEb7FONG3Cg1j9xI3dyi/p1rJ5VOlYZXeRMmi/Q/3Vdw2A==","signatures":[{"sig":"MEUCIQCEDi8r0eS7ZLw7mHhzm0lzyI5EPHR8UOFnRlVK1UXFvwIgOvvSFZReX0/9Gr/TUzfAgaep1EgSWSBMilzCDykBO38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphZ+CRA9TVsSAnZWagAArNQP/REK+eCyfUrEldG01scc\nUlvwhNM4/px/zFODJ5eOOEogB+9swMPCT6EkBSx32we1cIeg9SgteYqa1+8k\nZXU1+MTqiHtfMxuF0m4rEbM3hSefi5/IK0DgswfDcQ3mCGiyyI9EaXC3yfi3\nojdtrKd2xmMwkHpFL9M6rLEshRu0A+2Tuxfu1WzaodP3EGSNthciM0FvWlxO\nGGlTx81aFqevU4yrScYe1PjgGD5TkcH+HS2BeodFQ4hBvVLLyfXUvVD9yqLS\nMQdwwHpKIVaxuCaMY+xrnD0vmpu6CL/yDA2WsLtxrBx9/JG0IZ6689F+TNmF\ngv0gTMuXcQxNUBl1JgMiIhrOCybrmlbvj5ZKj3MGYN5thtby290KSIEFqFWj\nXNZxkwxGYKeCVjH2MdTNy56LAkm580W0uLaKQ4HeCxcYzTGrrAGMN+/nCnTJ\nxfli6vh0LkKLKBgPXadK/VqTCjcorNfSG2bK923ppIMpPxPLsEq3NvfqPtlc\nZPfAUZYDncZrua/0LLu4nRUup/r9YBfHjZgsbUXQenO4vPvxIBiKNRNuEvmR\nJoQz8bkalBXgSPiVPPALe9tI22jrE2Baye6T8D5ZJrv2uBiL4qPJPryvk0yY\nZidAFUGiWftYiyM8s7VmuWXGfUL6HTelPgKVvDgxqxh0ZGuq5FAjsmwIYBnr\npwb6\r\n=vmlU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.22d7ad2fb.0_1571165822368_0.07423356700479777","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/theme","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.735147131.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f5eb1db93c1b0697f27b9eca9ada153af342a7f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.735147131.0.tgz","fileCount":14,"integrity":"sha512-y8UcidwKJuFs3I3UL6NylJv1aekWD72RGzNCpPzCHRouolNwGnm7Ok+3XezPLCAm+q8mSWnHmSK8b+U1psvy7Q==","signatures":[{"sig":"MEUCIBXWCY6jzpoRFJBDTnWclwCoTI3jrgAxTvpeMHUXSPzGAiEAwtWKdxrlOGwXzQb1gVeWukl5duGLHNKJ8Z5XbHHQ3uk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEICRA9TVsSAnZWagAAUzQP/3X/UIMlThDU3dFhCDTt\n5zOjMbQ+L8AU7GjRR7Wbom1lex8gdIMVV+Oc1UrXHSEeWPO9AvwinODIi5KC\njm0X3YYh3uFX4iIutC+dVhnL/zx1+gG2a0uwp1HqWvVRRklj/8no5ToBJLFU\n3R+zfaoZqFGUZpBoLpRmc1FiMR0yaav/uW2MDXcpvB7caVFLlwxpoj37iAq7\nWtNSjn/RDA/aeLsu+2OnYi8uhdFt5a9tC2C3aJNefDRsK88jiRDupQXQDrSi\nSwVPLv1YQi/ebuQQLbHHVfau5Cb6+V0yray415X9RXsHitBDdH601KlDhpMe\nhYO7F7+4J+OHS9mhsmK/+lOXWe5xvBQEbVpvPHZM7j1lzEnCCM3oEiNsXnFg\njvd90wiLvzAykEsG+9NXZA+bsGJB8lpYa3R3+risQxdEh00MMGlK0v+8nzvg\njwR156O4GlvgIzJnWCt80TJSxQF40rYYd/bMtq7rZkb+ko5ZV9HdTf/7RlOo\nFaohUo5k2bwL5H/I8CD7iMlyAPubgOg3PRG+Z00gZRnqLiriYwsHtXU8fa9L\nmaujShnnOY0dfBhRZ10r0NJb0OYozFgGnoeVlMGLsjxTbmW60ttyH4lAzQpQ\nUPqQ/g/weu1tfJmg2zskv2BL6IZlzWwVG8nsTCC6Z6LPMuVYAmTIsQl8QTaa\nwKn1\r\n=lIJ4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"4.0.0-canary.735147131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.735147131.0_1571189000482_0.27831866161889995","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/theme","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d85be199469d8c2201c32212e96ff39b17f3f65","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.062ade5c0.0.tgz","fileCount":14,"integrity":"sha512-pdGAklY96hna8QU/5aaXJ4HfoC0WruOWJX1NQQ8LpA1YrFkuN780rqrIlrOhvJI4E8fv6eZUirFqrNKVVslW4w==","signatures":[{"sig":"MEQCID0ieOZWvCqCMHeJ4UEUO+GyNxSv3VFv23NGbAydYXjRAiA622og+jtFMFfbqrskyPd+KBNoARTVNdzgX2nnzmBL1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71kCRA9TVsSAnZWagAAvHAP/0YeRTe8s9ZiBqcubyyq\ngixzEyPhErdrYPh+8fSQEiVUmzzWT+8SEHAqS2QWuW69MpTpItvWAiw/MxoT\nKy0BJNobYhnCztREOjW2/oDFlsuyhyrS+PkmhW3dbAy1oWO9jZ55s32T4FuT\n99hd4TosA3Iu9wO8jinFZNqStQ04/5dfqaBWOSICMvDjq8e07ijzkWgiHxoM\n6f0JKGlZB+ZYU8sNZzZaFDdykLRh1QwOI+swpEP8SIyvCfaA3TsROtQWjX79\nc5PqMKZUP1oZKrsr/v2RNO1CtWKXTFkimheAOOEzGZqyQ/dgcWdf464k/Pw+\nSq1pCjwKunqluOeTzqvQv+8BLP92fWetOUqJ2GCFL9UyXDsaUROU9VytlKzP\nDfzbRfax7fgNIQoCh/+eHyTmXCa6wB7uZ/glUmftRnay/2zLtQMgu2aJCPy5\nQPqMb/VMxN/yaWhawjIY03sLFjh0YovhM4+694Tgv3Gu61P2JYFjUx7r5VZ0\nbl/EECYCBv8+8I/vhiUb7u3/gSSN1DQaex5Pwl7YdHdU1a7z7+x7Y0tqAyqm\nIqPZ5NCKDJYQqf1P9LNxDYpnt2NcGmHn8hjQrQTkhIXQSBWr0KZMziWbYEtT\nmLkfugmKDrl6urby0fnZqjxwD1GjoSXbr8lCvrrvGoV6QaQ7fLNgidTeiPNA\nsH/9\r\n=TCwj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.062ade5c0.0_1571274083663_0.7089537671598212","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/theme","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b20256f571f3697c00eacafe6d22811caacce1e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.774ad4f8.0.tgz","fileCount":14,"integrity":"sha512-lJUql7qcLNUNi5xpLuXA7g4q33GuoxbcpbR/VYA30gBDVapz77TTnGdqCc6ls6yaJNRN8briIJB1gKYYcGgrfg==","signatures":[{"sig":"MEYCIQDn2JX+P+X93oCvXa7GAnnmltIk4mG0zb5XzED+Sr8zlQIhANe3i9Q9v/bz7BEhMXsnEov3B9EM0hPVn8cjbXLR2EcQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+g8CRA9TVsSAnZWagAAoygP/2ueDnok1T8CN1uGT3BU\nlxtcffnMqsRalXLoT2oFQviSoT35UWu9fO58/zbUiCz6GnpsupJ4rDn53SlT\n0cB3N1iaJjtF63O1Uooxsik1bTBh8I/E3c14GAK1lA7UO/mbj75KR9beUPy4\nZjXGisgD2k33BoWB+XCYuhKOvEfFLO5EAX5jKLrEXS/Pe1CEbl5eVDYx4wzW\n7yKauPgalEo+JZB+5I8cCT04TozT51hNXy6LAmIWl628WfLD23zlPuGhlty2\n9nLqljg7QBdvAsGpmeVPcoPUsAkSiaGkuCharZS0BizZAIWEEMkutkHwqwBb\ndra3aeJ0UY3TvwH33bStGx9RE0ZqpeFkDpZ7t4UdBB3q03RUbYqmTAglN1cL\nBUjQmWLn2xSScXDNct0NYCbv63pXqh6XMMl5/sxeRuuvnGwQNxgYxS4ZDioe\nTBLB0a50juOiZLdtq9MQ870zwSUkjcQwpjfSoL0Blg31XvshqL3rMhG7hY+U\n8s3uC5Gf7HVTfOIAGdTZv8UIsfgO/H7VtPvwXP5qaBVIP8ul0vipdeBWBp4e\nzZpWtmet6MYteXkD6LwOBx6v32s3w1xX+QpS8w52VzUtWKy0INv3rqSIvSMr\n7e+VtgSzexipGn+Lp9Pmpd5AUsHhAU+tnPTdOBSTiB3HMIcnlyPx/1Ld7KeA\nqC04\r\n=Jwhg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.774ad4f8.0_1571285052182_0.7787824824081879","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/theme","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.5916d18c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27118828f25aaff7ae5660af6bd04b0ac85d84d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.5916d18c.0.tgz","fileCount":14,"integrity":"sha512-jA5HoQ5Fc78zj9LoH8wiU2kqF0CFQyrzUlcV4jY6jiLSfeDdSt2K3XUpH6HQHI3PsJIIA/nRzIwsPSh5svQ9XQ==","signatures":[{"sig":"MEUCIQCg5YC9zI+vxHHqnG5DZKygwApbwwy49zFODKW4zXDdDgIgFvI/bGMS87zgVGf4GLTGJAvyBEXFE4PsNsfx/fbfJEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhuzCRA9TVsSAnZWagAAeD4P/RlAoyToldHS/TC9/ZPc\ncCvR2RmbNPszfTEmuRs4WeQQHK7L/ivlZvE5C/kUdz2nGtRMKCpXNTNP+Es7\nlC4Da8GCoAcht6PN8owJ0Qj/tVIs9BA9uQD0DHg1pyl02EY0aLDzcbCN9v+3\n2NtpTRPwmlBS751Di6BepXA39pHJVvbXnVmFYF5jKzybVoCYy4+H0NkDhj/J\nWlKZ2W1vnMcWm78MiCSu3KXWSkmOGDWPKIJmbaIB/GCdqZTrNUEtMxVUtE6c\n3txCdxilBAgRkCmDiIqdW2fzN5CSnX84p71ieiGa5egzvkb++GKiBzvgmjgP\nhv76K8Y5MQXirjO77PTlTYd/cppeptN4xds/O43hckshFCHBGI+UEVrB+wBa\nIQ/M/lJUqPY0HJTFMKj5GTMDb9oKltgGBBcLNw3t/CEh2P3+UOmGR3Cx6I7e\nfNQzYD1zEIXObpAMd500d4/mtO1+QMpt1SL05NyKhEmFu412if3H1o/az541\nHZ4vrVSVGjY659w21QANHdHazZ+SoQzD9UiE/WtDqTwbwEfROaAyQaNS62aA\nTp4R+561lyy6RAKw/amimOOg1WZ5sJNQye7RzOqia14OIsgDyIwoC85405t+\nXT0rYssAIRjlOhr45M8CjGQZfIErvgafq58steEHaSzHoj+HFddGAcj3BWR3\n60YQ\r\n=rSxI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.5916d18c.0_1571429299251_0.9377660319999244","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/theme","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.d4141c95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76ff3da82d66fbb7f13d6d3be9b402d0310fcaff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.d4141c95.0.tgz","fileCount":14,"integrity":"sha512-u4jM0By/Z+/KKe1GfKCgZZ5VWMcWvyYDBIzlXipzeKkjEi6Nz8GKM3O8vWpktx+HIN2TXRZ6SoCTzg9RAoJTrA==","signatures":[{"sig":"MEUCIQCxsnLkhyiQINwPiN4omUJZNDqt5Fe3VAi0AaXRkTmDTQIgTYelpRGOim9o6xcanyXTUhJ0JwJNciz824eDnWZk5xk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQB5CRA9TVsSAnZWagAAd2UP/i1QgNxxYwWAAwMYDx3p\nmWXPiJdLdRmqpCavPNHO3coFYnLUTXLy9mgmlLigwRFz1pnESmrOpJlhfIFo\nbyQX0uYLkBynuRTz61fMC34H9rViJSyQqGE50Kf17/D2mqCtbeIF0lriDkd9\n5neW5KqEE/Hi9vYvIblGNjapgL1jfACyuD1N/MPZ//dezGXeIVYn932mYfcS\nJXcbahbUGQ4k4SWFFVffuF45F4Exb7DDPNeD7pOSekP0yPC7OQYRnWSuecxu\nT/eUUfYjeNTh9oZK8GurqIaXxA7wM1uZyjLs4fBse4RBmrWNM5qv4KgUYHkC\nGIs8myPeHUUEnS95+sy6DhwL3pOh35UG2rbdu6EU6afcCiTLqRHndWM4Kolr\nKAeKZvs+snvJKBFfHsCAflbY/zj1dCtUBPdSRNYlni+x0HvZy4LGafS9LSpw\nwu5rUcohstU74ibSMMhlmEzZOSvB0NGmS24bFnsYBPtTdvF4pPmVF0ghiFnH\njt4FxfMWaAFiOwUf/cYBj0xJh2noKqPjENB7pBODlVyxEBb/sZnjXXqhNsDj\nXO5qgIPvKcae34mo0NfQGKQn5D9URcx6C2SYLn3d3CfYZ9FbiugEdKVdLfz6\n402NPz9l9F1Rou7pVL+qiDBdzP6f2KRgVKZyAY/77oK+ntt7KEpPJ8W06d8Q\nhlQ9\r\n=PwWE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.d4141c95.0_1571881081082_0.9730740564383202","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/theme","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85545af3a018e5b77be0c5937cd2261f7afa87c2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.2b878b3e.0.tgz","fileCount":14,"integrity":"sha512-r5Yc7mBCFUBiMYEBgJKahVsOAw6ZzdxcS8jEdwCjaaWYjB9lBEPHwJ1CsT8TodppUNf47feZme+w3GqC6RGlvg==","signatures":[{"sig":"MEUCIQCN22Mox66EOIevTUqXGI4iKQnT8JR/dPCFHNRvEx9+iQIgMWlppGUFo3NslppUSs9l9CTvsgBDCtmIXLj8J3PtPr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmTCRA9TVsSAnZWagAAOs8QAIpRzSPmyU5AyjulLAl1\nPsZExNezuKPjKL3+cTrEChk3+fRKcK8296NP41weksDdyffUobJ8CmnUgWB3\nvFtDEfxKTY49f4B397ioNy2EuJwc2oR9P5Jyr+UVbJBatJ+MDZd3Iuoao4vT\n3eGE4sxWjNKgTMx4Wt2I0arb+lhzARcwtjF6g8DmwY5BDL4HusUi11LRaJ8C\nZWP+Gg0L8WO5AvmJmzH3fN/LCwnMbebYqnin2kVCh0hw8MEF/F88UANVTNQf\nxIszgXaSqxardhuWvKl7rcOikJ0VTLjOoKttN2MZt0xNRscOSLfvX12q2Y2h\nAByeu8lNxJW5hRAeeSMrne0fCIRmrNclsU+KGZZfOQbjcx4GidG/wKhzoUmI\nI3y7m827bhralUjM2xphBsE6D0ifTYeXYynqrj3wuwMuzRiakefvmZb9B2ri\nP/n1qeP/VNtVtcPz+UPsVPikp1iBwJcy1Mk0WNPQXkLFevsEdWt2550or58N\nHd2aAjNdkem21HXYKWdeX8lxMMU1whWhfga8x9CF4g/PdepTvZpBeXDSztX4\nIsIXsROWKDBvMPfaB+4aE8Y2Vd00HM36HHUj6hwoxnCzMxpwfWBgl3JpneDA\n1WQ7gwEVtJfDfrE1YXtlC7wFBQ1PWSUi2ICWp7MNk9PBUobYccnmuUTKaSxw\n1xKu\r\n=HIsf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.2b878b3e.0_1571969427236_0.13115808238940185","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/theme","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"261f273f4ecfd3d539f78234fe7d3d4adcb246a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.b06c0efe.0.tgz","fileCount":14,"integrity":"sha512-pFQ7+pQRQmMgTDr5pDCzlCK3S6FJ3wfoHk4cxUQmnwgYjmRkEdYXN7+hiPGA6pCwMubLvpTwPV9oMKEF012E7Q==","signatures":[{"sig":"MEQCIGnHd2Fmqrzw4zSZdcxnmnmuYnhG0QosDYf9uWM6kg0EAiBeSiqcgd36HG/umgM6W295mGzdtPxQ142GahrGxO9iZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6K+CRA9TVsSAnZWagAA7hMP/2xjCz3E6xyKATx0GHWA\njFUqrtlBxyspSVuCfjOWUFSYnFhJKi82wBY/I1KzwjrFtq5tueQAzt/MGg0n\nPAnZaYMHMLwlI4CafAqJIsbjpatUmqdJutxU0fMh9Px7V2HeqJYOXGahcaAH\nIztzXjSUieMU2Xke6qGSeKAf3laW/n3Hj6NUXIcSe1h0C6LPbuNPt2D7hZLa\nWCsDxHJ1tWFVbQ0KZAKprE/QeA76liLYmuZtGbqHcSyNQgvm7eGuF1p7GBk1\nxTF4o+oK2BPcLgVPmkO+yAd7YIEWThKrjvdoILWXgnGDhOTH/+ef04XpHWcf\nn3B1Ml9T4NG7dWPuBk/7GCtMeVoZ22Lj+st09GJB0xLkJwxaAkuZNxGGiOcx\n2d+1dKRQRq7QVEgIRrZAr9CrkPOrpzMekakA6q2EnrPNFjmYm9j3PIFrRPP5\nIrQGA6y0QBqDD1X1TYZGG6MS4U5JtKPN3kAHbGw5TOLcUb33nLyp91050bPL\nlXKIibHoy2PyrFKoiz0FNQ1UoOm6sPr9u2dWi2gx31s5Wg5U0BZkZgd8dH6h\nB0xGZ4tZSKAOecktf6mvICTaxJ4ml3rtzEQoV6MOdY38e5XlNr04tcccJYpj\noJ1Tj2v4D3ObHwJh62nzBlq+p4w3UFbOIoTiW5+UOz09SifXuaZQIKMRVJSL\nVnIX\r\n=qIq+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.b06c0efe.0_1572053694304_0.24769269286334583","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/theme","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.01628efa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e93f706028c9b2cd427cd09d639680db5c4323b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.01628efa.0.tgz","fileCount":14,"integrity":"sha512-KfpXUvH3WIwS679TuhUuCD1KVNIyqCojpu5Dem87YmVhLxxuepmfDSzBVlJeYw6E1fNTywCMBBVwVdxx9c641A==","signatures":[{"sig":"MEQCIHf43oRLGEVvZX1V299AeIiBAE6wH/fFQfT8XhAClcHwAiAuFN4XG2E0iD2sWVlu6jlMkLmw53hF18BuwYzVYwNUfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4GlCRA9TVsSAnZWagAA7+MP/jlrJzfv7cxyQncq8G1w\nI2DBFXNGzDKYydXahkeCEr5Co8UfaTDc+Sy9ec5c+ziC/mznR4VdCibPu9yA\nKndbXp2UEEwbsPtQWQOBm6aeIFyG5AWfa329cOUAymw7aMB4+0M+6FD5lMBn\nALxyTEu4UyjFzkLmvP5Zy/EXgVCTZtNitDX8F/DBzWndpvloxAiN4wQ0dPAc\nTaud6Q41nRTL+rANZnMOGfQjftSXMghUVtgbaiMeC9SkaYKRDNqgEi8mraal\nQBZWnGth/yhaWd7/LzLnJWA5l/UdgvtMaH0R6Nn9OdZIAh0FH3XuEsChPXwV\nuyUM4c5sWkGjIN+5YnhllK/03BEYhCxS6zdIf0K3xEUDRphnC+ZivdvQG12c\nj4FtHYmx5V244cnsHNtR1Sl3Cx4iaPMcWz2TowGS83PSyM0VCYy708Qa9JhZ\neNr0qHfMxq81dMsVX8+Bp05Mv63R4yQzzieFjZFfladaJw1rBgWgHmIpjE4m\nvESdOqJt+geVWvTAsfAbevkAzpWW4c23dizZ6sRerOyA0hi6LI3KaV8LSS8g\n7II79UNmiMT5uTaJqNZ8WUoeCcnKK4ONkTvlPreQgtuSWzwhzPkejV8StHbH\nWzBheUTrr1v8VBZk5/13PVwZ7YY8P1CNUPwoUzyqb0Kn7eh1ozS7Yb/XIHf5\nLh0/\r\n=9G7L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.01628efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.01628efa.0_1572307365439_0.9123402092221098","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/theme","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"551b578633f5923d4bee52d59646a75f33057e11","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.b5c6d66b.0.tgz","fileCount":14,"integrity":"sha512-jw0KnO5Nm7QSZMhswmk0ajHs3zYQ2SQ7TOGFDMqJXPYFnf+PCU/2rHQBOo4tfgetrhIikJp1L4+nWNLroByo2g==","signatures":[{"sig":"MEQCIASY3DaMMj/qoR0o3q3xo/qeCYqZhzSl0HiOar3KN6RhAiAUZzLSADW2appORZqFg33jnEPUmqd/g6boD7Lpk7TUCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1LCRA9TVsSAnZWagAAqI4P/RYRXwqDovEVgsvvNyun\nFKQkLa9yntKRPtbf7HwYRBP2D80DpQiffYy2aly/pDlUQNUQAVe2yj1f26oi\nrrU1P0ZbPbLx1lrhx1SkQdY1y4XxopdAnsdOISXgOfNTFnXfmuTOw+42GzXL\nIrKuWQXqazyM+ikrqF7Kw4FivFzGEfmfj9vMEJ2M+LFqBkpIvzmgJ0HKRkTB\nBiAFAWDuimSFxsADsytpWriGyXz1RYz7hM3g88aHfQiaels+dcNCJ9jlBP85\n8seOFu7f8IHvcuMOGJuxupXYodEQrfYpKgZBs6/EFg5CLdOjzJz7qCD5OXkt\nnee0ZiL52Saqke/vW19KxxAC3Ba5cz14hADJZn41iR/iWXUeHkD0hJYcNIl1\ns03cjvPEAnIA7DzlFRF3e47pwq7w6hGDOYHmI/jnMHeV0bN1PmS4CkMu+7eq\n1RaJRe5bxUaEjCAH5ETqYtYFblNXXtXTaeEhfy/+02L8RUajOUKDQW5sWOJj\nPXAgDopP1Y/fr6dQ1Ne1QFYgPLtBAb29yScTuFa9Zwgo+JtoynDOavt+PD0f\nKkr0BpPPcDX1Zc4RwCDnkAbv37No8h60udZZf/2/6s4G17Fb1RhntNwZ+GZB\nUcPuPcuCktT92jbyyz58qAvDW1x6Pc3bioKc2RYUyafa2K/ApxSrUQ9FiDEB\nwlcu\r\n=8Gxy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.b5c6d66b.0_1572371787187_0.60716231856624","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/theme","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"423b9019a4ebd3ecc5df0c350202a5beb229c3c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.cdf858ea.0.tgz","fileCount":14,"integrity":"sha512-LBLrl6gtwzeL8+OQtdMUBDSd8+xpLVvP2IhrudepWK7wxeHbfA3xl9/KFUNObhR2sLMl/11nMAZG26qXcxzCug==","signatures":[{"sig":"MEUCIEkBWN4J6bZV6U883yUAwFuqwybGCsE+iklpR2+dTJEaAiEAh6nVjt5Had0TFODwO60VOXchvOYD3L8cejvydd/dvFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJNCRA9TVsSAnZWagAA24MP/3KoC1KlzPuwX/bLhDri\nOtj1BzD0AFX05zRS2JEtasq23sSmnswIaFEN2n1BsxHkGKMmhKgZqrhD2vuJ\ndIEA+gAhISC5NgCrclUnyuJ5RpS6lstRV8o+iRL50p/ROs2x2gipDhkRUiNf\n/FZhVwPuk3oZ9d91VoFAeveTUaexNo+OVnk3d6zTgyEHOFziTgwGCLfPqQgD\nfcpNYj5btyqi0HckCkBt9f6ZPWZ+jPMeUir0geaIhzJ139ya5bfR9DmVLjXQ\nBD4NkPzRu5XMtc8SbsfeFL2QXy6p5p+s7exGHcwyM1rApP2lu5tdYfWrm7vV\nnO5az2krLf7oAB17SXBV2/MOnMknV8CregDTM2dvj6DmQp/Y1vx9RN0o4taj\nnK8cZquXHzuceOTRL4NvSd3FiEB3kZOvFevahBsr/jIuJuEsihRCQeDkGa1v\nh2fjI7C98cT7oU74ubtQzOeRCc39SX1+O79upH69dfLgUUayVpGpH25+hgJr\nIuhZ+r5BIqlibFarQhzm4SrIvKuzV2GfXJGef9pEUQUY9ML4HwPyrL7bLPW9\nE9osM04gUcjqU+6KCzcNYRuegCNGKa6XLOZ3LxnD/Twyy9ILOxSDVo7OkVV1\nhOEuVkoKZt8NwTrYe0Cor3Mn7MErO+/S6Ih1By/E9IIQe146x7d7TiKNlQBx\netR+\r\n=ZGpa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.cdf858ea.0_1572631116965_0.8623929240201667","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/theme","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.719b57e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50696b575dc8c5cee8b716e2450ce7ed7ddb9d93","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.719b57e1.0.tgz","fileCount":14,"integrity":"sha512-HEEcUNFBSwhh6DCg3yENjmONgfFgz4XHyV9wQ4bdlMiXi8P2H7hutEuQZ+OG/Pi7JWg/C4HJuxl7ICwh9rIMzg==","signatures":[{"sig":"MEUCID3vFpZUzrG1A8pmW+w+gNDUTxheSmlEL9+H+plJL9/jAiEAofKAYvdIZQXiu2Oje1vVJ66zut5fIexdUNcCP2OQq8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8NCRA9TVsSAnZWagAADTwQAJaW19CH/fl9iOYJFRtC\ndSP4tV7xxihHLqKvjOZF1cE5N740Yet6J+X++EYxaSH3ttj9opUrPTWWbgbP\nGDBYN09j7SFiIYSNRRUJXdDA0OStrsZQWZzR7/5+IZGpyCD2Qspq1zzudSko\n7ExowgdUeDnDcyRmVnzoeCN9oclaqwHCZBnZ+1xBpAYoqLKK3NRD55gEdnYL\nsL5WZRT9opZMlDL3KSzuxY5t/NICnc0yhlIWs8fj1JKVHOcO1PkvDQjqg6LN\nG5AFbMNngtUg0/jqGQozHdvSo9oBcneBncpJkNC2QAWgfw3pQ0WD37nfdwo3\nzR//UhBWAEcIw2ghSwR4qrfl5n5gRncjbRfspVIgmzWNBaHIieENfu5NDVDZ\nnX5OxG9i8DJv1SR4jP5eEhLDS1OeuUiMCjf1cFVIkhIbHNdTJGhdyHvO48RJ\nJE3kjsllHkqn8e3qb8wkQgijd3LpgjlCAz2dCxIzWLkwmJtUcoH5TWd3qKBz\njSpjdqkhvDXJtefqR91ObqtYmsvKiNSwL5Ko/pJUg/ChQYcwyePgp0T2PRrE\nCneWC7zUVybkduQbLunuYafAoLqIMd/EPrz28YZz5zZwq9crxrVespalruH7\nkJ93rkNugqvkI97mrKxXaeR1TVBjSFq0i1/h33lF16oHTVENZ47AV6t3QWrM\ntnX3\r\n=xb8D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.719b57e1.0_1572638477457_0.70115077310969","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/theme","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b89cb97771cf5bccb5c667df6fa265efa27d33a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.97cbbdc2.0.tgz","fileCount":14,"integrity":"sha512-XzjbeRqQMTkrizqd+auRTTOS0dubHyZst9HYlzotGv+gv8WFcKEqW2ihNQvZIVK9f9/Qtob4qkgSHektafhOTA==","signatures":[{"sig":"MEUCIEB8+5H0/feBbV+qFg7sebbg6m7kefwwKbc11Em4/ZQ5AiEA6+GezrO2I3KOB1UIdxCdL7bQVSSUZCPr3QIziKxXOW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWHCRA9TVsSAnZWagAAplsQAJ+u+CCy6O1mKE4IyhAA\no/kqleVQ0yYRyLa3k0vccP/cs1U0bAQIWIIWTYUyVrTJAOnMLPQkCrelC/jb\n9Kc+Nsrmlrk7RdAQNiiXei1Mymcz8GSDSzz8YdBMhqarutkICDvBJmdGiuvH\nDACGflMuvAyIeII8UuzUXunWVoJR/5ybikynXe4dhuXVUOm6wU/jLDwYe3QW\n2nMblz7BwVCCAX/22lcsEMYJqv94QcyoJY6GSn+xkv4IIkkEEqZGfG+TzpPx\njdUlAKov/FAVIl4TobdX8q3EBbaXPr++9Z5yHRdwknmh/kZTv74EjWPFmJS2\nA9pQq6hHXr4Jvx0yxvJDOBmV1+47gR4IM4VM8lXsaHOtl3WLYY513wVzPkgn\n0Jv6+mS0XixCY8lczDH5lg037dsG0w9rmf6Pt9wHUMHUMgrO9PamkQwoGws1\n81w1fa8CK0HGnrlTyZCfMqjoOQLV2lZ+I6XMMFm8FoyrhQrp6r9S2eo3Bv5o\nJgWXrv/FOfSRu+nszz/L1FSBMZ+Btkh6/CKl45MDNlkcLzF2h4uvRiNpHOve\nfLJdZhKpW7bl3W0RHWiSI+7RkoHQTq49nsFT7bBKyJ9KMENWIgiFlYGZtY32\nEAxAz98CiOCSnXmWr03+qhuD/yhP6xVZCrj9LOFleQHQ2NXvrFFsf5yP/quP\nHue8\r\n=T1db\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.97cbbdc2.0_1572640135027_0.30730741299744135","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/theme","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4613de9b52e3e75c1dbdb144cab259e307156154","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.8e36b3b7.0.tgz","fileCount":14,"integrity":"sha512-HxQEGkJq9qi+hb7+LsYDEI8C7y1/quPcxF8V5QOsPuDnrQzqPwocmIiX7jhEwN85tUz/LlqILk90qIBuJboSCw==","signatures":[{"sig":"MEQCIEvlEb4MKQ9FYLvy9IopAlHASK3Gk0H+ZHV4KxzdPpxsAiAOvdSVcAJGjmRlrsXaX+NWRuC/7chvGZbBdH+evrumrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ0HCRA9TVsSAnZWagAAq0sQAIlnmpRBuCtzOdNCWsEQ\n/xZneaKhnYFLNsI7SdbXbm8rG9NaYcp1WFE3nAMo8BbjoXz3BxXVWLBaTyjI\nw7e1TLFjdxoxzHlXBdUdqlmVH4K6msrLk/XTiNSqsOobdBGl2ok9EoidYqSf\npZ2TOoKX7+HHFv74+0CYmObeRtr9zksYm5lZB/ibQ57PDh2AfzMcaT8Niy1e\ntwTx4WI+a9sD5NlPZJVUH31pGs/UHdWS+oaPJ9L4M40k4pPiYvFBXiyNPl/G\nwjggrQxEi+0GZVxMBgbnh0LMYvwQ9DtxyoZEllxAdCJ2JWdeHpnlPmT+IXB1\nUMUslFcX7S3JcqtfFupvqkLwxRBrb7h8eyeG8ghP84e422nAXqhzH4zmhQYU\n47/5XjpQ9YtvWCggjV/a58X4Q9WWxRuzi+KMbDEr0PF1LYaw8xNGiXJ9HVF7\nwkeE3Dz50WGjHxd9MIqHGA7wBxbN0W1pe77UltBqwMtY2+V9PIfb5ZWMF7Ns\ncVh/LmZvmMpfvMMlycoaFTwUY2GMMXdCLZ1o/3D5VTwCb133oaukSiEj9Gk2\nSzu/AgnccrMWXKkthruAzkn6kQBmMn15doeOWOpQijVPf6n4p3sY7YsWEET3\nqZlbzfs//E6NQbhs419jKwhn+yKqBkEwuUqLfSvX7xfZpOfwWRRz7h2DXJZX\nkCc9\r\n=GTaS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.8e36b3b7.0_1572642054623_0.9593805541105052","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/theme","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a22474c39038eaf16d4ee7c2a510de23a75bc5e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0-canary.62d3a09b.0.tgz","fileCount":14,"integrity":"sha512-5sxQV46oAxAUGsDLAY/qPGUQaGqR60KDZdXPhIYRMCOWUAlG6SgsCbwFUerCEpxaaRpOMCfZj+ZfSPe6QT9Kpg==","signatures":[{"sig":"MEUCIQCT9UWBADh1zpyLb0zMDUkzPuENVqfALQpRZwLSBs9tnAIgcoP42ndKE07kmZH032y/5D0WWWOEvZkABmfeRPSrUok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9HCRA9TVsSAnZWagAAZw0P/AhYu9HKDqENxmluCLcJ\nbjdIQydYG5dZJfRoZ/zUA2Q1K0vbK4kzatQOXMiJanlcJy5jMquXNnXi9DVz\nc7FpqzJZfgqhstUlYcbH+yRINegALUaEWeelGnfnH4Xu4dF68fYssKDHSxUV\nOawHhFDmVKHNcAyXloq5egtWIT6DFBPQG9p1G2fmvy2YTz1QpophmtZaoCQJ\noZgkdLkKTU0ptMepjJi+0pqzqLRVexBQQj7bQ6AY6C/NYxp0ifh3XbpfdtCe\n9QjiaUEozipn1Bk8ByyPWvhG/v+ICvKhUcitGHZbfkAtU37qymcyS0aI8VLE\n3bLGroxa6Nl2nWOKJaAKlWd4pOcXP86+i4EdjShAw+qpitJ1kyxXNaHfisn3\nx81InIM/gz6vUrcfWrg3okxOlfBARciCkKAdK00fKdLJqgiUnc1JngfGfzqi\nScW5fzG8+7TILApg5OIOd9fqOTGPP977xCiVZVAoSBoaDnZQQ5A6BlVejD0/\nEMxOzShs7M3KWkb3WE7G1CdAQrrc+914T1foofrtytqz6Haku+niGZKa3X90\nBfr6/B/CP9qkiXX2XrfX2Zb83Gr8Hnqy1cVgXK/HTERKCr9aep1oRQDgx550\ng/90+9HYO4Ehfp0QVuYdi3w+WtWqX6qrF6QD9rwyBKvrswiGTr1YUGOA2AGr\nb0gO\r\n=rhbd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0-canary.62d3a09b.0_1572642631261_0.6879327596278269","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/theme","version":"4.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@4.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8de388fcdbae20fd09b02a3bdef3049bf2f623a8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-4.0.0.tgz","fileCount":14,"integrity":"sha512-vS4G4rusJTatTH50kSYO1U3UGN8EY9kGRvPaFsEFKikJBOqcR6KWK9H9/wCLqqd6nDNifEj9H2sdWw1AV4NA6Q==","signatures":[{"sig":"MEUCID1Xp15sDCkZ+RNUfyGQCv8XWiPuVOu6dQFHeVIEdwN6AiEA3AWVzX+FkycITggc6yJgY3KObNhB1giyvNfYGnFbL4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbUCRA9TVsSAnZWagAAcPIQAJXJQbP8ZgdFNqGmQcrV\nZ2r7E2zxwRS76qxhnZZb02FJ6hpIgQmhzsbyCJZ/YJHd/sQLtQxugxs6M/7N\nC19xLMkc2t5I1BU0lloDva48oxXVXCFgRGceBfwe3pZl8QSSHAmUxDPrVJ9K\nvJWivRVBHIgP91AAZKjEodWi82CKChV3qoiblDev9VEqyDPdLz2BQHi6pa5P\nMisE32u+3gQiY2sQPcxwXAY83dhaRYGgqkAJnj+Lup722fWHkfg6pN9GWKjC\nWX9t8sc5Aj8QDlTze7kmisc1YksTXNLuZDuoTC8HRcOBBSZ+ME3/MDOSU/GF\nn5m4jQV2NGcAO4dwalhsre04gLF4uAQ733W6qeAxioulWb5SZTSVk7rLHW0T\ntC6Vw4HrlHXae5bRDdVsE8AlRiDXDPHInYC0nxoIkToUrX2AvvtN90YDpsik\ndnMN9PGyrm02LhiUFbNUuIJJNLhKcZbO1Ph+QsK+OgIuOrlUXbUcvLp9RcDE\nbhJM2Yh6qBFMLFegxHhBXU0YC9U0C0vgRre+5CoTE5vthP1IHaRY2qby2zSZ\nlYFouq4AF8sigZPWsYz1Ck64MbS+5DCdmOT1x59uD7HJP4EQEiufSyT7Y+qf\nL9FSBinQvAxZtyBIQshj84Ver+ZGL9TgO/BArkg1xurpCjSg9TzErhnmAWPJ\np6me\r\n=mxe5\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"^4.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_4.0.0_1572718292468_0.9310277051232743","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/theme","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c27d7c95af474e188c6fdc3953d95348d2ad3552","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b5eb51e94.0.tgz","fileCount":14,"integrity":"sha512-MkO2B4BiLA1qt0/L8fhWK9htaUaUP7bhGydRZQkbgjR3xGeM1bDaPxS9hFBdQqLxvNwAckb6fBaOrobIicKcwQ==","signatures":[{"sig":"MEUCIQCrJoor2LoW9JgJxbvY5UgGfJTWzMC9gqH1wOH2V/nF0QIgbWc4DGpjBmTRduw7MvVU6pNZ83Amj/sWese5bO4//v0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGN1CRA9TVsSAnZWagAA0agP/A2xBUqLbtYZkjFSWlAY\nC+5ZzdqcHeSclMglFve+Zd8XzoNgb3xYeCVOugsk64g0+yyg1IAwXudUWXnW\nn5bn9/fnjo5rcQcwTpmhdsyAiDW6Svx7DKaIjEwdndawCZ/CMEnqKvIoGyEH\nsZU3RMKqqFGLIUw2tHzzjeL2lf4H+ZBJE1TeaTqGZOo1Ws39GR/rYSwIHV6y\nRQdKxjaDG3xQABw8KWU4qeTOjBsV4k5jThm+rHlz6a0yGIAIljrsMvZAVxpA\nDLY149vjnKE4b+e76jadlhEmU+Etg1kgwvoOvw5k3DQ3oHgZswexl03G/GLw\nB7hn7vqOhu0bAHa1+dgLakcwEqnjhYrh5rfFn+yxkwMqrE5k1Kf0xGv/OlVY\n5NrLp53Q20T4ZXuSOe1jdrxnLb+ghvPwjQaDpvonMbZfARtwh7pRUb5GsX+S\nu3V0qGlsBAl4GEXyfFJbknieW8MJQOm61izNLornKWIRhva1cFu34QqYoIXn\nWSkmOkGF2SjVzQ5A2efFQT9ZDbx+Bw3Fm6V4z9MoAW0MGVDI4jB7jZe4q2aI\nbBPV1yspqApzL7r34Lrg/c1Ln0fDflMJDnZK16Q6XzeTLtEKD2Tw4WJGq+0z\nGItM+HhTGtBxTfwVTrubkU6TPGdsJqrt4HTf5+h4m8z0UjFE1pS+V0MEF2OR\nk7x2\r\n=+tcz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b5eb51e94.0_1573151605239_0.27525932227635286","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/theme","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.58500806e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e009f9300e502978b27e26b806cc5fa96c8a96cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.58500806e.0.tgz","fileCount":14,"integrity":"sha512-SCDLfbfL+sHLFodMTX8CWFCc+VUU4lxOWwmd4dmUmbIzyPMoTfQ6lNpRPtf4TrGC6sBbEZPPlbfg5j0N/Oayiw==","signatures":[{"sig":"MEUCIQC6Yd+0r41VZ88g5GanFNOEobrUy8PbvHExjUSrhnbO6AIgH68Tt2xfYTQPSgzgdIohXdkDVYplGY9lyPxjp4LAyHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtACRA9TVsSAnZWagAAWOIP/iQT6+qxDaMojmzEnT5b\nRznoOBBotFgVy1PWFNZryUSj7jqLoHgDHI+X9meLtkeObwtiGmDwNGaSTV5k\nDBnQAGh2Fb1wLMSczAP0CegZVIcphrXTwBJ0TY4X+ACKxQlEKAnl0UK924wt\nHo6sth8UfexVhZqACKpHEG4/uNNq1fe3Ue8tsSqLf9upsBjOfOeJ4zaIYCJD\nNZFiYjkfnc8eSIqpN3KewKVNy3lTWMiwyJDgRhh8JyQRQbvC/TagcBVkV8JS\nha6DCabIoY8Rd0ZAAToewu+Il4tR6KMDMotuVGE0RrVagFHO9DIyXIFDm2q8\nvpZYY9GtscVl5Pqzw0tbHIW/gyiIWUt48BFJhkh/m5rhXY2bh0TJwBVK+MSu\nhGhDJn8Ki7ID7I0vi/to1lXCMTg2R6O/r3PKYJ1t+OSTcc56/iN2SEzABFmL\nIVp7AhVi7p6MN3fx8jSA+fbjaiYOKSKulEW16pNajL+aGIHTwRoxjQ1+KrbB\nnXY4z3XH+8GOj1hqIBC08GjbjjG6zMsHYKULBqMjx2+Cmi4MVBjkz+NEVfDt\nhtRSZujElW8/5gE1A2za5AwfDL2i12ac1xZeveFzSbxNFz/qZUEggFpP6fuj\n4w4XPXTprSC2yGx7qtQ1wNG4KHzgb1Bu/QAudd/GWc1hjvdrhmdIYxOIH7RZ\nc0O2\r\n=IaHv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.58500806e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.58500806e.0_1573227327642_0.0043373709230234425","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/theme","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.66299b646.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f9126400101fcdf230eb71acb974f66d79bb8ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.66299b646.0.tgz","fileCount":14,"integrity":"sha512-7Dyv+Hc7+JUI6HzYsYYeV9NnmWWVE9DO3Yj2Efs32fC1Y60B5ks0Ew1z1uocp7TtC6bPaCrcRZoYkfRFe+kKmA==","signatures":[{"sig":"MEUCIE0hD3Q9MIWD3x5zOE3wyggTfyz4kKGy5Uvkk1PHrTikAiEAqclsVN2flz9IYYz9dk72bZph/D/0ll8nj8zFcdtIeqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdEYCRA9TVsSAnZWagAATSIP/RmkG2Thzc8F4yDtg2wF\nhx70qhsu4aPKnQVEYPu+cVdReYfU+KooPKKEY8txZt8TaUL942LZZy1576fh\n2ZXzDdCCkBZ9w9fMZ5ALynclXSNwz/seW3UeQgmvuULrrEhwuISYZyuwbFAj\njv/KpE/OVE78Wam6uTh4RZ1Rg6SM/8ls06j+/5qpaIz0hPaZaykxGXRFSisx\n6KXXS/IuS7+kBbvJdIl+m7lJk7FHSvBf7e5+Yax1gNZgrmTm99SGxvdPD5mE\nNVsFKXNE2hDCpl0VssBIb2NbBojVIeBpXzet59U0iRGwcvhnplUvYHTMR/VQ\nCZVWUbKBhXNJGkk/E2zSM3807YhBTdGbvLzsU6SCJ+lqS2nK3TVVNmP/34LO\nHOL10D+7mf8YYG062jNOcgUcLA3Hf+DlKnXabCKbaEgVqYBwycBN8WVX7yac\nsxNuGG3unu/LToeV8EhgJ6huw2mleJwmCgsddVS14HPyl7ov6LAjyv3aAUqB\ncSQo+J34S4ecTMpTwzvPBZlc8Ua0ggjva5jya4vKql4VJxRBKGPjjgwyYKxg\nih3kyE227Pi4yGu9L1yEZUPFWyW/weFPMBsHnt6mrFxKoReXIN2kLPUx6RPG\n/6zVKsBDPefFTpV+cCw2J9Dt7z3SMdGxSq9Uva6E2AqS7w4luNFf9NREzYak\n092w\r\n=qdsY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.66299b646.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.66299b646.0_1573245207860_0.7653534423083495","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/theme","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.821871e04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5e8845d2479e584e14ce4f7a22779509b8bb555","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.821871e04.0.tgz","fileCount":14,"integrity":"sha512-VtMdVlhysmB89c52X55hlzSn3pdGVGBSAcr2pwXq9rOqx5MD8kPRUzWx76kVRlAiR54WKGFvlpScZQX5shN+Mw==","signatures":[{"sig":"MEYCIQCLHaLLqMYs7QCryHte1zxOSDjqZyf/MZ2iwSdm+pRQ3gIhAJQE4/d7JXv7j78/kTHwlwekDvThEJgF/79UNxyYjDWi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd3eCRA9TVsSAnZWagAAgEAP+gPvTXNZO+LUy0kMwyhR\n4FW+gKkq1IOvbmWzibL70yr2i+JkYJZSe3nHw//EhVufKWTmlVSCYOmgYGQg\n/HLFqvva7EoycRx7YSKDUaUZWKZxQheUSh5psVNb6dflNgjik/g2u+v915vd\nfZkkVHUoCKn53K7plPfHq8i++FYsXBVQo79U8PMQ6yre/A8yoY6D+L8DO0MC\nU/0yLNg26Zs9kIXiPt8ah3jInUPK0kH1X1MUn825xNmhxP7JMMJLHCJ8+QSa\neJLAVz9qZNJiIlL0R+a8IRuJsXvr07Ci7nA3FvDcflRwadgVA8jcsNIGpRYw\nNCEfPzZ+QeSLyyEOKOrJPmBrHDaaEsOgycC1TfwtKcgyG93LL9JcD6BVNXuS\n4ZF28U7px9tCw18bLUJY5fFGyhtRRKE68J7G00AXF/lGjpIMOx6C6duRhT3e\nwIk7Tu6jei+X5/aYZvNk46LY+BeOv8+GyupnExr3WcrQAjuPXEVZ+CT3/GRV\nSqVsbLRa7axxyVvrNDOwmcf/g/R2c+3ZPeLBe0rG0evks+/iQjkgqdsldcJY\nzEl7YQ1T2RlbzG4fK/BZxk5WNUeBdFF1kXsPPpSozw+raZOI3ifsmLY4hpx2\nIT77Vxfp5JVNrBRxt+ipUWvSjGmXgncJ2W9WZAEIcA1j+qCMJxPxUTTeeKpI\nfPjN\r\n=lyvo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.821871e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.821871e04.0_1573248477902_0.11441468504955887","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/theme","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.491fddc31.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a09f658d2883275b98c496e62dc1207f2f4cff6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.491fddc31.0.tgz","fileCount":14,"integrity":"sha512-6vPTr3ZBzXF/SHlZtb2MUQJGAkFSoFr8TVZHnA+LdL3jaKDWeAnLj0rliPn+opeYH9bmvMJs3aHLfwsDel9fhA==","signatures":[{"sig":"MEQCICZxiyAKOwJJ9MwB8S+oiUab0VoorO8M6tMRwE6Ez9opAiBS0a6NBqS5w4iRjDhVSifMY8+XH6bOb7KUcpAqiRwmqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecCCRA9TVsSAnZWagAAdD0P/jQeZHQRr9Nx1p8btlcK\nol2GGzJpDxP7YCZiNFXIF1T5UFiUghtXV0ovmENOlhgClvYQ3ULUuxIVpFkg\nV/Rirabo+HkIW29QmwcLFDtXKrS+S1/L04ryNRERMdpJbmr6zpPKgx+uEt9q\nzCn0ZuyUd1PaK9oHWodqJCe2qz2ISi+1dI8WSq9zZiuWlI4NA26XIKWx4EBY\nDBi3lUlxIWBFW1Fjn0K+AyXV4+9/6F22lApgtkgnHPO9YlSUqAKRR1/dZOu3\nch0zfRUyllOpWRzASGxMOWsFkKyTBdUxvBLs6dMbjYn4vE+6h7V5+ygCzN5S\niF3e6XjVnCU1MfQDG5bSycJ06RnYMVGgjILI2h6zcP+K8+NU0fOJFz+cG2CH\nBXiWMcH1VDB1VIHGge5W255qdmNnPuy+Rx2aQcETl2iho9RIYxd4T9X/lG9l\nuQIpirDlnKD8FlPZdeqqA/IJxIgnKDRgzbpm70C4BZaWEnuyTbEM+urbpQru\nfYydXqFYKHVFvVf1tQ8v5XnRaBGm2+wVC+ESRwbNuTpQspJOgXu/ynHifdnX\nCIloe4ABawSoWPuOWHfqlMhQIyk2/9lwszQWY7O/c2ox6XXmP80yDLgLgGd1\nqunKkj4PjqnZNi6TyBUqGkhljH5Fx25LK5lEPutTPrpPwthAbh8MZS8SnTlo\nk1ge\r\n=+4xy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.491fddc31.0_1573250818443_0.8371868419451085","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/theme","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ba7245147436a006952165296b82e772496a763","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b0cecf145.0.tgz","fileCount":14,"integrity":"sha512-E5awKeZ+cLPO0GXByB08p2lXd/kkzufshzIyqnBdne+xojaNUGuzKIh45oTJe3nJ/FiT31puP6JlcRhdH96usg==","signatures":[{"sig":"MEUCIQC14/EkAkVOnI5uWDZ/g+W6jZRmdpSGFtWmHKzy5DbzmAIgHkTkueJg3SpE8CULIgaDWbYuqKn3b0F0Z3Mnv+ktrcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwiDCRA9TVsSAnZWagAAgFkP/RnCG0c8jnPobkqyeQAl\nkDSpevdBhLzoNQB5uAlksCK1mWFp647meQd7NK2Gzibofv0zV0m0JciLs8xX\np8Su/r9ErehiJp3zkg6C1IGkT+Viorm6xzpIKuXoda0EgmuAz242z98XMwLT\nMdFvsABj6uTUmfAlOvp4mFgfdccIySjNnln4720BgJKNxc7sQaGXZolFqT9D\nz5XNri9+ARyx/lloANl8Guc/+bvQAiHkt03315mloceDqerefLmnN9r03aCy\ngsGHGfKS4vPk7uZrS2/HnD61V8S7QX5fmLEyi/6CoJSgMT5PwGER+E4nSOu+\n0xeiqF+Dju/vdpMXtWhY5E+xLDHnRFaleE4QLZm+PqMIt9Tu0XbH+EeX/hY2\nFZmQG3QQ+Y9D+yM1i/4v3cKB8YiPAkOwM9EUSQOUKTlvE71y18zJzU1o7ehf\njYXJB5COackyL+OxDUj+PwDTWE2TDCxkaH6BIkp5lkE3ea3b35R+q/ufFQxA\n35Mr+OUiqJ/BW6oYBkLXOn9i487Es1X7KDJ+T7s2JlE6smBWT16bICCEk/t9\nkEZwdD7QGewabiEBmZORrUPmRjIDOkxqExFeFLpVjgfDLzPQHeVx158n2XK6\nax9iChqO0ezgLTmAiVyTDsiajeRFlsBNqzddXwYrSPQKaS8Xzb93Utd5S2GM\ng10x\r\n=ev7n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b0cecf145.0_1573324930636_0.1273486957820804","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/theme","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c9a512f7fcbca75fed1241cb15bdf0e95854ffa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":14,"integrity":"sha512-YATb+4heb2cfGu8GfHxYmErm70stemCmv6jpo+t6BriOPJs+8RB1smyAqjRbFAqzatucgJ07QJHxZH94WSHk+A==","signatures":[{"sig":"MEQCICFxu26qiTyJVtaEgLp8KJZNEfN91mWgpumI3RKEeZUBAiBE98kTyowuaX50EHrVc8Hrm+XvJ8QXZMYdt/5z2Totgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYA4CRA9TVsSAnZWagAAbMYQAKOf6pW9sVV8bexfZCUx\nRugnDhQNWbRE+MgBBuQqS09PjK4x9lyHInmiV2wZq6NAsgzidPxv5Da/9s4H\nymPBZ1hQniddzDyGR6+8dTkAElYkz7H7ztBpgxqmLvUvE1UlO+t4f5wlJVIz\n9Z+RGZbX3ud9RONK3aAjX63o3Ehf0idpDNGxpB2hXwj/LO8QeYjAmykRQNaC\ndWZYBiXUuKlabOiGdDxgSsb/eTUKiJOSckxF5kIOCzP168HH9gl73rrZF+vn\no6dyMM2NJcXLOc/c+Ah4cUj1plAg0RURqgonpRYSLhhA+MAhaEq/qftpaU6+\navSM6Nty1GILU4S5JEe6O2Eh+u4EpBfJiqzbmkfN0zURzCWI9TWl357fcbgD\n6UkNzp9it2/dE3vP5syFFqJbb9lj43kf8wrH1f9REyjXHdKyuxKu9/hPnBdL\nHyEJm79qHgHd0dFgQ270MKJPj8H9zE5WvCRbwyFoEyFU16+G6ookLcvnD8oW\nYUld3a6CxBc1KFnMq+8mgmmpXk4cNEaF9fGex4afe0OcvEST4m1USjbsKHQM\nDBlOfY9FTmOMoOMeOQVxNor2dASd1EnYs0hDzeH59Dw5Rw0fobOcTwJD53JL\nLW0Mw95KSX7AiCfJM4/aohN5s/em6DJzbOnOboCm5XIQkImYUpaLqTU7CGQS\nsrBv\r\n=eM1X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.afe0dd1bc.0_1573486648033_0.6094199629399439","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/theme","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6be5aa2c1fb77e804713e43430a477732ec86031","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":14,"integrity":"sha512-mqYIAO3qX7jOmnY0fAzg9Rz1nWbmfPk/qgQ2RulpFopehOtfGytT3/bD+J34cPXPCnhxOfpYQqFZRnurItAzRQ==","signatures":[{"sig":"MEYCIQC/g+55R07r0aYVZ/txhA4vxflI5s8x7HpuXORwXDDqLgIhAI5PpeaHQHd63Ie9Zpe1ZGA59X5thdWHCnZR29KF/MGE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXmXCRA9TVsSAnZWagAAFggP/iEUQpWqYSMXCT36cCvJ\n1apr7d24VYwSN2ErZHDLhKVoiivl4tLHF2odYIonhZRFOdBz/bL29deVso4S\nPvZThelgttHW3zgtr63klzEsCyG/XkK0FGUmDToBiC1on78YaQODmly7Tojl\nFBs28+537HGHf263cncxso2Dyn0KrqEe6zyzUy5lseqnPxJiVK+FhmL2WoRt\nf8xKD+TGjdb73wxXf7UTWbOk3h5bBXP7m0anIvRE+KiyWBCMgZtif/CGQjZf\nsAfFr5Rle6M0vJfrtZcZkegoMckCyBWNXxKYIwZ28A3omKAAlFf4iAAXVJ4O\nmPGggmbrYD/8KxeBYy+Ux4GnhLfjpKuRoaPHAKb0VN8JL2o5FZ9tCdaO5hZx\nKgDS6hx3pB0WjgnDGQruBtJC4lSBwsF338/iLqXNkt1fZD82OC1MW6VE2tgR\nocBgsWA2WnoZfGn7EIu0Co5rjUuDikKYmbW9GeFCkLAyF/zSjO4UABwnGu/D\nebTtU5bkXySkWPUL34PMTlo0R+ZFpJB7/cCl0VIcdNyWPPSRZ1G79dlM9vTO\nR8qzXddaYvXfOCD7jOCp8itf6WM3960Ck8MaWrENclbr0QJjVOARz6J3fE0t\n5bTcJw4Zze6l4LNoyw/Yawk0JR+ac8R2h2/BBIHzqeCjXNj8wvPR88cggNzW\n03HP\r\n=YHXL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b4cfdc40b.0_1573747094734_0.575017110375456","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/theme","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.525989b5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4b3e53eae344c2030c326f2a951c540f8d03c1a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.525989b5d.0.tgz","fileCount":14,"integrity":"sha512-i26OPFryzQz+H5e40hBt05oa31p0oEtyJEzRa823Xr9wdT0vVOATy9uoIwRTBC3zmKGnJ2uw6hSenp0ov6kZoA==","signatures":[{"sig":"MEQCICrljGHbJk2/HIz/CfKDL27+AJKmfkIVpzB7OQ0XK6MaAiBIOc2gCeCFgDUJS0BlgJvuNecpeJXbqHq2ojDOA/DSvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeObCRA9TVsSAnZWagAAFB8QAKH+jgMcYANr04SjMkIE\n2NJ7QToqJV4kZPWATlDad8BlFUANgyTt6U2j/iq1dOLz2BV3HM2Nay4d3pkK\n6gGLC3s1lTrxSM7BVpZkuA0mBiMUC0Z01joid9RihumC5WSX9zQt8uozRT3Q\nRkPxdFFgqmCoZg+pY5U/pHWt5tmgvikU+4rLGFWOvB3fih0I4ZKcdOcaVDIi\nc+lo20e96pjGlTdnusDBnBMkNkqPfejhZ7IL6J/dRrS/AaGx9zh9OGINwLeU\nER/dU+O2SI65iJmgpMC9BD8VQyTa4eHU+rVFdvVRpvZk3qxZRv1BrWy0zvA3\nKg4fcNaG6eA77R1GJP/ASWiJLXC9y2TmBY3TXVCG8HHWtU8eUE3Nq6FAGXjc\nsHEgxVk43uqJzfAi23O1OcconUSlAvomwa/ju/Yfbn0p+TD/xWhBcG0oAFfs\nu0NMTY/Yyp0+lJ/8HVOOMhCDsipLswWbTAPNVqkkcgASzIUjh1jks2k3XiYC\nwXt4p4V+rL/6RHxUxunQZHoqQnfu8IKLD1ZaLPGr7hGuzzX2/eJAl54JJhGe\nQbjvSed4HVaTKsXxKKX2Bm9anLYJcjD2LJQs/2xpcU6VUhOBgLy+V675726H\n5czZXvPWhdCxSYCv07KkmM4kTi8z9AFCBN3FoKeVFHhdbpBixbAQ+2zMrqCc\njNVl\r\n=8JqY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.525989b5d.0_1573774235020_0.20254381670304422","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/theme","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.7084b403a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fd3151a37f94707cce5add9430be07630c1409c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.7084b403a.0.tgz","fileCount":14,"integrity":"sha512-XQqRXXOoNYrj0U+3UiNnnwwk5+fgTt5pDrVzdFSQBp7Tj/zLP/zrIlQvD8LuAMUndFf46dLeUZFmQpxq3PxOsQ==","signatures":[{"sig":"MEUCIQDI5exyqA8Nq7hvWFrD05ewqibarM5yrgSRbFfTJOWE7AIgXQr5kxlEM5yD7xlU2b5gZmPZriO/YF1Y2RZIllScZ1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfnlCRA9TVsSAnZWagAAmRAP/jpvISLWbYDVu5UnCMcv\nVKQjTUkXgnYvdACt/N0Z34DHOD956O6ReEhXIR/sCyPjYyXxarR+qLBxa319\nMWZ8U2Yku0BpxAIxcO+OjYU9GFv91RjO7rbQypoSQZpoepdESn3jYacUN0gc\nipDAdqPx1zvAT8IlGHNEX/YdtrvVcNXMsDenQvCFdrFJ95u2byd+KP5r4PQu\nNUsRMqmh4by6bRqw0nBbA3gtd56fAzVj/hgcAeipdweCHF+zi8rhobMtR55a\n6lZNDWlxo2GydBnrrvsgqHR0Z3WdefeluJrA2wyJ6pBcTh7mrp0J+xGXV1Cr\nij6EAzoTzEtSFdooH8JZvhUctPS80VA28gZzkkM5EARMmDtkyfJE32TRR1Sj\n2fqPhJaKbQFYMV95ZKQ8YuoYJ22OQNgvn6V9IqquW2TWNeOdYc4hmqf/urM5\n7igjjAEcpZd0KRxPuhPs0O7huW1+Ga/D27iAXOEdZaBuFP9mgu+nTKRmDOQM\nv1TOgNf8iGO9Fa4JITl1J/tcBmSL3iJCLrQ5o+TqvNPYmxnQvEEW+Ukt9lNu\nvt/I3mprC2jZCmjvYt4wzkMAcX5/V4AKcG26Haf14czY7izRDJW6SX+nxBhB\nWLGa5wOX19AJSlN/JR5l01qQDaamATk1WutY4irXkg8Y6/ssWHrqgkbz0cgh\nDPxS\r\n=Jau6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.7084b403a.0_1573779941044_0.3792530127920797","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/theme","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4c5ab4da7d68b5cebebf08906d3b7527db09ca6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.3cbee6dac.0.tgz","fileCount":14,"integrity":"sha512-2kLRCGl68eusspI8Buevt5rEOisV+lq2+9vDd3duyhgKzDjo5eeGbZnaWP0QVKfzBwtD5LjZW0Pe/q8iH0Dwgw==","signatures":[{"sig":"MEUCIQCKuDI/1CpOETqAtvn5NSto6JzSa+lUgxuThk4VsBEbEgIgCReGxAhAyIny4sJ2DsfJGk/6nFUP7rv/YM90TTUxI3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeCCRA9TVsSAnZWagAAiGAP/39MDlRK8F1RopEHu+Yo\nRY1dHsuJAsKXvT6x+aFve4WOA3TMatdM3ELmiOfmlt9Bl6t0zfhSypxFZTK1\n7aiohZrHoHcZmkUUpSbpAmsW8mn98V+HWc4wmtCCLBMOyzbUiLhNx5gcGwxt\nEyp8c19ydbyT1yS5qxproyp0f67xl/Q7LEjvsDgb8+ADHcdVi48vMRFbxh8R\n7ub5CVa1c7VnPRFU9uB1DurodaeQN0Q1+LKETxsEMBjSMdWuE2qe5YUQee5H\nm2oJ2hr8jjESCUIL3zk0NZlfeOQQaDLmeYQMPwlJkwMFAgKeskSe+4X/WBJ/\nNGLxk/eMxMffdC1wS6i7Kt4KqYs//JowycGRlIOTDbAQMI1JFn71m+3rM1il\ndf/y+13F4KOBwIBK2Pwb9PmoEPpDfh81kkARMdBjxvFQAQmVTsHDVMW3hpoH\nu2nK5QcFy3tzkKCr0sEc1uLM9qlnkwHGYiwU0LKSullPedvywqc5E7yl7cRF\n/CpQ30eu2DnVw6khJEXW0XX3zeL7mQ3BDnsXTs2juKzuxCtIBr8tRIHyxJs2\nlg6efO1oixEaJfB1kaSry90fJpuv/ptcS3VN72Wo4YTR0PHF0UT6t4oV9oav\n2Vb7UaO4TyqDeJeNstj+NZonjaZibv3z6NMUDJAldDp8lD8QpKBfNXVo0OsI\n4A1A\r\n=N1jG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.3cbee6dac.0_1573857154401_0.25808489454844596","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/theme","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a21a9c0850dc368955c2f82485de6a7ea9f0275","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.591a6ad44.0.tgz","fileCount":14,"integrity":"sha512-/ew8OeCoBps17c1EJCyYCLU888IzGKASjR7H03fkIuICAaSi+agev7qge5GK5N9aGuil0xUA6eNQ2ng36Qeq5w==","signatures":[{"sig":"MEUCIC72smLE1xo6vdMGsXa7KcH/0HZG56nPNVykq0WmXMPOAiEAo4wkiK4ibuccY8cl+VZ5FXZzoIiMqU8jrrWvBLXTR+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3ACRA9TVsSAnZWagAA3xEP+QCWRc7QqQMgxxZgpJhc\nHdCa/ylcqkCAnZSf/p31wD52TmXT7FPYIu0lrgTwovLpP2qPihFnnz5zkKco\nLZcKH6J4fk5qr8KrXIRaT/xypfJpTYZhCfozdvasbxUB4SVuFvU8TjsSG256\nfB9UNfCH6nOStgiiU2A1GaJ0U07izXg0bzqaX5kR2Czusm2yEX1RxF1Q3H6v\n5V1wN1FjUobibBZ1B6OfwlOI5DVoh3F07uzEgmiXlYzbXdIOHr6GkfSv+wqQ\n8/EWOJnCbIDLZbXmIsfR/nu57FruVqNBkv/4kqt9KZPNlcfy/KWaHyTsDFQu\nisK0XkBDQDp+2JyCmxsuvXANs4MHhgxIG0iCO2v2MQJdjGcy23v2jUnXqoJS\nob3/iZ2rdHxCYmTTPtfZKqEUq38gl83U6fcFEUR6J+wrkzQDncepzezOPl12\nM6luZmpkKo5kGgHcsoYH15iQ1idvzAW5HkgyeXIkLI7OVQUbH9MborWyBnmk\n8YriMygMHj6igHLr8M9FA80NTlvKmiPDiB505g+oSQLhbVFnm1SyhsQe+HwB\nnDOpnJ808dvAIYDMX9fRewyHBbrfONralFq7ZFcbi8oChdlHu9r34tEZ+zPk\nM4KedXX73gAkkQHtXud6GN7YCBppJuuT1PJ5/aNme78gCF7wQAlU5WzuVVaF\nR+DE\r\n=V+8R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.591a6ad44.0_1574120896488_0.09518303084765933","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/theme","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.5729943ba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7905c86168dadea1696e42091bfb68e023425b6a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.5729943ba.0.tgz","fileCount":14,"integrity":"sha512-g73I4ErUxGj8Gh+CDt6LgtzFGd/rxYx6BxWGL41jV7a4jc9ir4xedfXVeJ410Vv+148AZZUQFazZxiDqD5mTZg==","signatures":[{"sig":"MEUCIAFjt+Ig458BGNz+C8+A/rkee5HJPbI8OVIbbHj33pr/AiEAiFFhNwqdETqqCCGLBZ7vk9Xz9kUAuCYGLgRW7VSRt7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":68705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzKCRA9TVsSAnZWagAAY20P/0dM+PjAemLqkctvmVDb\nU5AZDnFEOk3/SKEYvx6rO23k9M44LsJoLQJnhHNu94OcmgPZoGXyPzOKRGzh\n/9vw/8DP0lI2wjBLIM8O7fjmrpLyT1wawrPDce9iIQqlFvBxMvDHVo8TFK1l\nx6KDRGyXjA8XCwGi3pIYZsNQdW3UH8eEhBTubLbi0aOH/9P2uBuAqFkff2fQ\n0QQJIy8EJNJ5d9K53c7ZP5CRdW0nWk024fjdRjNmlqkfGsEEkSlQJRjm1kvm\nDsOHWOA8v41rJxwhrbX50o4iQzBZubAA5uDeytvIKKi7xJBQE0ENEO+744QS\nr/If6NAj03g1ZWKDx0NuwaFUXpa5fgfL/ZBed/H7odwmM98BLaPxMU5sMRvT\n207j1xvDMW9kp6fdf8ZuDbvsW4Lw2YUlyYbO9PwqnhY0jfN0ZN2kJPW2RdUn\nlLlcLBrl43+q1O8G3czzugKZUwTPp19KxmmaoFr+JssXBmjUSFOyTGzBEHl0\npJxone9Cxzwj4/S/yHz2EcyiO134PCshBzDsirPKFiCClAFD0Ugq4V4WCjwA\nJKn+/QpAy7fH+WlJlIU5evDiQ6mBz91pOE0PGXuko4bkidbVGwcO5xfwY4eQ\nMYBxHcsYOGXEBTDvLC4TaykJ4ERE/pp5IEbvuNgx9E7KEyrPHKjmLM7V+axV\n6d31\r\n=tEvv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.5729943ba.0_1574227146260_0.7800791944987315","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/theme","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7500e68e732729096dca29330c18ac8e8040198","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.e89750dc7.0.tgz","fileCount":14,"integrity":"sha512-CR23zRaXbhE2TlVdq8z4kvU4/F7YQn9QMAXnLhVw84ZU0WsOyRIkIXNDJKG537aTGuAlRY5rlVi465WMfYfAJA==","signatures":[{"sig":"MEYCIQDG/9oEq7d1MaCHu123V85vB4AIUqy7rqkKxupFVUThTwIhALRWzNAQPIzzqAMqETLfH8oSvEGGZjLjgLA4NbF9TbqO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3drbCRA9TVsSAnZWagAADwYP/jx5sPkWst+/GPcYZL9b\nbZ9iGgvbsAvQqb/hr58cFqTuZoTEF9SWrP2okt6hILd0CwNqUkvoXpUgh4So\nF+BjUzvJyZl8Z/hXs8FKXmjAHw7Y5h2waHiSzmIQSjn16UJRsLNeOf3cXtsE\nG54cx56XzzsQMdrsLXdJOQtlBZMddGZhTmDm6iBO2DdQcHSVSFU/6CsB1EQS\nSYXH5uko0qjIUa1QtcEabWr/Fk4cchRVxJ2VsDCdBN0ZEvUdgYUwWw8B6Hrg\nYdN3CFqIuxScdMuSsOnULkR+J57tH/8YWDbbiAEXoo7aSbKGNOmBZblsRYya\nzHIpfPv49ZK4/JnC7bt1VS2QtboMyVRHTWb07LlTcxeSOeD2RE+w87ZhxQkI\nulGFsSWsrsnBDDZJdnz5+l9JM208JCkl4yGsTv2GzStqMXGfezzhfubSRMuP\nf24NblYyCRJ0mhzIW3vPEZ2jrxYS8fsO1nvSLMYILaIKMeF2zNBffWvy3m2f\n8IxKhFM7DFffUP+qn2wEBxh/KNoRioxhEIq8J4yFlzxR0w+ZJo2V5AJvkm3S\nyFPZD+Y+Sxc48kGisQeuiwHLBJG7eQ3eK4W92I18o/oHqN7aG/gbV5oOyLin\nWjWey2K5XXLRcwTrdtNpuYyoqgcRESA7IZO3na04spZXzLtrAKoWOjUA+zIk\nefMB\r\n=ta+4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.e89750dc7.0_1574820570785_0.6481356102165092","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/theme","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a93bd108013d5d536bf16607077563671d869a14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.3e560b33a.0.tgz","fileCount":14,"integrity":"sha512-aq3GUjECwCwLeic2ZohrbijrDzcv0wPoXur+clXVN4MS7dcZf/G/OU187UpE3Uv+4fQK2X7vMNAgDpWtQ0SxPg==","signatures":[{"sig":"MEUCIFoQ83H46qotOglcsrKtEujpVxlEX2o4Ry7Jb2Q/MDYCAiEAvvFY+92/XogefuGmleFumpkP89IooOfT+/dCzh/DHWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsJCRA9TVsSAnZWagAAgDkP/0LlCOwB8SvICTQbn6AP\n2f0Sq4ePnY0Zxbe7uj1+h260RbBX+mD+b+wKKKQFK6mbggnDadbEu+0X+q0H\nLu0GqI0AtFMr5owzhFV4m5jT/33QWvO0zemC6rwR1E4otYp1Ng6VA8ACNt11\nniDJMWIxZ5p2arz862AltaPAKCGEGC16ucqkA/epeaJQ0rLEXXqreCqeeqfs\nIkWW/45Dae3MmhnF9Uh92Pgc5UGZWmGlRtNXv4Nup5JO6iof2LaZfrOfwrtH\nABukA2Mc8+pSMuGtQMnPiouATiL9VErXVpy6nidOIZeO2FSGruOGkWwm9Tpr\n9OlSIv9v8y+0r4CizoGMm2aahjZnMJEV0Q9tCrCJEPZaVwLXWspzMHZnoh2i\nNhk6tqaPL33nkK+rrQSNii+xIMMdiJMGIBaZI6N6HMqr7Ca1PlaK/QGQ47Y/\nKw81jFb1ScBuAZIEXpUy39XQVubzHyaiaSXaa2t9Uevbnd5AEzPmifUpuozt\nxDuGGwKeeyladng5K3f5ILXOtmH9GgE/lolKVlicnrmwvJ9s6jzO/J2PkPpv\ncFdNkxymx1alo1Q9WF448ME6N05Aj9tZOkKQ1k5nJpaEcUb+HgcnjSFz1Gqk\nSzl5KmWO201aD7eNQNfgJNiey84oXV4agCxFYDa1sxzmt8u2ysMd6NwQGNJa\nzVOR\r\n=TDMt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.3e560b33a.0_1574820617071_0.7478284997953917","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/theme","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c26f36d221968071be84d2eeec4cbf62db536f0d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":14,"integrity":"sha512-mDserF/AZOJaWcSBju1KzyYSHrKQJJ5HDHBIfRTNuqX7w8tVnaP0rJtSGwo+ZDVKKFEQAgWZKI1eyw8i0lpWLw==","signatures":[{"sig":"MEQCIDH8byzxif7XpjFMi+bVSnvWbBXfAINCNFPYnnHm15LZAiAGcIsYe8U6ntTqee4Iju9lYD5Rx975lMCYVMDuVX5Prw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsUCRA9TVsSAnZWagAAvHoP/1t2cA3iBgP/eOLfISRl\nF0x9egGlD4dfGG+rTxydAQdt5I2AtbxI0yvzm0Iuzs3sAmx9z2Na/uftWW1d\nto45pg113awWka8Mwj6zE+yzdMbxYxFwxXrjXWLv3XRr0ONULO1Ahoksuizd\nj4zKXrHkGliziuGjGZD/T/dR5pKrFgkog3NFEC/7riJozoAxPH55oi8GfDFT\n4qASflRAAWyII3nFCBU5UF2/ATvblRm0D0SH1g36z1AefPqGaI0Fd0/Qx1mF\n9njdU+IKKRJNJ/ZmBhj4C6mRVFzmbphdxbGERypmDUhj7tHb1bZGrYxDZssB\nZkBJCV34IL869DxFExGKlvVRQFzAykR5FetUaK01hDYQ6s84RSxvfTUEdvWC\nmh+cZvdJQ7klOe/VoaZx/Jyo3k680AUh+5QgmqMKS86vdFED5a0LDm7IhYRB\n4uQ3uXoRVf2HBQOO4RgCZpdhYwPT82K6cH9TbRmPa5hqQkP8T3BvtU+nuxHu\ntJDqAN06Sr2Q5nTGvkdL0E9nkTOOUD45KnMaF2fpeg3gTiXsPPYvNwCEBoW+\nqhszimP+NVr8y1U+LyV+LiW3sVO/5c8PaACF6KtolA1Y2tC4LYnytGwB0SjH\nucmUGhydCETMUqTipfpm0NMduUmEincrIEm/YYoPCjqpABvbZLLgFXnNBSw5\ndrZX\r\n=ifFV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.7fd17ce5e.0_1574820627912_0.5972688565241842","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/theme","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.ec729683b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85dca0aa7301f922514b8f48d2c6e1290c04a99d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.ec729683b.0.tgz","fileCount":14,"integrity":"sha512-g98/ZKlNWmFHkFuIg+t0IQDvx9BXBBGKVoXUWs9LLoU5OdEgAcmC5CegXsqr5Hv1yMa/NDoZDJsSWgREWmKNtw==","signatures":[{"sig":"MEYCIQCWEKBhoH2E9SNCG/6jtY1OsLuriI+/48kM/tE6PgSr4gIhAIk6eZ3COveob02PZPX8OjWvbG/CqUUGc8wNEVxv5+oA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pw7CRA9TVsSAnZWagAAsNIQAJZXiZPyf6aLVSIIlNpe\nr017RJHj5gMe/axiMZojEuVVbjDE2eC8inT2tpwYgJEgysx7o+J/vfPY3kTX\nTxQ4rt3x5pGYH9q9oZBv7K9ntSyZM0wmDRgOJxFxQOhztErEb4tNAeXrBGwb\nMEpmAGc1+aEBvAoOlnLeNyZ4HvDynXzsbnIeZTCfpn3oM4yhPPu+lXSLniee\ndXBirMgrmjSVdntPDkUBr1Fl0s2bLleN8Xr1d5Q6pRuSmUnSu/5Psqc0r50Q\nXksL/kVSVuQy5e7FoSXafrL1pEaM1mQbnd7fBtOLBW4h6sTwfQC9tRIpZyuS\nJaHPOhXvOum0rbYscGkyJ9U1yNCQP7dMN7GyeuSP/95qC/Yh7YfgLMmC0xGt\nwZ2j02EKJ8OdIUJW98R0nXHyzZub8i2wWb0MC4VUdpaKYYWF8PFoZcbRmOEl\nKZnusQwaSDn5TEkv10z8VlOTbGTEiauZJFB1AhxpP+GfoW+4OQZiTKPgI5SF\ns96MsFWRHx7T+5QZBkjixIH8irdFDs3xabrbmHUcOphRcKCvEN3S1yWtxLjn\nXgAFKIUe9zNRuaQaZxHPhXx1QkMqXTtZ5T/vpI5kCmmJfMbDXKW5i9jcrXvu\nbUauq6QDoDL562+CHOBCJ67FAMUg+f9ILY2y1jXLXBwpKHh4ePJJkbuHKbcm\n1FTj\r\n=BylV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.ec729683b.0_1574870075338_0.280612273220181","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/theme","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7feb5e2682f19235132e339b21f516a6f01ae99","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":14,"integrity":"sha512-lsHNdI8x4g0PKspaef4HGvDSPn9B3U5GmOytcErxZT6WAMYPhpZfJre9zJ//5Jd0okUsJv94xrKF7GzfdgjZHQ==","signatures":[{"sig":"MEYCIQDO9slBcZa/T4WCbU4voOWvwA9caxJI33yzisK5gIUndQIhAIZYsFupJu6XD1/qE06OjML/BulfJeaBfDXH44ympBVv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3suQCRA9TVsSAnZWagAAo5oP/A6boLSsT6fIsILEEJGc\nxnvR2PSMEO6hUjLwN0o1aojHHYvSBqiiNYqtzQ33eXrzttNFwApi3X1KLo0d\nHvR8tEWdnFbwkJKa9YniqQQOZupEsxa/oSk3VRVhUZqOxh04n7oOcopgmeLO\nfdbvTRIS3dB6lycWG3mRtoK7IM6MEjrt1XtdC6D/ST2+KU0UXs9/m0UGimJN\nhwWBNJRnCeAakRWc6QJbP5ke40wiOp7njTue5Z1jiVMQGEwnxGE2T++DjNqA\n39LZAgS9QUj3uqS5P4Gke/xP/LjzuA/KXMXDE6q07YtzPgSTbJTly38AgTpL\nAASgwUuYKZAlInrxehjjt2HcFU5U/Q7l7dOr1u7IKdHTXRTvBH13o3/NW2lj\nhfGy9M2ish3ZWTb5irokixzfOHF+x9SlrOPhVm0tgPp8G95NbzNHnUuI/VHq\nzB010UYqS0yqB8skPbBjhtfylkMehB5Nf0Sn7ZtzXX2Edzn16gOiYrcewcBk\nl3ExokkMPYLRWD0HHIKO1YQFcVW0dBgaPq+mqjiEzsZCCrq/n+RxyLm0iEYO\nRWBHEzXnVWC6iIaYASGIUHwFFCGd4NfduzVpjhYgH4PmdFJOvHUl2iP5SS0J\nZKBdqCSHpHk7+UpUQRdl+riG8cAhKCNVbPdzV2OmjJcompPMJ/btJiNRU3fQ\nKMaG\r\n=yI6t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b8bc4a26e.0_1574882191841_0.6995292797013195","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/theme","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.f978109c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"549df8385f1e1a2311c90b9785512661a131a77b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.f978109c3.0.tgz","fileCount":14,"integrity":"sha512-uk/2ijciwVfy4/JopxYxhpf6Lr0xKP2iDdbJ9MT0qmWKwN9eSDGos03QDSw2zmZJ9eDD5Kcvn8gkGWKOs1Iyqg==","signatures":[{"sig":"MEUCIQD5Dpzj76IWmpQM8WVr4dCNosa93dOxeBn+NAgsYB5grQIgRlf0oMM8Kxy2WQsrHLatMp2AM1eSdqY78b2aDGJgfF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5US7CRA9TVsSAnZWagAAwGQP/2a1Slwy/FCqwokWHZ7j\nLl5wqrHg5B4dPS+GvHkqEGs9T5zsRet0D/e22Xr64oRLEUXv/YZFpN8uVaqx\ntGEYKVQqecBzMVeqHLfQKs6V62scsWd0ZDQhz0MeOo1QGQrkHAvJvzBYV+pc\nIdEdd5M+jA/veJfUhUD91OT6LWli8nvNSndXRAfjERQa31JlaipOGprggxMm\nPM34D0X8iugBP3OV2DmDU3y7cC3/MYFMrw/msrnDkitvLdPt52zx/l4i+j6Q\noukUng7fdeP1WifGjTdx5DNHxpubepwYeqUNWQC62tuR7h5k+mw7WkqMcGt4\nCm8AF6azUatlwVivb+uR8iqCmG6spGbg7X9AbEashMbq7E80sp2mzVRY/M5m\nHEBXKy3y78DpIhld+V6S4XXEyNZXSf0Y0EpGNKfynn7ozcdMDLm1HTux5QL/\n7pXFLSrGJRgZlQmYbm27/To8tyUZUkw9R6nIQDRkDIqu2kZpypHRB6b7xwvW\nl413hbB6IvoqiDhpkRA4Xkt7o3NeL8n4JttFlYC3F2ldznQNQ0BS0Nxo0sKB\nR+mIiiK850OZSc2qnf7S1FDD58TFBAHjPbNToCHKSNMpZ6QMLAgBDDNjuxxt\n9OE8ZpXx+lQ60CTq1n2z0UX1BO3oa8okwGgo5eT8mBbmbmtV0kQtQCV0fLoZ\n4gE/\r\n=5TEk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.f978109c3.0_1575306427051_0.9719103148865504","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/theme","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"578be3d9066b9edc9baebee75cea61ac5fad267d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.ad9dfe706.0.tgz","fileCount":14,"integrity":"sha512-gnPHbTluig6bvPJtZ/ZhvgpG7q113anv7hMGHHCvPz6PBQRUWT6NWaNKFkC5DwqBVJSIY+OA2yrAUrZ6V2Qf+w==","signatures":[{"sig":"MEQCIDnwJ/1Gp+inIXiQReHx7jIuTBVM+63tBdnGmRzB8UqgAiBIyHBYfn6WDOdGYyl0fiEd5q+A7Eff0w4MSIr+NVp2Hw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u0aCRA9TVsSAnZWagAAbxUP/1GnQRS36B49/whvlDa8\n3y5/Ug09llUtCJP1RQd5HgtdnVg2lg8SiEdE1aPg1zH8hHnjLLXFMzO5SeG4\ni0D3pGaSk97C/oc9KS3OgkIA5iWUZQxJRYF+zVf+pJ7erJhqUiEHX13GQrCB\nzRrChX1m07bNNHewf3fLUkJ8brx95lqUwVaqB3jVSzwf81xe64DhBh+g/ZXe\nWZzT4pCup6M+N8izV+wLMCb3DC69OHg+cViLKqxGRDzNFe3kx3ECs0D6uIht\nm1EqSI9RpPoO64khkNoCGbERLaZJdAkSbezYsUtYHsFiGrSr7QGQISrQ4l6n\nLuF/9dDrru09WmazB7F3VqU4xWePdqJc6dbYQTSs8K21mS1co//fa5/AH6Fg\nvXfjs+aCUfvihZzIeX2koa0p6jznRDIzjWYQ/Zychr5ap3URyMMFHIXtLOoT\nVpGqDbLVJu0z/Rwqc4sqKuScmd1JciAacG+3O2/H/DOI40O9BwE7U+F9Afe8\nQbIsSzkiy2Fq4BluzLJMm7VYBXjHSeP076M1o8h8wCWN3m6UkkFELUjO2SIv\nZQidUZw0oXniWAPlkSk4pRpQLMg2rPuSY6Cs5D3XizUeu2Z2FvyWP5IZOh6z\nakcoe2WanlOs9KT0lvJ4GyEbvjI8DVmLKddTZWjZdpRBRmLugj3qogBEJ86Y\nyuwJ\r\n=ZWSN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.ad9dfe706.0_1575415064892_0.9358112584857277","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/theme","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b349b09826a173d82852a0017bf10751ddad9cfb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.5e45d77f3.0.tgz","fileCount":14,"integrity":"sha512-sQMcfH0DcFEWwIpQoqL+NS5GZyLKi7L4XR4btg65Wq+yt8iz/uv0VNj1bUE7MsgFB0iyNX9I++Kypw7TqNcFeg==","signatures":[{"sig":"MEUCIHGpYoj35cQlt1cf+VqtZVbGP1j+FQAmlzphYJIFlPhQAiEA2LWCzyJ8fOureJjQCdsCFKZ3M9S/UArVugeAUHfxslE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1eCRA9TVsSAnZWagAAzNYQAJ63JumOzVmqxeSaIAK4\nUX2SzjFy96e/ibgkUCzG9avowJ32UeKOez5p2KW0ZQ7fUgxja9LQZGaZJxry\nAevP3pTxdB3ExIMDlAb9OA0dcv6/RnpETSqVPw1GfqDs5Djsob7W6Vrv+I5T\nsGFtn5y/QHIt6XyyiEhyUctuakK/f0Pw8RL/LJFZqwqvxojJKWGKroUP0HxB\naQrckL5/+O3jUz7jsOqWulu98LAfHG09bhs7A4JUyOSRO9P+ipSev+PP/4MH\nYaJ7EVa06jw4SJYwYgGOUz+Jrk+SSRMM8xei0Rs1uGtordsWnOhWw6TgNhVV\ndIG+0GzEHrbKpyYu6Q2LCHs/m6A0ZUda/fJpJWiHZVLl++ALOLZF/OOuUXAp\n6IyS9LsTUCYNZ5VM5nIyDjTyEH0aOAQNEBj0EzdkSL4NnVf5Mm+AOHhvD1LU\nM6Hk+4FaX61TR9hirFBfcZSPkgMWauW8seeW8QVezpZfgY+N2ztGf+IgIJLx\nj2z8LqjynFAyUG/oo6WZBuiq9TPIQAAUjV5bM/9R16Q5QvrT1VGE3xRhsGJ8\nnjUIEYwA/wUJLDBFYEXyKuruojLScbAw0NBgIFKP9jiIu67vYDk1NhUbF7fZ\nVLMrj2pHUvcVuhMLBgE8ZG9ZNJrjXJZc7k4z44lkWEl53Fdeq5e7z8ld1ksk\nzTv5\r\n=LrYI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.5e45d77f3.0_1575415134530_0.8126608586555684","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/theme","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b313fd5e6cb1dd4a3e5b09f07dde2820c5e773d5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":14,"integrity":"sha512-YwUbL2EjgEB6l609Fm3ROnHwAfg9CiBQCikDINlTBRC3jRV473xn0M9w2UA1v97deGID86sXhEx0WuGypHrP8g==","signatures":[{"sig":"MEUCIQCNCOBAeGUAqnCYiD+PBz1ReyOC747dEN9cH7RW4zvxWQIgUsxNH8MVv3tyL4vNvXQN13XbZ8UU46ptB4JvV5QxPig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2XCRA9TVsSAnZWagAAINgQAJSJlpC4rAYPb6h4cpGU\ntVaWI25HmDoBNZObIO+z5gSmX5UmUN52a8+sq9jgBukdrSZ2BH3x8UsInrm+\n7kt5F8N0ogUB+WLRMwOo07UtK+UVeyH1MvUEHJ0Khil/AJOX0HYL5ntK6LsR\n221W7DAjczOg5COKS3T6uXgYLpBQ61j3VdvFed2LtEoxEjD5BHKCkPH8MW/4\nSvpt8pAjL9dfmx0WzdLqAJ2JQ6iUXzN4dT+LCiQe7g9jC0Grk683U4ddWhkJ\nTv0NhNYZWDjsek7gxEfyMMziKp/LKitkUqNRjxw9W4jWN1wy28NJMoOqMzLQ\n5XI1sqeBIaq6HvL3kY2WSw8JckqCe9/7RtX+v5XSqtPFmZY4ZcCqy7EoZMJ/\n1c2Xhq/TfIWZRfg12GFHjlDzhErt5UfsehzZTKjz0v+lxZhTr09ZElwb3fLd\nxWi4HP3pbjJsVsls9JKAn47WOPaSozsGbe3FLYSzXbNsRHjSN5qrv3j8cxDa\nEm01HGNXKUS6ST5a6gqNJe21el5HSCnPeHYqPkvD4WppEBOlwAc80hR0izxX\n+yCYcTQQpBNiAKAPfXPQLt8jygPazoZVyO5shSkgWUAThIsvSg7c2ZrQzQ6u\nY+WYjfnWZoW9u7rL6a8EgQcoKyvYJnD/ttHyGmie6LOuzrq1ZvI6npxjc2zs\nIRus\r\n=N3iP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.d10e8cdf3.0_1575415190885_0.8244863407870058","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/theme","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d9bb847de4e620c7a4bd0840e7d285f524da9a4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":14,"integrity":"sha512-aJfL5qju6JEMUL1NopbtHeSZO79gsre0CJyrslLE6NNbnxzeezX85CYu93LWU+7ze5EJvQiZ4hKFTFnBL+GB6A==","signatures":[{"sig":"MEYCIQC9Zd1//U3anXuSWsAQ++KjRwxCDy8czsSdA9mfatVDDwIhAOLjqckUakZnwDjsiihPn0WbkkWrDFe9InGMgoGNgR0G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXDCRA9TVsSAnZWagAAyKEP+wT5hTe9ePhHtvaye8CD\nDIdII4/YSUwkPiy5R/1FrI7hKTPhsTdM/OWklAiVgXUafduoV3EGf4pT+AEz\nx3IerR0j9wGSJUInlzFjqBnoqWNsJE1CPkz7S3bgSYdWaGbB4Zy9qJyLNQ3x\nuFSLqbYcGxY8tVn8LW/4bkJmMGTkK0sGpyxwXmXgAgSfQdQdUX3DUwW3BnK9\n+gqIlQVhDSSMvbydj8u1GSyidXzcg0q17ZjHLoSosN213ao4gTOAwrvn+17c\nkZonyx9ca9n/0AfMbqyW4NWLQu6I4rOu8UM8FEj8kfVWTgx7lXm8OIwGyFD1\nCQ8EPgAAG7+GFStXlgNBPUVtOD46nT2nutbGHn1T6ie2A82r9WVA3RjP+Ws/\nwak6h7PsWDS1F1tNMqBJH8Foty4Bzjj2hFgFT/HDlfqN2BUNYQxQgU7lGZo7\nC3gYAaKzk5Bf21e9V3XaYjWME62xMLFZoiEtN0SKlcA9thjihyi0UQR+EsKi\nuT7MuEWw4k851afC0Is082kUodemiaxFxE8sEq+xFvq5bLo/WJY5XSdIT2Ks\nA/lE3OhGTlRCAvsUBZiJgGLG8P6uWjbY3BZYhMptCqoadKv0XHThtp97LeEE\n2PVnWcAlhQD5UneAHIZ6iW0jeSGEI94+9ioCAWOWVbeyimce309pcIOkvoAn\nsOci\r\n=ffQc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.a5dbd8a2a.0_1575417283174_0.7143138376114206","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/theme","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4895ac1acc6f08b66707caa332a5f8e8dca581e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.ba879b68b.0.tgz","fileCount":14,"integrity":"sha512-0poxKjYiX3vk0r8mMYFfEtKOLYCN3/bQAZZW6JBDuTAXNuau9Ec81FrIIMTUwAjAXjwoF9n/TYfpTz+I+iOuOA==","signatures":[{"sig":"MEQCIFrCHTma/aiGtqxc5Q04ihKOyKhZl/2zL/yYKxHPR0S5AiAsvn0mMIWZclpG/xHc9CtMMn6FRxbvmW1HTrpC7udtRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWBCRA9TVsSAnZWagAAM4oP/ApHOy5+tcMikezGNzm3\nHr8m0CBI71Hm6zR2YgSkSM16KQ4JtZQNtQQ6eg+otxnTp6Zzb1zI7n6AL01g\n8K0j8K/QgHWvt2q86+dsQxWKHWq4zkZSMpTdxb3SxNjuHM8rGsClYN7nvCPp\nZZjI6iD5lAjwSsTfQcU3hjw8t058ZdM09DlVaVmI/eYQIOEZJj3wYI0OWYFH\nDHgh011RCoEkD4tPDYecekHKRMFTj5D+pmhTBKeXZiwJhl1oD6dxPt9kNrc0\n6ZVkZZ8kbX8sotUA1uP5JZcWIjeJn6nedaVQDsUXN6BlUJS1KIE6V1jEWDq5\nNNG/xgv1VpugQBPOCf62D4Pk/CKS25oi4RzzkX4HkXKYWIKc9hL0MBgOooQn\nz0jNasLJncW5ATXcG92oh5D7gOXsoSdhMKBmS74U2eLYkzk0uNdMZaRPx/n9\nEe2HoihydfXD8eVXZLjTdbKjTPiN0QT6cYu6HTxjSOVl8fIEFXsb1Is1ZIEo\nPo8qKNEkTz5Xm0OekVtfF4zREDnBEaIgFRYRzmO+mDIhJhxDK6VG1iHFhO4I\na+dER4gyQ/0jg77XF0Z7KthUWWcz9w3oc8ZER8YLuO5Y+wxQ30mJnsk726T1\nBJ2YHLTYZMTCKP2dcykmvQihgn9CtiBQEToUsc9kblZZOo21fcUuC5Fc0oY8\noQxF\r\n=FAQ3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.ba879b68b.0_1575490944715_0.7966769252334827","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/theme","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e14ed87a50e1a4d1cfc03f2b595e25cf397659e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.aa0eba489.0.tgz","fileCount":14,"integrity":"sha512-E9SXQlHyAgOACXo8u9T56X8xszqSmICzlXfS3kkxO/6/t4d3JsXS077tzlUHNTxEozj06gCDf+2r0+xhk/adOw==","signatures":[{"sig":"MEUCIQDMxHJQtQRmrRm3jxzEgq466exXBh/FX7GDwEL3iX716wIgajck4Mrj6ZcOPlAbx4QvUP9gVInqIf42i/tcYd1ffaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bXeCRA9TVsSAnZWagAAo0kP/jjjWxNKOL+FO+mvMvCX\nzyJ+hhxP3DeH2DoZookCZGHQGUPwguOzG3CnRxPgGcHwa7sCyvDABGW3v+YD\nRq9hjpswkr09pOksWj0yXp6kOtuWMzZ17+0oEOKHUfp/QklYhWHTpe26viAR\nbqRNV5bViW3TMFA8UDyank8058RiIznJ7b86dgfBZhb/qWTdn94gKiIofCzR\ndxZv4bQGH5dxvdUwecf8jlJ7UF55q6zoCYbJf0OYtAv4kK9K4wNTGsRfgFP5\nLV/JR8FPRnm+S8sW96z+QB6JZcn+McssirUJOzHpp/uIGIldkgZ7RvdfCojw\nLctMy0rTmHe/jpUKezVD/6vVZxVSoavbh/kSaRawV+whEtidk+3vDo+80N/g\nzPaznq3xyYqY/JRTnMJ4lkQ2mZaoLLSOUHCUNGNjE3pQ+GZGyAyw6Efa4KFZ\nPsMua9e+chgaSIMNbu6HUiKM4KJMLu5KATduxqjc4BvBOl07JMUHgQoKgGAW\nurl14IHZdFEg4v3+WSFWgR5Tq/IXRsMnpQkQX66ECtds8OF4/eeUtcAiIDw4\nv+uIiJEAUlWOX3PbxuYBD24cXHIlBNWz1e/p2fvstUwZ+/xY1b4CRhAPDGdc\ndjkJpqPeG2HDWQMVP1KYwzQJRLB1KOISU4xXBlxMOBnNwetWNo0Cnbnco5Aq\n6OQj\r\n=/UyY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.aa0eba489.0_1575597533748_0.7438175453338418","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/theme","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3141ba0f56daa7c76e357b6fe7884202f75c49e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.cb7b71a86.0.tgz","fileCount":14,"integrity":"sha512-gUMdGCApXoGoIC8hdNPlrAy0cXMhMNpCtMVUk77ogRT4kSoVCgxkhnKSDFdKUpLlYQCBJ4MG2Ojdkig6jUj71Q==","signatures":[{"sig":"MEUCIQCQ84qG1OMDQFzeC383L5HLHGfNGB1RWizGBzyNRyQQ3gIgaTZlRQ5ApvPpVodEnHlxKzBn0luLfslAn6EMQwcQzBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6up8CRA9TVsSAnZWagAAyrAP/2Br8u+EwxeKy++OTRmB\nmUzxxt6ZukO1nsT+ltQLELgh0ain89UGQ8VmINFNAbqiKSx4PCfl/gB0SLIU\nPioO2jwFUFexSDHpIpCRjcD4mGMtrb9twGRkh77p2dmGeqHvMI8OgYfBYbkQ\nbPTr7twbiOCQ7+bA0yNMuCUU+o+GtLZBzeifDlGr4QGbyvMp+5eZiA4nQTKC\nWf4LGmzbW8CuSr8h4FvAu8acXAt5qtigy1H3789BjCBzPF33NBGxHDkC4itq\nlWoM9hxWNdW4ikau2IzqQa3CNxbf6s1gWxWg7EsfueMI9FMO0yNexWBjaHUR\nf+wboSLWR5hSv9ZY572a3rMaJeDNEtpN6ncx/pN57gvoMT1DKSEOJKW9sjf0\nqCoqW6IdmPu3MmFF6KIQS5h1jFy6lQJZUjdklOiMdHxZxcfuJy7zR2/nDFuz\n5ACalT0uqS6L1+Oi6+TgCv5zti4wCD+R5PFVpprlQeOPE9ZSmopCNrpzTGOS\nSnmR0C72EQLeLpdrxE96Kuf9hz21syPvsvSGElQyjo4oFs9aPHfJA0UE35ff\n5/ZeXYMVm1GgJ1X+qfax+YDrYV61Q2D30sl2WHec3snv+grHF1ITJsrLQ0cl\nSqJCpUuNTMMxzYJs1ivJbhDPOiHCtfCuyeAtddR52HJy1YLijdwdm1T4xPkf\nPQSU\r\n=uzV8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.cb7b71a86.0_1575676540455_0.8815204609687464","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/theme","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22a9439216a2a58ddfef9673272a788037471a2e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.50f110a6c.0.tgz","fileCount":14,"integrity":"sha512-TgJujafdFIX9M6J/iwdzkGjJXNnj+UxupzDrlJKIvWC6nU3PBmQu7A566C4cFqatp/OHHsYKB0u5QqpepUbqxA==","signatures":[{"sig":"MEYCIQDYRvLQKcOsCotavYs7AWYAgU3sLWNT1TtZcez2jpPg2gIhALfScJMQHn3cZ3qv7aV0uB3zwkeZa7Goy2C91AMrZclq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd787pCRA9TVsSAnZWagAAAUkP/29m5I/tV6+U+tamvmGP\ntGaO09PEG5T2TpAPT0BbZIjX1zXJ7m44WUr0HVDbd/eEdWIuH4eU4otpslet\nSNJEHcQ32HdZXIFbVvNFGF6BoRhlQJIBTeXaGyPMzBhoqQriZrHs5YyhVYkL\n9sjqbIwMUv8pcCnj5xljx0RkUd1byGY6NCAbAAbF23bEt0JoYgpgghhCCzeK\nTVLfHS9H+oFUbaDpJkKEgL1ITXFt16MVyNAuB6lQDnVZ+CDsjMmkPz8yUH2T\n23tp8NUysHYSeltmMtyVuf1yntn4j82u2nGeY2pOFX1ASVR79qjwAlk3R47G\nTU8p7gPL+S6qWFPQe8z9WVW0f4nbSAfnOl8R7e/p5CzeM5kP09/jKnGgnUOI\nltiWzOtoRVcSgvljwEUYSZ/1Xp6VH1ljeFyE3pOTXpU0m+elk+IgyyB4MESN\noiYIIpojWuRiJKhwODiU5/oQsk/HooyPwB9VXzy+CEmSo7vlqJmYHpWLRrJX\nK8VR2MWDEDMvsriGigFtMkDwI9sBuuieeUYDWAOCQtfNb2hoX8CR6K0iSJl/\nwkIfRNRbbtBJNubCzX2WiucKG2rIFRlwd5WNrjFoYb+cUbcFcq2y3Sw6BkDU\nk7VG3HIcCCXeznTKjLjUnTpNVJ8aFCA+flXV6DcMRYY3fbflpZ6XrFSafAvZ\nJ1H5\r\n=M9O4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.50f110a6c.0_1575997160953_0.0001703552639056305","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/theme","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6baa9664919b8094eb49ddd77ce739e33969d44","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.878a08b7c.0.tgz","fileCount":14,"integrity":"sha512-ZMSgqnqRZMofGzrULgFFovh4RublYqZa41x++dqhHK4guSIeuU5tjFjKaOK0XwhSGh3YgkZCQzuI2ZpjkQqBiQ==","signatures":[{"sig":"MEUCIQCEFFBA37rF/xkMYr0J0z/z3/Bst7VELFynvNFG2+f8lwIgcO8vzPkHZvGW2Bf7ST08pUJ+fQjC40KsaKXaUJei/lE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6ECRA9TVsSAnZWagAAdQ0P/iEIuy8C5WIEiw1Qnhzx\nz3/nVCUXx5+egYPrG4zRtShnj8V1hVOHQNgWXQVolNYPYi9hMtbjjw2iYZKn\niBJzL55DWhrd5yYHF51i/GvMmz6kpI6VkkalSBFjwBmuIW1Om4ZqPvR1jA9O\n7+L/KUVjcAOo6QHbU6oCERQB4Q9rpxbTYNJ1/Z7dWsLh1AKd9b0uW/mMnvO1\nXsfY7lOoMqoIdEYbPJXhJStvVf+qsPSrQX7ehq0dj8bfHyjqtISXyQlY+XC8\nUI6ZMY4Me6viSlKNJJSbjSgTy6whZxb5ctqUsIF1kPpjg+8nghKMLO2bBenB\nePTMeMJR8TiX60Z5J4gO1b2kebKQtlh+bQFlknHSLpx+mMZ/sjXG4QmlVba6\n7mcndy9o+xohFwFY6Dft3NT+zFesaVKLmNu9YFli873zvRKKRJ0AKFDVfcLt\n64nvetFhwTtyXBoIiShR9qJuPPDRFW4g1NF/aDJzBWd96Ht4szGlcY19pEjE\noTWCmPwiesO1qzDOZ3Rub+IQ3ORb1QXsGLXjPCLJeWcp192OGi7Kd+8ye1Zb\nyx0XQX3xAqu5g6GACDk2HyBQ5GPXj7fQNDmW9uzpUxlwwnzPRp+Ha/bV/Lqy\nh9c1gABXNMa2WbvvY3Nm+T6tygoKJawZElp3WRPsaqvTDFdkNKQ5vdLCJzhw\nT44L\r\n=ucj+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.878a08b7c.0_1576095363931_0.8956002950608142","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/theme","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.397905b4e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"560dadd42d1ee063e347ffe743ee79045baa96bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.397905b4e.0.tgz","fileCount":14,"integrity":"sha512-KWMfLz+mcNS+bS/4Zo4aoBKDejTowdXEQJoWSKuDunL1psMZFHSs62AHR0WGNnsBiIVQYyPLgsYZ1lQkHR7NYw==","signatures":[{"sig":"MEQCID7KAGgWLogCYgNmf815hnXTsVFhlftY922gtjsVzVk0AiBpU8gvIMCZ8LMZY92k6JfERLERjlJ5MrTWz4HyXaqEKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8aolCRA9TVsSAnZWagAA5M4P/3RS0qWrAP46huFeymk4\n44PMUM6NWn9kQAE6Bm38zWsAPj4GGMG3UnKvCOnYHcUS9r93LQUe7QqXS9xX\nrufePehaIxQ61hUo7PADAvW1ZVcLzzTfSSpoKqPozSDFRA1RWTr7xMXJ2cDa\n/hIe4FdYvfCZRCK/09gVkwGATXZhyoFQ8qG3oxrfdkRgi+MU42ijc7Npi73I\nftZ1qvGbB5Sv6LmiwxWEyBPuJEsZSUTZcrqKzHLZIDNf7hA43LvadLmIGche\nkb4yCoZVGjMDLalJ9SqPhR9WKIIs34uqcld6i2yq3hljCEGnDINtxkzgr9zd\nUd4I8zTqAIO5Aa4C2y9DM9/6r5i2YmKTwnP+JZXY4nh5GbWTFmt9U/DNfKls\nX42cpgpJhw8mX0ndOBn8lgDG/cjHR47HlUVACXr5DUTDhXzF5yLwz4wtmlda\nzwCCRYPLWeCPuA46xM5NNwnvC76A+GoXyqx2XWvArATT+Y7D29GD+6KnyfYE\nX8u/RW+hQvmHgPBLA+8fdhq1rzg5i7zKyw6VdRoBvTD1uv5xqpS/HOPET8YN\n+hU5Mro3otc6NNZvoU7enpNrd5U6k/9hkgPZnHvQkfpjdt++V4PX+nuIYM86\ns7A+nnnYI1Kb/HRBTScmKfoXtqzu5eC6NWLyKtQEqY0sZGBfqlmS2nnOdcT6\ngIZE\r\n=QCg7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.397905b4e.0_1576118820696_0.3814454127529945","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/theme","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f9046ea42975aa3e38772b9a6456424eff0d2be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":14,"integrity":"sha512-Plk4PCLtsGcs8xm8XwXkBywI8EZjMvguzhiVfK82C8xzUP3yuAGBWomMGJoSOJmukyFs8L3xyqi5RVEwem0H7g==","signatures":[{"sig":"MEYCIQCF9xDqLXqqIcIhNepu/p3tGKZiRpU5ttqm6VAjxJSs8gIhAPtyzdND/dQ26vkImHcGrO7iokq4l0pnickDH3miZ7jS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o31CRA9TVsSAnZWagAAOA4P/RoFj3vwAePLr4xWqEeU\n2zIeEIEs9A4wq8R0BnjMwU51oylZb3Txan5jUDFG6dSce1dThUYb2h+V9cwA\nNu67tWpoxKPpxXNNu0KvZRF+IHm08GfQe1y72ZkNiac0ya/p9OgdAReoHcEz\n/FNmq2QCL5zhEn6oF3ekJPZWzBhexoIft2eADjgYve5EJfWG5YzexMpDWgcL\nSd4i7lOL1+ag6cgrEPXHROpw9ndHyvtvZaOTka+Fi2pRH/0WcVJQbqHwlX8a\nqb2xKHBUqH+kvTBAg7CiA0U0QaZGWeznF+/BDEykw1ubpf9+TDvehNbYu1pG\nmmix8AhatRwAf95g9g+EAc0gW5mY/wRS7yhnbAvGetYRgYs90run/BlLqGG8\nWUs9M3G9TVj79wob7ve8BgqSFZpMpy8M4nsyhRpAcGzVrnZzg5AHNqhoneQA\nHNWuONidWELYQblakBAlUtH+sDaCRLkgyXyIE6SsB6vSbYNaUZZlQpkv+eIn\npSuLpXuyWogEJPyBv3nSa9mp4c/+hXb/1HIjlHkZUbxqGSPcaZShawDi2cx/\nzoupLG0NCBOgX6jOo3RM47MIMLv/8cVaQOJmvalDNGCidmCUrSdhbl9STP9S\nmt8mkzJRFmLslxhAIsnTusKluQXg9nrwHDdw+gioMcFA+ZFrgyw0dc/gM2vT\nueNk\r\n=LUkE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.1fbf5bd1d.0_1576177140229_0.5170576117530086","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/theme","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65baf93ba53c81b333ea94f383759c7bc2eed1a0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b723dfa78.0.tgz","fileCount":14,"integrity":"sha512-TWMZ2Ym0orc3TeROnbe8cZSHSAk/8mvypdIKlH0oDGxoE32c0CQ5ekat1LtxizYT0lvUXrB9WBnJjrKLcbqmdw==","signatures":[{"sig":"MEUCIQDH4XSZUvUP0BAcwqQSce3XKDN7zZVtW2GLJjZrTOEopAIgX5pU4HkRhKASPynRRbPlMgiIGkmNDb9bv25Mu72n/po=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p54CRA9TVsSAnZWagAATy4P/RnAyp0LWFN6J26PKosX\nQ7BLcV1vXVaAOTNOfTTTV4YYZayI+bH+0E27pA4adB4e6g7KlGfpcuLz6Dhg\ng7eTSFMrzKXpwSt72r440AYxmOHfkE7bH7Blltda147iIGnMA9F3m8kInK7z\nkz0/O6Sup/wtm+Y2BuaLKQDFqPO+OKOGTZH1GAcJMdvwlP6IfJzL/X8nhjgX\nrtRnOZmB3MX0gr8I+F1i5lQr+KjJK1Nh1PLKD2TUPfcWh8Y7t2YlBv5fXh04\n/RwW+HIU8NDk3R8jRXu1P+pWE7qW2P3AhFLYyEYF/3EEk31ZhqwhwsjksDsy\nYfX85nT8/cUYZSNNZg6lZsja9CAPKwebg5gwkJ4Gjj12OmE4COGdNU7e+jSc\n3ifEUsJISAoBv7ldHDYNmoZriBiwvfaKiak2U+/+pRHh3fnj7lO0yeUhPdOP\nENogLfdgq0MVUsz3pdweb77SZJAuL7hZNSn8iqAmDpXxFrcEYStrQpQ6qg0h\nA/6s+FsWDs9cFUmHjRMFqFj5yvuf8rkNu31FlyC+ChbspH5UFfWAfnQZ3oAc\nZkglWHr2re+xREq+8hYtbStbyryu5x2HTJstA/nx2Q3OP0oWNIqaCt9w8p0m\nrROuFGVdYbAuLoQGYcsEqdJa4pbTgbN4hTJL7cbELAObz1BUSmOiBlTtr6dY\nd6rI\r\n=Qslc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b723dfa78.0_1576181368093_0.4626844971897799","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/theme","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.1c494e567.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68ec72bc85d6dfb5883f83895b90c6c5fce0852b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.1c494e567.0.tgz","fileCount":14,"integrity":"sha512-U4u326P7h3r3dz+0y3LlqlBqh2oyhXdpzuhdBuhVBKyW/3cMup+BWMBaNBcx/W9igFKWdkk5Z9AoLguoDpBLqg==","signatures":[{"sig":"MEUCIQDWek1s1MuEnsKbvzqNSd2x1hHgchl2/X+Q9gJRm33rTQIgATkfv4WaTO8RbIslwRsoYhcPoEStmszBKnWC5M45YBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s78CRA9TVsSAnZWagAA2HYP/3Xo+gMUAbcGfls9gT0J\nhlpd4Y1R2Jdga2c4rPQcRteRrXz2FP0n/E/xXnpZbBybi+AHHvwwNeHfeCGr\nFYH3mAGSGMV3G/pJnkoa30LkmUjnJJbR3o3bYQWvllmVszsG16uIEDmSk1XF\n6ErZ0zjEyYgE/guRnTljpenEUfVPd7XH89erORAXvwDG9uZ5W2mvwyi/3TBZ\nDKMHGCe9gLzHZL8XsR6tQOHxTLlhHNbdKGfruNYdrIqv6a8sHdwSKPnDQinm\nOS57uTbOc5PYSlLqzxn/TQMlYa95VwArqAFpoNdaOVcI/45w8+B8pvE2kFnY\nhNea0vTjUUaE1kh3v+Wn1V/KcpJTP1bnApJwMfSqkUP1gqXgUk5/SRjXxN7G\n/9gw4tdBm55OCwyRwz1r4OVZJgk8rgO0wnT613SP2UMjYagvFuBs3/7T61BS\nuvTlegvPBmELxGFFGzP6ZhX6sQ6ZyUNPTBATYLn+hq9I74HzV1Jv/FbQuYoq\nOcSEqWHgf9NQoSK6QsIA5AiLCJ8N/SHdYPQcnHr7ghQ1Wr66wPotMOwYf7Q3\nhu+grYGgqBBQip00LZfYICucm6eEHeYRdBa549AmoOy993+1DBKb9tvh1jrj\nE7YRAZ8eowhSDIVcJuLBpfKf2VapAZxf0U5SUKwxf0WDJmxAyI7u9zPcF74q\nAyap\r\n=sFEq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.1c494e567.0_1576193788205_0.13792437655608647","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/theme","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e95d5f905d248689c7cd61de48cd45a56577d37","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.c9e98a125.0.tgz","fileCount":14,"integrity":"sha512-MrSWFyhnlGf8+te4xsfP/IefV6516Kc9Plg050nOnKW0E6BJSK7W14+XiqKeqHlPsodDpjAg8vuKJFaVgnS6sQ==","signatures":[{"sig":"MEUCIDP9MDVy3KL1EY9PEgsl+mkL2mUmRVsb2z+6YKePsQl6AiEAqf7jwPj9zro7vdPaN7G3uDYOSAUqSarbhXmqFK6PYzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RnXCRA9TVsSAnZWagAA8YYP/Rrmm56IntKvuwcmx7fK\nX37y9AVQsKjCkDY7LljX8yu1qmBiR9c3p1Vql2hlycIcza8A811X4zYwoHDT\n95sGNbQkht3zrVb5oq9W22CjZNUHgijDdxYDvOjjYxav+Igd/CMJPer9dHzV\nXEsY8/nwjX5IbWA0xXoqHOvdIB5L3po56nl0BB+ND2iFhm3N1bkJmJPtY1iW\nXrDGoJhZKUK8Y5EQ9w5HQ77+rWzvzmr6y6av4ijZDKK5wFueKq5tJ2CT/B40\nIWgDHoOKP8BCa41jLwt+s3ReWov941ScNbxq5n7t1gkkhI+xlvc0tDFAP55W\nc8DPdD0lCnxWlOzCA/AQEgL+UmYFjFVCghaU7yrWC9EKkf6HbXsoE8+zT4MG\nYqJevi8Syx3VLy+DERPbiexcTlFfqD8nO+E4z18WFb6iHeTlABM2zGzM0aE7\nMwWDd5zIgDcVT95xp3d4XvWtBbT+5fM91RH7oRoRIz45eefwBPBNXBfNx1BJ\n0zZQaBe6ykuXYU83YLNHwYeUYXP6N/x5jyaWTVyOJXoMyq508/3mEI8WsEQ/\nfPJWM0A7NiqWrt7zo09+UryyZqnFv3b7Uag41HrKFmgoAeIXtc4r15LECkMg\n533mZJNCzXZYEyzcmCCGqQV5nMMauFm7eJlXoK+dg8QAuDRKnV4wHl163nr+\nRB2Q\r\n=22CS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.c9e98a125.0_1576606166318_0.7505321409165078","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/theme","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"672cd4f1f70b4c73edee7652ae2141d907110967","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":14,"integrity":"sha512-KsZxuE+qqKx3qpfjwCXFXleOTrUWUMKEDZvmvf49PpJxT2+VJAN9XFEx0d7R9khmIo/ZQSvWN9uDPt5ONaOCkQ==","signatures":[{"sig":"MEQCIHuCfJYZ0JRP4A94khjlGqzr2b74wI08ym9fpXz97AaXAiAC8s6F1NGadeBUZa6xMUSgj7NCPs/m8zYMF32B6e69og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VefCRA9TVsSAnZWagAArMYP/0t62Dh9PmodVpZmpdvl\nmkrha9nLNk8eC0+XtdA8uC3DRZ4zdPEnyak6xkNRNv4aLoIKmPqRb7pCY6UC\nop57lTBRY1GKXRTjs1u2OqzoT0O2zLl+jPesI3hULdtWYJUurqdqyV6FOram\nkyiDSNZiuS1fynCoiltHPZHqSu9anu82DbwdRofA08UVnZEm0VdGROLxzzj7\nJMKu8b3+sR90CQNRg+6UXDfilBYUk4wF0vH99Gi/WU+VKQDM6b94yrp48dL3\n4QomzGXx8dR4Iwi00QAwmnggZTv9qhvKXqeza7eaVpNoB8+K7zbsTWHV5RSs\nMs7MFlPeFa8Qp2ePeMJbFVyIMn6qJwugwS8GHgKyx+GlIR+DK2/mIoWH4e1w\nD7PanZukuIq/+oqRLy4ZTusIqJMlDaJeGH8FQtLRJTuUKIqUh2a0pKhnbR2C\noheBcbWzGgx5s525Vnr0aWaUymv5Pfs5f+p+zWhSHzRSCXthDAM5/Jfi9777\n5uvG7P9PtLtsa0InF0uPNqzpnZq+OxkOEBwuzdE13PlWxr3nroU//1YdfLDI\nwhWATAfVeITwUdpS/dhNjDdDAGpBSeq+rkADCip1Y/tuAn2X2SZPhHb1uFrT\nxjCY/H8MomSvxidh+++qL61uXHJOY+I3n7Jg/uZ9d//kJnd76hFSi48UoOLe\nqyut\r\n=RVcG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.5ffe8f7e3.0_1576621983289_0.7903446029584531","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/theme","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.47949b08e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18193e48f490cb070f86186ac0418c135a18de4c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.47949b08e.0.tgz","fileCount":14,"integrity":"sha512-oLNO9nnqHdV9TIAAVCLbpj2jtbbavd8OdHoR9VEwR3ZzrtcJqjQfDLh0WST0UUJnQYPxhzqxruR36WUsSauT+g==","signatures":[{"sig":"MEUCIQCA+OJ5p8S1lelFh6fF02ZkFoykLoVAukZtkhSRBnUqpgIgD9QI0HrQaR3ZlNC3jbHVSUICVHie7Gtm8v9dtQmoHE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSECRA9TVsSAnZWagAAYRgP/j9J5G92d9/XwbU5xnL9\nDMsFQiSuJTtmKIlsA1WgsJKD3w1prbmZgG5qgiA1Ftthqv+B0pvEgNb8Llsb\nwdjD/oX53PSnje8rh03Ke6moREB42ATUbYst+KYhj3Pup4qDL5rpUi9lyzb4\nm6zauK0+krlO7B31ABiqR3Pu6JUioztbF2hm1St2Mp1t9Uy0isgbxwumQsuX\nsVG5UE1OlHqSbRSwpgOMjk+Rt+qLSHwjUpfikR8+QqP7F1DKdgiSdBCkplGk\nzCxvz5icxDOm0LzzjAaPY64o2YjZ+d65pfuYpXFAK3K+PY6MaAsC9e4bLCOb\njySAYMbir+/OipXwB2Spkxm4Ffl3Tx0EiJIQj8NhEpkyegtrHpIqTO9k7Snq\nR4Wqt4B1zzkpUuNcaJkKd33cKUtXywMTXwBLGix3Vs/+7y0OMeFY/cOnn/F/\ncTQwL1NuQDaEEUWcwR0Rq762+nkI3A+MimiYWNXez37G18y/FhXP842uk2lL\nlWiCZeEJRYrZWWOh8tzrttHNzxWIVgenmpJP0Xez9ScIJIi66JEPfu/5Z+L9\nmZOmRMOGnqNh3P9NIKdzLRB6pfh77BFvVtAcOBJtBFMDIGFTsvJzkMr2o0dG\nkN/TNKgpE52mZLZV7Kt5DyPOkyBYBHwMfNtR2b0xjsapeVFjnx9Sfg8S2yIG\nZZ5b\r\n=B7Dm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.47949b08e.0_1576690819682_0.3943595853771884","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/theme","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55c082f9d3eff8e74e517a6c7da6f1dca628b31f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b240bcc1b.0.tgz","fileCount":14,"integrity":"sha512-QvD0MRnrb1WHua5EqBKQ5YgKubZLDSDFoLUns0Gcj2Pg13xAjlFJFCl3yNPSMClg/kKF/KcHL7JaPfA9qmQ3jg==","signatures":[{"sig":"MEYCIQCfvMUtRkxMnHghsg2E5+vUx6pOl1hrm+4/IRT3Phdw5gIhAIB2C+AMTdGnNUbSTyI6rtlx9loKlDx9PiAtKPsidjtO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsLCRA9TVsSAnZWagAAuAAP/05UwYjnQtpUCxkuICON\nFFWIJL9Jp47SV2OzCVeQ09oydOC8SESX2k8ncvYUxh9m2wwq/baW1+bAre6J\nnaUdukcay05LFVdbp2P+t59QBDxiMNu4lg3FZJIKWEpeK+s3bml9ab1EGY/x\nWIEImTsaofwo01+K/uHRuH6iwTmCiwnwb9VtAmCqVOtgWiAmqu7fv96vBC5A\nixwuGFZhIl7/MgbFt/QkM6W4d5jxrkkFJcdRDHTk5R0wr2Qh7+Y2vYKVJ6oe\n0adzt+d0yNTuVBqeDEmVVRRbyb305M2t1ohtibkiajSsuTcMRcTFCi2tcjxQ\n3lGvUu5DeRpY4r30UnTyiCI+1mAjQW7Nw6jzJy6AZZMhuYydNW9LR5iHXAnR\nuBd/911drJwlvoKzdc+xDiQyfx10BjqTKqTAT+LRLX0X+S3nK9TSqJ+Zpklb\npicynnE2GrsVDXntBkHNlUYtwvFJUgcDq7OUZIboU6qlippcPreVrPo7QA19\nn8mri1BH91UGFGoAMCaCqpmcMMBdp+mxRiPePMHtweGXr1wNdXO4uOCRBtRf\ndZO48wSfXrwcEkuLtOEzAnhyoHvmZ6SycjvuRx9MahdxNYMLoXtI4jJk19gL\nKV5NUEYiMslpIc9B6/YD5vmtQO9vT15VvCkw+YYc/GxnSF+KmSKLiIA7+vbP\nNPex\r\n=cLDh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b240bcc1b.0_1576696587390_0.21886189284107638","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/theme","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.391674a26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"463ada74aabcdda997960334b3b0f0d3c0818e64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.391674a26.0.tgz","fileCount":14,"integrity":"sha512-Nn4USHptgDEO5R8boDB140pmKRmh3t8zw2Efj3z27pv3K3cqK7/CMmRy7cLI/udVFEEaMC5lbR6XJoawiXxyFA==","signatures":[{"sig":"MEUCIEykl66g94CpF4tJLCLbL8YkvqfiYeKeccYhhKPzF9BlAiEA9+Uq/ZS3QVcFEfirz8R0ddeZtKsh7UBhV93QZvfO/VI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsZCRA9TVsSAnZWagAATf4QAIgnMHLxEbBWjhBCH0NX\n26PqFGZ+uC9yYyvldaz+6jZbyf/DpP+HKmTZIXs333NwDsrUEZ3wiQH+wmOW\nPRHo+YqcE8mdp3Txxn2FPN6wQzna2YOfJuWfLz8qWfS2n9CuUqZs/3OgqRde\nJUViQUXlCrPbcC53udpsU82OEBWPPsxRdnq5MgkDNXprhvm68Bcd63a8q/bu\n9iDVpI+q1SVMkhZTmlNM7N3+H87f0B3TEchEQU//di5slhESwfdEE2syZJSd\nY1G6VKlmnu1dnbBaa2FbSOCAzkEvdqqsijMUD2ZSNjUgni8KPaY1/nbuKw5V\n3KokTPvkpPUPV1RuxYS29BOllIVTXWtKvdPPTggNTPvnDfPHGX5pH3h6Qk1G\nNKWhhrkT7kjRmHzECq5ddTvarBt7numqBivw11b8GFA3/S/uY/n7+OxAYR/n\nuCiVITlRCIBZrSsLhzAZLHAkPAxxQANA0tRNEMeHAtfUkKEQCY2mlXGlFXHd\nzJPCC7AyRm7pZUbyK9RlrYP2PjLF4gauZLP9vosDpVbct2Oi8oJGC8c79vib\n86AP4d4ZFKLPBC0ogvN3UpEiITJzIgVpFumq4CTxNLB5Od8/Mmhm8l/0SDLX\nHc8q5SatlB5ILYGKpybvqblf4MYoh3eFI304fnPo8+vnvfgF1FZ3JU2BbPF1\nf282\r\n=cIVG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.391674a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.391674a26.0_1576696600731_0.34768811354424156","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/theme","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.c4837746c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"550f37fafde0676d4b82f52783429778d247fd1d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.c4837746c.0.tgz","fileCount":14,"integrity":"sha512-HA38pGu/slEvgrj289egugsRooWA9GOj2udds9LQzdjv3BeaHp5qJuY62Ek45qlA4ggGb8wNcg4H4ahT1uzteg==","signatures":[{"sig":"MEUCIQCz6n1rbw3JLqC9asXyZN6635t8zwOyn3CT1GUCMmFLXAIgTahxiqwbBkXdXubB5ZSX4GOqje7G6g/LJZy++jkpSX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n9KCRA9TVsSAnZWagAAuvwP/jAOBrtdtsJQxjxfT6Nx\n1f+tK55+fTBi3SeaHmK/YXcDR/bjnq5ms8jeeZjN9USoN9eNtyyXu/WfqAhS\nRivV1n3VxrdC4yACD6Yn1YYN/EAE3zIzVmIZXi/f9lWq5GaFe1M6cT5ujOb5\nzOZSxFkQsD4CI4s3jfuF6hCjGuIeV7I0sRmIEt/UwRGY5tai6nxwqxasETTe\nha7dzJVcpAUn5j5CcVvpzuFMMuqrwODAhBpbFt2YJ82SstZHbU6FK+5yXWtp\nF+iM4BOzXlzsvDPHKJ1M86PxWJ8I5wufOK5J1VraKEteKmezMraE3RLfq7UP\nOFFJMHgOoQ0YvRPEOE7oktn6/qaehg531WFru8QfNoahYilZLaFgHoA4syeq\nm5V/m1qFhNA6eTLN4szqdi0ak06wasGzA9bb/KMB4HSBNZVA4YKFJLA7kNRs\nYug+MHUL/DoB7UiUHrliRRlUWu+6GIsWFZ7DLkHcRXY88YLVbLUUOQzHOJLy\nGEbHCbr7r2Ptw1TAWrPPcxCTey0Hxygivrwgkse/Sb+QcHlMvDWiYbDgNioA\n0Tlw2IKwXQB/hYzjHRXdyPqzNl0qlFt+ivmr7Dtg9HFuQ63pgSAjY1TFT9po\nONzepD7j107YXFyKJdDlFof69RriNWW8iwxBQfCKKOVY8teDOu3Fmhl8MBC+\nHboG\r\n=DuJa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.c4837746c.0_1576697673650_0.3018313686392122","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/theme","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.e41a70425.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9896b2e18bf970ed33e84972dacb562fd37cf61","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.e41a70425.0.tgz","fileCount":14,"integrity":"sha512-THpmA59reX08AVBG1dAcIWq/q/L9o23wubGq8M66eUUVBgyeSvqECTrh+EuaXBH++p54gx9M/VVkAZ3z3TVaNQ==","signatures":[{"sig":"MEQCIBEBAQkr7BMdPnmLC5jIU9BRBh/o99OoXOie+o5OH/FbAiAnsl0Gd+W1mkZx8FOMve0G9tm8DQT+leuyg9eFjpTb2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rQYCRA9TVsSAnZWagAAv0EP/3mfrxSvSg4IXRn0g+n7\nU3I8NliB2GHYYibd/oety0ph2VvRCbosi18OYL/JEkMSRCmBQEJbRZCuyi5M\nO9fIY7yNqE6nJRwvvEwjmlWKXsCm2q2P10QiFeXZOemgo5vE/4rke/87jty/\noSP403yRMIesS1DaEdbAsD1wV1vaDa+aa+bAuwtdS/aDAC3OaYy+DRB7SWlv\nE5EzR5xlP4DS2r3rAQClaFCmeboP48KOa/FDodM4YifSvnSX6gSNnQnDKmR8\nEuPY5U03Bx7Wna1b/GtnvhfPhEnimF4dsrfQr3R2DjYacOo3fMkA452TQ8gD\nQdctILX1i29MI9yYfkp0ABmodEwYY4Zb1xOEkbvjUryK8OGDtx46lD5GFdv+\nJDmZfcklgd1u2ANjbG9wpN3QnDbJZCCCN2fghSIzAvLQTDZEqdbX3tni2dV4\nEsvxLnIre9owF0mDwabyLwJ2h8bDEEWMZpoUZbm/OorDT/8/tEFNmA8Yhs6c\nc5RzLGiP6x9jD/ytqQchEcx7kmcjp0dK3f8mxgheV+twC4NFlFFiFfr5IMEZ\n/5GD8wybbMSc4Dh6AIWnc7spBce+5qS9/lWieuEH9E/auwOfalBlQsqige5B\n4o1gsVQEETWlpQbC4ItpFXyISeu63qGtMgV3R9niEPBv8n+xRGb56HRoDNJe\nxEPx\r\n=Ck7B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.e41a70425.0_1576711192020_0.4734801527490049","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/theme","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ab99d2eeff99f0a429caa30e376bfef4e72dded","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.bac43eb43.0.tgz","fileCount":14,"integrity":"sha512-ERrVaRDVnmFfHX6EkpX9ItWnVF/vx5zaIrscf+bj/b/j20RwzGaWTMPQEPbX/MkVykD7nhrSudfQOA+MnSzimA==","signatures":[{"sig":"MEYCIQCNXbqxKQeINfN/dFQ0CEUBbKvmbq8vT96JSIy/QI4zHgIhAJ7yt/CHXNx+uHtMZCkU4w/cFMvNrlrbzGcAd7V52HFs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rT+CRA9TVsSAnZWagAAYwIP/iKr2lFV21s6I6dgSaol\n4IBPHc23kOwl5AV1TCXzJ7SkNoBolhbtWsXiEpfkCJEOeXCL0/xwK3Qz2bBQ\nzM+mD4z62HHehrjVd65FAG//M2GHRDFY2N0LxQ4VLijVcPLmxkATkLzBC3Lo\nNH8IyUn5OVsj5Tu0j/JL4mgfRE8Cy0JGs2zBJDllN6rBMN5KvJHbxEFze8ud\nnPbussWvFLLEFGPxxM35+UoGIDS3mQoJ9b3MeKOJkG2J6hYrMWjSg8i2iTWB\nY/8FOJ4a5obADyRAN3zEQbdsy/i5P0bej+yr5EwmXl7U8JEbpOBDSmGLqGzV\nYHUOcv8F5RWbQhmQE9WITVnLUAAyJofOv+E6AgjbYfORL++et2nEPIkZxVN/\n53Y0Pap0RHDKEU2LZrKGOiFvPQv00PYruIcN7kVE5NcJwYa/KKKRNbo9t1qg\n+kDp8AzRs37g6i0bcJOpKVGSkdZdvvy3dOHHAMaeKoT3gI5M3QR/3wlnkyz8\nl8TwsY9bPHy0/e5pN4P4hJSgprwU0sA+VgBHWIG3p8d5INR39BFJWKLR9+av\n43sOm9uh6dO7ggF93/WbiPUy4Mtd7dNYgJdC+d/tMlHJKknVQ/ejrfcHhxik\nuWhXmAIsOPXJmy0e2aHiucVEOf08zTMETN1VlAF8ly2w2B1Rrt9dU4vWtgFg\n8Wjs\r\n=5mbH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.bac43eb43.0_1576711422423_0.25807409977817874","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/theme","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.2e491de55.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c38f26116f2d9c6cc51c139f026ece275026842","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.2e491de55.0.tgz","fileCount":14,"integrity":"sha512-OrtgtywsZSAJtTU0lBlbhDTpjCEHHMkuy8ZRt/eWRfJ/FwzWPkRriEB9C62hzf5JbnIzD0vy1twUmwrOJjVGqQ==","signatures":[{"sig":"MEYCIQCIezHTUf3YNtJrkDRWdFv6dlr9hKLGTtXR2nieNn5JhQIhAKHwkxn2kOY76r6XHUn2KnMhejFTPWFoLRDuj/PArOos","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1W4CRA9TVsSAnZWagAALPcP/j/CmScVELtIsNCnqwSg\n4WRC9FM0q9n75FBZLLxxwFXXIShb0KSnmDPqnGki7PI2+stKAPTevB3+RefY\nVpGhbke0Ur9jCF9nGm21IR3kEP+fHRbVw8M4pOnoxR9khFOA3uif25WAzrw+\nEaj/OTT1FdBz5CEfBGDMG+Ts4dFBCtTSTfOBuE6JHm/V5MHg65n5dHL52wxQ\nAb6GCuDElK5xRuc2MCyHkOF73KkARLFxeLX3mucQrJbREeCGViuOyrVOXS+B\nLX8fvszoI7B4rZh9nZ/9OYkRFy/rM4QsZ/Aljav0BImQEg7r2y2J0ObFAB1B\nXiDhBjt26Pqz0ZnfKjGCU5sGNIrcgRcEjK3Wzi00ECawFIu1GiT+8HNs7o1k\n2W64vqJsJIwIPwb8dykWuZFUmpNAXPyH95VKA0jX0wW0l4B8uF4DMZK6YoDT\nk7tPBlWGPGOTI3fNm+hZomyoLSWCz7iEMOiYN8IaBunDQHLcnl7HQkYMVLdF\nTbyMJYwej7XzTvMPsedtEPTgID/PAB9I9YQsigSvOVWaAkVqOjV3p/cY1wN0\neXkyZMIffVrrEmzqvrmQyA2cDikhp6BXr17C5jtQLH2wznCv6sml4x74hWyg\nmS2erZLl/GFnkBmp5L+bTtpz3m7O0+1/dt9PYltY39R9XF9ShyV6m3ZJLaMW\nEkqZ\r\n=3Kbb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.2e491de55.0_1576752567914_0.9616225117511923","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/theme","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.ae101c144.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8612a66a444293ce302c26ee13f51744c18d3888","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.ae101c144.0.tgz","fileCount":14,"integrity":"sha512-2Xe3LUrgUG07pUasJGGt5u3q6XwZ1bhCOYpJi9RAh7NgkQjRb6ZEXmiyXiiuJlTK+Db3xsKIfzwzne9ReljMAg==","signatures":[{"sig":"MEUCIQCKyHUoNUHQrJyNMoJvo8MLsuupJx/ZG1rUK9NTtqSYdgIgKa/08CZwg+XQYQ++SixWn1MquteREtvlQ2QFrtTxr28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6Q8CRA9TVsSAnZWagAAA4gP/iGAeXqeL8crwtRfIjp6\ngbvVbOP3MqNO11tNtnq8LWhgfeymqq3EUC0acgdE8XYt79d57dob1BOyXhXE\nTJT/eZ0C2NEg2P8kxmeUdvOxD8o/EuU0CG40+puOW+3YGgADMkAu6ckPmGaf\nSrR870T4SdRzPhKs+967MOM8K1qS4CCWP6sJ+AjxO4atytHFYhzvCAU+jNYI\na88806XCGIQeBlaxoi0b8M4FB9jR66i/w3l5uecoPUZvdTLHuuFPHSnx1VNg\nl3GMlPAWH7MA3Tal1aR0WPFo/VMZBk7iQoMzNATgdihRtwn/hQeSYlYEjkG4\nfKZk+wByzBU8y9s/65vWU6DTAsrnWb/Ri+tBz+ZvvX2fZp4VeW2VQDkUvno5\nncC5OhTCCBlrY6bkYHP5vTcZsZ2d73YU3oMSdValK6P4CrWsIXOrXiiqof1b\nMX2hs0f3M9C0iQoLI1PSP6TImBBPSQxKjmxfCCE/Yd+gzOPen3viIYp+PE9e\nbQry42K0K3Kd2zLvvYeErS9f3xNFAY+duX+TIFqfXr1cTCPtpC7zxRoes+KV\nClBEBnmy6YXJhsoBR1KnyYbVCIN7uQ1XNXjizb0JdGPDK0TnLTohIUee6T8+\nX6LbBZJQ+SjM1FhsyMr1A9z6KsHwuhmhsk8ZucxvjSA2Rsp/S/BHcMvlckvU\nz3ph\r\n=p8gG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.ae101c144.0_1576772668572_0.6094964871828776","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/theme","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f54b9dc5cd0af04e7c98b05559ba2aa975f6accd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.a51c31f26.0.tgz","fileCount":14,"integrity":"sha512-6Ew8gt8eYI20fx46yEuD2f6IATfM8rdNi/x0foBz6Yp2sm86pE8ZT0UEkB6PPdR1qOQOFQDLigWdLlBao6aWDA==","signatures":[{"sig":"MEYCIQDPcOZTKsOS4rgVw0Glhq9vZXpDYbImQ079mGkdQn8TxgIhAKNxkG6s1zC0e73rGYN74Ef00svTCqv5iFM1eSj6b+St","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/ZCRA9TVsSAnZWagAAKLsQAJgUh35YZ0KpWLSSxuIs\n9TVIW/xjZVf2I8DsjQr/DFTYA+OVrk+Di1zZlwVBtraQgX3hWkm6rLj4HO80\nH+AjjOd7r9BkmMrVUlnqV7ztDwte/7xANrCq7r6U1eF3lHrCckqZgfMmwWRd\nNPjA+uNoCWMSkRIy/f3Qoj//boMKz9GA6qfKvefRP/f9BLPmHnYOmOucb7ey\nFr2DcQJQ5rmTnkbtMaV7iAUocEaz3QEmrqucHdtIhYk+V7GHDH+T6LXnCIXN\nqF3BlTgZbzOe+/C0fUFxCmGjjgjlAsALyRNKyCGclzdL3PJdbyDjEJySbmQg\nrXR5sVBtE6/+Z4oiR3MWh3gwNYjkTi4viqxkU56Ve1VcBw3MybRhvJWdhl6c\neJzY36ayTDv9WsYhUQj7B3cfCKt0cN0N00yXUyjFC7uDIPIEEi/bXSiMNAwI\n1Rn2esa0sqRs73+rJeKNqiIHfhihD2vuQSjlpktCzJ43UjRfdgObi1l1qKki\niOcE869Ir49dXVXfAc/q845KuasQS0yBJbuKtapfpGFIqAMmaq4hPkHFLdkK\nbdEJNgEaz3YYKdYpHT5nTff/8rycE5FF2dg/Qvo/YA/wsP7dJSkiWtw5uueP\nCTKsYCtJRL2/OXQ26UEHwHEYK/P6gnOvTRqsXFKGz6PzE/mVE11hLV9VcpFT\nX6zE\r\n=aDnu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.a51c31f26.0_1576775640807_0.24673845824368668","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/theme","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b716b7473f23b5b6715c8b43f9f3bc723acb5506","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.21fc4e13b.0.tgz","fileCount":14,"integrity":"sha512-EUG8vu/4p+VuWJSm9l0X3IWk6bcmu9EgnpqSR0yJylELoZxOoxizPUqmYKj/cyxbDuqMY6ochu53AhNASqfdpg==","signatures":[{"sig":"MEUCIC8nr+rWtoBuasgjNvc5jVm3CQXsiPhQyjzNgvFrDnjHAiEA3nCJvSHOdwEdSF2zYz7R2EMQc7WW5Dr7FUaJsaWXcew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++scCRA9TVsSAnZWagAAhs4P/0P9tOHddOWCKR4+gZYz\nC7zrupPFuc97unmX8pajA+SL7uDv1obppbp7jTG1VFOC+6t9ZEuzlUDI8tTm\n2m2pl3kKChFwpDToHyUgDcpOnmEoSVCiDP3OTTGTA1ysGLch0BhUwWo+dBz3\nBRJelrYNP42OPGGtJY81YQPw4sG4wMpNiq+DVI91/UJ1bSOVTBrjFdfyqdBI\n+afiGkCD8r5P8b0VKv9TiYmL35vNZc71kB3u0FojxkkhaPvNUXCpuhq7opuj\ncJzz0vRUJt5dcpVjC+GsVBL5dTmj4KaE6p9Sluz8jxK0VV+0JccfXQ3Faijr\nZY2wiWDNHTIj++wnb5ce1ziBag7fDLH2nWIE1I8ASb5j+xs8ijqk08JrVSwG\nzdFzIWY9n+ipHXJfCIF1WzZabsX1LF+iw+byyNoPu3bOGwxqZNySwzZwIcb+\nqqotzDUEJbRx1k0W/Q+jPRFJlj0HgqGWT8UX/AE5DIjC570OD1iArNjkipvT\nAeS2VODWbQ9HqwrjDgOdcDf21Jvh4VEojtBo01IS4ssl0lRFm8cOWmtXoAM0\nbHPYOkhF4o66tRmbk/jYVg89zsvqxlftYN24QeSDmgczJwXR6Gxwd1zO9fp0\nPn/bwajjfAEtI5FstjKfmoWf0cDudGailN/mjjc0EuuruuY0AXbcQGtGeXQd\na7Qu\r\n=mIbj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.21fc4e13b.0_1576790812148_0.3485085509721706","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/theme","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af74ebfb2bba0573876ee79cfb84492d8dbefb88","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":14,"integrity":"sha512-AdoPJ/IvgeAFlQuvB98s1G3YjgeouBYWyLB/4J+KnCXdBflcETutw/423VI1iS1s1xolrdOhssbbJGx3irb+8g==","signatures":[{"sig":"MEUCIQDmv25u0QzdxCGOvmGpVVoP2dSqlcPWT3kpWseub++JdgIgeZOQlRAZTnlTeZ+Nv7qlQ28IOWuz0F3f+IYhB4WcnDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/h7CRA9TVsSAnZWagAAe24P/3E0qxm41OTjzVdr+d6M\nfljTA6ufl77uH2Pv103LVJXEushiy1Kej1x4rcQ5F8Sp70wxNCJvr3Uk3YnG\nmcPPxKSkSbiKuqQWKHpI0gE/KtvyBtw7t1c3cPxDt0xQ+LamX0EfJ1G5KxER\nrpDZIyhwcI+N8lUKEEkBRJlwgGgbhhPA6+bVdeAVPhFqc6BOpye7I4wIGB3E\nt8WOIun2MTCfgmx8sWXtyTa5l5YcQOX0V4LInFpf9X51XFZF1+1QyWQdFKM3\nwLXE/hA+KqCJKDdG72vq7cdqIKq1Yp2IIxScLmDiTR2HL8Lfgu8rW5SUorNg\n6n/ykGJA1rF4YfKk0opBsWZtqW11kf7891xY0jgHGt7inSu/3WMGmmJbCQxU\nVPTCrxkxtCUBSSoruhnpfD70y2P/M2G+zXcf5GpBX2gAze6PJaMRz8PDGF/p\n81jtDapO7LEpyv/SKfvtVmXTdutfJSFwQx8QS6s2fgkC4JQV8QCbOIF9MJkG\n0NWSq/ComYolIjf171NpcdcJ/GLR79X5jWOjkqQvdycuTTOulvpmrSCZ94uL\nsGEVWz7IQyyGCRsYD/aBIvRAbOJE7j0F06djDjbmdxwYU34mFIJ0D1ZXpUVU\noS97D1ALbeQN9Kj7GT99ED9xK0VGGQC3gQpmYtzKGyZsakVX3AvN03TTlZ8I\na0o1\r\n=6phu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.d2ae6e17d.0_1576794235257_0.06688009212716461","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/theme","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8722ab52a9e2a0f911806826488a7a3f49df2af0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.ba30399ad.0.tgz","fileCount":14,"integrity":"sha512-GH3XYSz3h7u+FYzPQfwANYsbx5rt8e1S53xQ0NHwVi/iisFpzsRn7SvJlVI09yav4ykhGRvBxvBz9YtYn3IPNg==","signatures":[{"sig":"MEUCIQCacEySg6kU721BFPLrPEsCqha8yGhThPNScXbDlwA+/gIgdHOZKgJXd6eytZOydmbj+z1l8etGg8kLO6rUn6cD44c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9ECRA9TVsSAnZWagAAunYQAImPm9Y1GxVELeZXOb5e\ncT0qS3G4MzbR/cuPY45UrRDM4PE+XqGXxb9ftewobgB6pVG/+hOr9GiIWaTL\nPClHz/An9GH4pitzQFy9Z6sO65R+LM/d6neXe2/09dje9/X8McjCqKMhGNtP\nXAzPB3j7HTDA5RYWLnNb1i0RGCNPDI91qg2OHud1yz8JYMO3c0aWk33QSuJ8\nEvl9Zoexv/xqztmurtVxcNcruRZkLh4vb4k7ShMgcTuJhK2Ynod342Lqd07g\nvJhUMvuw7Ha50VqTHCxceSBcNkKf89v+tNnNuPl5o+fFIbXwDAxSMrE1S3cc\nYdb3rdFeWGTbSna0nADDjoHX1Dsq8QxBBsZwoDa386S3BGPhCyqwil4RA0L3\nTv5VHCiDUk1bLYkmJUJApz2XBnSlHrHKRXFPDcOYpP21B51rDvzP3qc5E6+f\nriOc4/75jt9zMFDpbMRR0QMyNC1klCWSI+hSiR68hKve5u57McQKBQ0qBWil\nfnVeERYrkyc49wwwxi1y9yawgHwGlvI/6QV7c5jE5V46pbUqrrXi/h/pbVBl\nK59yiCX3qB7T+r62GR8fMstthp9suy0Z2xxaXxTGBas+lyxIfYUG9MdKTxHN\n/9aS5DW8036yl6Po1bbW2mR5ZYoByE8SAS9hVqDB4ESVEia5qJrKCaa9b3rF\nj2GA\r\n=3loy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.ba30399ad.0_1576804164397_0.2891130794026451","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/theme","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6672df3881a5e228ec5877b37c6a590d5dff76d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.a08ccec35.0.tgz","fileCount":14,"integrity":"sha512-FmOUrsuJ8jL+lKTfq1FISL/slGC9w8AMVtxmZ3moUzVMrWywDwAoAqY2oLUDE+wuV+UPgd18uKDmIyXfpaNzhA==","signatures":[{"sig":"MEUCIQCU0VQNoLf9Y/heewnB6ujJF0oVEUcqavRycFqTNdaxgAIgOmEpUSoB3evI4+8PTyrwW+GDTcBhLopp75+ViY5qseg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VilCRA9TVsSAnZWagAAXKgP/iZKqwUikL1mCSSRU0G+\nrWcsya8FMWVxvAjomkl5rEPHkbZtXKG73v5GV35t1wuJ73K74KhrhRNkraYj\neuEV47V3VwRhjz2nSrZ0vF2WDk0IiLY7RndHP+WHzxL383QboRv7OfpMxRSn\ns228p4rqMe7m30sPmKCyvppa5913DRfTvah1Oq6Q+Fh3i8mE+8hvgQwsQhUA\nBfPkgT1yilO1T/PD048QOgkF3J2fg+5jjs8JWW8S/9VXc+13VP3H4TF+J9P/\n7pm0x1EwnQNcrJ7fbyDOSMIVb4D2yyMIxKq3RSKopmGc+2Bb11zjqYe2gram\nUcTSCDPa9lEV93C66q3MBN8MX8P4xDSDQEkiKUouDWltuf3d7O47RHn/+nV4\nQKIidt50/0QqqS2LjZWXACx8BsfJiYSIkKDBUwAsaxBeCd0fwuHu41VX4Srm\nRjVWxjgG1nURGY6dQjtrQt5E3VcF0WfLYCV8whhCyx2Shw5wtHTPsLsS1bjs\nGww2U/KPYY8UVaFs3kmBQa/ztLNDb8Knam0gLqH1fK/3eOhuDae5t22+yuqq\nta6JBTC6W/yuAW2T5Wvm6bcOtYjOfoaiwxs/TMFoCWg8SrU0I6PltbRa8g8O\nm+/4pSutiQ59LEWOse+O93EA0biKv3QpEayy3rtd9xhJEXFyzPiQ5GDh8o5C\nD+8s\r\n=bV94\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.a08ccec35.0_1576884389431_0.6530213404836189","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/theme","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5093cc1426faf074c6ff3843dfc8fa492d509547","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.a2f75105e.0.tgz","fileCount":14,"integrity":"sha512-78saRe67NwIxyvcodOEpQVU8QMxgB7NicR1IKrgewDVprb7kPw5ovDuBfmY4lBOS5v3km3+up9LWTCtn87OvTQ==","signatures":[{"sig":"MEQCICtMtn54W6tEeE1ySUxjHB9TxGb74GaLqku3Rn2CEIqPAiAymVqd+vRNnLUqyVfG0UGsRMdN954yFIsKcT0SvnBL8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARnHCRA9TVsSAnZWagAAAIUQAIoNj0b3uYnWU8ZbHNaZ\n9AjUR4qcBv6Cpr6AJYMRXK7O5IE6KKCQ2vQ6i3mQwS9MpmvJIplgE0cHGnE1\nDxD6xIN9fbBUU17zgXCz6nGneDai2jmh+guE0h0CABydQTDQZG+1VL2BkYfF\nM2Ge65HN//fFdqAcIz5KLd7RluB0l1hW6JCyE5e+ASXJZsxrZZAZi3S+Nb+D\nbOunj6UOD1gOVfmoThe2xzrgYjURFNcAv6A/FPPBhvZqbgjWZ0VCX7krJCsQ\nosi3LM9VafAY4Mi9fz/jyRW82m6C3WRygjCEzlv3TAHJDE1evJB4MWVE4I4B\nhrOlOnVNxiSt32fZyIh55xVOdBdMXQCsCeuJ3Ik9kEET1WCaOJHJTfBbWutY\n7ajQKnrWNszZanWLeCiaMRCUd93CSHmzxfHMb3lxePSg4KMNpWyURT8v19Vx\nN+eQFfsSb6Wzfggs2uW+kJruJq8PZQGMg20YBV0t3wUMGJiDF1NZWEkEtObq\nAeU+ygTed5Y9TDq4zih0sP0jRQJA69OJPC/i3WZV06sQZjiFGEOI76Wqh6Az\nhwe/FowqHzHwk4qCSVfYFUkWTGk1xyNXWqmeUBpwKjU0gjGweaqj9FH6+Zkb\nNVeJCuyl+MzjOSJKwI4PKO/cl3T4pGJHLHk5zUHI1c8OVU9RmVRLNGTBjmVK\ngNFI\r\n=Uehu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.a2f75105e.0_1577130439467_0.5949021539626815","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/theme","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e57fa8660d3b2528fda72ef2c94acc4838b0e3b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.c054a24c7.0.tgz","fileCount":14,"integrity":"sha512-Ki8r1RS7aKHQiT9GUdmpcS8VNV93Rsq50Wrex+64Ogb16H/SKtRHBJRaVicuD2FYRd7SwQqLh45ZLSAAyunYVQ==","signatures":[{"sig":"MEYCIQDsZKY5I9zvB7Qc4eKpKq4Z5c+zVlmguAsqzD7xU5M2kQIhAPV1jFS6rNWjTjuzgrQrgip5NMm8SV+EwsbzoL2oZVky","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATZ1CRA9TVsSAnZWagAAzZcP/i4vHJAiIb2473zxwzqb\nt2gL/eukoVcG7obOMYA4xMIXJHF6rtY7Fbj+9vDOGQPudcgf36iG2vF1h42d\n1VavqBQmtMzAysv/G4KvpIeH38ER9uKfZfT8nwRZX/v+KzRM9hxPoglS+Bo8\n0zltHsTHzWOv25wjGh81dPkISdqW580ov39/CE7NI5I2V2sVEj463+19oj5V\nhApEBH5aDGvi3lEcLw171uZUZMqmh2QMq6FYhvvitWLrrseEe4ClbThe4Kx3\n+bmMEVyQDe110CCYlB/3g0Y16Id1dwq0Fp/BLjBbcQJMrmj6WNWt23JNr14y\nYZQtc9dpqd0BWKep94/fjwBBGdDYsNi5XzaxnkNgCo/Gn62GiZUYfChofKJ0\na3a+AS0FC+/KVAO+X8rZYsKJCiMC5UJt3NvdN7V+Z1Xi4ms2PLgnMxPcS//J\n6kEcm2SdoePQJ+HXAM1cHHEyqmcIuUCN2i3i1WoNi6Sl9a7O7U6wErvNdv44\ns/8zCney1+El2pf28cbAEF5sZcC4Z0gBdxYv/v3u5v1b5uAMP+qsjVCKRWlN\nQVerEmqYMh9FNPWEz95N5pGmLoSR/WWWA18KilkFGnIQAqWFOyyEsyAREEcd\nS5ZOGJFl14L0ru3QIS8QPMqqPr3ZCKNqc1/qTDPQyfXHFBvv+sKsOJOP3GTc\ncnbk\r\n=CRZd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.c054a24c7.0_1577137781581_0.34331825293105966","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/theme","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6be5356a0586b1cde8a116d8a147ba21280c39f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.c6808c51c.0.tgz","fileCount":14,"integrity":"sha512-tGFEz6aZvMwNG2VX29TCPALMslIF15bywsKm6WG9dqv+cd/XlKnHpwB8yhMj8HsWI7asvjFKpv3Pqz1cIn/DSQ==","signatures":[{"sig":"MEUCIQDmFmcHg8Y+/m+dMFpvNlue6hc7JOaF8nT0tjRL+4NGfQIgKj+Dd/e7RiENK2uzmDFtBBbbGH1T/ByQ5ZqYsp1j2yk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATePCRA9TVsSAnZWagAA58UP/2RLOIbCIOqmU6V8lT8x\nnBaA12n3/zEs0Ga8lQgBrkNUuManSCf1eQrdmFh9C1UIvPA8X94VuSQQl6xX\nzDhfeq9eiMiieuWMVYlLCiF75ZeW7n0eoM1nhX2pQ0772hMolrri5JWrKqhD\nuERmzC+Y8L2+rdYXRO+zhNNCIxS9TtwwpaJjvB16XzFXRV5IvY/mtbkjFcE4\nnF4Vnn3mqXduT4sTY1PZgY5bYUqHf5ryc9CvQufbJ4kASxAH6ct+t/cxiaKP\nPaupTcP3N0fhdmB4uRUfYK9GCAGlsXjHOA4v5qBQMgcyOv0NxNKx+ska+E3R\nHyiRIE73m/srS3j5/HbFcfM90s0lJ3CMuXP+YS8Nob98uNLCHs8w+Ino6gJO\nfMKzDd/5PXWgbCueMDgLqBepgok1g3xKoRjyi2IvsGodSIhizTl9NBPdOvPx\n7sXQ3wTkRRIzY4KQYy3lRr0PCLKVrsp4cgzBgRt8hy6oKc7VjeFW1nY+65Zn\ng/pVuLLDipSXJMiMgcdtCauSrib8psgcHXxoeJpyfErKjEwXnTiuLVpVM0Gi\nYFQsTWFfU9s9ypf2E2NFZhThHxCehR9U30EER9oQy+V17aEfTKLtnhaZGCzv\n+6xlnrbh2FXcPpSntsFWmNbReuwmgaFOr1n7o1TEriLXd7Mov8JvcaOD2luA\nKUr5\r\n=toZv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.c6808c51c.0_1577138062791_0.6329616430376832","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/theme","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0daa257adfabf62605543a99631a803edbd69db7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.7bce9cf77.0.tgz","fileCount":14,"integrity":"sha512-EIDi0SJ1blVuDjq8XjC1Cy21NDzHKF0URqVGjww9iKQLpYoEiyxQK6cYKEDE8hJsISiDxzU3IEmZ8aRYa7YTiA==","signatures":[{"sig":"MEUCIQCDB4NzL0KujIrtjtm0/eyi7SjipNluPNOrE/LciCVrcAIgbndpYoCieE9fMfZVscpFGSbGxk/c9k8f/m4a1cyyQho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP+9CRA9TVsSAnZWagAAEyUP+wUyxrGbGgCq5DpiBIBq\n90dLmCQWBK+WYHeC4gC+VwtkC/l+TFmMwrnHqwE3ZZuUR+G7BW8myRpPd1Yk\nhbmlQr2WJ789ZP6YtiXqTiKot0Db+Lw/dar8hc7LZczut+5jkDypldkojZdP\nbrW18jJDiMZUewE9a3GbY/vMJyFjWCZwySTvcY9RQyr1mkkqbazCxBAO0jO5\nToqThNp1vN4JYpeavOWmAcFafLFSxM771z5/qEAZmyCODRyLQazKas2B+N+o\n+nM9wFdDNOx9IjqgKY8bU0phpvwzKWb4f+Irz6LYoNUcyN1HxjJE/MfaR00F\nRmw7NnBdcVVbeolGipYdiJHZpU34IYwAhoDb3WCQHQzv5CXEbsLa1M9Vrzsb\noQg7/LUr2df58ASDu+c6BRiACjYehdup1q3/c8YScifp9zvwZplwbs+Vb2if\nrYxvB8ImxQh2WwnTOnZv1VYlkwvRuQQ1TRt08YRg8yQENiktzWUYJsHLSJcO\nLBfi7i7xlHgSi6CFkc/jCeG8g0ewh7/6ESXFlUdIFSM70y0eIrCFYjg9Up3t\nyToj/OB5hgokAmqIEWnQr4SuzABY2PZ6CL3UcG4lU193sdVAlEKB7kdMnuS3\ndM9hVY+Vpd4KHXIwTPgBJTtiJdBk7DliHxYrd/v9yJMtiHyJLLP5U2Q072Hi\nI6MQ\r\n=idNf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.7bce9cf77.0_1577385917126_0.4641090835582613","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/theme","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c487a7061aa48fe78226ba1a80336915087bd628","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.c92f038c3.0.tgz","fileCount":14,"integrity":"sha512-OtvRUOKKhFRmwyFbi7iw+8RpmUW/xlujsl42MbTvtFneEjlstw5dWhK0cwWrTqyrUgWhpfzTK7yEK18tL5j1Fg==","signatures":[{"sig":"MEQCIGIx/NldjxrQk/K10W2eIP4vHV2TK879mYxzEr8U/27sAiAwoMkBy9tFr2rQgnQ9uPGSXQ4QZyA6aohK/MlE6d6ojQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQGCRA9TVsSAnZWagAAk4kP/2xKA3wG7opPjeAAE8W2\n3yESQE/cVc5HVhOR87RvmLu35C+7YqO0aCiBXdQcXuCAmdaThJz8wEdDENgV\n+pZ+37VOHu9cubpt1+afnQMcRwECHA5yr7KlxWtkVRnN9wmhXmPKJaBO1B7n\npP9lzPnbCAMe/pFaVOFHXp+YZOHSnHm5waxu+HVq4tdkjbNgIK9+YoOKPc14\ncNyXdLzxcUqLNypXFFkCQpMLJC+DB457CUqCkxCUKYII0td30B5Ixwj6cYIc\niX066mb1W2VO7iRw0cabzqPtZkKCqZeeKlqDR/Mc4tEXY6DkExlQlfQBXatV\n06SpiNw+i03MDaPJL5jmcVYduuuvLwhbIZzJD/JE8xLgVk/srkNKNhb/oHva\nVIsbVigcEEt/zY8nPUCpMRyx7DrKGGZdNdbN1up31WLDC3YCzSEByZc4ubiJ\nwNIztQC18uy7YVB8E2R3ixcWIBcDPd0rSGT+8Od8cKWkJu8b0AKOA9wvJDHl\nb4CogEJg8xfaT5SR9vwWuZwKl4HP4gfAXYs86BLgYvenusH9S528OOYB9wqg\nuJCdzXdd6fVfFRnloOZp8lqw7kGVC9HcfPkHp0KdeN06NXZKG8G0UapnFgfT\n2IejHlSJzYN9JJ+CIpBl90WE2hTxcKYNP4IGdDYEvzWXj2citzPCV7WxVcZa\nDh/2\r\n=RswQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.c92f038c3.0_1577743365624_0.5874418773310615","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/theme","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75c0d285e90dd2a56a646ec4b4954e974dadd35b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.1f1ac7558.0.tgz","fileCount":14,"integrity":"sha512-tSBYIj+jjyGCxMPP6MnTfCQcqGanz01ZdoaHpXKd+7MVHb5ZqbeFMwtr8Q9p7b8mja/qrqaFrtjLGsrxsnTsGw==","signatures":[{"sig":"MEQCIAny9YJ8REFOF1WcfP1sqEvX8CgyPb/2UwXwSpM+TognAiAl8d0MwohEoUeLFfclv5fHAIbmYt0mlEXvp5WxDhUDYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlhcCRA9TVsSAnZWagAA2MMP/01ho/dtOuYA44nvQwFl\nWE8E8pnVsUHrrzlu5B7Ei8f+EObWVrHNHD4QiFW4net8QlHJ2p2Y2rF7jc+1\nnDq20SvT5kQ2wySYNbYUylj25A4XSjxY5EgSz1T1iRQyhxDt1y47rCL9PhHy\nukzvm1rZpb/ZCDhwjRdLyzFkcYSUUR30ps7BbSwt35g0FSsqSNf2ysvofMQO\nG4uI7FOuQQAo60kCBYgFGEJtV4VNikpAlbcWz1qlAlpZNLpUT++H4JjF9g6c\nKvNaFDxWR951V9HXlZaJrjPbl8N6L+sAX8rLhxv7mqkB2l8HZMkF/4skeqqv\nKE/esZrP1QJmmFeY85v1XDcP4GRYf1sehSiOSAIZQp051ugA5JJ4CxfmIJ+Y\nDHChq1xBcQKBWZgbCxh0cnjRCGG5gh6e+6qvNkNneLmSn7JBznEO7Be5qoyQ\nOs2Eqwcsq0+dYeHQIlzWgpcKWvTv3TrTV7uM/yPDOg3L3fahaKON1JVZB6cM\n9yXX42HL4dNrxeCzyJvL5FqNXF/d2efq8Bho9pnNTO61T91pRcVaJbvAjqYw\nVGvBNbAGm5oQlsah3gDJpU3qlljShtKs4FQuuFx6NWwdDgCoLRztbJIoqu7I\nAON2xT8kWSip2UfdSoRkZABm/T0jmg+6txK/Kc9XuDb9mq1XQoLiC1pp4/Q/\n7/b8\r\n=wYN1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.1f1ac7558.0_1577998427617_0.531881775913424","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/theme","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4695bc807b410ffa8b94291fa0a9784c595b194f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.ec26e799c.0.tgz","fileCount":14,"integrity":"sha512-24t9kpyBS0r8L4NKaC0knEp17TSgBrRLzwl2KvckUYKopyN5nlfQdvSdclSVzsFZJR5ujCV863qakh8zzRwkCg==","signatures":[{"sig":"MEUCIFZ0PBG+yieUFa2zv8hDTQjrBUdVVqqepTQ56asaQ7yjAiEA8r+C1iwlf+HAtfNNTxdlmIA5NxwTgG6tu1dNKViuoM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmOuCRA9TVsSAnZWagAALqAQAIEdQd62r831ZBnaeH+o\nS2aFLYGNXXP4NiDNTLG3k5S7WaYCjGC7FyvQLEEi1f8l+bx3k3gwCH5SpJs0\n3EBii+mcKmqnXqpeXTmghKaJJhV2HUFR5sad3aKhxvY2aN2IQ7kth5i3BUuG\n6ZqaumS1d0dgjOr3Jh0pCPoCQgzlMMrNkifhhzn9dQuN8KntRnWsGv5YfJQN\ni9xY1AmappgLwZH8mSY1NQBX8IF/Fdk2xkO32tXh6bivZr18bZKxm8ubWG0M\nCFac42unL9xOoIZd1tYXxMAA/x7Oe5TsswOeweOHYS6csddLSu33bKwvL/yw\nClCq8KwEIodQNUy2s63lcQfuDI0RAkcRHptcr9lCTXKhK75jUwhjjdzrpY5A\nyFd1AN0zSBtGjmSJu0RAHqqNuKlTlWAE1F1X1tg99tv4U45cd5dI0cnmk+u5\njDBFOPXyzmosLdz3NKWrX0vMIbS4CqVYt22luw7a79Da97AL6osQa3Kzwdgw\ntiGGvJW2bB8A9DTGpwSeK7QdxvV1GLH5qpSR8XbRSaJiHWhwQ0Hmzl1SvDUc\nfbuJzmCmd2AG2DLu/zo2eCChD8HFU1SOxev7/X1qw9/wUaAvWglcY4/rR355\nkMHTP70yKvf3fydjTqO4/00PRCM/QBwFns5YDEf+pa96GxjoVLis8a43n1km\nGERl\r\n=Fzlb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.ec26e799c.0_1578001325645_0.09107948933941712","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/theme","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aea74d21c1dcdb6c3a335608c4aac50d1d962237","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.0a40ced40.0.tgz","fileCount":14,"integrity":"sha512-ijLQJXJoTYnx3N01RXaltW0d8KY3q+9yl5oGR+ZWn+g1rlLdzY9CW+/gi+kjf/bga+fLBW0MrAQY/En+7kQQ8Q==","signatures":[{"sig":"MEUCIDHN2RewywX+Tyq6U2dLpwyUP/zYFl4Pwv417otcoZKLAiEAq4LXWpo3BqsAomoK7Ii7peGJP60zcsCd9zV4zU3cnR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3UxCRA9TVsSAnZWagAAis4P/iKz59kGnvFzo7DhvvpJ\nLGZQu/A7poetk1HY5oCfkPeRrg9M2jksJ6AEDyX9tGtrGZ7MFNF+Nwj68WEH\nzbr+q4wd6kGE/GMDKjtxBZcQeDvezUJg22HH0L7jtsBmmhHfiNHIrg52+ueM\nIUknA8RppeSyYZXysDG0Q0ZF2skGkqNxxam4lkqZU6xDLf3JngUDwy4sgf7N\nhvt0hzl5UgC1V/vIbyC6WZ2uKaqW3GYEo9bMH+lCvK16/UXU+6b/JoaDzJxi\nvBy6TRf4L2oyYA4auUG0B9w7RO9bH2f23bYX8VFixjOnNXHErOV2XUG/iVs5\nsHa4AhcQbd5Bvo/uEKQeek2810f7MqKeAUkwmmKnjcWsH7b9TziVWrF77h1f\nL2PzrfCEJH33FBhREgkGQH3uswB/TzLahArqSeFX1z8vofCE0NgZ5xj9bKYV\nutdoihdzYcVasFQaktzLVPIjTiI2N5HR+8zKpaXXHYO0udj1i20/35QTKybf\nt/FT/biviZNUFqW3RjTqcPf+w1omo0UXnZcC6XHD05FE8n42ylUdn3AyLouh\n2d4XTxhbw7ZlC+zZ3HeMLo6+c+hSu4NU3Ip8xs6nKhcWNacFTkFqEJ/gKzzG\nwppaeEwyOrQWj7FAYXjQQB3UJMCdNfT6nWCi8LdrgjFxDARUiK66cT9fagBB\nnjGw\r\n=Iqtb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.0a40ced40.0_1578071345070_0.25299604658866626","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/theme","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.3adf84899.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"870a914ab5d2a6418d8cf766a4bc18d9eb8b8c0a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.3adf84899.0.tgz","fileCount":14,"integrity":"sha512-bYyuDINMi+M+G/RhLInUO0p+ctRrYT6xi6RpFnerW/KBexflZy8nS2ScOQADzYIJ8zsL4lB/Etm8qXnlnRiOZQ==","signatures":[{"sig":"MEUCIQD7Quz628U+vmPP8xH/eUlXdnVuiqKPw+dlZWisq4vaqwIgZ4izofE0yZ1T9GfCOyQn2IOsmof2FdD6/G8rS5tvJa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4ZOCRA9TVsSAnZWagAAZPcP/jy4drAzuBoHa0yR0f/2\nOFVed6LjhO7NAefCiBok17qEBs4Y/1Re/dtnt53a5HYeqWNun7z4hAiJ5m3V\nk+Gv2diInljZoNyaS8ElwE5cwUp/AUH07AFtdoFYHgqo/nLlBMnwhP186UAU\nesrWAKNVJeX5v/3bZg+iuGJqJgozwvY5q95RSPZYL7y9AqF5ndhN4EdT7WwJ\n+6Gy+wSNEi8BtS16ZzRY5RAdAc8YmfQVZrla/toKEbXp0ZaWFPrNexOJLyEB\nN+HcF9Cq6uwYvQb9leIZRKBLk+bzcEZlbZphceFrDTKRwxHcWpTJBkK7kSUJ\nXr9OZQu100XxsgiajGTDvFGt93cHFVWl6KEycRY+o8cxUmJahVOhBT26hKS7\nsWUhLmTL1rcm5CqH5q6Yt1xo2yDkUEA+sTvbN1eLqJmaXbG1yb/0JLhlIzCk\nfx0ovh9H5AKDGJLVbgXkuviTIiFh0DlmyZqJbvkOWJLbr1klmB71XKrTbzVB\n7gLiB6vahnlhGH6YidaB3i8cASD4NK+NBmfSF/Qx8GUUBqB1jDnRGasWFUvj\nbndwdrkx9haT8cVzMUH6tu19+sOGtF4xcQSra8xvqMwQmwx+Ywcc5V19Zo8K\n4NcFi4m5VlBF1hngc1EfBOcfQ9JL/3+X4kewYjI1u1HvPpnkOTpjms3fpUsy\nvJFD\r\n=RfHJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.3adf84899.0_1578075725990_0.3030564230245514","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/theme","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc859dd52666a03fcbe59851c76280333b5665c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.0d42ee650.0.tgz","fileCount":14,"integrity":"sha512-/DumgAFW9C+DAlxkj95EvGD/UrKAA4Y3Fno+3vfSy4RX8MYhj5HT2OY/tr9fZDnM1YbYh90Ry26g+iQmHPSrhA==","signatures":[{"sig":"MEUCIQC/eajiJ73XwR9GlMR+eF6pK7NYO86AcaADGi1l203MEgIgMyqYNWlF5qNZGGSIK0h+5jOkbyvzUmfD96VlbeOvOYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7PsCRA9TVsSAnZWagAAUHMP/1sGQ9Fs3MWsJBGZ+fwy\nMRXbpQFMLtHoE1uC3hr3k2CE+CM0Z4m+wLkJp74aycQwXHrRcm/iHksQFoO2\nj7AiJKep0c6z7+101rd9Bnzdr7LoQ3KTvDyeLEj3573cGU8s737bPoYcKpqx\n28s3Aj8IJK6aqyRoYeDVrDfVygoQCP0NBQ8BkGoB8MYmdCwhjHPu6X4/kN2C\nggmqVvOIw8BYk+S7iJ2hG3jiKXlubhh1PLkow8oCr6+15acsSZka5EE2D3S+\nNRzJYkQ1LeLRl48w3icvhUbQ260FEgCfRaYX4L6672Hfa0vU2KVjoAtfSiYP\nSKr1xlZYSN5o/wSwBvGgIe3hX6g0XfEl5uh1t4veJ9xktAkQSt4TLLRdRvWU\n23tMIq+PSIdQ8ONtoPBPESzazSVu4N7fYTUtZ+zwg8gzeAkS7PpN7LFjb50T\nhnzWD4P3sIL1Xi01AoxmTk7xf3/HzOJN1p1gsrXEJHe+e+gHxk4ZbiWNfTbq\nkhPSMZFD7V4912WE85J1tS2hbiI1eLLuak4Eg9w7FpA8EK5mq7lAokhWE/gE\nnDuzU5qdIml3FCtNqvTO1dQyHC4Ffa31lTObMm/sdsxnCKYASRE1F84PSMjH\nSVVwas8vg3kXRMai/FQ3C0jK3JlxlfdINIzWflbrfdUpfxi9an2wuCEh/1NA\ncW6p\r\n=XK2t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.0d42ee650.0_1578087404058_0.34498682027635463","host":"s3://npm-registry-packages"}},"5.0.0-canary.7be9e4a04.0":{"name":"@material/theme","version":"5.0.0-canary.7be9e4a04.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.7be9e4a04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b469e0759591398bbdcab26632e3e322ede5913d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.7be9e4a04.0.tgz","fileCount":14,"integrity":"sha512-uqFVoMx2VaefTK9hh3LA66xQYI4to0YCwlwIzRdUuvJzQ8u45RN/QdzPlgDXPph09oj5z52EI83q6bKCBfFPuA==","signatures":[{"sig":"MEQCIB3me2hYCIoRRCY/OwCr1fJKsZJKF93O0FcyA84ecATjAiB6mDSh3osozicfEuHj56XUWLcyQolSkEdHpBlZYIufsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE2iFCRA9TVsSAnZWagAAJowP/RAbuAeaq2DR5qQOw5P7\nXNo6WccnuyF7vWaniBlMC5ad/bcM5CrN406E6/wMCZNlUU8Cg3n+D00LQTXS\nFDf2kqi1nVZmR5aJ9GW1oXYm6cVd+QlVIg6ElrBEJB/CIOP7zs/CSO4YRJex\nDwFHOVwBon4qbNeFWOkuvf+CNljTHRNr9Ekc8rPcS4QX4VnGkW4U2jrAEOGW\nEN9DbDFDMqpYzGQLhAeFjPlYLo1kTA7UnmMLqboOFtJi7OPRz05okPP2I7GV\nC80/+o4oWRqwfAAD2O1wjKVTBO5AlURVLLx/3gBW+iyHjoncDDm40j36Ngqp\n1R2oRZkvEU7ZNRWqmSdfCeG9fpIEObjvaRjFSBEmlG2fLV0gsn8OhhB+WwKu\n+gJVTCaqI+L5px55k3BTqyVe+KEZbKWGOpjeRkDBiHg/d8dWuiDpcPcqKQQo\nJ2Wj5UoVXJtUgAT9IdV/WKCyBqOuwW4ZEDCvQu49W+XCMRiNgJ+zQli73YfM\nPWsvUSjmw7RPcDUAMY0PlZi2jwdsHwKTJMZErfux+kQfM/LAoYpHA5maytUu\nxrn7/1/zf650yzILlQWbNhSkOC19Rssrsp78xR20hyL2uuw9uL/Fv9MMLGH2\ngEYR9Wj9Oo96Z45cRP2XN5SY8wpOM26mZXkxA9A9SLmaI/GrLiit7sqEr94k\nvIBu\r\n=Gido\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"7675b02e76469ef82297d4232a252b678b22d1ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7be9e4a04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.7be9e4a04.0_1578330244947_0.23954451575386182","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/theme","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"425a01833a40867c4c9f769ec61e83dbdca2a20c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.847dd1ada.0.tgz","fileCount":14,"integrity":"sha512-cvCur2fojpsglwa9q3TShgMegVb0goDUVssVIGdF57wyVCrUboO9jrIorTGUiGsHf4OozmW99WCS2w08HmC1fA==","signatures":[{"sig":"MEYCIQD2/W7rYjxIk+1pS5HXbIBK7ekdmvoH/3E5p4Gn5n0vuwIhALxZa+J769ZgGhZSo0GD4M6sXdA+cspoEsgCH5O7mj5v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4nFCRA9TVsSAnZWagAAD/AP/RQ8qbXsbgF6vJKJAEgd\nigg9SRebbqE9mduooHeRvT4okRktEaf2c0/7NF713L8Vhwnw+EkNm8nSvAa+\nS6iXSP6wp7bwmbLmdkUNCVMC4qMEGev/TAJ7tNvKxFvAVvGBc8z4gM8XFc5s\nX25S9oPHQ6LlzGgYcRuG9bfzfqXk2uZ8INYUweluk4kiCS10VOZYE9rraWXf\nFy6Cj2LxiGFyWfgQgxOcNwMZwbGDLoeFAFR8Jla8/crzGkXT6+h9yR8sVJ6s\nRjB4Ih5ncEW/Zy3FvNXEqtuEhPLFvu+/y+D2mpaTmZcs/HuXUpNn3qx59EO+\nEK/19KqcdAqq1GtKUbPXuVBzg5b+Q2hcfVW/Jr7vhi17YYsMLLwiOHObPId8\nrL4h04R+a7U69pYA8rOONe4fOzC9UvJqibMljkiIV0TphAlI3n+Lb+5+HADs\nbokBRkzLh2epOuYLVZHVso6WG4+yXPc55sOOikECpkg5AijoUsUa4IOcXaQj\n+UCfZRR7QNPyWYm3XK6JNhL4tJLG3PZVZj4SwVSiWaWucMoASC87rFO+Y7Bp\nHFP2HHKIclEkSCbyyq8qAzkEkkcTPH0JRiGAU8ycFd0A7YRlTvn84gj33kTJ\nteX70yRTmp6rYmgbIkss9BIYY+QYPrcBjRw2IdWXtjAbOCDMxrfNSjxxPD05\nA7zY\r\n=nzlu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.847dd1ada.0_1578338756762_0.49657038303734957","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/theme","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"963b6eb8bc4e88f8dd5dd6f8c425f04393ad6aca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.39df7e5df.0.tgz","fileCount":14,"integrity":"sha512-GXiCyUu5OH2oZnbf3DaVyk5xBEXiRTqlYIStLkOBPVI2G39q5B+MH/4xg2Xj1yJD6eD+f23kJAgv7S6i3pyRdQ==","signatures":[{"sig":"MEYCIQDQ+k8Cs6qoNKp0l2mE5MVpytOrZAje0Y+0zx36HN/CpQIhANo1bTqkG4K3C2CWEZVECRgA3AUdewcEmUV8pmZmM8k5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9bvCRA9TVsSAnZWagAAZbMQAJsjP6KVsRibqOCHq3Vr\nEnWL5vLaf5Ks1/7LyH/HZ6aaHb/DJ+vKkERC3ellxcR5vNZ+9PtOGpu2KiJI\n4t6Ytz40tjsGrBGbu/GJZtnmQe8Z7NiK8Xs8x+NMp1vsUvg8xQACJtBxbpOF\n3GV1wVUjevv7aRJ6qGDypRXBTewri4SkxSmMh3q1rTx744N30FCqZoDORMC+\n/VXYXENQ3QI7Ihn+7V/RNLgx7MA60eeXP8qTRZdCE0rX+zzYeEGXoHQ7soC7\nuxtLml723zqmEF9Wt28SvsWk/4EqAM7MYq6q50tU8PZZyne3Emdew2+rrmME\n98NSLELrAs5IZBOx9hlqxhQTUWsjzEK84ZfNNIVS3rJ05fRnNEb2zKu4dy0J\nbICrrZn8BYc+haenDzl8EnAa0TKqDopGySPbiu1OWn9tvvJs6DK/WivZ3JTv\nbsSBsQZjuDYQfmRwns4wJsnCHsAYx2a22Zxw84P+fjXvUFBQ3VTUnnS+MWSg\nQjAdeS/RetxjwDug9UCteLoQHbfBgDYuTieLniNQAPXK1m3zfzVz3cY6dzQQ\n92cMyR/xyWNLHgc9fQ9mVJrgv3Th6RsVVJf8pL9KGwT8nH6G75nwadVvUUgC\nG+zYB2v8Q7TDtcSurkC3KgS2qfobylnGTRSHQ6gSW7VucschYCmDF9EMXF6U\naF/z\r\n=6Ocj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.39df7e5df.0_1578358511043_0.9218705917309531","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/theme","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30152aaf26cb009ac78f171ad0c2abdb1ee697e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.f1a2581ab.0.tgz","fileCount":14,"integrity":"sha512-RIOEU7Tv9Z+SoO43RtiOpbgxNiqX+6b4+r1oJTglLBBZmLOjlps0i/NwjY6pHlFuldjWY7gWMW3Qoqei89SMBw==","signatures":[{"sig":"MEUCIF95EENT0fBNMFwmETouYM+3M2ekGfFSedibOEP+EIgMAiEA7n2GihkqvK0hzcXv5oi+Rny8/3TgPDsTKCk6eKas1Jc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJzCCRA9TVsSAnZWagAAXH4P/RDQv0l0ICWN+DZZowTQ\np+RfaypNs6hWf5njiDdv/1ZrwZXyMK6aBlLvS7CpiPx5XoLZ0ymZRR2pu1bV\numxuDE1QNtEiBFCBAMwAWW5FWrzltSMC/XiAHw3SwvQ7qL7o5kw+5yw3sGax\n5VFZ3oeZJCdsE/4O5h8pki2f4KvCymaEhbl7IZ/wLMl+tomgnxWOoGCImu/s\nRS2o8c8wpJVz32xIOa2eL+7fxva4IU1l3cuNRxwqwL+G1Pnqv+ZZZtk6UIiw\nn+2rnkQMzECiPWtAD6N6LWslbz5NYi++08ztiBlCkGSjXQTc2IX7rPpmPi2J\nDHcYEF4BvgZPZlNXZTSOIlvOT8b1kRxMWZDaO9UB3riUZym85Jh84/DGQAg3\n5uT9RuKBcRxLV1mED+TcxyEQ4a93tDoUBtrJ0HeMsbeP3/p1Ckf6v5qhQjeU\nfGxiONA+oIrTqOUwNQkW/piAbqhSJIgQ6ePxA+ShUJdf4bPCbsInEj9YNsUB\nVd1ckFHvKopRCd6MdYptyfVudtM9kdFThcIjAVQ0fvaGkyxHFwooLW88piHC\n+CkmGE9aHZndNSAqmtHSpLhgl9zo6qtCPMwPhSqy7zSGFBAQu/lc9XZPIoxG\nBdjv2FeENUeqduy2ZZHxKcDf00alfx0aMTvhDjcFD5OD4mBDogEk5Fjpm9JV\nWamB\r\n=YSWM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.f1a2581ab.0_1578409154343_0.3643761113805142","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/theme","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4e1fb0e00664c4a155a7b6c63f18c21d816c01c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.7c7ddf347.0.tgz","fileCount":14,"integrity":"sha512-vxHWDLaKIdRmN2SCMPMD9wCsq+fRrTyK+1f42tGzb9hmGNT+6agaO/+7LvjcyjPi2tzZ8GcBU9QPo/txCxkYRg==","signatures":[{"sig":"MEUCIGCwiKqaNFN+ze8K4WAUQf6dGSmkdxw1KUhbWDU+z9TlAiEAskCN3DsRgtIaWbvHoSqlLXyMe9VBa3fmLE1vgQQpkxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKCJCRA9TVsSAnZWagAAziYP/joMpZS9SwEzsEZdfjon\ncRhNIdLYZgT2oNqnf59+0+oto001yk9mPRVEuEtA19kbld6BL7L24lP7zTpC\nybH1ggwizAmijRsbSyx8OpkFeBdem8VCCR5pOS/G1tXkS3dzY9MEn6cgPBX4\nXp25Djs6P7sm9dVQT5HbWYA8suqZwAOknb1nmNwnKslRGuQlVZmpkXT577yg\ndw5BLH1i3/ZmvfLRLO9fBe3bC++UyL7jCHsdNgb1eHTo0HcVHhtOhe0Zxi8n\nI1vxrPSZPfpSwZ56kqUu/maKb0cX4WHr1WDNcHaMxNC3HIb896tdHJdBNwcG\nlnUgPLab+ZZu74hdVznCp8fv/KzBhiv/bJZ8FGRM4TG0xEbeGizS65cDLqLA\nYdUdNtFDBLFP3x3qBDQOqtnzJwbc3Lzwrz3H1gkXGARMnVbns/r1X1f+6mi6\nwhFwaci5zyoviQHxhDEab82//4w+gmjiH99/j0Fsx1NqlZqYtwr5uYhzhf1o\n/6TJuRKZHLcvFtF0QUhSuyBS80JBAOAkEJKJ1Nl+ffDtLAj/rNm+ypts8O9k\nCHXXXhDmNG9cnQ1/u10+YhNQBngsRg9C7TObw9qL1JjwHOCqoMxotIb7sf5n\nmfdZWDJJrEXLOhGtqGlXzq46EJzQYZ9efyEP8cwKJHc+VZen4VivRIW3rq73\nQtWw\r\n=0JV2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.7c7ddf347.0_1578410121423_0.43109399107024093","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/theme","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a303af3e554c9f5c6f7519311b699406d82d9631","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":14,"integrity":"sha512-emmdNUCC2SdvXyRS0SxR9TKbOg4C4E3LLo5I+LDc+eZS6zPR7MYc7RsS8NJq46VDMYe6ElyHytPu1FvsrS3gMQ==","signatures":[{"sig":"MEUCIQDxqiroCCWmymwfPLdNPi6ST6/KT1Ez+zNeZIjnM+QkPAIgLBwSVrwIa5qQLcGvoAghAadH/+XM+Mdy+OoAXZ0E0wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMlnCRA9TVsSAnZWagAAV34QAIW/WPD5cxqZC2GEgcCn\nM+cPkVJp7axI1Xjo8RGmftphaCuNULvt7fkmNWIEkdIkv6kCBl9TV+wyuCpD\n8YBs06Dp7Bvj+DLme4hE3NTJrnima0dyOErMEqF+cI7DmkpA8sskYZWL+2OS\nOmEKsL2Pqr03PbbgWshweSPCNQL6/MtD30qEDCK0o8uAB6op2cFqGXi0LQkQ\nxkexKj9Zlw1k/19Rxfbs3KYoW4DMEdsR4jpHWsFw2qFLHpd9D0aGIHupX98z\nor4TMjFeEXNB07vTtLLeXQ9LHrtqIRFB4vfSpxfPLBHIpGVO6eJCstXqOwFr\nZltLJ65K+MF8idqY/YoCMgBw4lx8/fnHDcHUsBuLRBiFcFA5abkSdfx6InYN\noxyik7HrGUFN9huLjP08qQe9bv75Ddy3nKl6c+z8zk3R4T39B8mml75R2Jok\n16l13IxnWJbXRmXnjjW/PaSnyjYN+ML5MU6VoMnRmhhSx3V+sHQQdzGUSlGf\nsnWX8hD0CvyX4tO+jI+ooikt2bdCp+IX8YvforJUXMmLYJBXWJuzz5BQesXC\n1J90812F/0/D7LkSdySdGiKbZvOlcAGW9Layq8BEevVKwtz4/xPX4hcFsi0M\nxGABJIWzU6xvziSE4NM0jYm1H85fxjdgfGL5pETLt2U7WAu9OiFf58NpdPBH\ntJpY\r\n=JJjf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.a1c84d4b5.0_1578420583173_0.44866766678167935","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/theme","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fac07ce42d2c048c82444b8725080edf85f31dfe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.ec9f16578.0.tgz","fileCount":14,"integrity":"sha512-m3+TF7OJhyNxovjJq77R4ldaZiHmAcOqCAYnkE6nbifDc3cVT0XK4snOF56tOl66e69UZJYL1qJ0PF+dEuF3Pw==","signatures":[{"sig":"MEUCIQDsdoXMkGNKvnuwwOcfEtq+HkgkolpVolVv4pcEQXWaGwIgN13bkEo9qr4dAS2REuuPH09LDmikWLsn6IQ6R6youw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN5gCRA9TVsSAnZWagAAbUQP/i9hREVOBOh2QJMfQecC\nmkFl6x1GvflfGgS9dNugh4wbCTSDI/dnTWYxzeoIQGqMvPhRjC5OXGvdvX9s\nwO6/V0PNfFfEbJI9K2uhigIudqMjKB8KgWxGIMLQDanJOIIhnZbTLbAuULPy\njNXQzIhzXA+uPZyZdwLxcFtcNL5i+qn6ZpeN4hHOioFiPqVl2dapRT1nDvN3\n66t/b6aLLTOG/sD377Q22N4XRaPrz1ryukto9577mZ+gASlI6ddYeXVMEGkT\nNdcIe1z6qdHRZTdTzKbYdcqzAg6Ylv+5IF/xpzOtdFKTezjKL5y6MuQyZ8W0\nm+hEUWSaEDKK2VtXAz6Zbach21lKIM/wLlR8qyYBNHA5ga2Sfju+IPcK8z8H\n6RdgUCFTvS0ZPJJPJfy5KUNETOgGw2HRuMUIb5qmkWQyP+jf6YqlU70GtBhv\nceUurtJ1jRVaLbevLFhQDe1R3Ry3w0Uti9oBhyF6iS31dpGvqLD/CX4h1g+J\npx/9Qza7JjNohngHNLIOdt3Q/yxNY4MLo+ArOzDYH0vItwWE4hDBQwi1UT5/\nr0WGBrXhR/mBzp4pixafrK48tXOy35lPlF+fFVwrKooByQq5WrRN/QcX8vQ3\nC7GIg7WKegOF2kEzv8HsnNC8ev/uBywgO8/QQ2oNjUVSmxElGMgqZPirXeX+\n6I15\r\n=vU7B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.ec9f16578.0_1578425952579_0.38376664359886936","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/theme","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b602226ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfdc5599cfb9b9b1a23163814550bc0671cea04f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b602226ce.0.tgz","fileCount":14,"integrity":"sha512-r/0iprESQzrXWw3ifcrN2sGxkyRSU362qhEA5jP4Am9ZdcHIx+gF26RQQggbRnQRMqWt0AXSvJdrBCx+PTqzIA==","signatures":[{"sig":"MEUCICPdumJ5jZv5LHZ6oRtwIOY222imsocnEUScyXoGzunyAiEA0oWy/MQlCqUE0EonIIx5jpW2p5uexCvexhKz1kRIDEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObACRA9TVsSAnZWagAAAqMQAIDDSMUifmjfuAvZlKMQ\nY3zP4ya/02Y+UMykKUeMYLp5v2HzQgwztRC4ixcD+9aieuZ9Em+nQaV6G5YJ\n5TcTk1CkEpZD92lzVW/8DgxgBhApNynCALgG9uEIStiCLrMB7Fg83X/rHUbl\npizJE9f48oqqsbnSR6xy+VsY+CFnJotDRnPbUxb3EK+dewtrpfdFJjk9Iz1q\n0UHTreCBpr4Y3Df45jwfLRZ7XSx6Yi1sA4CdwkIpHlVgJoTbUdHq3ilESdM+\nA9X/MJaTmXdP4ZABtvcJXWGt/MBzHrtq8BiCsmgBRKEWp6Pe/qUgkmMY0hZg\nPmVBB9pJ5lFjywHwqddFoQ9KTNNVV5NxXhBZ4fTXf3NEcJ2pkcbcRbj83vtq\nAKoiDUVeFz5YzLXLZsNKzFXt4mXqINvNupl+NaHKLqnDKw6qKq7tqVJHRZsw\nVytLknN48uhAaA4DmrE8L9MqS/DnK1b2Qbfsm5q2OjN+UPPbMbQFsL9rYij6\nbAdihW+GZhVuhr/w2yIckiyjN30Ras4PxSFrvOgTaI62JIcL1voRIjT5XpWd\nSapjFfYuIcM7beshRN1/tEXhU55V2mwbYPQcExTw+kJByr4DIjlEOZKVTR0G\nRqg8O+s1rmV64X4m+4Wp7f6E3uGmNsc3RR7p6X+dcZnoIe8l2OJYqwa0mCp4\nggDr\r\n=8yyA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b602226ce.0_1578428096150_0.17325675837378163","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/theme","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3715093a6f4269bebc2786b01b0b5d2eb4f04389","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":14,"integrity":"sha512-4UMlfGe+FFRj6PcSli+esZRVDkCs8FdYMkude1YZ6wltSe1XsMIMJigDP+OyT6ZY7dXcwVfCmHiqvN7ISB/lbw==","signatures":[{"sig":"MEUCIE8qjUCGHE3fIM/FMDLB45WRypEJ1SNE1v+UwuChId20AiEA3EL3pb6oYx8d5w0ye6up5dJRoHZZsf1ku2Dvwl1gHb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPdUCRA9TVsSAnZWagAA3NIP/1L2TyXiKM1lZF0dhE76\naSKS1/wNqqGvWnKTxSZFQ/KPNcnVvBbNQJyMInFfOSq1TGL1gnh7ZVG1Vfvo\nd+7DwFSsG3AyCGILBd0KB57i1Cow8VKlhaNxxtzhklNn86/jOkw09hF9Ipsk\nADbBY/8KE/bwirbWJQaDNjlx8OA1xHZsQq4h3vwvoE78Hs8OwZJCPVP+8BUU\noCuBLDrMTw1bOigHgS1dY5bl8MgvFheFOfzV70v9/IiEGiXNC8wipuXEzP8P\ncxghrZtAOGFWQn4MKfS0Pi5ev1XeiC9pLmIohJF0n/Objy+AsK/4XCwtM4xE\nkekxjSfDp8laGhHSzBBEAxiSqceNgcQHWVuSVSifmkTr/Z9vFgPyJ6LL8/PZ\nnxOJmEUFEUcO4jxs3scmlj+ixsA15/+5+wNcTJYAnU8sdoZj4x8wfjLX6HnJ\nyrSoQc91/aXU4wFhDeZ/AeQ6zuon78D5VgEZQo8kM10NfaQM+vAMAW2ShMNX\nOPcWl+cA3UGRHWbEccKSFbdXdt9sChzoy6LM+f3c2MX3teU0zfxf+MPTHQa8\nsFCqEMzoK3ymmSIGTiNQQ5R5E2vpTK3D5/Oebov9OfIo9t5zMVBlY9MRiowX\nq+8ArrJuGtBzJzCtUVKSZcLjYausZHUJeuhDKn7/szLy46cF76SZaQgCXfD2\n8OMu\r\n=xOHR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b2d2dc08c.0_1578432340244_0.8060692526982867","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/theme","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eddcd4131ec4f3c2142376f1f25085f91fa6af47","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.61f2d7580.0.tgz","fileCount":14,"integrity":"sha512-8rO89zjpS6euOPJW5bAOWalJdCIjtLCo9NX1G1x4BM/Cyf/9UGmWbsC/WWz1BabzyBrtQ5CrV0VXz7fG3RxcwQ==","signatures":[{"sig":"MEQCIA/UE0GjcHV/Z6cUFxo4JnhLUudOxqJSmVM5OfTBpnChAiBdVct64YMO8tOJWf0qvQbjWV+YmlGCCmd1iJEaE4Aj3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqKCRA9TVsSAnZWagAA+jUQAJkKKUQPJ9vw05dDZaNn\nr7oXmjh8/ZNbw4vN2A6l34pEjLA0XBTP4dGJF9XnKuk8+QBVIsE2L3FzXmhc\nLZt6mzbLplweMDcRCTzaTaSs89qM0bgDEUaL9MJ89SAlH5CsWCDUGc1gJJTV\nqtd8yF/J/x4pv6VsqJQfl10q0h3gMEUCfJbB/XX9stigfVqadZCXqV5eA9E8\n0Jd/vqwJyWF7++d+ZJHc6c+7TM4XJF8GRZHEqjNzecxRJnfXQvqDp3gl5vKN\nygioNKGYTU+qqyXSHWlVqM0U12zxrxZMQpU2qqTMqRqQ+ClGAjMdWTlr+OPt\nCM1y3u9CBrFl/pQMaOWmb19MJSrijf8VJx70eyDRfSy3POvCO7PelCG+LhtL\ndXXmuk8SzG2b7rUb2qk/MSMgQNzuTrS8pHBDRxm49Rq/XW1tI7Oq1R5LhA6i\njDzhLOYMN2C6CeQX4LHatv+9CslhuZ96T1IZoSwZ/scDyaGfJZVX4Qp0wrlY\n59qCxkvGX4DRAWMyM2xi4mO4HYRsVaETZk2rIb5pr75IQiLLZS6O+2Sf/KXT\neOVMBOPDsT1EPBDRSamPvX/OZW1wQx5LB80h2UckbIj/SeARgQqvi1C4/oUG\niAhPPh+jnddmW6YLN6NvB5gl9NNoqSFdA9LKWz3a/a1enSEQtbH88dA1ZP0i\n45DQ\r\n=X8IU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.61f2d7580.0_1578433161522_0.9168172879341714","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/theme","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b640fc2170ad0546aec795d1e45190a61662dd76","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.d1be53a2e.0.tgz","fileCount":14,"integrity":"sha512-yPo46zqtX4NhlboLhs9tKtlDN7J0Bg86kZfcl9Q/HTDueiGSKSsWkJl4b41QUN50pBCferdIsubtCd1Es43VTQ==","signatures":[{"sig":"MEUCIQCp1dZs4HbiM3EQ4kNH1HabcxjFBNgh03p3unyJT3/bBAIgepArglxFyDIOO39K/Y1zj4kyfHdto/ITxdrh6tF9+kE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQNOCRA9TVsSAnZWagAAFqcP/1z9JpNuvH5mpA3C2CzY\nWomgG5qkN6xb8tKJgl+tU2nG4PBIfj4toWL9EhhOsxcUTm/lSszILciOBsGq\n4TuDSP665BQfGDt/lsyeiUP1EPIn2FdYx8UlqZ6yGU2T5rVnQoGvODCEGiXL\nWeVGeUpXtfdtiApiu5XIjBYaF4k1YZ4o0IPLxSgP7r5pWEuix59ue/IoDrYc\nR9YiQvUrzRf5mQegx8KMABk7uZVglLFDtNwBw6niWtxRDxseeZdgNKwo0s0w\n0pl7G0mCLZnlrbFL5AREfFJArY1urcqQE/HQVa71J0oIfvA+OA/RMe29G9J7\nrJaUrMCPTasdKJ9VDXvntKFQvnma/Ui+BTSSWTeZbHtP1+JBvstK+hyaxU+y\nxw+veWEEjDUZZFJpCN16iF9bIyzJod+FNe9mkEtS93L8fGS8EhfgWIvFMyRx\n+QD6PSAvX70wqjCf8YQ2yXLrfr3cFTeSIALVhXi0v+CQLNZmcnk7jlX8AAtk\nfz9gnNa82S6GkAijb8b02RlaXUWUtNUg1/Ts7MfNnPgXIpdS0pppKIC+t6Hm\nh7jbrpmH9C/26yuLlUW6ey5trrINEX5AZ3AjGehb7zRPJEbsfKmnNAY7pFl+\nWwMgiW6Z6MwZSwAEqs57/vNUiWhE+LWLeEexhNgWeg94JIEYtSRDtAFOrQnu\nwBUn\r\n=Ei1G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.d1be53a2e.0_1578435405960_0.9448783044374511","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/theme","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4948a3399f38adab88852622a5112e1d9a9cf1f2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.9b0d06e32.0.tgz","fileCount":14,"integrity":"sha512-isWuplF4CYViyh6hMRrBJ5qBQnfcF8p0QKtLkFSQWLXHCWSVcOXcz0Ufbd/L8w+Gp805V7uunBvO74QxAaWYZQ==","signatures":[{"sig":"MEUCIQD41+SLqVsXrzwOGeZZjAbGrJNb7L/HmQ1aL2DBY5G4pwIgXPEfdE7Pii0FBCbkLEHA3AUvosNVDWr2u08SmpOnT0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQPUCRA9TVsSAnZWagAAcEAP/0bev1WFP/tH5c6tJWOq\nNMDm5lNlg5aF1+OR8vNFvOgjpHCwYB/Exkmwtaf0uQ3b/2SVVk5wXYdTCh2F\nMGiAQi182CIZDHFlQoQfeM9Y6EWCS0XtRsJW3UwU/A+E2bAVhvFwL801RFkS\nsEVMneYfiT7+Y+NcH2wvi788IBTwrR13DydCo3csuql5jcziQYpoNgItNSvO\nFMhk6kW6hA/66W92JoG7oH8BMmqdXqmGNtAMsg1kug/o1M9aGLhvAiSeQ6We\n/p3KKnX4rgB6cEGiLmOIsD/bP+lAsyfPvgl3HcjfjKVvuq+F5I2prJKkoa8f\n+r3lcw8du7x1E022O967FNrMU4+UiGdX6K2exPAZ1h4cyIDMaGvOfvnpjLnH\nu5vrWzwZm2j/AJeXXMfFm373x+Wk1X6n6bKehRFovWM3ceZmGzzc7sZMKH40\ngqlGP34jX/Iv7npsPU6ShaJ0hBy3cVSgcxfzBJhcx58s8rtLhj3T1hsAx6nJ\nh3F3qHyoT7XB4br7L6GhasYr7LcvdX8wg186r7yIEVdvyMhZUa9mg7BDJCJc\nMGBzVbHyl8//ssNBSxkfmoXuCZhdrADkls6ZmqoniYC84tT5V+0ADMpKqsNu\nLQEHYTEhr2Nvltxbca0TcxPEWMpfDLhMUm+Y36IN1BkwjXGYY9mYevPqCtjF\nIPPs\r\n=3CCz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.9b0d06e32.0_1578435539982_0.29010591070340697","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/theme","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.730c807a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d446760d5c902b0da98698b292e0828d907950c5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.730c807a0.0.tgz","fileCount":14,"integrity":"sha512-KRBTbuKSlEjZlcMGSQZg2daZj6gvh0TH+ThNeTCgzdixaY8CY3fU77qzfyOKlRnz6xQ73pXIvMSKyU9NJLmXow==","signatures":[{"sig":"MEYCIQCnK+9GwS7pzFLuAZ9F2V3PSQzMMWHdboLVgkdKRvDoBQIhAImIpxZVNMpSubuMTa/ml8O6WTwiakR+EqlYo9zgM80E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQ0CRA9TVsSAnZWagAA/j0QAIIugjKuW/RBkUM+4nUC\naaj6sjdfQIIiqAL+lapMY1T8NmghOl8CRrjyFrtdo8KOzXV2ssRAGl71gWY3\nOw8v3gSjCq0/Fky6yu4PsjoY+Zpt7dP0/tmAIFMh1YSybR/yRtVrfgyULE0U\nyq6XUYsNaKRqwrohysbfBRj4FfqKmInUqyUtXkY3gqje5YelclIpjP8wQUuY\ntLVgAzzc0yuLhjWkCjq+GXWrZG0GsKF8wQvN8V+qAD6BXSeU6HWAvORN+xRg\nismEMmvfVIqJ9eu1XknnN81k/sozR8t26O+YsL6+B198wsCj93uwYd03WsNr\n0RQg2mKOkSeXC6JE6ejas4ecPTTLA1Plp0u28WSUyfSjQIsrWJLhJQjhM/Y3\nrjvD3tGrfudN0N50qc15/aP2Vu1lkLS8ybyPziHndyo87RRDErTpnNTDE18y\nQK1YRKFimprj5vuNmNqxSplds+9Yxv6qkh+u6F39hBAxC18rBePAsW3e7WMX\n9q9ZUiTZ+yblRbawhBwb5AK/nn1zE0YQLJJDpA2JHxL/n962ERA9ARujJuba\nirKcqosR2KK0EC18JaFUncMXdxqpiLlZWQV8oNCk3PpRKEfGo63nRTL+yqns\naoCV+WjpsWM7uWryJpLWxIkoUOP7LLqkyvRaao0aYxkQ4hH0KNkBX6WtTlnL\npVcu\r\n=UvoS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.730c807a0.0_1578435636497_0.6114129092222937","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/theme","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.2213152cd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c0024182d15cd05b3e7e3ccfeb57678435bb6b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.2213152cd.0.tgz","fileCount":14,"integrity":"sha512-ngz7XQyGnseuWqNxQyhDX61uBjrEurxBExoDG1VZK03kB5EDk8n6RjQin+EV6xq4wbFcU0N++n86MJ8OAI8u4w==","signatures":[{"sig":"MEQCIHno/6QWF6GBHxJpbMBF7teW88qg7NaIbcQZZ3/EZNB/AiAFpb47ZQTbm9+9K69pPy71BgG/XdXQiKJJkRqeOoOjRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg+yCRA9TVsSAnZWagAArigP/3E5hKv2FFgsDdkxjLlD\nqzD1QEmrQe6Yl2tLMxaRFHwi+ybDVgQTrH/qTji5OmL+nxvw03Dc7OOJjEIz\nyuuyElEIRxcJkIiG7pdDO6yIxW65c+mPFsKjyJWu6ZqDUXscvjJArx7/CNtA\nilgxLhjAh1fO3xoEOuwJYTrQ2jMDUbQM9fjjLQirwlb7zvNUiCVI9VWeTqZc\nItCQfiNRXhYvL/BMCpHF+Vp91cXPcBnTkWFXxOrzB5Nbxot7bjrLUhmOkDyo\n+jN1K3I6whd1xSe5HT/EgV3Z8iJeBhUleEMS0w+Z6zjqOTA4kWVikqxdZUBk\nPlTqQzYJBNPFxki9h8zKh6tprm4aR/aUqPklJW5g0FZfJr0eEv68uhvySv4t\nkYz6LUjpltzjkN2lJimeiQYKPU4PgBLBgdmM07LdwTGK8gG68NVU2g7B4soH\n51tcol0rvY3WMG3/LxU3stsM6dnnyTWlhRiipnhWYrl9cMDHbuaEtwsEcVOZ\nbBYwszjUv6kFT+jVjlacvZ2iqhmrn4xwG0ceC+xnJiXgau6QXHAGWaJwTUd0\ndz+jNsFBC4Qo+QqgvT+Fk8upQtQ0FpR/0GEj+7pT2pENPaq9xkTxtPAH9x+k\nkVzMfOhlbY3SgRBQN6LUp6AvaazKYGDbLCz9pV08m7TBaX0AIhKpSluutpz5\nDTla\r\n=Mih0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.2213152cd.0_1578504114312_0.7208666224998843","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/theme","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.5750f7169.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"723e3a890ea4640cf963aec55497ba0039ebf7b2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.5750f7169.0.tgz","fileCount":14,"integrity":"sha512-sI/FeeEzYn77D/TXdwS1aeRnjZmRe+8xUO9R/oLa7CifQUpILywVxcCdffatRF76voSj7h3XJLr2y1KteW6PzQ==","signatures":[{"sig":"MEUCIGCbnV4WaOAO8Ethl6etUj0bO95bGHwr8cln9jYZ6/VMAiEAqiTter3xjoXTcLZMnxgb5czrb6sidGQaZOu3jTXipyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhfJCRA9TVsSAnZWagAAHvgP/i0ERF+Jnq80OTdn+Yb4\n3fbAmKBqBu0wMjtChjBTod3iR988vEAqoDkdijRz+ZOYXdmjWDaBp4VXiXu1\nqSk+xIJJXnCLFhg4HW2dcEe8xwKHzwUR5u/TH8tRGsdUMj+HO4GhhY3eOdMH\n76qKLpvKDxpwZhR04fnvhPHICkwCm6tzx0rH3MCwXvGwo9sDpM3hbO1B+MQo\nq65PM/ltYMLc/z3i5B9SpKnHyH7KO4n5hWysAhPeV+tdQMbpE1cF1ZxvJq6f\nSJoumI6pNI6XCbhMgk9mGENq7ptpUOmtNbK34pwZLS4fRjL0Ksudsa1lYc9K\nbwPUubiNrRl0+h4dY/8RQCpkKOouM+PMhP5C36ctxiQAfw9eN4crsth9YuHq\nT2bWXq2FQeI0edDrVwtFigh5+jagj8xC3iw3uwERlqxBZE6jOWNOELgKnT5H\ncEJIX4I1FQUgVHD7E3KpjX2lLLSqU/TpvI9NwtcuZOAPqIZ4l9AnWdyc7TxG\n7WG5jyBp2cx6yglRZ7YXSRQ2CEXMinjMK2QaAqdbC+mZ52DK5+Vg5U6VSXuI\nGzhL/9Av9mjc/hcfHNcYBne5E3fopXuCo+Ub/bTfLLHK7ik6SbEtUPlnLXIY\nncNcMGhdYg2SFewtCStlHNYeI8oc4mZLn/yYMyrLLbD60OdNv7wv/ygcOYde\nO5jZ\r\n=DSYz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.5750f7169.0_1578506185283_0.17094577153498203","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/theme","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c5acb7e028ed0ceb3b9add55b7ac1e0d2f5d666","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.f7abc7a43.0.tgz","fileCount":14,"integrity":"sha512-tVRGOZUtoXN/vQRRf92ZXy8n3H1cPmKQs6elv8ELMgNu8S2zsb0oPRxxPAM7VI5T3MaO6DNdjU0z+MRFZOlHdA==","signatures":[{"sig":"MEYCIQC1Q8yI/6xqPtNaEp0i3yjAFDwOI2ONpYOEdLShCYhPiwIhAMNNqWjaq87ArYZJGMtx+W5LbY5Ye4Hxo6jgiKcV8vw4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh8MCRA9TVsSAnZWagAAGioP/0DwgSTDHhPPvgRWlqoT\nFMeBsrx/6qxtnpuylTiyDOAklaC0NtV+3wDQTFZjKPDLzY6oDPPk7XspilJW\nwr+U0ZZyuxFguI8ZY5t1zEEx7uk08q7OBInxrApC9sYN7gamHxkA0fC+T4tn\nIlc9bDSlmB/9vQ7VbEHO/3jKq+is5CCg2scibNeOc72oTCFmv1R4c42auR69\nVmUs9CEFucE2NKW7V6KpP9fjGXdvJfUHXnIm0qkRRu8yBw12/mh8EyOrpxNw\nX/fAyoNePC+Gu+4VrpPzEJ+7vEpfJkENYWldRCpEXi0Iao/q59Bq/j3sJ9eW\nqpBZrN3lk9V/2wJwnhzU8B5y1izYeehD0nxoQBS4aeTLPJfGMggEavYYL4h0\nHNadZzW3RHnhFBhxHbbdFhWfHUf/HUlyj8hecYFIX7WS7snfLL2BjVvUs3Kh\nDZSEEJeAnqYTkt9pxm4lka1N+hArzPgdE2vb32GQwJyiX9OzWJbWRiaIi/U/\ny907imL8PjZefr07CqOamA+4nk9FT+wWawhAuUIz+mTvecBgPIuEIBXrVTWt\nNdib/qajEiweHkG7PH0MiS5YmnNE5gDDs097qHvUtR6p7GsRX4xx0f02qU55\nJ5IbavJSqeVI6h3ZqlKPJmpZIDIx+h5UGzQTeT4VkwZjouj/8t4MuWkeDl5R\npsDQ\r\n=e6fr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.f7abc7a43.0_1578508043940_0.43426601272385756","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/theme","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9c63fafa9ab70acba6ddf6d6c869f7366e01246","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.bf7b4a061.0.tgz","fileCount":14,"integrity":"sha512-SORUgCZEl043idJv4jbkl0zkZl2/L8CEmjlvNbDMM5RYcY2BT/mWgtSwlZ0UPK+nZyNviAcKEfEmSP0br4RrFA==","signatures":[{"sig":"MEUCIQCsjexZRNOMgasvgmvPHQI3Vl5SZXRx2Y7z3tCuK0MSDAIgA98JCRx63yOx+shZGL80jwiH6QpWpBVj4kzWsT7haBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJKCRA9TVsSAnZWagAAbXcP/ApiVnOboGGCSt/XClXQ\nxbizzMzVHFgELtB7L0yHToyywyi7C70EAsFRgkgqO6AjGs42h6O1TlPnHG1g\nCaF4/vNJrMgouMFxlHqSlOYyCtjVgsM+tg3aXWDoVFCec/0PDUbU3ZIDwYPV\nqexyJwfiCVxlnghY35c0EVfIbJnIuXHEyLqQ8kxReLCmi5jqnbBPbN6GE5oC\nsuz0dMrWaadSGzr9YPntSpEhNiWzwbWYTZmHbF8woAQS5Ay57p6W7EY+yMSN\n00keoYVvyKlsF7hE3Fq6tjfvvi25jamjrR9mn+Ql9Us3iPNYwftKKCmamqoO\nk+PixfW1+sZQhBMslKutpjPQN8ckXQGDTQMJj4BhyxxemwkFoBxNxI4K3uGx\nWt+ewHH0WcHYYMfIXOBNu461AlvCfQSG0WapkEcjLc5KigXH1r5w+4JJD6MT\n4RLA9HrSiWaMWnXxvmD/Jnq2Clu/A95HkGYSXZZjOTcU23bOBdL1fvZcDj+j\nRaP2KLo/ZC1yW9MQ4tVh8nm0jkyFmETyV7wNjoZVpSc/wssM2eyVF3aM1TuJ\n3fUdptY1z8WYcb+bpP5By0xyIan0Yw2fFkA9FTKZRRvUMsHGogOyQy40sAvs\nb1OyTy7eUgUd2dV7jg/ieI+ImrAW6+K+pWcshKWbkbfnfyI4mOw0vsUE1BP1\nyDNX\r\n=nku/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.bf7b4a061.0_1578508874237_0.2804175716391575","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/theme","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.784fa7903.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44b409723008bbe51d53f1d0d7eff597e7f1748a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.784fa7903.0.tgz","fileCount":14,"integrity":"sha512-AakUGL7BJCnS1AV4UmUpD6Jdnl0RS1w4XA9CB/v2A1KHQvo0RuHzTRxdhHvGDVvrxFArWveTgDqM4Q/T0kDeGg==","signatures":[{"sig":"MEUCIHY+7EsrWmI2O4Q8o3Tu6HSaSdsevbNvgtAh67jcPULcAiEA0Fq07Id0Qnb+db0CD9NAHYGN4qlMnFMHgYRXpma75Rg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikGCRA9TVsSAnZWagAA+Y0P/jBYJ0SygMmcc0iqOQGh\nOnVflcb5LlbGo+VvQIWX0jpixR7IqmScJHRRlOT7QWT46ZExahQuDknVyzW9\nP5i0YvoOAr9y+0/MtNPEY1Ec16zlXLHnK5SirpRxK1C9bpQDbGGtxWTaZ0MJ\n9Y/v4IzsKhDspe2Gog2Bmy+yfKuycjiDImwRXUSkUrinCcHU+Kb8EtNUw2UH\nRdE3k0UFLi5RdU9cZcqsBuOC5pISGny6XGd1cjmkvL4kRupJQYCrxPUCdRlQ\n9ZUhqkYKpX+PwSLAc5CRxGcsro4l5vt2+lgUlrY1YBoFxxSe9yku2tj5ERQE\nkDC7SCA5LRUC/L75Gk1xx94unEgnoOJ/v1ThysoEIoPGi74gcKRLLvh4Xe0Z\njYwOuy2TeeAJNbyUDsnCsVRwZo31YBUN1DyGMFn+spwFqte/iMd8/oeH817E\njwF0l6qtJ7rTgkB/MqiUbl/JMTxdiRNPu3un8Nb+FiiAlrfVOEPvoDRtB54W\nS3OIz1izd7jLQ9n3tIJVT/3FdmQmpB60eeL3PKcxy+XlmpKwI0p7e7BwStKi\nX/RIlLkvOwt2fBA1oSRsfC1/9uH2HK8J7JrYXhdvoeSq7N4Q2R4FopG3LxZN\nZIbQ2BjK7UBA7PyYIK0IblQc8qidmbXz53/i1UQOJ2f8FAR/UAz4VnJKvaOV\niU/p\r\n=zxMv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.784fa7903.0_1578510597895_0.7958220488147698","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/theme","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.823c050ba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cb4528287a22794c83af809edc210076f4fb145","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.823c050ba.0.tgz","fileCount":14,"integrity":"sha512-WZdCoYJmSpg+UEdEe/7Odc4aRPV9C8doR78otKukURhjRacFdC6Ocn64ar5fCEGoZAbpyYXjnAhGk2QZ8jK2yA==","signatures":[{"sig":"MEYCIQC0+LyM3iW9JlRjr3uzbOiSOehxlVtEVJzymvkIlfNaEAIhAP5ox+eNFSieT3eWSE4cS/0loQN9JpxbHl0Vu5x0TTj1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjcxCRA9TVsSAnZWagAADZgP/jDroa6sgiYbgXeOZNU4\nCuIRCkjpGxErGPMOrl4wLi1kIV6kXt8PSwEJgs8shgWbPF1bgWDcdDgNZe34\nsFCyNkgikoB4Mli6BLQxqlUJI3VepliOwlGXqVYfLFrNzJlaOxvJZlx227rf\nNuTNpsaUQ31f1qBIspgg48dGi8CGcBDLTqTrGb9Pk8n/zZpdTTL5JhXBCwha\novZV7As8rNn1AAMur95YNANrr+YjbIkyaXYqAlL62NefBhMMzEqJNs3CDlds\n27Bt1V6NUXJ7ovi+ejzc2qrPpG3S/ZDCxsMVpw54eGWclXyWbIn5lE0eOgO3\nilqKWu1KY8usFOOTXxoU+96NV2r6Dnrk+o/WWomWmyQsiEn83WJlAkzPGDKJ\nQEG7fIqvlh/fkMUGwwfd8z+xm9Gk7e9LzOfBbG6M3w/jd63Ld3R7SHnPOWzA\nK/SxyFj8gZDjBVGzkOmJamNvntIWHSAGKsxLlLZmT/IxYXrXoW2Mjb7Wfm4c\n9wICjvlDvbZ2tmX5oZFMJ0hM0v7WHmydmQMooU7kM/WvfbPq9EvFe1LUTvJS\nSjAb0yfRKMDeVE2WpuO91TrEScADhEP1PN03GYxvFF5QRohs1+Ut5Nhkh36J\nJuHLpfjXBWolVhNDd88XxGqAFP5MQkTau4GP3XIlwxDy1+XBl0gYM57ZmNjS\n65Zt\r\n=MgPc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.823c050ba.0_1578514224752_0.6930639637513238","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/theme","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.70c708dee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e85aee7dc22b12287bd0aa6cd787f5369e19d91","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.70c708dee.0.tgz","fileCount":14,"integrity":"sha512-gie3xOjJHp1Jb2IyOqqyBj9DaAeB6GGnqsFJHFW1LZ5smdm9yZpFC8SSASRnuFsm5hrjvX4Y/8i3Z+7F6SyJMA==","signatures":[{"sig":"MEUCIQCGjpTqU21D+tLmwBfkUR5abxgoqiHyWfVaXUilsU+auAIgUiGsi8YCU7zG14/uxqWFcvUDkKLDqrHaqeHNSv57XYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjnTCRA9TVsSAnZWagAAl1MP/1Rxv0RAO56B27oDaeJ6\nk1/dKnit9/p8eK88PXXrQRhCzV0YS5WHdeJaq+Kd3j7eJ3zdh9BumAKJ8U1A\ncHnFStcgFADG3ZAEVGEwLmfJVHvod8NcmmejWZJa2flZZpKU2rzKG9KkxQIq\nhmT6FmXU+BFv58bx8k2Ujhj7rMdKH+4ZrVmpMDiRvfeOsVqT7HYr64aVQEYJ\n6H3rUPT0xupFOCG0L/0folDkCEtngbe+7FVPQxzFD3B6m2NKhDnUreZ+faOH\naACxuKr4c0JTwGrCBt0kH2OLfDK9U5pKNQtWiXNjAKoQ5fgXmbEtgjn0HfvX\nu2if952TBzrb1Xv4PEk24ZK35EoqC4XbyQfvER4PwuDRluBrFLuKidGF4Dm4\ndVPZXCYi4z7X8YQTdNvjvDhJyp9zVEsebeDyYn8AAK0Eyj+ZCTERdXDBuwPU\n2mCqDdS+Bh6ZS8gHc/mEQOHAfFD6hKVnU3s/agUEmZdRe3Vw+JbBTCH8UiA1\nMMt6Ss4JduR1uFw7fgSWz0P5B4MM0+lGttrBp1KNm958HtmBexdbbOEKQMoU\nFyOPSMrNxIzULtgGp32LhEeGBy9UhNk7vKCJqcZu0B9zxOaSrWGhwpU9ZeMd\nlnm3ZxpMfiDlHaWzFqywJhRbDY5CxOrDtZj3eXAn+iWmuOCM4A77ko2P88sQ\n7Fru\r\n=OpCp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.70c708dee.0_1578514899460_0.724341077664111","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/theme","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9274508953c752c42f5ff3d7ba8b759e428fc92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":14,"integrity":"sha512-NMXf7SBtg2RLnx0nTnAj94DZtZT2QV+rbCebMZgQkY9cLiruu5w9PcCZLolWnfCjcpmugzlsR/dbweEB5BnwAg==","signatures":[{"sig":"MEUCIDurNfu7+11r/TVu46o8hdywAQ0vnqUkzMF2SziDt+fkAiEAiD2WNN/SOR/cvMrYaH0wPkERDvBazZCr1DRzB5myQ6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFky8CRA9TVsSAnZWagAAkGoP/00jVwNb6yDmkVh5/Czv\nMlyPzG6hS3uHpcETlnaqehF/O/00qg/jG//FU0KHyrJNinN43IGThPBMkInb\nUP+bUjTgG2JBWXx9ujzjgBSp6zYxInCaOFYkNIXOFiM8eb+HXTm9FuGPvjUE\nUlvtkWuEbxG24ut3RocyUvBTEB0RAgHUvkeW2UJqhh90350I+0qbulxOy3Eh\nkXkGJGOuQSpLYFzRXOICxNhNLonrbQ9jfKlWGvDGcTdZzq0cFr+8hKDn9s9E\nZ4BsiXyyTNgqiybe9vyDgOkVRsdZT6qusgwP6DAnE339OZZ23QIed7kmJugV\nK3z1/8gzze97z9ONZhAmo2pNZ4K73I5yyL/FS72cwSs+oDG/v7+gVA7XlLkM\ndnDw9TcdO49zQpLidBorLVJ4t3VLeOWjccqJ55GoLCs59TT6x2GjunTflPJx\nwbDol4CZQwtCvvGunU5ccGkzbHczy62w2ImewDKu5H3kom7DDNZchaOrauPC\nlA7NhjUdxW1Rm//yJmxzIk9bpn06VP/pNWvU154tW1HHbxYb93XqDwYQtHbD\nsLKJo8hrnm8Ms2f0KlXsJX5DXnIaFODt6KLG5gCaKAo0xqU5FUTf2DG38qif\nUzalrxqLRZGg+/Ci6BN+jULi12/D02hxq0EG13DsqKsOqLbBTHF/TXln07VJ\nq8Wt\r\n=q+iQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.5ed9d13d0.0_1578519740059_0.2699041195194747","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/theme","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14b71b96a40a3c82a98038a1359679777b14700f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.4819cc7e5.0.tgz","fileCount":14,"integrity":"sha512-Z/wiBaaC4uGqgFM22EG1cQN1F7bg4Y8TWqKZwP7DWeg25LY6eRE+Yn7nNOaAfCYmUWbw33wRY1fQmvHCt73msw==","signatures":[{"sig":"MEYCIQDntq2yz+1ukXk5D48CVRXlPHejJgxPHsbKZNDE4gKXaQIhALT+vN9maLu7II4yxzM6IVogj/YmeZ23b2hwRBZNJPiJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlBUCRA9TVsSAnZWagAAoe8QAJ7/43idXJ+ST/kPH/HN\nRBhTM03O89bq1i1mqkiC95OV/Tl/4Kb8Wh9mT+coI5jlC3Na7SvJyuzlphxt\n/pml5APrOquvk/XHmcEgP4FTfJa3PCMzPo8qvSE0PpEn57apiCYEatX1GtLb\nCR5I3/10rLZmBFPDxELw6XOuwpbfCLYEfOIbFS87Yanw8GNEsXPQH+tVG5kj\nr5oJZdpMX1HSu2TdLibVNvagysHD2wh3UhZRfojjYDLNRAI6eZ4JyYJgdZu/\nBtEg2ftErF56qieJHLioXHzYL/NMNEpH9I/4H3wPB1GRf1H2o4W/vsEopLt+\n/wyWGmnSxYyR92gPGZbFsMncETFYbXEbZ5jPPq8XLGZEDrPkVnkn7uVKh/0D\nYRxfQ8xAhQwH8h0Ja+CUTIgGzox0ggQP/L9YMRoeITYs6UEx9MWUT1h7ubpk\nOYREq4s7YM+y4cJkNvwj+arDaaBGbj0zJm+k4j++reYJN7ebp2GFUa4YwkrX\nztyqXGRwl15A6FW7DEyZ9lSJclHpMTNyCx4C9S+BMgJC06AzbWhq+geNyfok\n+BLxxWmi9EtmswEyrYgMgwNMRXBdc2gRmG9k/30RIdS75J/J8h7K/T9GAqhf\nQ9NK/nZ4XLU7LxLhoT1x271eGYVq0IgHmh57Zs7RwCNdC+sKlw8u+eaj800C\n+aGC\r\n=aO+g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.4819cc7e5.0_1578520660170_0.3216695000437373","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/theme","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2835e1bf2cbc206041b0c64c14dc40cf66dad503","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":14,"integrity":"sha512-caIMKjI4uAv0wkDytZ4DLyKtgGZvGl+1DiYm1jK7PZMd/Xln/ruVYBYOEKP0OfJFIN7ANi+znexfFMnMx1x4fQ==","signatures":[{"sig":"MEYCIQCXOVVGPTtKpG9J0CNVsr8vDoLCwduNydIQY2sEOkFWJQIhAJW7r2RXPNhdwPBoHyCInbhc60H90B2OJbKscnefRowo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlSZCRA9TVsSAnZWagAA6sMP/3bZr02NwVbXHANfu5aR\naN2te9hTo+EwmOiZInK2xzChqObl4xDvP67KaMHfyYhzthNOgbp547SBPD6a\n0CRZyg+8tDZZHeaAevQXy40Gj2oOZJhr0XKoC9LYHbNGTy5+zHC3XAuwslE0\nJboEnx1HpAT6TgROX9mhTA+3hDuXMMghLZp43bYFfmW6SKCSWOicph/ua2Ej\nFzm79Fy0WXjeYfDrcFmgnhAWHFH2ygn1EP9t01TV9vXxTGFGv2qPHji3UmkV\nXX8lRurzVsFMGT47VVFimJWrEy7JxiVKMtBATK8EJY9v1vX1wCp+EjQl1JWH\n9mIQ7Q+OCSthVCyT+oSm6hgEtMR+IOkQ4Gwh9kSNp0tYHgWjF6Ql+uKfUDmj\nKMlcbia00lG8Bh6CVNuvxASj6RfbAhaXC2cViM7c9VsLaf/u1MrTdrb6dZfY\nrU0VcxwyqsGV+JLH/ZK17EomTlb0GJbrniiB3uN7COm04OHZUVyITP2HdSGA\nFTxB/7GUW1OBYtOnOSuTfLSTNgmV9xYkzq5ehG5P3+jCjHS9F7XsWoQBUqva\nP4rs0u675yQt/tyOzzLIqtoKqT541/bA7+5cuuVCc9XTlAXty7pFIun5TkTD\nuBl8BQiSkXdgzz/LFOQ9us/hgdg/stFlormag6ev7ki6XCTH7SzNHbWwRds0\niVoy\r\n=Lvfo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.fe3ffd2c3.0_1578521753077_0.8968439917563997","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/theme","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.c0e850090.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"226609f308f2b7b2a7b42769eea2eb98fe711eab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.c0e850090.0.tgz","fileCount":14,"integrity":"sha512-ZDbEFojUEPbQp1mUh1NR4GhFPp7gyo6I0oYQAEZ6vQhSy0FPD2AFBoPo7vOI5Mh2rQywMiD0xyewe1zVXQDbPg==","signatures":[{"sig":"MEQCIE/3FI/Jm8pWv4KlVPZNT4PuXJPNw7PwA2PcI4Vkqhw0AiAwUYRdOue0QVP8n//xSDgwgLbtLNDqjvFIj3C3VdYK9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlY+CRA9TVsSAnZWagAAyKMP/0Xv/5Nj4G5dQ0TFg/IE\non64AqpsAuF+yMpBSkkvMK5asWB93aeLemVvt02T8pDj46mD4UxxoroY/O1r\nPuPbMylUU2KdqjfWNIizbcfZyiO9UEZI4ChgvdVSwmqWr7qlUvvr3jwMw0pM\n5XAfmGxShu1UYkA15VStPUxyARIH4lRv8DIwUVy4d7PqJ/97AqiHeLCKs/tg\njHX5sRpddLvMOl/H52eCtLwiCQyP9t0LB8UyVTB0Rw9coIcZASkg5wSU3hdy\n8ErzCPi6ZHTlWt7/Y62gSav/WMn4WWVSRHZemn4cRaXfeX7KWXAWxNEoPdzU\nou/VCyEp2df6wAxzPNw4DzHW4+TMTuA2AL6eXFlxMnL3KqgxnZ2BbxxXYByn\nu4mucodI/LlYmo0B8TqyON4KXV52aEbzZD4u3tLrUu5G6pv6KYfrEkbp+88W\nySU0S84AgHLkN5gVFQwdhnEK4wfMsMjywDir92c2qrIr0rFVwUMkqsfldbQM\nii5rlEzoqiIxiJ4vCxWMFeUmJYuDQKj6+eZrOK8Pcw2+1k3VWl+SwwMgkVRs\nhlTod9DJuodh7vBBizdF1gcImzwQwJwB9Lc4Qfn+PbbJsKN/BctJGqs5kLxZ\n9uf880c+OTbcnHLbbtlGH2VOEEcxEyigEADLzRWq5211asJg91x1ceYzLY/R\nMWBg\r\n=4zlK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.c0e850090.0_1578522174404_0.01974766304344855","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/theme","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.615f86f38.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56c1d3e9ae3593ada683c92a12c7f76de3c97283","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.615f86f38.0.tgz","fileCount":14,"integrity":"sha512-HRw/lBXU+4po7mmrxgJBzhR26yJkEOvsNWY6/w0unkTNCreMQIjoN0bhhTM+/6tJ93SILJ/+AAb8ikHsHJG8Ng==","signatures":[{"sig":"MEUCIQCqhutpHWxfqSklE4ybU2+7h6ejpWAyy8BWsANUGdq6NQIgUTdDQ6cwL6WrbkFsm5meDsYTQ+cwuBNc7fqldSUWNW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlosCRA9TVsSAnZWagAAPhMQAIwmDanugDeUFTckjFvB\nVUBQCgw3Ot2BOZ9xe7jpmwK9B+7nDIivlbsSx4R23RmULPXwm6hNarFFMKXq\n46/1QQGG7cuMTp8pPM+8jDSAfoeTMOgsH1m89gAFAPL0RWjrIECQW+yfM4Zj\nBZ7paOx9J9C3oF8iav3odFU3QZ+31CiUL+WIOZqpAw8k5vAJfmFvBQu3tsEk\nqd8tq+JudUQS+H/m35H6jjRmKg60HbJas/uM31qm6x6mfj6yOCA+9SO1oeAL\n0dK9Hd+lyAZ6W4eio7dOXY+WlyHVlEu9xdby+rF/lCGpWEvzIpKZURfRILtI\nsVgmvZPEBi+dKwZ0JIhcCPG8ZvAXWM2P40aGZ81wCL0D7p4FO8B5/nST0K/G\nwkY9AYwEF/KFO93jVSX3WwRpq6YVmlAZt2BJhozlHxx3NOSf3OgTP14Jy9rN\nx79MY1zgIKB2RVcEOIn+HKi0n5d00JxB7ADzH1GBkKaEP8AVkFan7cRAPxIA\niM3lZMnn1oU5n3gIsvjTPy1sjUddRsd8tsvlkMW5r6psAwxfXc4codkiCNxw\nfGHuuFT7yyfc5xwVtkKCZylKbkXmhxGQTWZd49F4D7h6Q/mUR8PJbK4KPidm\nEBN71cchmDfb4Eg24JgB8FWcBMoSPzag2fzzEs5wfZNRV6GwmyZnSbiEVj6t\nSUIn\r\n=Zn6N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.615f86f38.0_1578523179664_0.1053944130872575","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/theme","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.1eb032637.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"875afebc25f9abefba90993168b35691addcc361","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.1eb032637.0.tgz","fileCount":14,"integrity":"sha512-Mfra7it20OYvoehHnR2WektqKUbIeDxzKbeAa5a5TT69EVo2cg5YCYyh9FGqTuvH17Iw+tFBE9k0MVGX8803eQ==","signatures":[{"sig":"MEQCIAgZKNkSBj4BljTHrc+A8UtRmpUOiNGY21tP0wtg1+rMAiAHx5zIM86RN0W2ocBwGcR69V0u7z3n5gFjSbEhVAEoQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl7bCRA9TVsSAnZWagAAxSgQAKPmqWNba9ynyEsdFG21\nOaSxJFKBhzt1aDHcgHSMZBPWxmPOr8oMAvC6532pM5GTypVITvNSRJ3N8NrZ\n4+PplqP+AH4ctelF44bWNjZm3/o7NzuKExFiNh+6ieel7DYG0tDXZutI5Icq\nIuAp91H5CY8NBco7ZEdcfOubmNQQXNFco3Iyd9WKNVsWapIBt1Rwx84IKQx/\nMitcdeHluRNgCY69VypKcNwzJUO5ntkKJj4uto2Fq7u5jjJHbAnWPvjjQTOR\noBPeOmqI46aKg3CSxkKB6YF2NfUbu+2gqWyEkD75DnveXNS7LRJn09CfiCT1\nn+lhlqjz+u20PbgaaOhU1LyEqSTad0S3YfnjQvLCfsinUtmurCSjOGXX3GL/\n37SbyFrfiJW+4Uw7Nh9YwtlNGd4Gml4mEzNBUDrTcx0Uzwml455B75GI2W5a\np1L6S2C7pJQJEuXWXqeBaKSXCODoMYymBOW1wMkwXLT2Gc09KinOQTdomEsA\nNn+CCQFXE7TsXkIELL7Rloc9WxpHZH7F/SuOYwexaBEh1rnWprS4iQCW/wKU\nC3GySm1AbsZQvt78eojcNPHk3B+4uuVbQTDgDlOiPM8qWaLFPoqc1Bho07rP\nSyuj8ux4AzrmlEbJqO0Np0NSQfs5l0VDphK12Q64aB372iD5OTCSzjiDspEW\nHCIl\r\n=JYbD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.1eb032637.0_1578524378829_0.7610572006886305","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/theme","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2976bb6c7ea76c519aef0722a9fc9bf41d7c233","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":14,"integrity":"sha512-Lu10WDELhmpaSVIw/r1mYOJjDlBbSfrMaOs2jkJJD25H5ABZJPnd/7d4FY0KCo36rzGtI2wT538wxw1dBoz5Kg==","signatures":[{"sig":"MEYCIQCVQm0s2LdC0gM4LX2a7QEzM44TXP89Na0/K7fc+zMVTQIhAI6uUALp2ur5cQLiIK4k5TzChvF9U6t5+IBPN7ljRW9n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8NCRA9TVsSAnZWagAASVgP/RoJlvDfs1o4k8KU7Jzm\nPm+fqYIDiFAlCHLRPWhiMW+xfExu+ieEe8yIbfDNfyfCeiwOsPhpya2iNeDh\nw07/0HOPR9G6G8gO3q5YzmgW4am8oaHkVLK969I/w8il+EJhK6h94snqg8lW\np+KeIHRareWmkFTeGlN6xpDid8d1g8uRqgHt5VDyA9l471fs7VgYPngwPND8\nt2PmGydZ6/BPaeHTmqqdknrk4NPdXZKi/BT4LL3jswVetBukcjN+2DZJr0e9\niHDBjJ7m17nX1GyrLY88ZCKHn68M/Rn/IJ+FZXgpfS/wjbXpYLqLR9ove6Vn\nhWD7qo4xn1H1PY6j8Ed8jeODzrr4bqYvRbHXmQrLtZxrTA5IeTEMB+Xt2vr5\nGtQuAPz+0LuB/vsX4pTUm6LnfdLT+PRQ2Zj4Zh9yN3GhJYhXv0EfHRr75rWG\nRlMsZm41+VptudX1f3ri5fJBKImPK0Z5mssuvsc2TyY9km5RNECl5TklqMZy\nPCaFQg25YuSgZzVfscbDVCgFWtpnFuxYbYMEWkaIXm6Xznm2oknVhozPZNVj\nW0Ago7Wk9stDNIiTg+Hz9xU+RqlV7Pwtz67Gogn8fa2GqOtEDILqjA6pI5Nf\n9cvUmJucEYa9t1B4i0dr2kUxns2RXmQpZkhIKDGnDGc6Lh1hlYoVhwldVl8m\nuBra\r\n=jZhp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.5bc5ebfea.0_1578524427922_0.21616207170496837","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/theme","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.1112b8def.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"916c24401483d79878a6a62856888c777264633f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.1112b8def.0.tgz","fileCount":14,"integrity":"sha512-n19oQYdZNslJwRkcZPXN56zzvpwCQVObWI0jijw1rQ5BdrBXXrdKKeXidg9S0YHPDtO4lL9c61K8Ec5/WGu8Ww==","signatures":[{"sig":"MEQCIH6Rfn1XcCNgJA4Ww2YlruFYdYW3tGlXmElv8W/h+H11AiAmKRs7gZsLP/TaRFq+44fZvMLINFBgQRrzFEPwIpOW5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6StCRA9TVsSAnZWagAAONsQAKNVJjNLBh6yZgvSOhd8\n9kTo45T94O5EIN4wXiJel3rtpV+qjXIqtM4jud28lq0ZaunhiG2ES9ChhcL7\nE1A4c2YtuVhDQxc84wAexcUfoGjXJl4+aaITMdKdzaNzKgccrBJRoPyp/1IC\nQoywOgTd8IkMTHUIFrhwYiGJdW9BGnQPVNwElGzewoiejE3uEbgqXiIEJIat\nyHOl21ILzDF4ReN3A+K6WLuzj9wE5P7Nht9/+ZSEyU8VkRVZpwDQnQOH/KSU\nBouu/c/w8vw+ejxppW6tc9kRvxQYBIcgbBx+ne4Jy8MkMVHd0GLHId8Du7Gx\n+KCDjPfwi3lrYWNbswE/pU+nI2znZiGVO8gTxgGuQIYxOKj9Q4V3wlFAJOYJ\nowQ6pF71NimeF2XmpTHiAZgsMZzuD+ugOjvsihpZXAyOhONnXcfkLnaiQDRg\nzam0IJlyY3hXwSuqv8uKI6M/ymKsJ87zpBk4lC7HNAkhCxd0BT556Uh4r07X\ny43gC2QwbdhAWZqrpBQ3OFnL/dqHSiusPiYEc/r995hUvDmR8HUU9ZG1rOnb\nyQMD6JA/KflirSAtX1p1x1K1/h6OgVQD9ODYLja7h15niKxflbldRUkr6JNw\nMeOdghwsg7VbAXwo9s1OfnML+GmAsaQYbtOHO84AY6xvYycw9LtlAoiBd6Eo\nkPSO\r\n=67iM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.1112b8def.0_1578607788856_0.187657083779168","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/theme","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.aab102017.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42917bd6fb61ad8442bd0fa1de28e3682b7c2b5d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.aab102017.0.tgz","fileCount":14,"integrity":"sha512-OQ28ezS5dCLE9wft1P+eZciuktaBkfFHuzQuNU2f8ft0mzS8Fur+ZDxzFHYqvTrJg7CTJxzv9/IEYjsuwnTu3w==","signatures":[{"sig":"MEQCIASjEcctZ9ML3iQKsRnrmiXddE2OE+gQ3sAcgCruW+0gAiAJZCfrXeNrisbCsvJm+TE/c3gDqYgNo3cBDVBX/fKkfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FOCRA9TVsSAnZWagAArKMP/RbTVzId5COJzJXu9uzK\nutHH/eE4o3dlGEDsFdFpHVqXe16mjEuCnKDyOkmlYMlmJapvypuuNjDvJtMR\n/dx2hq27fzCYWg6W3aAs7H/lIHczeEdMcJhCevZxItJxxUdEXJuVBlrCfQqk\neRX1VTEP6XQ3sS9BL0Cxd0bFBgwZaXsm1F+RRR0LX+mcbUHBNf4PE9eJVaSF\nUaOjLkZ4AfWk+12orh4CmTvqkFhvFR7c6c9ng5Z+1rVVUY29KkFm6ETg2X8c\n65HFI5hVNepGu7fc1Yp5ZQNH621K5vuBFpjLoBcNnYonF/WjE5VHBpm+CL+D\ne2tyRzjmgN6Vu/a0cdUamZJzxx/JqXqipgRjHH/8wr6htYSvnkrOEQsWKUmy\nta4XIH3CDggAj53+tM2scyhbyEmc0QpEV8KNfTR8RjtvBEYpP2jW0WlIFqfY\nvPGNjvlaCv6tQiMz9ypveVXxDNv/Ji0Pz2dKQIPJ4aMP4LrPdK3Y8R5LvcQ5\n0XOP7V8LiKcxUjswEdyw9OpJXuhc5F4MMy3nF9+rbXSpROLN+VHCUDR2gcrc\n1bOH7rJEOV6ffLPktvH2gkSkqLwP8Dt9O/HG27gGohh68yP5DCTS1K6mIFgE\n7yka3toH1dWz+vv8KYzn+8JxTnxkOEmnLyPuvNhuQ3i5itM4AyFA7y40ZtWz\njzjf\r\n=A3B/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.aab102017.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.aab102017.0_1578615117997_0.4613856240662837","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/theme","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.426913342.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a850de26ae5852dfd2ca0b919ae153248d713066","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.426913342.0.tgz","fileCount":14,"integrity":"sha512-15iJD27PWJ2NBtZQcWE4LRg6/D7WTmakFVqEG8ou8j+gnsMh3jcT0mynu4t6Wb9KsrtRJYHSWTbYxm+rafloQA==","signatures":[{"sig":"MEUCIBnGACa/FbcbumNpjwXlC9zLlkirrxEbGRuA3omp4V4tAiEA5lvNtqM0FCpXRXwngknvglJcbF99xx7XHaL/Rpk1qio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9bXCRA9TVsSAnZWagAAOFYP/1SWhb/K4x2+36ZhIRIF\nnzBefgZnd63prST1N90h/OGoG/Rml6ngWwEkaeH/7zz+b4W8R7qK12Olvc6h\nB7F0lVEy7CGJg9Aq2EkS7D4muoLcVlZgChcLyf7zoo9emHlqCuYgZmRxoZbm\nZNJDML6XR1pGLMk/zZ9Qj95bOg05fqw4nQDMgA7diuk8pmgvKCPTPYYbQYFp\nzPHLOe/OOKfXhtWw3zzDkKfW2+V5RTcUalMzHKQfoZCmYBrRT48+zAoFXWmg\nKoCaBA+Nvp2HtfMtNBBkwuGyjYNQlCicuEhNNM3dev1zvMGhEVp79gyAwzG4\nvvc3baduiPess+7fh3G0LJTdrZioaFj46fndFtpmkfJLKj3bzYmANgwWoFK0\nQnr84hyUqQOgheKIKWrYp87mgZO7GfF1zyd34/bp3Nl1nXWObFzCDdv6yrz/\nIhoaZmOuCIGkN+jRVm6PgMQKQlRcuQHG10FvHCUoqjbJb8Q5JQltsh44xu6p\n+vZ4Qlxtp+3/yYh2r/405nQIQDbeEqrMEVHjdlBQNYCfZUA60pOGw5AlggiX\nSvPSC17ylnFTiHyJ0R2kMmJ8vxiTNAoK3XnCcVgvWOB1IfyatXeNFlGRGL0V\nombmxVyI+oVv3z8XBGB9JbsXV0VfyJf/PvdRMA7YIQUaUoxd404MXAkIz4JP\nCzQH\r\n=YwWs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.426913342.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.426913342.0_1578620631416_0.13701216505652414","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/theme","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94a1361501314e6b31f569042d0c295524209f88","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.d4ea9a706.0.tgz","fileCount":14,"integrity":"sha512-xmeyR/8skXF500Y9DaG8UtUiNYAtPa6h81kEh2+3jokEuRnPbZW46Z6d282ZuHRiAmBML+qKOxKn+gPky3FZHA==","signatures":[{"sig":"MEQCIAQvb8E2HXZPH5WJlgu6fc/s1WBAN+hQN+M+c4mpcxVYAiAYfFXWabt6obabtyKmzBxEYoshfWEEsh8qLtIvDUvUrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLNpCRA9TVsSAnZWagAARtIQAKUTqaCB2aysiNIIZTsn\nkIjgCvs1MchbqNF10+7XtR7HIMUCM/iXUVbvsvWxim+HvRtaNmeWVj4HoXIe\nSsRwQi6JBp+3LAdHfneJdDYzmQMBCRi9IpKZ1ONnDEVS+ffH4/SAP4nb3N41\nTRZzTF4vJrdgcFtVrXWImrjjB84M4e6gghNZ2euNR7lOXtKyq2SUj09shl9p\nqC0hfsspZssh+gAXaAR4EQIppMP1/+BmHqecRvnR3WUwmqfpeWJhkfQf8h9D\n2Y+3UlAOqH1mFv9jkMiohDnMGpcegB2WFPbhHUao37ASN2TfRb1qhMurguK8\nQFUR4ERG+xpTbcV3Xg0iiqwbUAKwrSnQWO90nzrqgswNEW4bqQeJSB8WF2XZ\n/K18wsm7h1pF7mpCnu94K55PBOh0u6thBLM99g3OPc6moSMFLQZJ98DESkTo\ne34DFQnPsJUefx508Ilp2goSfKVab6qFdrsxC2geW41lA2rqyrT9QpzvM8U1\nBIKWuVaieBA+mRsTrzz0xw18xSjevMUuIh1VoFvU0jWzSBvnGJxKT9BpW4g+\nNDDWuavZKLXmCJqcQuHV5rWHBEHrXvVLBEQ6bLBybGCoBGcaiftP7yegSCR1\nPYZ/OGSBY7+uKOPTt+Ym6rXgy0JPXLYw3TliE52XlpHdR53kdMlOhURNAndj\n1BSO\r\n=j5E5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.d4ea9a706.0_1578677096951_0.20608139017916938","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/theme","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f26b2fa95804d23ed307689cfa6ae18ca3b7db83","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.7d4ee2996.0.tgz","fileCount":14,"integrity":"sha512-SkOGZd0PCUgj7InDNDpK2PtWLWSZY4dby51BnMKni+zmVpd8I0e5ScKITYFPQCvU84UYYskwaIRfXfIseYcahA==","signatures":[{"sig":"MEYCIQDnglI0wU5zz1SIC3MshdWJI4gRFGvfUZ55alK0g/DHIAIhAJ+HuWiAwRb9HuSwGwxmzCQ4igoSRrTGzHON0TTKOrot","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLrKCRA9TVsSAnZWagAAFH0P/2EnH4d0xRFer/eekL5I\njVOiSVVftkCFRjUCtsX6mp16GnVCe2jHzz2rD58ajWY/vFSbAwyDaGAZrzFo\nGyiR/Jmo0YMp8rIVKRpuUFXwsPH2zrADeD9xOXZLWR58fi7DIcZcdnG2wied\n79EJIA5Y4/TzRT036YMVH5x6PV9GhQQFgK1Q4IhhYKXZ0HcNyTfn/5eAJqJp\ny/c2uzoxae2zNydRwsrM0Dnr1BgJU2sxcOM+/1KIeQ+AGjngaQ4AqspMjeay\nTkfuLIUEMdcffl4PxLGKAMuIzbigWS/LeYZhV/k8MjYFNLKzlgv9aZa85TZB\npfwt6fR4Lyyy0VYh/RlXtTULiDHJ24MNCMg6RQicF3X7a9cQy62/MatYpL1A\nJg0JcqAfjZycy4ln62jaC+NdA3i/oohpwGDbfcBwVxOjXHFjFsP7tI88N36t\njw3zaVi/2Sqg3VY3gwAlvJfT8kqWZYrkjf1YA0n6MdKPzi9/AppG/9HDTPpY\nQ1eLYi+BxwbMAKPu1VIGxusfJsAbZkZjWijACJXQyqp7q9/GLKaM1achqy5K\nXiDacRn/l13bvMDXtCq5h63OlUa+DmygtfVmDyltcxy0MOThicKwQRsUinuk\nS1kcDZKNRs78QgX7pCCok3w3GgFswPCz9UfSVYDoXewehzhsoplP7NpV3z7v\nCoTf\r\n=b/iZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.7d4ee2996.0_1578678985572_0.9029167867743351","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/theme","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed5a11798df3fd50415880772638265d0036ba39","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.981ec9b6f.0.tgz","fileCount":14,"integrity":"sha512-v9MQuc66jCVktTxMSd18xWlBK3oyPEtjnwHACjOZoKgZsfy2W/l4J44QMTVLbdXGJYW0bQCDFbtkOqA+4787rQ==","signatures":[{"sig":"MEQCIA45IyGzn9PN7PjjRIKQtPN1BQj9X9rDrNnYShU/aGdUAiBK+34nU0GUcGWgEKxxs9789kuRN3WtBn9xqcAqeJBHuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGM/ZCRA9TVsSAnZWagAAHBkP/ArzKQbyRfkgGhBo7p3t\nltaKwOmG6OhMbDg8BSzOGUK/yDlgf5qr8vvqFql/x7J4Gx50zLFY1s3F+MEJ\nmwNaVq8xCbMTt8VZIwXV43885GQTg0FUtkNENr21XoKtVQmXUlctVCzorEkM\nPgAJ0OLG4vQRQhQssHAvNfndcSBRMIeSZrWTmZUUG+Ixjr58dhsh5pxD8iO9\n1FOuxD6dZ3MO5cuhcZGNyMmYDliNiMSzsgU8KFXGxKxvvUVjKN4bIxwOqLdo\n88uxH8dzE1YRvk3ceDMa0Ywm4DirNS91vMSUa24b7gLXzCTjxc1BxkyCwTUm\n/mdaaswUHVPjT9Miikb/YmQQ1Xx+o5lYH9eSAdO+dN+asQe01PgUEnRAxFpH\npFLaJWcRQbNj30kbYCxE51s07ZCvhGn7DkIDsg1tIK1Lnc/UHJwas4AwaPXs\nYCa356R/xNokvSDKgfjVml5NxtPampvQE/rQXeP20AdhEuCdDvMwTewki011\nus4w9t/uB0Kb0N62yKnajj3QQz28YbNJDTVSgN0CyrBqkU4GTGoWj46+0gIw\nP2bdWB3F3yqU2D/LLkTW6s01GFb4138yitwxgPp1Cop59SJ3c0DU6fjkS7d6\nwrsZS1z+9IZh7DgpIefl2gUhMUm/uiW038hVFMeVkxVpjVQ0zD1iPFDrb8dR\ncqcJ\r\n=IXKF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.981ec9b6f.0_1578684377535_0.2620427742375109","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/theme","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.737da83fc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01b40ee43072e82b31682aafc887dc811ebc6ad8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.737da83fc.0.tgz","fileCount":14,"integrity":"sha512-hSffJfC9EYVmEN76dg36jKCx9HpdF7rl8ijhPxKde4I0Y7L87R/cnx2xiSnVBEh6U+t+z7/mlfUT6SRCZJYSJA==","signatures":[{"sig":"MEQCIEH4cPyqEi2R+qjOFgrcw3t0AsJSkNb3tf8tJq6eWzTIAiAEU08EYIN41CqtILA3TWddQDwaPxdShpO40t9es/1FTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOojCRA9TVsSAnZWagAAugUQAJFyKJTG4GNJhoDQvmyy\nWP8ub0BN17aBiEcDY8AJdDII9/uie5cuRV8xk/R4v7dWutz1SwyNFwashGgi\nxyLK1+SYEfJUgO67DvD+aRoZT+t4DsFxcE0Rr9Z78TdZWsGAsBOankR48BBO\ngz+vEwkPGjzs2hTY3ZkO6yTb7sE6aM4ih+OTV28HQa8ueu0n0VIxw9sh9gnC\nkkBRZJhvd5CgD03xztLNGqbTVMmwJWdSIlyQ/G8VAvywg5Ia9nm3Bg64hbMB\nPJesMyJON24aiteLcxpgb7Au9uWEF8Mfr6E1bvnKoUW6la9XCpABJUH5Adlp\nT9me8gumSgF1oAx33eVxse0eA5ZGvKVLSbGMDWjd1kgvyujTD8is1c+9cSGX\nNSHvHcXtx5PvAzDPbYQYiphTXB+8pKLc10Q4QtGHmqBugVqN+ryqeSCPEi0p\nHpm6rfYgTCOUxIOiRkM1oWsYs2vodNSYqD0+eo6ivrLniAeDNFOYXCrzBobg\nVOemR/0JPtBBA/mpI5xfM1HgoCwRunuQqeD2RFlY4gtply45agdH/Z/hB/BN\nB3iGiR6tUB0mO/akcQmLnNyo7kFWkuaUWImoepaRORxUPBkPz3FsRnDNE5rE\nqoBDskKoEF+Q7wOqRQBIEQlnV04Ze3FCOxOIz8i+rY2edFAsYnmHI2UCQeYM\nyb00\r\n=9xDe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.737da83fc.0_1578691107064_0.24054365789157428","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/theme","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"713c76fa9841e305610f09cc925bc4936524d6cb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.aca8e6c18.0.tgz","fileCount":14,"integrity":"sha512-BtLJtrulnihUk2IsVRbN9XV/QhFn5Apj5e/mMJ6K/Stpr+5IV5c8d7cdOpwxcMKJFa1+hWTr283m55N84YL80g==","signatures":[{"sig":"MEQCIH5b7ymMg40yeTq2lp2KCDMwW7G/tTKDVCiJfUnlpQBsAiBWg7/jlzqqR1EAirEU4iGiwK/9kaC2js9btBLwRR7hgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMWNCRA9TVsSAnZWagAABdcP/RsrW5yHR7Aj23ihOQU3\nkvJ8Ns23/d6lWQa0GJBAkMI2U9vj6Ca3SNKQC9jj0UOlyV3GEWTRet+rZNKu\nQ5M8CVJ0kD72r0KkVBkFHbIK0ha/yEm4bsuVZtxldcbahlIk/mXwbbpNmzwo\nxxyfVZrqRdlbieoMn2UaBlpb8+hOH3ywiGl1tUIJsZV1Ozuau9kNABtGbPf7\n2d09iK9uScofIa1lB4xu03fe0kpA/qKoy3hXpPNQKURDQIsWZ/9KRjwkthH1\nHc/SWWugyPtSoev5RAk8g5/Bx2d83Q42kPQgeFVYvrl4QbmhJY18pd0j5jiz\n/Wgd1t4t0jOzSRi9baq5x6ura5Lw835iv6vwS+6vvjUPowzZs2lJ6H9OzNO9\nQbTtlNjS7DplpcEwMHhMlKWpazcAbY0qKYU5N2ikajRIisY7G9vzclv1v+bc\nFcDWrMEi9nPH3uCyAKJR3+XSZ+DUFrgdLbOrRSENRrms5eLTvYlCfflPUxcX\nKpJ90CVfJ8afFZ8Q7U83hk9FjEge/BTAmmjoTOHY+6BmYThyFjrtDnOsxFeU\nRa4WR+aEu2BScOYbOYGQL0A0qf+FY38S2OCFCt6nlkbsXoolpZNcCQ6XcCit\nh36Z9OWEDWa8kDCQdVkKyASkRPHVjxDZN0pyJ7XsBLl+4aboh8SVyUc8ZK3u\ncoTX\r\n=wvdc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.aca8e6c18.0_1578943884663_0.9633250547661185","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/theme","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1ef1807ad26fa5e2f9863728ca2c38828564003","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.c38d84e21.0.tgz","fileCount":14,"integrity":"sha512-sO8023j8Gg0ajdVIDTgstBC3eb6Uxd/rbMVmUBV2QbJAdwiMM1b9/JY6XwpvvP1T3Eq159/+F73xKxJDr7bwaw==","signatures":[{"sig":"MEYCIQCqDfxwsNlTRS7ZVYkIe2OSCjOeLLcL34EVBlY+DDVUrwIhANGsGzU1CbsqZ9nDR+dda/dZ2i0IAplcEefhtEnJbMEr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOtzCRA9TVsSAnZWagAABo4P/jIsEvXrNGmcqlYeDJSm\nsOdkJkdkvL170KeRQ6TnWLF5TdrUgmFsSYrcEUVKy6IceufeWZgM+CP+KADX\n7FQw3ytK/zexaIyJaXa4kmmaYla+Hq6dijCnf1srtkbpFvye8Dp/6H1SAMYw\nE4ATYQK7MATiyemKsQTGVkZ4t76UgQ9TOJOQQz+sHxSDslcFIPSt76Y2PMQq\nF8FsnYP/tEzV2W25DjLGq5k1+PqJANXJWhAD1B8EUTYSK5VTVHauz01E5rvu\ns62ngsR3KIhHO1zWWiOysqUYjlmr7JppFIjmpC1dP3I/sfRu/5C5HyD/Mn6C\nfqtZ2o11kRQ5PIOHuNczsXU0gfpiH19c6x6OyVtEK3IT9LXA059pS50XHkJp\n1dDPATOYrvSjpMaDjfitBmryrL8+KT2yUrF03Bg5zZcX/RLneVF1zxSrZFlC\nUFtl1n4IJy2Uj9EiQeANaZFzUTNj0t6q6OBYQNsZtoaKtRm0/0I5ybU4euvP\n5zZhzItpA1ammv5s9mZK484iyGLc3pTupX6eSzZyuGrJgrKsjMVbcIOow2S6\nWV/W+SLX6kftbY9jbJwN3uPdOUUrc9CraaeSZFuH0Yyv6HcRw6kExmqe5Vca\nQRN6/eI3nlXRgiFrN1Pn/K1S67CXf16QIQgtMdOv164wsB+Gz6Q4krd2oBTJ\nZ1b3\r\n=PQRY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.c38d84e21.0_1578953586547_0.5061378057764241","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/theme","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dc8322951bf1e71b0cd1e098e38286463580b89","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.a4db5fbad.0.tgz","fileCount":14,"integrity":"sha512-M8aT9BmYNPklu7pQuc/hqCN9PjburN4LaSozORlBGiNbo9xSuP6MgRE3Ext0UPfE0XdTl3WRqdfTqJL+atQkhA==","signatures":[{"sig":"MEQCIFsclCbJo8TPHnN4vE1NoseF4hYyk4CK02Wv260/3CIeAiBxDD/pzYPS0/8tfG/5SsBXu0mwzpNlFVXRj0Bj2GQX6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSQnCRA9TVsSAnZWagAAd3cP/i5L/SB5m7AjD9xMSK5o\nfw/MvkkwMFS1EAnU2t1HDk5MdY6SfqcaHEm6oUl/oAVnKwsY9o2Tp4j0mptA\nsEOrYflEqsDSCvIswSK26mN9OHQHvE/sCRJxICvmMi/6Qrs5d4m9QvWlzlua\nI8BuW8HPINVQp16ZcchwXzBqg9IP4t/mlCMy8xqIr/BNRaOul620pf1KS5y8\nec+uNfYPq8dUf61a4+ObfyPUfXBs/mLGggoqdQzBXj2f8BCmX8vOQVCJ5elS\nqbD5LUTrwp79xMjwn7rw31rDYkxTEPcmXFKPmBKfZezUKImi/+Y9jvKE1cIs\nch927KN5m9SveJNahcQcc5bbw0JKAzfCuRRUE70VQ5qaO0DKI+XwCYF37tos\nEOwmAvbTUBaMCEWi/Z5suJTZCghQowToDpKNmaUr39zwlq8nJUXLexN4q9fK\n5JKo/7WgE/Q2kkOdwUOXQUfqENY477Vc/M9NS8a0Fo5Rfem5K/MB1YSHGXfs\npgquV3/20924mtHwnGYYTW1THsgIIYEzH8lw39uX1/cdReCT2B188Pxf9aDV\nzyDfDj0nDr8Xly4WyfDIZB13AwQrhkGLMPqChOCViBC5gyhchhHw3Uwlh9OF\nBZ5PmqVTbnM2t7TxwwUOV7DgQmpyINiBfMmH4G1hU8cQ9GmCf/SWY1TiBFfs\n3GJP\r\n=yHto\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.a4db5fbad.0_1578968103099_0.15409287508858216","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/theme","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.faa9af310.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4842d223fc2ee25a6ba153ee75822d6d767fc1c1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.faa9af310.0.tgz","fileCount":20,"integrity":"sha512-Lu37mAI1h39LF5iixFsFByM4B79MXV9OT99EDUQypiMcwWkGRxnnXTFCswv77pgAbGCF0jZ/jSOs3Qw4xQcegg==","signatures":[{"sig":"MEUCIQD7DqfQ32VSXZJuN53Y741JcKhBKvbn6SMGaK8elNcY9gIgE6L67SHBFSD/Dzj7OvRZVzikuDj/RxQbkuertbZcXpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfHECRA9TVsSAnZWagAANLoQAIRqX6MRiLmA+7djtD8j\nNNh+0nBKaTp/Ug0AxRSLrqp+uu5NGeACIvY3wneV59vFt9wd+jgYwUpWqGUO\nIS8FUTcuGB/XA4vctM3Tqa49tt6KGNP1PRPfjXlSm3oob0xhA/cYtXwy4GOp\nhu5NQ9UyRdqWpWdj3SZVY/2r1vj6WBFYCUK71osnpiSD7Rt04rD9oB/+hnLS\nIyuxdpF8BMo8b/qcQEDVyravU2JoXYePR45KvpZuHT7Myj31GB4zyF19T/GA\nKgwPf+/LTV0k6ti81RzEoFnRW8M2JunXuT0qa5NI6UsSAFOXp+AeoolUfI6G\nleXUxwQIajsq5eIaha8tjz+hOTdVdPwO7fXJH6ZL+ZZvPXV54242Vzzt/db3\n/+nEiN2I6IA2kOdw9dJix9iVNLLAxHYqMXBdseHe6HIUvQ1bxf9bW/CZjXgE\nHuu+dSaoyzRIgnkXELng3x10GYiJZ/k/NEsea4Z+LBpYmg3o1TGBBmiKZB8z\nrcZ5YSbKXBM3o8KPvm23oiLJrenZITxSkhy0037s0ZlOHSjFphZOEwewqjPL\nsbSmQOWIZkcl1/j6Qp/v+99nEqbBV9vtVGpYF7GZbA3SCMmpU/7/R4m+HfVo\n6GDXmXerEll/1ZaYvrOD+v2hw+0z4bh7niUXmMA3E81mXTvhs6e4WeEwksrL\nD6B8\r\n=mt7y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.faa9af310.0_1579020739536_0.19686442972338059","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/theme","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.60354c577.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"965724d430a8f302fde558003ac181cb67bcd3c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.60354c577.0.tgz","fileCount":20,"integrity":"sha512-Y3loFv8OKUyPieoIWkS/EQfpHEIA33Qcsm3p5dqf5MvhqJ7GyT2TYW1PcI4sz2cDHlIP9znwpPZqk7GKGnfQsw==","signatures":[{"sig":"MEQCICtYOrVTx3yzcpulasplXX9CL4tRMQ3i3DugwMFzWuYTAiBe2dWfbPqAfHUSuAsMp98rH1Ws+mv5hJvYc+PD7i1cNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSRCRA9TVsSAnZWagAAqRQP/2SSkToZTyBfStOay71Z\n0hwy/WXKGfrSR78dLmF3Zubzo8nlKCd+J/jv6OCZP5pLqNKOwJBRRluyeaXJ\no4rp8iyBDqHShrkQxwq6SDe6AVciYDXhPnFbP6vOPvMtut34bs9oGfQeAcey\nSPUyAZk99SDMX/PyvNUVuFcBtNuXbS3bLz4TENhPUIAnOfB1BWLfK7Ayamb+\n1Oyij7pkwAlGa9L5ndLHlslCr2dVQDyWunEQ0lRaF/Y7dS7r9a7n4B/RB5F3\nErRlRMhkVe6f08zCZI1nUMfR0I8MRsN5qbn1unwmaphzVqYPhtGaWvY0+TMc\n1bZsome6hpfFCgsHYg3YWXuwkHgxuKbPdLbRUEarm12qMqUdzB+EMLI8QcBx\nxou7/NutIq5e965+Tm33gh4BRbOOgaeTsMtOeh68OjJdLhmeOpjlqUcUUYv6\ngTqwLN9mes4cxAwyIzwBLX064sPkwJAyYCg3hIT3U8JK3EfLW/x/PWWDKY9A\nLq6EcrywhXTjKXqSADuWG3faH0j7D4XFdi8onc1mSgP40X7vNq1WIbmQ68Z7\nZe3rt2GjF4mnc83X4VYmYHSEZ73wtRY87SRQYNTD6fPc9Po9fVxJFGYcGXrA\ndcntquyWFx/y/qCTBvWSxK0ePvSNxdTQt5nCcv3WBIS4+VSwqehANZ6HNLqQ\n9rpm\r\n=l2cb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.60354c577.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.60354c577.0_1579041936896_0.1903132959561482","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/theme","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f512f5686a8acc323d0dd847f0768a532ea99870","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.d07c78daa.0.tgz","fileCount":20,"integrity":"sha512-RL/Djz4mzFAfUeaSCQnffkjTqfHcBUHMLFckoM1xffutFvqPgUyQy7JIxNPf9dnoP7xUVKNQ/1bxf0OPLxEc+Q==","signatures":[{"sig":"MEUCIHZu1KtVVHpYbWEkPIfHF8ZFzyWRFMKLhxiwXvjGH86fAiEAnKvRpwAlqu/7+yfbbDNYyuwP2hzINFraBguKCM41kYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlDkCRA9TVsSAnZWagAAOMAP/0AMrwKpbUIvmUZGp8vA\nqLu8675OP6mf3vrvjV3CYPBDuuYSq3iUA+lUtjLANePGaHzSPfsgbjhX9wAu\nm3zsdBn5qWtT4hL9pRT8jHAw3br7g8RyJQfIwiC8OEkGafQkgndP664xZsW2\nJk8w6k9x5gnNusg6gW4NxIZCPWIFD3QhGP8l0oHAwVwrJc4jI8cJDIYKu5Pf\nCFsJNeH/wRBFFlEwsHZx4ChGewpjx7SMrZYrFVCfgz+yZxPOKYh3F4BjZ63e\nJ/UNDWZgBBFxLAFZgsUQjylOv5ZWtftvo0/qtOv3NXb2ViixDkYrjf69fUtn\nLzTPThNSNRdxJ+xtjf6Q5A6EJPA3T0JMo1nYsb4kh7wqNZGUfZVunCdvAGHu\n2NnElLOgCEZzdjtx62oj6vBAb0n+vNOreNK93XY1wwEdmh1BZ9yfkW8iQxTR\nfmY5NXvYfvd5peq58oHpzyZo3/vgh5EQppMxXOu39scW5DjR/eN2DkQMbIsR\n+UDk01T0tqT8uX98k8hg4HYXsnoz/1Rez1hfiQRl1TiSSMhkVvxIxI5V8W0+\nFppZuxgJJVsP5vkgrZQmf01kTXyvSmpiS387h4mRFsWK94I+ww9Z/1glG0RK\nBVyGX6vpwrMMOZ2LGhrXmpQHzEzZkNLzbfb5T1Q9IemCV5L5JapxKSNmTEm4\n2mnv\r\n=lNCP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.d07c78daa.0_1579045092016_0.9887388496387413","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/theme","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a87903a4a52681b149464c2cea6e2a0c8e6f9d8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":20,"integrity":"sha512-A+Roprxze6On2fLfOnW9ZExdNlZEs2F8Z53JERRaXqooMKAu+cBVhkrQr2jQT2g0hQMK9WQcPD7CX0IBIFQ+0w==","signatures":[{"sig":"MEUCICFfDRG4aAxlOKG/CEdsS72PPo07MY0PfyRuQ8ZAqiBUAiEA5Mh46ArvnP9ZJFlPShZXrNRqXWdmUdC2eh8eBCMFC/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4UCRA9TVsSAnZWagAAfksP+gJvXApCmmTYe2UbQvRc\n+W8Av2sVUCopTs7C6ERNPnktplPo91F9yYepGMNvmhMkBKrBGrPacdSRXFte\n6uxiR5q+VI0KNv3XOlmKLJkN2EZqQ7C0OqFlqgbJWtFHwSI8JstUJoCfj1Rm\n45LLZE+0e3X5AjbPgS7BjDBtx2jafqEDEpQ/xIqZuIfrNKO7329q2ebJlDst\ncS1a8o9xREhDmAfEWTm0C0WWa5RvBtdcUs4gOQX69pCm8iNiVouPiKu50Cyg\nBiuhkea/iL8LE5rA6UbaPhspwrt2mI7BnQgN3AeNgHhdUYkXE33BguDcNixs\nFWNv1YDWNyuOXehxvSy9j3Q/UUjkrLJzNDDNKupN0FK6tILhKtKAXTJRnop2\nUKlXrrtibl166xZB6o/PHY/EyDH9/vFMongNa1EMmGMmqgjV0I+0Re6KrzM+\nDbszXoA/gXOwKwSxoH/dGs9CO8s04XaUkGWXNl35G/Py3U9PpIUDuJcw39qS\n/eQVQa85kdqv3aid7ctA3g+ECwzZQZTjvWRTB9dpB7ljGs8nj7bi8I6+wH13\nzQx3JtoumyMDG5gEi15Xu3ZiCQaWOcEhLmrde2hXUbFnITgERiVLmGoTXCdl\ntPiPCU/eygw7yhVdSCTwmF4duSQw4FkC4yt+U8aV/HlpsCah64OYt7H1S6I8\nT+ya\r\n=ZgL1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.8ddd5c6dc.0_1579052563549_0.31690288338965233","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/theme","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.a9511d870.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b984de2e4af1aa3321c97a0bbcda13149e59925","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.a9511d870.0.tgz","fileCount":20,"integrity":"sha512-vjhUf2jh9PsEtZzf6zPDrtA6WDaDrWJB9YdJxbQW3F7ksrcBMGSSOGJxg0tU6UK4O9MWgRYSMX3XAX5i3+yGrg==","signatures":[{"sig":"MEYCIQDQZaqQxsLxTMpbTT54UP/8ctvsoWHjpeZ+rKf3huPaSgIhALjeIAd+MosaxztcB//XC7wS21mOSntIGmqZ8yA4z2mK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2OCCRA9TVsSAnZWagAAJn4P/R/UYzLbdKMro6dGkOp0\nbf78jA7TgW2kMRpmRLjyPJH818dsT4WJque3WpKfC20O9CsSdEflgJak3ZMf\noZJO6Gc/bL6njtFSNA4fKrVkxVKHMz0MtQnHRh3pHWeTQAIL9PBMRIsz3Xdj\nDZPHBSn3qvAHd3qYXksPpyy4r2T48s73ZNNgKmIf9BRK63Dpo9qIHl0pkyLR\n8NK+fk1l6S83drU5qo67LNwLHyNwf/J11m+EzQ1xjPA08eq5xO4wUc/l2gzp\nj6m3f2HkCcET/8d+7AtQefJ9YPNblrLjerEJsTEp7P3u74x2U2x/iipVM6eU\ncZvAnGXm/msvNwGNW7MTkRiufEIDrXpjz2NNG/cFfCljN/28etIdwUDVVhmg\n4/UJ1tb204HPMBuIXIXXYISF09QzZVVa+bLWFbHORnrdvm3fi2llVkxDXxD8\nL36G7OZJ5mMr/IiO4nBmcBQCrFym/9QIj6GUMXppMneN966OitND9rKOZg/k\nYo7Kn+xD/U6cttRkbGQZ7mhi7XgdH6ZMph9dsO4mpX0IDRrn3jmRJznYjEob\nPW8iezjYhfaFGHwlNvBimGEblHYs9NjwipuvFPw4z26FV+m8/Jrdp/divx7B\n9M9UNIcHoTGrfreXkcWQpaHD2aojx8Xbxd/HiSEu7jdK6GeiAQ3dQ7tADNtM\nrRIn\r\n=D2GP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.a9511d870.0_1579115393637_0.5873820949287083","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/theme","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d628a554087a887fa9653061aeff65ab72cf1a59","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.7c8583c4c.0.tgz","fileCount":20,"integrity":"sha512-nKM06tC+n++GxcZMIgpqjSAYN7hG+IqOKzWFG9catmrn5wRmetiKmeFQSPLxW9Mk2QEI8O/CA4QGFyC+fdPXZw==","signatures":[{"sig":"MEYCIQDuKGwJ7tZIlnbTpaHtTkaCVQdLjDyOqrAq8tsa9mqHFgIhALeA85Y2Ozawibj7i5ae2iojmuqgzHwbO7vpDcT9yrhR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5ZrCRA9TVsSAnZWagAAjBwP/RYLxEKC6ojzdUGvYw9h\nRlr1o3tBxVcaxKZslAvSXXNAchsX4Y+ak8tAaU9Cvf29/QZY7ChU2/mWKAgq\nhOZgV13wqcAxw6PHPZpqk2LKUizf5K40fb8uOwBNJLs4aJrtxEkznydvlEQf\nago95AmpFvO7gE1CXDiuswhLvtIyqxXANAUZshjwrn86UJuyiAoN0zVZeebl\nbx8L25uLKkEfPvJ1xQ0ewA0d/SnvGeTF9i5PGI1EGG7dFHum3fSDCccFlUEY\nVdsYBFqicnvzthPbbvB48BD4z7TOmhMEG3DGJDVXxFdJ+PDgk1WSv9aIzzeF\nU6cnz/oXUv/s6ZWrzUr2O4ccSuTDJ65ccZQRLS5kD/qewUA26773iJOt5iF+\nv7MZgGICzwb11wvhzANYaanVE+bljBlAFFpXRtnBz8MHU577y/QhF05LFvYW\nUKzXi7OnbGL4Fkk/dHazYYzKL6Cm3Ua5XptBfxdCiXCR44mp5chVoPjLFQZ0\nur5IPPMolgNcTLl6Vzj2ADcvyCh3oxsJcS0diOUUIrntQ+YZyTtnbAfvstLN\nRNOLUQOVKsSw/HdCbrwuT9WNKbacex37Yvqu+Szoy4m1TsBmep2rKnIycGsB\naOWn0MJLSCPqLay/zcThcwZ9UJWpp5lVseIgdR1OugBzuVDZXu48cLnMYu5d\ng60Z\r\n=AJm9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.7c8583c4c.0_1579128427236_0.6917914363271","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/theme","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0263c531807cea0f7790f5478c6f13eed5a692a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.5d4b82bac.0.tgz","fileCount":20,"integrity":"sha512-EP+Jgj5k9aQ51mGjAxd/+AXNIMdEnrPgRLzoCsx3hzTzQoNu199l8FJIIBxc48Datye4ADX9NLS04d9khsoCHA==","signatures":[{"sig":"MEUCIGBIdQh3MyU0FmAurJdYKX8HZ2KsFTKKRz/q/ZCEHszCAiEA3k7vJMk8YaHIVnKRhEMXOoVo8N8VNvTUi2fJZeyois4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5Z5CRA9TVsSAnZWagAAtX0P/20cqsmySyTTZ6TbKQ0N\nA7O6oGfMw2bRHJpOhqlL1dnwovnNGlQxFL6XSw3rYy3Amahgzzaqw9C7oM3J\n6tk4vIOw0JZY0NwHOEQyBQBBBUcQiBKmQjFjX4mCFBFNnvz67lPap3VkL0Yv\nIv4Sfm+iEmWQQCePcheBMoz8/kdPfzYZlSfP4lLx/RoMgh6F4UcYD6i/8792\nk1mXTF262HoVrSde54nlgZszLJF2kTErpE4Q8ZpgX7pQ3+hIqNOcFEhcuq8B\ntp2wN9mIUp/Ci32MGnDtPF5c8UuDAj/YyAfzR8KIcyt+pS8/57jHx2bbGx4e\nuXgNAO8wXVvktPKcys75OsIUA/PRkyWOP9D52dIfRBEdZnzFiqEb3zFgM7Io\n+GjfyfFBcjvFDuPHm4FF+rawwJIWgjMjnQ2kgCYudOKr3SolTrMJUXiI2ERf\nlqzgIOu1aEPCYOAq7T9LnnSo5OpTj9he3NJvxjAtMYklRDZmnbq3+NbuCfIt\naZWInD7n982GPVqm4OiHrJ+1G8/68BnJr8napKVsHNt0atH3sheQ9voU4+Vl\nbWuqdg+WxZZ6loZ9VqA2OdDsb/qMzKUNuy87ApioIYN5eGe23g5nbSzyFNzP\nehMVC2LBczZ/j3delHJmNpMGIo3HZJdwOkK2pu+NFmepFdeXxA4dcraz2PkX\n6Gd7\r\n=oY6a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.5d4b82bac.0_1579128440640_0.043816141656705776","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/theme","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"517744c56d18e5cd3a99be20e3758dda88bd0962","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.57d0186e4.0.tgz","fileCount":20,"integrity":"sha512-okYpd99/x4WbK/dARoPFkV2jfSg+7C4SXpXWqGyDou3IJbjbfzEYO5ktr875fWS3RG4AXryeNV87Uiw9T3bbyA==","signatures":[{"sig":"MEYCIQCh0eLLpI6xMYlG8aCGQeZx+mJJxpUXzgmNZ+PjAiu+FwIhAOAgnHLgfdms8093Usv4UzihexyxPi0xPOB0tHsVbVjS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKicCRA9TVsSAnZWagAAEBYP/2YpUv0S88AONo9Oj6qr\nTtTQZ5jWDLaXJ8cPOPw0K0621X8Bk2oQbUW+BKKtmObn8laW9mWGxtrwmZS4\nsdLj9zstRPxlv2KpTs0sKMF47wa3NA6x51PF6OExWikb8atr/qNXJ4srzil1\noFr57TsDgyZAzxJ/ZxZlRxoyHoymwtMsuEMLVolNsDwfwyeDwComsZjtjMZd\nXFk4tcknpsucG57zyXYrD2GGSBNAEVBOa1Xnx6bPpk9xcXG4UWeOAOb4Fi0i\nrWcEfCdj0wHOb4OLaVBGxw5G79o5USaT0168TwyJonjEOBGu06WvYTwPssVk\nssanIbSbZXIYnDBChkcF9q/9FV7UskZlXoAhIUVluoORHkt10wUdDHAh1qQ3\n9LefwXZXqYcRoIZWll2D60KKXAFH3ONh6BHuBN/wby+JnclzoTDJqP4eHsbH\nWklQUTt4g0czTnQbYYuzawTJiDkD8X35kOxkkER5C2PZg374OyfZAICGFvAu\nME3R9+33h+wN+7iX6H/bIXQToSaN273CFzlKKaWQiq+CiWeFfUqYgieveeNW\nVShdw4FB9vsqy3IbQ3/2mDHBvxte26X9jzeVA3XIMFZ54t6+QQD/q5WYlXu9\nw13QmcZD6uwtvVwUxB3nfr37bU3M0NIy5WyLt+P1S9Now2banrFD6fjPt6kQ\n2Z7F\r\n=jLIm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.57d0186e4.0_1579198620109_0.47937105199794083","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/theme","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90c5bbab5e12b586f0f220a8f2f06666205e732b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.071a6ab70.0.tgz","fileCount":20,"integrity":"sha512-StvVhj1kd7JoHPTxXidQQ38xp//s6V6mn6GqSyCQBR0BzwkRYEhvdz76poQIbRWgQEsI4q8HDsdwW+uV1APxeg==","signatures":[{"sig":"MEUCIBX/cnp2Z7+yOmQ9/T59lUw4HG0ZWmsKUDMGzNYLF6eNAiEAwydajx1ff2ouyGrLLdtC5PiBka6yrBtjWZgpnTrGBro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKojCRA9TVsSAnZWagAAI30P/j9TmJL9DLVWQaPvfK1N\nQVutqFLWzCBHqMof61QjiFpVVEo2K4bNULvZptss7QsM6LpvTJzO0vqXsiJh\nMXYEION1tpBVFxDyPeCKABsUIVBYcMw+afRo9V59OoCiwFXWs6dxFLU9kEl5\nnWepKdNtA6cvkzE7QNN9eBY0f3osuvm30TLmP2jCnppEZg+YUzLxWIFtexOC\nvUhpsI1TpfRrk3msMfeGMTsj6BWX2y93pOiZksfLZbfYlMvB5n18XsDIlZ7k\nHks9kt1Gc2pdMOBqphR9BCZe/aA/YbBwTdrtXeB2ISLWHW4BXY/Bu/rZ8/Wv\nXWsd4Wuzr+vXI1ywEx4DVdOr2lWvZ+JIZitwtFVXFKc9ZLqxqGcRHsQbX9WS\nPJrQs+gQrcGu9q4lV4SYOYu4NWnbsqdQgvNaN09EJsDbKpvBzP8sAad3JT4W\nRSa/dU3fAtAqIt71fH91NI9iyql7JQH4otvYxtD44Zo+DVr+JR+hZPJkMJX/\nTGgKOFGk11g0N5BsNi5R4PuqNsn54u1elAfjlgQLv0CkJAbemfwns4B2NarM\naha/wwmrD7K9gCchZlDyRLw5H23L7hRdB8m1EPVwDZpmwpPNhUVMydJenRW3\noSOvWnb9AjyaxR5m/Oe5y3x/twDaphT5Vu7EdGJxKldrCzi8wUjgoY6K+RTR\n+Bkb\r\n=hPJH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.071a6ab70.0_1579199010719_0.6411493329947646","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/theme","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26e69c0947438ba7f570568b2d22ce5ca4a77900","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.22e0cb618.0.tgz","fileCount":20,"integrity":"sha512-HaylSeghKBEBlh9Lkn8npuhdIwluHW+j4q5tBaC/vwy7sjUjE0eGfchDvMZyDSiX4xKq4uk1ndSIM8N0FKJu3g==","signatures":[{"sig":"MEQCIBIf5Su4Ts/sUHE/LVeGsHXRdzIkRd9lbENJWijdwnxaAiBT0DTJx9iNfuYxummFtxbvHEIjJat12vBRI5BQimA3+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+PCRA9TVsSAnZWagAAiTgQAIqcrNIUvuhm9nFRTNL8\nU4F7T2pZZg7npHSVUksIcAC9j/uLaDf3Rkn2YW88Swd3nhSVZyEVMRvX4mmE\nuSsuqlWxNW+uJavfxBweRmqzwygoDQnZGzaSC+8l6QfRRfAxfKp1U6qzgcTn\nUacyGM4D9XY7uKrdNLSla/m0GUXO65ef9sIL/RFKpfxod9sjmyGSOBxjm+tY\n3+tO5evcMNzqOMjjMFM1PmpAZlEbMPPpYE6F/6jR+Fh7yim04JT1ffl04vOy\nACr6x/tzgbFOnRsDwLdxRVav4KY/3kw8FFxgEc9EYwjBWiTNlso5Z8Xi6JX6\n1LQnXr3rmwdiUj5onIquLFgMrrXxBBQJLJ0lG9YNxDEsta9XCYPwI2Ue7X1z\nv8BCt0XfnlYXfMa3UW6sIVzlT2hoqG0fc7u6CyU+cuhg4nZfJaEDeJSPwV+5\nQD6hBogUj1TsgWhetd1eKCV3iS3UioTrtiZ91ojPsZRxZJqssZ0NhaJi1oIC\nE74nPVQJnFwohMAASGlWVSSZSrdbUNkLww71OvDDmleZ8qj0DVodCjUqBqP9\nGeVt29ZXnXWd4Vad43GAnluEIusWbfUBG8lwkoNZKLpP+KHTBGj91HssLOzY\nmfgGDgnxSFfGztlzj0Qg66lIFY2GiDkTsrDCjHES/YO/fPCX4JZflXWz4MC+\n1z1f\r\n=n9AC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.22e0cb618.0_1579200399230_0.9690847399574403","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/theme","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0e9906fe15cdb80a46a7a8e3893b2e5df7c19ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.f16f15b8f.0.tgz","fileCount":20,"integrity":"sha512-Mfl9cRMfNEJ1xCi+yIVildBrP5/h4rOiXVVxDxhlo6fzNkWMVxJjzBbKt0OAl+ZYf6JNbYbqflkveKfLPOdIGQ==","signatures":[{"sig":"MEYCIQD6RFdIPwEkfEwvxJ3ag0QF5t+vO3Vlx5MlcFAB5JAm+AIhAILI7gx+PjlT36tGbNa30/npir/acKgxHJmf+513LKK8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPqJCRA9TVsSAnZWagAAAkoP/0pSnFXSU5Uvos6C2quD\n0lt+1CMUu3lf8K4zWt7BNzYoYZPx9AWePf9gfu8x+Q3S2lgOZqSc/M8d6XTj\nTPRe+cftGnZhqtEqt8iLxVRmNZIfUd58OMSnjwyv20nAtGES064m6XiQxNvC\nHtRFbOeAo/sdNaJwM3AsVH2KnRIah7GpI5SzjxuESTAjYW11JaU5hch6LXtS\nUBShb8sEpkz2+fbLyukJfntAUosZ/wRVp7TRJ1JrXMzwimrXuFaxb7hHNuPf\nN8TRbpBqyyFxLyaxUXJMZHrtHLDIqGUnH39XSmneelyYtauq0xU21Ybcy/c9\nLYTNH7nT5keQ2IUWtLaHF7HhKNp8FJhnro9KFA3glatswQ0L9ihBM4kCuEqI\nBWHciJ94TpiVrSZuWtUqhi26NMvHrhOHj3e6uYNJTKSJPZz+iEmSdjhIkJek\ntv+X/MTFIJYIJAFQ5X+nYq4/zouYt/xWEpVkS8wDUlrgXE81pRsaNnviJ0XQ\n1pbwTszohgUdZw3jilB8rmg/RS77vRByCVpPVmH9f83NutEvhaX7jWHRlBXg\nmsgS+O7tNbn2giRNI89dqTijbR99Sm6CU8fMsiiIxCjzdA6J0iTQvql0i9kD\nn8/HH+b4tCR2SzLxAEaRpu7ojuZf1byVmwys+7lVLzJ80u5HcfwfkuXWQ5vD\n04/i\r\n=+M/Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.f16f15b8f.0_1579219593033_0.13500537060036621","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/theme","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23dea5792d642843c95021d4e1a436377cda93b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":20,"integrity":"sha512-QVoW/PWxIempOBizeUGSPJAXQDYrQDppDkSfp/DMd2rvScWdbZSRY25a41vVOz66tBxdz2UJqjKYtlU/KlKTxw==","signatures":[{"sig":"MEUCIQDNHSY+EmlAEfdpFWdmsDb2lj1mHVEze2JZtTy3DHd2dwIgYkgwWb8PyD3DOYpHU6/1g8pKAD1N9o1aG1lDBgvW9L8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGFCRA9TVsSAnZWagAAlhEQAI3ul8ThjkbzAIo56dQi\nBJmuKknJQAh6wpAGRruRZsdJDCzX7zFRMJjr4iDcv38uujmgJHnNd6xdvzIK\nHbPexdxNpZpr6aj2emVW2HFvP8MorkIa/2YTBL+/57P2L+unSNqTmpKKUIls\nE6d8ItbJCfpRzd8b9YgWT0KKoQ+CmQM+IUvVDoQ+KT60O7yaF9xTQ7gVAYW2\n/imCTHQLCH4+oPV3JCnv7/NjpqUxOX1Amoy/jri0bTQjhVKTqsQPbRa0tL9x\nnmKxaZasYVqWIKKtvwy+SJVrbrwo/YZ81h0JTO20BPUmHOhtyOwySkFYcvgR\ngsgpsWUprSQKt2inDif1oanvDkOOSqf49DNcRjwR5bGiJvQ/6oDCtlkekgTR\n6sxj1sj0cq+OyraD0lvJncs0thD2xJ1XwwY2XU9HRD4mv/Ree3i2tylYX6aN\nYzsmVllwtLiy7GxPYnWs6BYIYfCQifkW1LypzGqkrx6xOv41ZFWube87YdvM\nJ8h0TE7jkamVQTmuEhqBTMIzRywGS1+0kCfLcHhoFkc7VaBfrKpZMSsih1K/\nKaKpZX5f+Qep+PVUfet/ByKZb1C4HSI3HH0aJwLO9rNi0LqezH31BdP7ZigF\nR7PexejDJ1yNN4a6cVyFqivfi5ez/bO+SdLRGG1HJ2vP4aXIZJOb4NMOVTha\nxYUz\r\n=VqLe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.aa8e43e9a.0_1579221381487_0.9777744985350825","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/theme","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81ff044576393ab3b5ae7ab846cd5025afb0d1fe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":20,"integrity":"sha512-kbYKGJxuyyalFMwcpC5U1R56yGoolUBiXqVz8MCuOrtY0vg9ZJT90+SdD0YQv/bZeasstmRCnvtyGCnE2J7Rew==","signatures":[{"sig":"MEUCIA20Q+5bHzDHBB7EpHbyDUovDlfXhHAOt0LTEKsMKR66AiEA56YJBNnZHxfqJACGkQs1pmOJJJg7qnCjRLdprQMEGaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQcHCRA9TVsSAnZWagAAkj4P/Rj6nrbYJzcvfUY/AeEe\nnG83wTO4vm+ugh8JWQGIxSt8iU9ghdLOT8wacRaKOMjfduvWzmI/flAQmPB2\n2UT/suH6LRuccKS0A2C4hyc6ozGoi6wcSkHhlNWuQ9jRFv21TuelYKoeguWd\nwn2dL8SBYus5tMWqN4hVfVaQttXn/9NL2bi6ChzOm/AtKRagoYd21WzXKdf9\nNUBRON3ulmVUXmfm0JOxafGuNQG1NFgU9PA+kPtAFaDKZt1Z3Pl2c4ApMzKI\n9gMR55f3niJ+yjiPfWgT25GwGS851YXrSo2UV79GT1OWOWPKLRBX00wvwng+\nmTNfqujNTNrJFRuLCNHjVfTG6R9pP7BmaJCJuI8hMzGcvmYmtRLcqoNBxe0u\nqFAHBkJA79ezwvSfRSVGvRpgoFHz5Znbfp8Z4CQ/lqJ8VDof3Z8qSNFDzNAQ\nIbzeZ1cwi+m5m2GWbmWZiKrF3p/HShKCi0kS3zbiwwJ/iuOzJleOAtmzWSpC\nxPZQewxteAobbN0zrKsA3qpbz3OPzXo9WntVNGFxLMMHdbOzvco2klauz2gH\nM66YQl6QWojinncc/zKieUxXsZ/VN0LQwOMYQvDSQQoMd2OAhKlVNCwzWGqn\nrQbra50G78wNrhagqvziARFeeOLYqb7B0bf02BtJPHmS0tI6q8bEM9QdAwuA\nPUP4\r\n=6zy2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.fe1f3ca07.0_1579222790947_0.8211207671109293","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/theme","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.d405af26b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71162fc70da6af0e6cf615039a55bf1531b34a14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.d405af26b.0.tgz","fileCount":20,"integrity":"sha512-8my0wVmhmeQOv1BORXX1pZqhRIXNuYMh7STrmkGBFvbjVB7UfBqg3G0sLO37kHBsrrBBKUaesUERdEpbluDfnw==","signatures":[{"sig":"MEUCIQDq1VfFhlT5+MVaC3tRVb0MjYu2PwMa1armekahApqk+AIgUOputlucQHB45OeQ9kDvJ2yTGvlq388vMgQ/gF4Ol8o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfoICRA9TVsSAnZWagAAzSkP+QCirsYc9rTa4sO+lFeH\nc1edILZzgBYKaPG/YX7KBxj9M0qdCgAOVzh1IaopzNt+7/GzdWndVcaTyje1\n76gVaQ3oZfy2wCtoMB/qQiIn6xGpF/sElB+d9Y3bryiDZN3ItiSv0GOsqYNz\n2/Q5wR06VzDyxynTJwNYAVxVtxDlgOPBfaz51D39P+sJKQyVK1b7Qs2JpX86\ngYjM6KCPJXzOC3uzVQB3VP1IvexgyG39vra+TsTaknHQGTJmEYViC8flDYmK\nJxnk0Uk6bmU8q4E499tpVOnVVNy7f8J8cBl67Wh8yID6cDT9KyXug3+BIkhm\nFCT1POfCMEw6m5bI7Z/IECy4e5C6r8mA3uGphb4ry/80MOpRzqqyiZRFcd7e\nssEhmqPcZ1nmNQ0uFBmEPYu579AzEMTiz3uHVv9e9hb8mh/5S9xq1wbTSVVd\n9yh88veCH/46k7AkdGqveO14Wdu1qBEa2yLdjOB4kTt4VVEw/cj7ix/sWsgg\n2RnLN1YRY7nfRtjcpaJQvA0KUXZlbMs2g4zf/c1Q7ZFHFI+GUMDLRNA7YOHr\nsTCrguuNanM5f5k4SK2xlI4UAeNrjGCHVq+I6oIYLo99YQxre5+xBDOzWDUO\n3/rSZwL191vvqleiEKK3xcwlkzLVBGZZWD+3yva0HenWBr6BJShQ/o/fSxD2\nvzGr\r\n=97sq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.d405af26b.0_1579284999736_0.6066357320069642","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/theme","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"069c4ac9d86d6896b3393a85cca4ddeff27944e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.6e857aae2.0.tgz","fileCount":20,"integrity":"sha512-kztw8TENVjGi/iRssIHqyhrKZxVk4tI1afy3c4Kogc6b8UbUcTKBoCWgT+WtR0dyOx393br5bWzQU7xIc+n64A==","signatures":[{"sig":"MEUCICsr3S7anuMs3U9/Uq539SuAXfcr/4qAa5pfKYB6BYVtAiEAiTwYPPqb5W8P5TW/LVHe8yfX6brYB7VsdVLSyVjGkFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfrpCRA9TVsSAnZWagAAGPUP/3zYi13geHgOcyNdCU9k\n9GqSD/wGoNGZzT6dXDvYqhsikQKbyWz1U+VAL22bTu3uEY4ukyRKoxS96bVn\n65q5z4bSrgPFzhKdwfCQR1PNhsA3qQxK7UgXfoS294LvyRh+cTPKKZDod67l\nPOgTMXu/FQnD9C9LjibLHwZEHcGtZKQgBffFWaXoAmwFRwfIe319YRBm3GTV\nX19LQJngbj75q8O4kL/zyR2oIuJmt8L50aGwjDHxVtYtuDMyJRKKw5oVeXcv\n3f0GXvKpo2784mlI7dNlz9Q4pXh0BErq9rRVmlpw2BSOi09xGTaHvhso7caL\nzwWVwqB1hQlB9nIX3BJx5u1g8Q1wFlbE8l+IYqEE9uEE4G1agsBJveluK8Ee\nqhFjB/SFgasS75UQy8mJSeHIKYqlk4FPLcrP4PZk4njpQ/rkg7bOYk9mltMn\nhhDWxN6iKwIUaONPV5o/5verqCzFTbj9HlV61Dji0eOKLV3zQ3OVnKB5yUS+\nwU/rvEW/libmln17NyKUmTXy4TRQHS0tj+JbT7M2Qp29rCYaY/7zYI3UrZKS\nl3Fms9fOhtdxnAbeDnb/qBXkNLYCNQzfRsCgB9KTu958pId6u22QFv0JnPv3\nrKuKVvKauAEBgDWzrfJExLTyHlxNrNasXQQ758VG5nZFjGslaM6ZGTb2bfU/\n4hM+\r\n=ERYR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.6e857aae2.0_1579285224649_0.9334607737316958","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/theme","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d376b07ea519b28b693713dbf47fa00e1c45bae1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.e2e764f7c.0.tgz","fileCount":20,"integrity":"sha512-FjvU7MvQHOrZ4KMTlwa6L9WzbVDWGDzmoDIhBjHqFBeD4xq36oufSDWVxn+/39C5PQhdmLzymMktCnr0gLfLwQ==","signatures":[{"sig":"MEQCICcBEMcb4lzyT+vcO5FAOBxNrSns4SHVRKbTad2/GDR8AiB/c6FYScIHG7q55Hzbzg3BAQv4qC/H/Js+FYxx1RSTKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf55CRA9TVsSAnZWagAA6tQP/joFmd/i6wds+Bk7nJBg\nVTx7ipTMS4wSiu5krrOV9gVWq4rIV5FpqYm4t02+kJz/TG9nID8m7mxpKxig\nzriLWAyLFqk7z8/O5nHlFZ/h80FL+fIbLtdYq5BPt/tqXAlAPM96wHW51mhk\nygMf5nnFEahO0Nah+Vtd/Piv5UFgpggS8AE9FB13If4HB6dTeLqblWoLHLC7\nG09VqiRjpyomKjIotE/0QV/GPLcgslAaA91JeWNEVHNFsKaaza/jvA56KC+D\n0CFkrozX8b+pT+1mcxFTpJSzHEc7i1qe1MZgwuta7o/PuCIx0FMWbZkP8pk4\n45QvrKZhM2HN03Tp7STaXE2NusW9kpyxZZv/p5P9cJBmYPg+ak1LmgdJA0yc\n/3EVBs3ZElg44dvjfu8gpgWt4tdP3bHjCFfioWK5moBu2sdJ1P2hs1pkGGbw\nrMsZxuktezpzFgX/oR3na/OPRCu3GlnJtLck+3YzuIH17ITqilHrGRjZHQqg\nLUi7p+TroEnrHBVkwDYpjp+GOk4DXMNT3y7C8hYaGiNpNr0aTS7msNSSaWTR\nuiIRO08Su9I12Qm04FZ8mmIx6oWuy+8B5x/L+VwjYW93hhg0Jls0In4HKa8+\n1xerzS6vCGwP+mEyCo5Tz4U6bQT3ytIzMPoO18RW7T0m2siP8rHsJuUIeVRx\nwRI9\r\n=K/jE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.e2e764f7c.0_1579286136634_0.26417790930324014","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/theme","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"998b4a4aa2cd86cae5e3c84abb9660d2bd8d9c98","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.7ef986a87.0.tgz","fileCount":20,"integrity":"sha512-FzZkg0usNZQ3vXg04Hw7DKEQ63FTxdSuPG7mqyN6K3PobzaWvavbSeSj9VsmqwtWmfrnt947tLV0HKSJQfMxHw==","signatures":[{"sig":"MEUCIAYW3IZUHtkOSFq/wbXYYAYgQB06sLKN94JhKNBtagUmAiEAmLQ0stqWZy6oXW5Cd9ELfUMVKoPXSHNSFMWJ3hW827o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgtPCRA9TVsSAnZWagAA1woQAI4P3Es8sGwNodugW6ZO\nGD4i4qi0FnsB7cJRpFO7wzlvTXky6P+/gABMoc0224529J2lnXC9Avgf1Fqx\n47VFgRSw0H6xPwI/wZofd0lPfSwVuN8CGEe2rhbkgFPrUYDTQeppqjYxMx6f\nReqWbHysjuPsCfeKGkXJkHDAjTOJKAniGh/r3dO2oJP8GneSd+fJK83zOV35\nkiro0RGHLas3AxH/NG1+QPQAEMxYXZurPkdOhRZ1MuMvBNBDLdRlVDZhpil1\naZv2qnnbfc+lMlQo2Njzzac61tfp/fn9ntpDDjbEBlhUXrjY9fYynZ0aCJG4\ndeA8Q9qOt7OIDm1sR2KuuPECswrjvj1tnPTkPNXOepaFlHM3Pikm+cB067F6\nZ+gd/snIdTIiSDhcmC0L+OJnSx8XIc9vKnbrR/Lwro23TVoZNnMits5Ohp7Y\nUqTlf/D+ZbZt1cFPbZsbLwFLAF4WURBo4gvzIzfCUI282Oes9bJl3Kv0oyNK\nWaGZL7ZYUrYue28OhwKcW06AyS0jvxpmkPEn6sUx+EzzWDHIBtSzBkluTOvE\nsWJ4NahLjZr/+gpGATsweOAQjjV8DkRM2p7UrzBDN9ic7ULdxpF71ZFVYbo4\ntlXcK93Z2GBo/bv3Iy45t1cxNMSOeE4NtvmuBORr7qH37oqHT342V/MlUlYy\nrAGc\r\n=m95T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.7ef986a87.0_1579289423371_0.7422025075460983","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/theme","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8d2ba5d9703c8284356ceae7c645ef3add856b8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.29402e2d4.0.tgz","fileCount":20,"integrity":"sha512-SMbf3RyXzO/up2HzgizwkuxvBojqG3+9xjjMXdrXTAmZ1TlLjTyEV1UkFYOZevizvqJFClQn9Ftt3IdUHmn7ZQ==","signatures":[{"sig":"MEQCIDynfxsSsGCfoZrBfpfQt1ZVwFlylyZMAlu46/nR9ga4AiA67WmKsYyyAd/CMMo2Q+cTokMCdzloZ4P7TQl5fLt5bA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIht3CRA9TVsSAnZWagAAS7UQAJNPHrlJhjhCcbZ5Ctdx\nnrnU6J+7MtKS6NwX5ILmVaKI48+W1G6XBftVmwmdFfVV0/Rj35q7rsXgwemS\njJuADXpbodTWFKw/DH/aT3Cd9w7EDYXUbS64LdV5y3wARr9Aeunl2s290Dk3\nr4V4CHYZWE0eTEVRtX49bqT3LejGIUI6oarmGA1oda97PL+kUPIAnWVH2aiv\nyiy2kPFc71H1fc5DAKAi7FtLUgKFeSGZuNmcUXGd1ygvdcbpQnbW11npm4SX\noUslW66lLsAkuti9ksgzFo7fcPLpTfKJOff5zQV0jKyWpfIYjtoDHGnsVQbU\nXBkFp19g+9N0bhnJEkQYA6mxrj5KqGkGXTgVORlWEWh1kYb/Yu0hpgHa11Wl\nV3zsogZtYIGc7dNvB9nfOnaJUIyTr0cqdZSrDfr4GulpUL14W1bXiVNB0HRr\nsORb95/FWDNex8FcE9VQy+xmSleErTDS/EAlcTa7NY2RmpwcNL80WTXAby5J\n3yfZOXyQIF4bxbUWgefE0NQN9HeIoHOd2FodHpRGIYlo6zMZM8kUwwtawhpO\nDjyC/tX7FXKlKKFxWe0+vp/yak0hGqaWQfWpIxAfzkvLwThdefgNpKbFHOD1\nXrxGDR+JzwEDXAyp8o8jXsmhnSIm0zbm2zEM2bKTUrx2wEsjTNg3bnVncywE\ndVxv\r\n=0GiS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.29402e2d4.0_1579293558941_0.9476209461590555","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/theme","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdfc9c3998b4c82da2eb3fec13396a37880e064d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.2b3ec563c.0.tgz","fileCount":20,"integrity":"sha512-NhVfREJLUxVkE4T3W5TFDJ/wAscXNPgtINMoIkmdLwByoomW2Rj1XCJ/GAieJTzern2nW9QXzrudeEwzeMzfzw==","signatures":[{"sig":"MEUCIHp3PoDAXFE8Pk9IiMqIl55unbMno543JKv1nmr+CsOFAiEAwqDxhfbaFJAlK4Y+W2gnT+mvilJi6KdTeMbAuf/KiNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj8KCRA9TVsSAnZWagAAsmEP/16H/vxrXI4xp6PrSLGT\nE3MjHx3kaxjHu9qis6mD7wEncT55L2Ps8cbYzd1OIUKN2HupcPULdOdpcJwx\n60618KIGcoh81jaZrNyvrgWU/fOVYEkR3qDIsMnkzIR4SKIbL+ICj46dx2Tl\nxCQrrZpVBJlDR6a74Pu7mW7GhHWr0SndLcnpaiQr3QMiM9eVTtLeH+r3Qfgg\nAnQccoaVQ7XrUjnNuSgFvh1vJ1ZyrIkzhzwOZIgKireC3TSSGcnca09wfTq0\nAKzF+o+tDVBJ1YSnbR7I7URs8SFXcX/+WUGPrXubzfLPwhfTwVkqC++NXegY\ncfpqiHBBYde8NXNR+knxH3s6Tao0ic97jqXgEtUduowAmK73kFbEGNcdtgg9\ntcuYEj5EZO3v+1eq9qOqfXZZXSOSDiAMQ2vjjpvJEELBWVoYkT9bzUv3RIEn\nDeiBPCfpoI6tOOspxCHa/zyaZkj4d91yGT7Bi2/cwV//Ijxfu/gnnDui6xHD\nVcnKF5zGTTYOrGjg9kW2SzpUrvuvkBxxerDM7WpV7Jnrpg8cM1b7Meenfvbe\nmSiOMqKNShaGD6dpBKWfvNc1lJ3/4sTa87bevSlFVDHybyELJUBzSfZY+BSb\nSRQu/AgkkYiqLnjHPE8jYsQqtSIP22LK0G02RUlOgjqPkf8mVkkA/h10vxQp\nNtES\r\n=9e8G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.2b3ec563c.0_1579302666447_0.29906551974333273","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/theme","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.e8a993677.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ead6d5c59d26c9d0f852943e29b2fc9ad46704e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.e8a993677.0.tgz","fileCount":20,"integrity":"sha512-ldkPs9oxtdo90qJVLi1GxVzMruz1ocMtlKqenZpWSP/+Z3lSlHzKcN2fewSc/OXaBd8aDrSJQ/hZVtlV7SuuVA==","signatures":[{"sig":"MEQCIGdJnQC/MNm+3d3IsI+sblzgc0KbvsnQl2f5fBnCa1OZAiB1AVg7HlvKKfwG0+RZP2NaqVEYJn7t4eyphLSxj6FTew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyuMCRA9TVsSAnZWagAAzHEP/2QCzciOCxQchRFbgttK\nL27OO9hS7okwm7jNrifUhamrVNXlVts6Sz3n/4NLU60LQVop/C/ci1d5sffw\nE4Cmn0O0NMrisaDulF9fagg9/KsY9VNKbOBXOSK5LTndhOGhM6600d39myX/\nWeqEDn0MQARgoWg7VtAyXFmZxswSRw8lc1nh8+wNvmdIHdlA/KWfEPZD1BPr\n0aKl7AooZgoLb199YlLiZ9Erpnl7Wo/08U+vxhMiN5Vy/NHE36SMG40tCy9W\nSLoQvueCX1AwI4TQKWpL0WLoDqmVG/ocbG5Zy2/JfGYJBqQycLNcYDQHVB+3\nBdOpNussD09NAUAZMkE8DgD0BJn/6B/UXII1OkyOSwIbbADV9KrCQR5sTwyj\nI4Waod/i7rlgCcUs2yRePEq8nJm40hjq8h8V2ER5GTUUVTGeVgfneHR5ViNx\nbbMKHc+g9qaMK/6ergdtSffCMu3C6XzeIBPFSQnVCevZvi0876wODa4Km6QN\nBZQPFfy5Xi5ulXlQYf2Yq0Qds0y3KhrvFR8Jjbs/pn+VXxRBRJKx4P1X0oIG\n304FGzWEhtBfGXPvtWA5wN68UhMEAdRCN/UYhlQ9lkZAQKxfp8zNKDPUZq2z\n8uWGoYPmbvt+UmPqKTIJDinQFRwrNIjnu2Dr6DMz/Lj1/HFN2qQ2BC/zbiOv\n+y2L\r\n=i9ij\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.e8a993677.0_1579625355326_0.5922438845795468","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/theme","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.cd4903304.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47cff614a11802ca89c67f77fc0c6a27f8339f9e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.cd4903304.0.tgz","fileCount":20,"integrity":"sha512-ksh/FjfDnQIxNjLAruc0yM25XqoJV968wOlwEjFZ0Lvi3jc5e0WEdCKp0Nlr5VQcqB25fEwhrGShui9Nsnx96w==","signatures":[{"sig":"MEYCIQCtQt8nph4nwEJpnYXneiORTY9E6ICSJ9oS197Vaqm0YwIhAPel+vcEDSyD2kAvW/Yygn9BcqjxNP2afflclKD+EYkV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ278CRA9TVsSAnZWagAA5SYQAJHuXggnan1MnVxBNtvz\n/nFDR4NeMTHD91ow4oXtVV33S52VwlsH4fph11hf2S/JAWJV2O6pb/F7x2uk\nEsZ4TKHCsvmteJkOe4IZW1LIgxPYgI+EoI55fLYswZIrZ6RUr9RU7GbO6nMD\nVEzItwXZAUK4prHcqRZ9N91+Xq+Q0NlPLjeBLC8J1ENrySBDmxwskfAxbxb/\nC8kCj1cMjnGalEgGACHb/BPuisOX2ulTZ4nXFrz4asCANudPdglRXC2fsqpo\n+m8W0Ab9C5Xdm6Xa3qsrWRUgzbEEZcT4hTQueFpxV2U5B4k+CL8doftfNnQP\nF0eJD/jVVuk0U5p3VnhCoeJBPx+BS3djYKJCTF+XK5+kmlDHP44T2tC+CT68\nmrovmJ7LRTxw5rgkHPCd+jk1tbCQdYflhlZSDbvX31uOPIRTkZIibYE485Yi\ndUweNvWjZaOYsXUsUCd8ZVb6iVZaoux82zLINmxSpRPNtiDFEmt0slbv59va\nqD2tt/GCSMqvDBEhbMimYD6UQhTmi/76PuRjYvjOezUpcu+Ivoz8C8kHgnP8\nZYkTMvNI22Oa409Vzqb7ILlCnHQzRBtpZrl91qDdQt9IzCDGqDj2l3QvlwEN\n8GFLd4x4zbehirtZ1/jULfRoeiMz9ezKr93MYPDu9mfnUJl4ikD+CYvnTR4I\njDfa\r\n=tJlT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.cd4903304.0_1579642619476_0.4803605190653151","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/theme","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d97d124f64f0c09e6bbaf1b9b0c1cae224297872","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.7e4b04b25.0.tgz","fileCount":20,"integrity":"sha512-UNtpuNrPB58kf+NrWKI2XYYEuHDrha42sicDOgReMSoRGF9TlRSiMjvtuNfKaToys2MqzM9nCfq+900TPpvYvQ==","signatures":[{"sig":"MEUCIBBp3TOme/mpicSRcBmoTtZDJusW7VTb5jv2DRQdkviyAiEAo1TzILlj24hvo2ReefQZDs+idU79UcV7nAAIN+j9zkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ38FCRA9TVsSAnZWagAAj7cQAJjQPDIIvo15r0fj5r7g\nlPu2G4yGU8hJa256WtrLZNY3sjBBjGtb6NbSgPvL6UeonyiiiJJREToElMDq\nM8DYxVqgTVgGbG4oaH19yDtQgMw+Ko2w3bRjOpzDSzZHLSMDIJ/fB+nBULsL\nyx17KN33lAtKeuymsqkbXYeyFvPeenasC71vF7Wgd6/BHg24mA4PRG8tz58E\nIQ/arktxLyexMLrE1QVHDPjUkO3imZkaLd187h4hrXFjrj6sreJZbfHeTrUc\n60mvyZzIzVcTDPWeMYx8DKxEegbSvrXQp6P606lwwx89LjTk8tWImCBIybdg\n+5lhspOVXrv5LO4OEjbmwj9dz7CKA1o5Nj6nwE7wYXfWZoNAOSRMRIRr+v66\nZgRgjT/rn2UsYevkutxvX61W3Rde610QjNSb3iWW5Q9+u3a2Vna7XV2klrCC\nhjNc0zI2jZxMMqUs27EueMETSl3jugb8mCLJMpZxSsrbMl8CBF+UCBCD1xf8\nQLlIH10foKLhKb/Xt2UiBgTDx10PhEYgTXHugj4S23cc/HjZsw0jBU/OrQUa\n64WmCGA/WVadcwC181+mOoLb/cfxY+FEzRRYWTc9uSeeuPlVRd551j31Gn9a\nqzCtto/BsjFNsV4dDtAtwHHkK3bbduca+obVE9fRLTlG7ouEddnvOjISV+kz\nk0lj\r\n=WNgI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.7e4b04b25.0_1579646725265_0.900285951599521","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/theme","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.ebc296937.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c707b44e9fb4318aa1d0521ad7c46d5bf750b14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.ebc296937.0.tgz","fileCount":20,"integrity":"sha512-eTpgPPR5k+hc+NfE7YCr4P/tlMeaxVNGvDZjuA/TKPE8nZHvZTs/9nkfVfctkM4ZHUgAYcwtqtMfz/g0W0rahA==","signatures":[{"sig":"MEQCIBNLogmyEHD+iTkmqzIEzb+tUUDoHLOOXBn0NnWLtAntAiB/k+synmoWrcdM6NNHIdSRrBnFvm5iAOJZvObM+36sXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ4zcCRA9TVsSAnZWagAAJOsP/A50rO8ylE3nfDpFYMPe\n7GKQR3z5vaXvKVjFUfuaSftyE6WsDG+ZVy4pkCwICxPanyhxl2zM5RF5UkTZ\nM3F4y6xg3Iq1woiLVCbpi42izhOEsDlxhaaj5aTJWmxyPJJVeifsxDE/KmHt\nOMs1d+Zx4OWDC0fIJVjdNpyIglsKYKGN1PE9I+vPdKtOdFLdVggs7sTeUVM+\nUimlaUtgaWvKgP/E9aXEgmiVgtnI1I9ajX2ULgVq+u+dtUuk/5BqxsZOqBkU\nFKUH3R6N44zuymVQohIWxeO3T5YRMDJAuJ8ar0MjNMapi86jCCGJUk4U4znu\n3Zb6ry6qYoDjgJpV80Dv/y12D8WeCJVoAmhQXuWnm1omZqA/0A2lMRVC0cNM\ntQvJqAJnbRzniZuMX4BGMWKo2YuJmUnHNWuY0MS/2WZkW1gO7Btbh/NcuBUb\nXSgnKtH3UQsuUxqScin/Nzfnjf2g/oEj6y+PESHQvD1yqwDkgfXUDWUJqkVn\nJsndH3ixEH899kd17i/MjbwyrsGVCrpuORaMV83KH/g04iMVO8G1mk0GCcUt\ngSGYSbrQMdeTabpWl5gXsV2rwoMoWzP3KFcUdEUL3gD6HwpcfB10f6IkF8HV\nZyC4idvjL9wDbvobEunDT19lb6V3kGIdyjxV9UzF7s+V5DP97+4vJMvqAljl\nByic\r\n=ILEm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.ebc296937.0_1579650268051_0.2853743480861539","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/theme","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4899e7b0efbd4092757f5c24d9d8fd360480a9d3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.cf33f113d.0.tgz","fileCount":20,"integrity":"sha512-jiaAWZvUYz5DgI4ernMSZPkEKEIOXoollO5w8yaa1UZjFDibQG/u49XfwpORyrbON5n4SjfkjFIOEcjqTplDig==","signatures":[{"sig":"MEQCIEW1lSHvfOd3Q47UrfkfxUNDfwwFa4q/i7kNl9ybk6XdAiBNWYLB7pCQOr27Fj3tqULpqiXO3fN99cCNKP5Yq6az7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6OuCRA9TVsSAnZWagAAi6sP/Aqq5deng07fsrnEkU+8\n+ef19yBzEKZLw/DXfculMw1rhTZvGJlPHl21twmmW5nDsGdqKglxkPFsLOYK\nEDMccEmnG7HFdY3EhThSyKA50FOMmJbd3IDjq1f/pPqQ4WuQ4S4DBSSFdB1g\nuCuDgi7xWhn/luJgS5XL2v4IOT/PppmEXp3MCymTetWF9ABsnQaxSBq0MlD1\nHTc0eHmyAdXc2IWu0s7wy1lTB60aVh/0wdkd8lgE3HnBDhxAQf+u1osKT46o\nOkB7TZxFLEXh2yU/4bAHVr6PIZW/wSnjd/QfQtsauzmpI0uOz2FW4PN7kKB7\nTuzwq8m26dw13hPsCT1jHgUE2x4CCmcSdrrdJFxRrqc26WICw96tEqlXOHuE\n73U5B/cLC+Hj9PGXOh0qYvq3r247rh2W6KBR5zqTHYgwhB3e2nELfm4JJRzP\nCQjVXCBlYlWPIWLPs7AZDfOVYMOAUzdy78hrBBWxAbctgiLi58FIn7vKgp6u\n40Y9Ug68wImtxp56LoXJg1T2oXrSIqFqdd+z4C3S8RlsbWU5MX5+HXuZLCJ1\nxiHiVTFn5Ld9XvYpz9kn4S2hc1RAXMNcDO0vFERhNOUmpfwL9x0bJhHoVyjA\nKAjAny6gmxO9lWoZsuL6e0lIJHB9CYpcowjQgUdBuTmYC1jv6VwPsXBUgTSn\nktF5\r\n=4sxf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.cf33f113d.0_1579656110308_0.5663919985066603","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/theme","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e787d92e34050bec6f7db1c308c91f73db0cdd50","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":23,"integrity":"sha512-tZQ9XG9HyJJGHGGGRFL15NjomtQytFeUPnv96nVGpcv8tXPMxroyJ62D4Ugwgr01JTigIKGzvGYh0BIrd9fzrA==","signatures":[{"sig":"MEUCID/twzs3/1aV2+YyspjBzCYt8Cni8bJiohNltS7MCY97AiEA5YCH9XXt1R3LRd8AEaaYv7LpUwbwXEHD0kAzlTRbsB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH5cCRA9TVsSAnZWagAAZUoP/jr/P5Q1hOGgh8aSNE06\nj4n2Nog+4HEZouhM4F3L/I+jBg6eyYS/+pReuMUg3myyLilX5rxb+LRhxBS7\nm8IWdaNBfrPfqnvwem3YjFRsPNQhcOffYGAB22C9zU2Tfj/6Xf9aB5bGlntP\nlyFnn547jaxyVLbhIpXeYHOlJKK6zQzFzYzsc17Vc5Yk2afx+HiC95N9JRqs\nn7SwjHbwJPnzl67kjtZh2X6qeVcsvqj9/N34VlKoQg7SD+RbARfN2Hpjy7RJ\nOCgoNuFEKk09Kpur+dPVcLTDcZtFfESCO1MlmVYQTTW4BIhSH6xhq2lLZyY/\neDN1jPb8C+TUVBXl/KtsQpOfx7zX8aTTZ9NmZqZ2hAQ0mhWAYDMo6Y1aYfEV\nm3Eiyvh3hEWNd0EgVjbWRuBUu2KtxT4ESU+6jQXcAo+3VbGNO4t+1YyF8pA/\nmochEBkI3UhmIurv8OE0N0TdrQsJ7tcvi+VVvmT7TcscBtYifouEBeRkIq8C\nTkFvc54nPKkXj8NvVHohcAigMYeTlW5p8odHK/WloCT6BjbkEymkg2HfZLvZ\nL2+79qaUsya0jV6oYxBoP5Ly3TqMOQHB7AOIpfEcB8Ku+QXzATLjU7zgaM0t\ndW4BaY+01BL02eLhIZSkHXSgLuu1M7wUQpfxzCnJVF1+iDcJWh8AJ+Crw+W4\nJSvd\r\n=6p4a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.e1d5f1be5.0_1579712091028_0.9089170840103995","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/theme","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65b2feb1d57519a311a71a39a77445be06b059ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":23,"integrity":"sha512-ZD9HMnfzj/cQBWtDNAWvjx3ca06ickXLtlKJYMlXGteKuhuYM1qqpwAK6UjePiHq2NcJ3t1WystFenwuiDrhog==","signatures":[{"sig":"MEQCIDKN0zYQyZ+DOBEiWHLUUXCOtxLlV1h2RdvbAY9W2c4PAiB6VemB+4N2ETu+nZ9rmxH76WzvjtgjAHQWKvKoRAcD4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKIz3CRA9TVsSAnZWagAA8N4P/REZZmqOZNnjuIB3pjgL\n3ogu+3UcZb8TegAmxrUVs+XJkHTv/NNdIC+X4hYHeSsvCGonCFuNf4Dsyhrz\n4Akm6nRWTbvVUil2NkmEs6t4gpL0h9xodQTZO3rdM5qqXKpnYsMdokzRHq0c\np8O/g/aBydZjbeuruiZlg8GwyjDFX4HkeRD5XAsep8I5P5fOnXndE+5LKSxN\nbilmN49qNb6d2nWDW0NmHRE7WOpa7fGCYHoUGBHembu9LFcnIKen4iaLYwkc\nSJtO+XLFp4+jj+/T8liw8n1L8AxtebVFu2IMnLJH1sPqYY/NCt55+duYQBWO\nfM4NfSvPszQw/dL56CIIhQaCF6oNawNXjMU0yvSO9YizPYZOUj9Gw4PSjMaC\nC9OCpFGDUbZaOGEXi9POqd7jHj/+esJaLMsKGM7VVlosyxu4Qn+OAK6Hrd+Q\nHI/e4PJlm6AndHAS5SYfTsIpfJLZ3Yil8We5ysVc6Zqyo4yQUtVuEBiSMYnx\njedL6zEabxdwGflD6AOgHdBzd835p8BeohfolZAycJTDamgdiPXd6SNSLOex\nnfqUXYASs+qiSH1usU+WJcq449g8TtVDVZkb52a7/Usp5dGhZCvxMOUFVDmR\nKHnIdsYFQKtcal+TxpZW4iZg2HX55SqvgCCHnRCTxZFLIE8NK6XePcuEioHc\nHg4q\r\n=oVd5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.6b6a4ff92.0_1579715830650_0.8564579764689697","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/theme","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e20d2793c0d754238e02858c979b7259ccb93220","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.6092f71ee.0.tgz","fileCount":22,"integrity":"sha512-YEnO/QPkgyU0NOG9HQ3FVMb0h1s6lqFZBD2ejn9Q/x+2swaxtX2EfqyAFDNVQDrNsijVVjk05+WJObDpUg0xZA==","signatures":[{"sig":"MEQCIGjV7weftc+6K3ayYCGshHwGnAQZdo9NHQ6G1KO58HzGAiBbZt2KEouEa10BI5JJ7AX7XoRzpd16BtuBPSEfne9Rkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLuvCRA9TVsSAnZWagAA6tQP/19/8w1h8pbtfq6uo3P9\naQNOjrcwfGoalTBc4fTQTm4VdCmzFVawvp7Uthmz+sHgLOsMv6bg4GEdxqlg\nHYpwBBfKNHnT1dqDif6KGGJhfoDmEKK3+XYReGpvu15ER38TlLyYIV2R32t7\nwXv0X8rAHlwtkC68x83gQOPoCN+4QOmJBTdMeco6/jXx31AGhiY1UgF1Olh8\noxoFazsWcC4frVMwsrossAhdgYWDGKMorR+6qrMUUX4acFVWK3J/4pJux9cK\nGYNWDhVFwquunZphtY84vXS5EigY+TFrOtnfzByeYqIpggnoLCVi+LRPSu+X\nRtK08sROw54IopErOxRn3gUT5BXTmwLlkRHZyUOj6QYjwqspevI4e0ZYCAIX\ntd1kGvXjudFa8yBeXNq8LWM6UPRujp/ewLd0KkgUmvE9W6xSQX4VHJRNMAN6\ng2GYE28TfkcypiEwIsOoDzxrHVfelcv93nmekGxm66zXTCZPo0zqGPz9JVf9\naA/X49EFGMz9MnvP4qcamXboNZpj+3ZIX+PfDyRAc0tsv2NCXv1e5H8/n8ci\n3t8cKN076CHm8dJoJs6yIsCkZysWza//ERZiK1iCTk6HHRMZDFoDcU2zihWY\nMt4KWF1Z0ByInw/YLU8ADcXJcTrXSnVD0DbTrGsq8RpTVteyXBM34drBoJNj\nKFIz\r\n=PvWb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.6092f71ee.0_1579727790683_0.9016252221424561","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/theme","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf265409b05e42d6907e5f3a6c2c64b5463118f5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.d8d95020f.0.tgz","fileCount":22,"integrity":"sha512-MCdJA1ROnQul/NecjLX+YsLP1G9QZXAvv5m+G7Xx1xy3H5WmiLDXnBx2dSvNkz8UC/o8kSUSvqPOMYJf+eNKgw==","signatures":[{"sig":"MEUCIFvo38WoD1tizMhR0le4ZzeHhA/mJ5tCX+F9i7xrBvMqAiEAuK+Q71XgtqHp19Zl/J1CO3G4BK9bZqHb/2jb5pAJoBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNYSCRA9TVsSAnZWagAAcdQP/0/7BceMKEbZ43b2KBwr\nEjwuc4/tbSQo/Md+j88aUSUPSidOkEmMsXK661aJ1mdYpkX0TMrP7sKXN0Dh\nU+8j5c0LdkpHn35L5yarF/gIBf0lJpoR4yJEL5btw4v0njWBxzjq/+OpylWV\n+TmaSn4RQ1t4bnu9d8grTeh03gp//vOGpgIP1HAxTUmBC+pC3BiMkKiSNmAK\nyE/dWXzfGunyCXZi4NEe8vzgw9TcNy4fPIug+z9D06GmJcve8eCzYbPARTgZ\nV+o8ToFWP5N44LyODa6k/rcx1+/0ZQhr5HudCmANWqodJvv8RH+ffYk8QFRg\nCd+6x/M7w+akeQ5E+acd2Jxsfwdb8vjjljbwqvbuoqdvpBdaapAYyB7BDXQg\nmGJTCs2RSCxFd8kYkr5sLnv+SRN9E2rzlAiAmLLCHiUSg2GgclhSZdDy0+9E\nuawrrFHeSCKOpNcAaoDRPlbaI+wmffoZsoTOgQ9pJwUjdjvORWTJ43PUx749\njFN0drmpQEBNoT9RtxpZxeR5BlRHtF8hB7Lzzc71sGsxO2N3bL6SYa0/WzCb\nFQn3fUovsJQxc9afRZRmZtIfFE6B8Ra/fputRs71y9K/gzGNsov0qpmjLsBa\nWS5rtm1IcbnMpIIRNknUGjL8UyXSyQP14ejceTKPy4cV4ZkbCTurCKIBAF7T\n+W7H\r\n=KwqJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.d8d95020f.0_1579734546226_0.9696721502454031","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/theme","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b7facc628.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c757371e1d85ef99a9f200bcd80123a396c44110","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b7facc628.0.tgz","fileCount":22,"integrity":"sha512-btnFVikorH8LyNCd8ZId8TMg5Yme/+WbfxJtnyb693Q64/KEY1ZK8wqWbCS3u/m2lS03tzVGyG3nDogRjLlrJw==","signatures":[{"sig":"MEQCICUnaFWCq0z9hHUd3LD5Uczrp10qw9REwlzlCiQI7Pk1AiBb78vNpopZuGOJ1/IG5LEGehHxDtpSnfkljLi7C2Ytew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeHyCRA9TVsSAnZWagAAORUP/20BOONhVJTm5MU9sPrI\n2ezYy6MhLIatklcouIc1epTP7GXcZ2gsejX/0jyBgOlRxf+UBJ+jf3bjyacE\nbA/G/Mp46O15tcwWZo3GrNl0DwzFgttBngwaH26Y+zsTKE1DDzbtMx+PhNbM\n3fiXycKcouB2pKotRSyAKOzGl4cqKJLcQK1ORpLjbU9dnDDMyvqs8RLjzSLQ\n3VWFx5avBGy0uRCJPF1TonHgP/mItZPsQwEHcCY1A10VPGOMzm86DABgfbd5\n1PPQh4PSQucdtJii6AXifmXYnxblvEQYmFKhOWL6D3Y5TS5ELNmM0iaXWgTU\n7v9nPbYDpdS2uXt8SzMEMwrhwt0oRjFQq9fJ1cnHRaIeBn5d3JZyUUs2xywj\nDiVPd5OLKSv4UIaqNnwSWEg5RPokt4wfv9p76C+JNYrReJtpUND5IuKNhGKQ\nzm7wcOLEBdUhOv6pqEpN/MrcH1e1AzxxvVmFodZifIYbay6yrZhSBaOPgOSV\nJUiOS4IcVDKP5cUiZZ6crDx12z8bQDCFpMTn/T6YvCMsT4WAc1vWo0YrZHx9\nYYj3PMBixmV8IlwpSDSy3LrAD2/UBw/TiMFYjxyO4lWdOxvq+urJAEvvlvH3\naRleYpdEjL3zZDOtPPpFqI6FZaG0P45a9JgolSmmXftVsBFpYUN63x6QKcON\n/NiZ\r\n=RV6t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b7facc628.0_1579803122468_0.27876044356074225","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/theme","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f21739ffdce88b4d782e590024273c7ff0f401b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.63f357dbf.0.tgz","fileCount":22,"integrity":"sha512-ltuWcx2j2AAxUi1b7Z4F9boaGbEnY7dvb0u58F+Cyjv6SQmJkkGyATrCpuE8N5uAyKRSf3GWMTDO00+8AMkJTw==","signatures":[{"sig":"MEYCIQD0dRBXgc1M8m1ho3zxekuJ5gYCfT3RXR6uBpklOqUsGAIhAOUqzF8dPCfXEpYkpPyOluaOMLKg35n30E3tY5nJ7NB9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhYtCRA9TVsSAnZWagAAKGAQAJWHVw9KO44PwfkRkKPt\njzg3yISC9BN9U445LOU6sVDF6G6Ts/R6LHfUqTgUFsd+tMIxbse9XgyKSwEq\nQ6BeD8tOnGuXcViUbCkPSD7kt29kugNfRFpha0fXj2SBK2aD5Dmf1M3CqTyJ\nS3fypzVSv/65dPCl52uQ+Htvswg4RIotBzO4oMwMFKbdkcgPgpcUXmGg4iix\nJ4XDZAZt2vxSFzW/JwBxVzYeVUXv8FbWahQOkfEPjseOjsgIsXQRhB/fX8AW\nQGcm6n3itPZZYzjpaRyCtpjEMk0ckK+7xwOvBNEWQXHcuosRzKBSgH84Ysrz\nh+Zcm3c1zMgoBK6XP9aZ35TLKqHFVsBNuA8Wg8Y2EJkztoRQOj/4pO2jFAPP\nZMQUtHyPtRyCStN/w5X7CeTo5zccCL5JIEMTuowJAWVhVN7sLkSDiRXfC+Bl\nbOb1RwdUgbUvNhMF1sVcn57O1Td04CmDm/KRqczYgiUTtmr7m41SPZU00At5\n9Sh1RJ97CFNqeE6c2ubHr2EDtgMiR+3S7EzlGtoBYLOPbb4faPZT6kXhmMuP\n+MA02yVfW7cQ7VoLtUJ2elWdK28hEmskboHnSJoP09g1ZGMWwnWLPAnaJ4FI\nqY2tHmB7OajHVwgmLQ+lT6XCaSE5rehz7pCw+EXKTTrZAzsSyvCrVdjFnJr6\nYjqF\r\n=HgRm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.63f357dbf.0_1579816493170_0.6772680321652118","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/theme","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc8e8ffaae1034b0ad84cbd1524e462493a56c0c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.f2426d26e.0.tgz","fileCount":22,"integrity":"sha512-KKToozf2EyQrSYZju+IU7XCNIgBSqATLHvY9Ith6508+8u/oZW6VvhqSLSgdOD7GBg4fQh0NMsvpzq6cyY2/sg==","signatures":[{"sig":"MEUCIQCotaI3KjImnxR1zFvqw8Vf2OIcDPFOOzMVdBOdrGJvLgIgXPFDQrxqVNi+6Rvh10gU9AbKOtkgRRyLm5VZgZMNCeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJNCRA9TVsSAnZWagAA828P/3cwtlx36a4UsO8nU+/M\nUPgbjZ3VHQEjnbNeDYsdRZWilwREwcw2IhXtm8l3HsfTiyjuhTk6HlBQoqXo\n1AtDWy/cGcz7QduVGoRwkcTCSS1fL1qUEuzKphgrxhBxAJLZ+IjYQKAfsIIQ\n2tMcAiuYLb3+ilHLdKTzqshc0JFMrK0Edu/Z6od2SUvnqBe25/k8xACgeavk\ncezTldY3Ij2kTozNZ+yfHw97+oKNklexNs0TqFCG/rR5IIAZHfug2hRl8QUN\nv6BnOH0RjJB8iqe8fIb+fs/0HuUYpZ4/eBO0Fg2bNfgmUYfrZbmi2eC+/W21\nTtLnULKWWXRQs8amhuMLH7TYcWnmH4y5Src3xbtipIw9oX4iyoLq8bjZ6ePx\nCcS7lGxbp3sDtwTlwW4IoUcbf4rZN7rp8o9fPSuFYO9C6+aoP8gODuO96Gbz\nBta9F91arAy0mfH9K2NeMCnv2RaOimmWHA6L8v3dYeqv6bh5Zd/eKGKyh+Zs\nWvFWkV9vFq3XBBMUZyYNn+6G6MZB1hmZznIX/p9dZU2tau2Fye3Ay/ZUg3+u\nG7CymXeuSrZKu+s7LwbGWjUHP1HbhsAMvJDJq2URQR1lc9fY8WojOpUh/q2e\n8TFCH25uR/KjhlfguUP7sfFYVvBi1qUIRGx9HHJRR6L3P28P0tZbD/O+5RSS\nyBna\r\n=4b+i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.f2426d26e.0_1579823692037_0.9977547898633483","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/theme","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16968143ca7fd9e5b88c5504364e6d249c13fee8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":22,"integrity":"sha512-uESlGOlYSLpPMEAmUL2ZmzrNjJWaZOE/HFclLzxFGBXWKWpT8beiPlSodDhyAyhQca3llyn1ZqjSJRh2mm0mPg==","signatures":[{"sig":"MEYCIQC59Xg05+E6x/9EZzBjAVCKCibVe8iq/t7xHlrk3Fun5AIhANUEW8eZ5OFGxGaU0vbwXKr1kJmoueg3RwYbEDk72eN+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+QCRA9TVsSAnZWagAAIgoP/3pe7szUW7d9MbUaSG3L\nSYa+9zaarsWMByN8QIXY/y3Nc0Jkned7USXYycxaACL5ezVuakAQS7r4v14F\nByiRb2g5GbKFXy2nDiuuytVF4h9ZBsIwWqDJNHxNZdQcW9ECBo9KaMtrRGU5\nkz39rTGALQ8dlAbRuKip0UVGnrV6w83rqNbZ0QVUsV3s0ncCVhtTkQXUprNF\nweXRAc62nBgdpkbDElWW/qnGu/pE5bYRrn6W4xTdy0dpj8I4Kio21Xwf/dOW\njh/OBOLwIGqSia+dBjCt4oDw5ryGxyuL7KDaRibgWf4lj1m8dWLvsPc0dJoC\nELC2NvJHQHgKcHmvPqsef1Bg2QdfB/I8xOyvmLYytoKyGYHfruJ0wKo3X1kY\nHUCEcJxagIBqpK0GYOmydjPc3cCTNVvd90FDvuPPfbXaYCGv8rvkB5STXx0+\nKyg1fHfK8qMqFh0tZGfgwab/KXg9k8xIXYNkBRU/bqVok9p0r7egdDN+VN99\nu8o+bQeJ1GyFcw1d/HBKJwWJ5eqgW2JEW+//YMilRWugjSLIqqR9Q0dsaKvP\nhgSRnlbn7bNic9UPlVIUtUsgGtRl2kBbLuE7FkgxpeTI5zE2LKoAhAB56oMG\ndE2ajrLyiac1gzfdaK0OhZlReid/2sxyRA6j7a1i7CkorM4eIsDrG6r/755R\nX5OB\r\n=oh/C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.7f5e0c23f.0_1579884432009_0.33188943784728453","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/theme","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"566460ceffba3fb807280236c2208bda4f11cbf9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.3fc3ab520.0.tgz","fileCount":22,"integrity":"sha512-LwsTgVELJ5b8KX5RCQk4zJpogwjz7w8nfmQFHbmzexD61J/+RRFvwppRHAhqBTXInggGxmUE/Zl0w8xu2h0d0g==","signatures":[{"sig":"MEUCIQCrk5h4WgsyM5oME+qnd3szahcrW3cXOolOqX8y2KeEVgIgaAxHscGtA5dXycY38EY/J6+7Db7rlKot0EhVKqoEp3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKydXCRA9TVsSAnZWagAAyv4P/iOntXqA0xCFI+2zghZH\nF1SirCrttOexBktYPqKyzIBi0mp2DolgjZAgQKAhqkdpD4viUKQLAzWlq9+D\neJX4GBbDWrqGNJuzdISnljHNtCGohyxUMgldOuAAyDGwu4tMkpAnaMEUE/ca\n8K+K5+g9vqhmNp8/ELxF9xf+8l7YuCkavEpgL+27mdHNxDWjItd8sOPxTYn4\n/Sg+EiBP+sawXRMlUBc39IVywiSwh/Kn+ensP98SZ9Q1Bub8pc1IhR9j8Ouy\nIa1fYi7hxrrPx/E8Wr+X8jr0Haiv2G2333S/WazwaUiDCz10PhQkMnYJ7N2e\nMQLwQqNX2XxpNa/i0OueNIHj0QL0xPmaHx9JLZUOjjBSyAC57QZ+cJqNq+pW\n9P07M/zrD6ICNMcx0ZrOU3SmmpeuuueCORuJa5HNHXwlHpwWIOUqen4Jz+sa\nUQGeEYKdcIye+3cJQaUwl9eIs7mMR0qkuVS4n8rIkVSh+Ib+auSoFRM0JBij\nn5dQ/6tRhi8WULB9SaIVjamest7mCYjJxqWriovfF5QyU69IWjjEK5aCat9+\nf5cxpShLb5LXD4Pmwm779rdOQzSMIb/m1+jAaQthnat+mcfAJUebljALSatD\n9c7C1WHfYpY0NvcSkV2FXPInXsKLFXc8LcoXxu9YOQd8ICUyV4yZE6c4xK6q\ngycm\r\n=2+8H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.3fc3ab520.0_1579886423374_0.30540816220779665","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/theme","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56aaffa6adf5a8e5074cbeb51dc654cd86ca0dd9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.80a4d326f.0.tgz","fileCount":22,"integrity":"sha512-sfcurCSfZlHW7rI2UELFF3x1JB2iYOROMpUd+553SF6MIJrg+6Xg2NcE0egFvbefKeMKFIwP0+dMZRAEv6awKg==","signatures":[{"sig":"MEUCID4dTvi72s4I9VvXECOIfjElaNcP69DcPulIOoq+zl2gAiEAx5cDPPYUD8Qd0SIh18cHOoyYvlb10SDBODOAs36U5PQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1djCRA9TVsSAnZWagAARU0P/3lHDToZTOmc106qSJoO\nzsyHdpSWyD92mu2qVan0kTfBAdnVg4S64OFnIsVkixrQNLi0KgtLsyqWwr5m\nNGtzw22lKdZeXVpMBnrBeBFeww9GWCDESVJN/XsuUpo8Z2QS+BV4PKGHriji\nEBCejnLHLPbs9C448AEixqgX+lQJhIhpvT7YFLJsVs4nDoIAC3xulWg+1L8/\nNA2ArNrO6szb0mGGrGyEdw6E2W9L1iDpWLkwWsTaEbfox6di02rtJWmmIsON\n2Ou3Gwd2v1DKxv10oGKcHKRUkcMmRsBfSLhf9C0QJW+GoMYreMqIVTDrx4Ef\nG5hUool5pdrrk7iz13AGPm9771Y1BQrSgbafOIpa0wf3Cp2vuLq3AFMydDFP\nxbQpjT9TL57TVFxc+CbaXaTHNiUwxLJX9s4B4Qsml73GHh8d8m8kRdG1ZhAq\nrUtWtbzTGt/Osk7m2AI0AZEyoevzkLR25+Lf6cBrBJpGdusf/76DKCmcxvuO\nhjXc1m+Fwnmm9B396gB068EGjv2XNfcGAJzd0+Yu1u1aHJ+DV6hMbuJwUnCF\nLGi236Wijkwy7ULI0fKqnfNeE468buxBx2jO9Kmjya3h58d4p63v6WOUnvTi\nap1y4LEdrqlpiRC2FeqpfNurgznthhXgsP/iB84j6puWaau4eldZXiN6yniY\nNSa9\r\n=I5on\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.80a4d326f.0_1579898722693_0.8316377610938614","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/theme","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffd509f3451bfb9e9ebfa091607e1a9cac9065bb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.ef7de4def.0.tgz","fileCount":22,"integrity":"sha512-qCCItISwjo0ah271hlnv6AocSD8/lYwn6y+srZG5HwCvLCkh01eDaMwURkodDS8XgZDmir7XeVHbEdzL9B+Qsw==","signatures":[{"sig":"MEUCIQDeiBwPaGdvRzLlmyGnui6B2jLFAAdQsE8y6jd2QJlidwIgbEwvzwPiDG2vC1d0Evw+koaPuU3M/ZQgZ/Cf69mOfxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2JGCRA9TVsSAnZWagAAd5wP/RnwybDv3GZR8tHGoC/G\nDO8ILSG0kwHnM5S9T76oaQ3wupjTkWlUpk/nrUpfVMdLj7bYaFf/oeFhw+nD\nYjQIujJcaPVSq1V59iEj/27HAfLGZspslNwy/Fh3sXpxd77iJmYpYTPSeKRw\nNSNI8HhzRtp3VVg9At5taxMbKjWuKDABJ9ME7fRUAIbUyTj9f7tL3TpWqN/6\nlrDYjzFtH2QWmJfaF1Idqxj684xY0vU4d7romxnPzuVcTQRne7tnJtBU4IEG\n4Rv62x8yB34S9SNv9/VN9eqr+bKTXUvZu43HiolYBpbwjmqjfUMZ9xKz/NnT\n2ZooGgMimMQmxnLeIivYMBieKCGlWXMi0FmSSpiygwmp9eiOufc0CFQjh+pr\ntTHosDSoTUkBVVvwDV9DiKQDCsF/z47l5DJmWk8Ke3BgrYrwed8u9jmZWnuT\nWcxW/Tkhgb/7otFQoCzwm6Wehcb3qnKF1L6M1vl817+jUqCqJGpvqazwyP0/\nZjs40LR2oSiuf9VXfTjX8hcbAtEaToIPyXk/tRrgBp7O3+a5h1y6QNgOhODX\npl9Ic37n9+xll6jtrXSYPXRg+C3tLP5bhGVDp5BCbtfOO6pnLMS97LHNIhfu\nCbCtWlRdeHiJ4eTAeaI55dPqV7ePvSls4fP9FIibz+w3yrOmetyD2uQoJeRa\npQHz\r\n=bnC1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.ef7de4def.0_1579901509130_0.5019917032189338","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/theme","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"368234467c5ff4472e76d359fb27109711938f33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.93e2288b6.0.tgz","fileCount":22,"integrity":"sha512-pyp+csHhQ8iyTvlIOCfaX3IHzgldHifC9PIeRXcVbhLjn0qtfOZ7QBeUH0RdlKoKnrWldwE6VMTRPxLJ0+0QpA==","signatures":[{"sig":"MEQCIBlSQlB5qzJ725wTeRGavSTLz9TVN6kSEUeCLvC5oepUAiB+Mrl8J+ujG7BoieL2xuYlAR7fKG1sOAkCY7jf6FQRow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGdvCRA9TVsSAnZWagAAEEgP/3iw8DhYUY8C4kDRyGMJ\ncA6157rXvEdlQBlikrC3IqVmKxdOlF95FlTPH9SJokfBndBDEym32mLufanQ\nWddP4ty99nAaLq8NAwJy4VOionIhr2VI1XuTl5nC7Zo+3M2xeZR5eFLX6fx8\nPu9UvXEfgGRXlMS7FWKv206w+xAzqI0cPM90K6LgR+IoC+UNnbl0Hn5XwiSE\ng/3kTZyqpgk8DKszeZVVNxZmakuCUJnRpEv/FX1IHGU0OpmjsZj1SvfZwI6a\n/WXOzJLlYRiT7Y86HmLlv5JA+JE06Fk1ccOUH4dqm1BQLP1QmpKj7GCMkKQr\npzWMLTIsL41waiX/i25f+kYjpGoyXczxJI+P/XWBmsLjcCxDB0WeaLwv424c\no7pMlT+I6UlknJ8sPgWQFwlx46G+IL3ld83v5iEoVOW0d9256u3UvWqtgjPn\nCUUbyn4Hg1/dAZ/nq6I2i+RsbpWNVLYBZ4nYuoHAmJFNapKD7v2VFt3LL1Um\nDp3TIU7X+ZkiEmNpVrC5iV+cEUaatkPg6bVHpJ9WM6PaJTqqPl9LEx9pQ7tH\nQEIC1jRl1e/0KeAg2LVlupBMkhGFGvNXXejF9aorOC2Qv3uFs3mh6Mqugv7H\nfLLxv0PtDhFdKpIHXA489eC24DdXZUuqu/sxpYihko8dyUvjUs4QeJq4JNd1\nhKLK\r\n=81T/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.93e2288b6.0_1580230510508_0.2536323066301327","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/theme","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a1637d044675c8c8b5b9650c5b6ed19ce0a1be9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.34ef15f67.0.tgz","fileCount":22,"integrity":"sha512-kAPzYqPkYIuzJSDnyOuxarRfGqLj5CK+AMHTkOD8nHTcMs0QZI+1b9jJZHoECa/Dj7NkhrvbntNbuvK2/NWU3w==","signatures":[{"sig":"MEUCIBJQMYLU8+MF9KrBTt1ghN93BV6ur/1udsHM6tU3IjnlAiEAzRYoh/Cedofqp85PijorcWVtkAdEEpeilKoBBljhPZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG4mCRA9TVsSAnZWagAAYcAP+wbfTFegKp8FjJIUJkpF\nftna8hcY77Z2mFbYNLRSjUuy4tne54MOC49DCqXfbl5vEufiGmso1A3PTdvX\nkTcQCvRN8dmTCXMcwdEXafU8tgsn4F1R8eDnNIhSU/Kjd14kQpvLbeWVWbPV\n5PxcBOzvsbL1ObPv84+2J/OA1XWAuHbIJ9xbJrAb2bgrdgHUnVTF2VXtX26W\nQTayRIc5eYhACIJj9upeJQZnq0nyGFFFTqbLwqonx6h8EoRO1v1Y1e0FOKks\noL+SuXMjDu/KGHe4ZEfEsaM/Mpjwd3CbsJteMiEHmwLhqA2FtIyutE8XTV71\n8ZHCCgQ4r3JE+m2G6ctN/jDwibwiVFwnvy/R4Qf1pbAbiqb5hoAmu2TaWH6M\nRbhXrHCC6TS+qMnCPX8nAZidrrFgfRRMAgLznraFVTIfCHXIDSXd2uqiQx70\nwJexFQCZ6s2VZuAZlJwYitPV4HeTbTWEsJ0+XUkx3ML9Wy6UYsf250oKDEHr\n5DCXqCrda4cT/SBIKtivDVH9VLc8cvUxJe1gouuWOsQUgrS0ZJWzFl0pUVBL\n1PHg6ttLadfztgses1fzlAJ4Y9T4fxHY6NoM1AjyaCOHlzeTM0LNLLkPw76s\n/T/An6eD6w1VQG2aYQf3YQ0NWfKjb5l3T88Km7w0+CEzWftYHmYC+jIiexsR\nFa5q\r\n=gDbA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.34ef15f67.0_1580232230195_0.7107223585051639","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/theme","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"561c10d9c80aa9181193ccc467620196340a4457","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.d3d176ba5.0.tgz","fileCount":22,"integrity":"sha512-Aa7VDqOXRSVIfSLtCjrRepZ+4ftRQkA3ICC0R8uvBx54Sp/HW2fX0wf/PflO8HlvNXzNxr98WkRMllLFky8DsA==","signatures":[{"sig":"MEYCIQCO95TSbWzAvtPmLSuhhVSXgpqk4jvp5XzuHmpG13RZSwIhAPKuZ9BGu3nRAImuFSQKzLI5T8b3eNsKoVD2WEBWSuXk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG9bCRA9TVsSAnZWagAA2xEP/iZWzJi94OBhK1NQGuO4\nz7TQm5NBgyVd0dm1VFvXV6aECWObJCC8xTIPFlr5qiWP8n2c3++0AzK8yf6c\n5mUf4UOCKp9OGEh8xdNuASHEIIDupslOtXq6PCmpjUA6EqcQd3SJsmgXbdv2\nSPMOCyA0OwXplmJpKiwqSKeDmCY4wFTu8tQjgyGPMhOoW/kPHzkxVBGhB902\nwgOKyUywocNtFgfAqQlQPUgULAm7pyQfFUIkg30ZjX9keRrULdRg+q6Y42nB\nw6CZSapFGm/2kJ93QwHLU6hkAiHmaMOULTOcRmR/vkGyveJ//LdkhgyONw22\n8XedSelLewOv+jBbZhsnprfzX3yXL6caaXGBQeWLqzWgEoUh0IBr+V2MnN6E\ndQe8Rpp/5sgFvzyWzmkA/iDWegQ8vlP8Yu88/02gX2LiOy2ey6L4t4IhX/Zt\nmj480Nxb7ebUeSeIpILOhcHIm8nQQ/QmzlubUdMKDiOguc2hQ9gFL70oiVyF\nOzlf8G5lYJtz8w3HQOaJxaFl6kjTatSmStjR1jrxQjg7oOWMZWFtBy/XpTaF\nkGAISwvj6budXHGorKC/wMf1o1NfZWAzScpBpbe1aOhBnrNUFagGkmvvpj3V\nhjP8byYYgkGeKW3iG9HrDQWgvvUbOd9S1gaWOQxLLZLoASUSHd4ikgG91AUq\nyIxe\r\n=QevU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.d3d176ba5.0_1580232538906_0.5378291864117848","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/theme","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.32c1df133.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4a738f755bf0cf169310c2d15b8247775adfbb8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.32c1df133.0.tgz","fileCount":22,"integrity":"sha512-El5cwtu+rqW9wcMxsDDpwU8QESHDdWYG1XWc9N+SuVhW4FKIn+rOI0UsT8beBtF6MZZ9qEf8Lx0bszkdmjHc0g==","signatures":[{"sig":"MEUCIQD85jMzSZQjAk8KbyM42pfwj48q2Nh6on5cL0JM6TFUswIgKBbKxaOdvpsM6ckwOPWNQ2AMo9/kG6aw4ipZFs14tCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7ACRA9TVsSAnZWagAAXWgP/iVfxfUmm/aNNARtBihp\ncP0RumFXOBJENQTBgxT2RfxeaBLg3vCAfHI+VofZ6m9DLbEbIbjMQZGrarJ4\n/lzhs2KiSosW3waMo/FxQNqk0xqIOg2NxdI6lTLPH2GsmyiZYz82+NvCDuKi\n/4xeKiCRW5GJ0+Lck5wwUgf3pwd6KWRs3pyyuDPJ+NgNhqzX7fsaJypmmpxx\nh9zEcQwqBQ8Vt1rfvEbciCL48gn3ww8BwYon3AQMB/p3gLTfSH7xIsbPBuOy\nTal49QxZKtkeXp5L+rJG6lp5aQYIynC1h9knD688/Ot796Gs8UsNM73rKiRv\nzO7KwBA7/QTCZrJm4qHXPjPZjSafMPj3tjJeBIgwaqvUr+URrZAxfgLUvt/S\nBz6WY5IsRTv7t59K5hrPpZeR4RQX31BxcdGreKiEXfYFONs42wQ4m6gmoXmS\nY8PkbxYAHZwIgGDxpggyXx2LtGcewM8MnMiyQYoZwYuaNqoV4Hh47LMhCVMM\nEPPAqbZD5/t5+NF11pOd40SWjhgQ6CDj41k8VaYMnw92Lul6gY0LZpi1X6Md\nUGGi5iiTiMmltAleir0BZ75B+fktM2pc6Ja9gxklXESLDepsHXtK3vDjPQVL\nV8KxXWs1XjIc3TIuSBVsmlfy3dRrt62beJnd/3P+hxt3WUO3JHnnRGha9/N8\nyo/Q\r\n=P1Z9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.32c1df133.0_1580240575886_0.4229515711439431","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/theme","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c49ad6181d0ff4759b8970e4056fc3082f05ef4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.f3adce86f.0.tgz","fileCount":22,"integrity":"sha512-NRAjeM8uZthH6oLdUilLgK4A/tUXHkHIHh/if0itdojJwTt6FxrdLjLNnbcw3KYM981pbZukH1AvOEw2YC11NQ==","signatures":[{"sig":"MEYCIQDHx0nwGT/qIjydeFk+VYRCyrhCD2N4Kx+ldTRgErch4wIhAKI389r1J/ecQpXdKDABJaM583I5/K/ryWVkrOZO7DSy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKwsCRA9TVsSAnZWagAAqVoQAI7PhvzB9q9IshMnUh6Q\nATosVPLrrvo0IMkCmUORdpiAQsEw3SRk3Y5SaqZ120mepeVuJcQFEzqOPRoM\najUges6dlnL+8XETujixXPPAqDp4JGulV9o4TBYL6rwqQk3GWkT1GPgrv2CY\ngZ3zc8z0sbixqbDkVmnZlcq1wHB63SFZ1qHy4qMbd1dpjmwLR3OImua3C/1B\nn/zy2B0FPco6nKYD4iusfTPIRX6voIN/Df2Sh5oexb7SWLYMLdr59qhxjZLP\nNjMf8q8pHmEA63Eih+kbcjmqOkjd6i+1zhtoU1C3EK7v1VjF8K3IZxbPaLSB\nagPLbebrswgT3ICONHqE087qWfBM+K8v63UYs8NnJ/d5b8eR5p4wgR5OAKe+\nJcIyV9y853Ogw05wyKS4g1pfIMiBc9h0XDOePxLBEnngCBy2QKHdBj5O12fm\nEBczYTRYzpovOCfNYgafTn6xlHJWpJILaWi+DQgmLwqacyq1NdkLs2d+CriJ\nzA++lvPytgO8CKYgB6CkY9BKLasRLx2sUgqxtoAC1Sx4T0SqeNWUDb7Myra4\n3z4LDiKoB22OXIPOq/j0Pleaz0iQ/U0zc4tKIVMndkOl9bBAyFgBQux5Ad91\nKVOfP1rSuGMGMFJVtw5x0i72bdPh2oIqiwkZbfgxnI33jNm3lplUr9mbAALa\n+51Q\r\n=L7D/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.f3adce86f.0_1580248108245_0.8460640395400512","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/theme","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.a4423f890.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd555b4f5e3a8788436bc706c70bb93e7ffc466d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.a4423f890.0.tgz","fileCount":22,"integrity":"sha512-tuGFE2d/vHJUXhgl1K+p+/lCH97jlBLIvF6EIwQi+1sZeFARWLPzBQGfaY5JzhXpuKomGKTCRwtir1XUZ7bKEw==","signatures":[{"sig":"MEQCIA7RVpliGKYwBm0ierreazw0FpLkxntgwAGt1/WGiXCrAiBQQt1TAobQpk4Myu8orLI3VmMBXHDQUWqRo9q8KOEm0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfRyCRA9TVsSAnZWagAAIRsP/2evO2jViyRfmP866x6k\nzwCrTlB4jXIfaOT7UbOyw6FC/ALWxp3OP64p+m6yb9Tu5Gt+Fv95tHfsxLcT\npPtnhzEEfioNuB6A031URkD6/fq8JP9/0xYt6coHgikf3G64VfDC52LUrHM+\ni3H/wwzZIJ9EpLvvftDoswEVDbCdTLJZorENxZSEpTEOh9td+8JOKA6704PH\nCyIG72KvLlWt1LexTvyorf56EATO8/4f2NTNmlGJUh+jRnxtX4K4MyAOkUrC\nETrOTJuy0iR7WquYt9evsyTToSqI3UHlU6Ho6ZJEgn82b2WOSye0BZSsmRhH\nxMqBbEbKhWvHHA5K7El237IYhn+6zfBi0KViC/8W8679WBuGblNTs699JgYl\nYi9KKx6iHmSC76SFnkUs8fq/Q+5JUdjmXFFeOHsaWTHv8g3EsMRwKaTUnWIZ\n0QzBoer7taOG/wE/b2JLj4sEUmTYQOiQQMYJ1JMnqcunIAcDlPjSQwZ4Ibwl\n3ZnZmUwoD3CTe0mruaA16RWYeWV9xaigwWWVQ+qvY8kNmEr8qyahlNIhSgCT\nrNHhSLi+uDqMQJiK/ENM4u+EpyaVpoCNFZdVDmvEcLPOOTZjESGtwE9Kae6i\nEJm9Ko/duDQ1UGfKjLMeoRBpgSzXxeJdNW244YKhFLSX/dq+UdUcZptRPYMq\nAWb5\r\n=mys/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.a4423f890.0_1580332146258_0.6470519209956154","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/theme","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.9351f167d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74dbddf19da4ba79eab708faa0aabe650d7711e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.9351f167d.0.tgz","fileCount":22,"integrity":"sha512-xCBIcILGSaTC0zgH+q/oEDSUsQtquKS0RGqvPaU0sfihrwMfAEZ19TaYpDByQqDMjs3v0LixJkdxCw6lSfSRuA==","signatures":[{"sig":"MEYCIQCFix/Z0PaNxZiZtVkw8ABhj/pErpiiaontL0DvAVhsXgIhAPBdgzpSjOcpcn8P7ZSoVEoRBWnsd4vMWX1hLQL6Ql4+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf89CRA9TVsSAnZWagAA/wgQAKNXi/4aDa75yD+KQcBM\n/iFQafSLunV8RR4VdFtL8JAa98XF/lN1P9dNr2lnxJ+Qm/lHE+oI9mxl60za\ngB9stC5wxA8JMb+0fme3QNpTUsE74fi3e9KRwiO9ttTBjXkjLl5ySxsLNuIk\nEBw3J3OgMRp7GxqAaqOHihf3RcZFPFfAGIyWwdjpgJBJRR3ahikfr7Tw5g8/\nb/t6p1UQVigtqw880+tYQze9HHaME31cXgAPDj7M/41JHUSPTrzZCiY6TKkJ\n1SpCUqUad4GzC3VMlTK8/I2QUva76eCEiZttKPmUmm4UB4XQbTVl3px4hZMJ\ng0OI7b5fA2iT53lCvacxD/9SCPiARDMNgQp27SdfgF1g/tacmxqT1q3xUJ+k\nRt4nMTnRwqV3akTjBoMjuzF3GIYy5DOLXzJXhr2JeVxEQGLIZCYM13Tlp0lv\nu93udpyC/zCh8wl6X2lQz2/SAm5yUAk3QfijfXzqTrtOTn3HYs2Bu9MTBEjx\nH9N8CpoWVX1ZTY6svePO/OLDtgiZebeMwybjthWC50ygaWDKAAzA2GiFTP8k\nHPGakH4eN471MFraymQ6ZgJOWkgzoQ4gR9aEoaPIKHnStGykkcEqHsrbavb8\nWoMC4YYr2CaEbnuEKVLRl0O1TtU/JvGv53nNCeldrijVjwpPKp0Fv379d27f\nbjBY\r\n=AQL7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.9351f167d.0_1580334908946_0.22899447298208142","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/theme","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4deee421be16ec1fe448635053b0eb09ae334dc7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.29b89dbc1.0.tgz","fileCount":22,"integrity":"sha512-KXDTJQhQqCmrX5iSaCxA0NzrYMjVlDvAuEp9ZjS8YHimJiUEiD+syZLYOHSshFF4kLPolke47e1wEz4ILiSbCg==","signatures":[{"sig":"MEQCIBt1Y+hkRpOiKBCXRSL1F920lmzedBihR0Z38HA+c9taAiBId6e6CrTbQsOzbTxF7SrfwImsVrLzhfMESYrcoTUf6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRICRA9TVsSAnZWagAAf8oP/0V68KB8CUA2UkGeQNPf\n7h/4Mvu6C+j934JSBPXNlZHwSQz5OQs+gHGpK+iv4tQXkgj+xAiopd1Q7PAq\n6VEp5+PG7zh3gGpIzENvRE4tTmGrgYWC/t2XWJ2bmN73z1WNlNuybKAupZQ0\nNF3JRTcXNZL5bPK6VMYbhRW9QvpgYeac+Nt0gs+Vy3TaM+kf+VMlKXmvvbEj\nECfLekWiFuB/vSUQdMTQ2UUcQggOozqu290BLXO8y/64Du0CJpixA/K2Eff9\nQ17Os0lplEv88brHHNQbvEZMuvEwoU7+8eEyQZajxenJxkZTUrgJcLDPt6Cw\nOW94TUpAzGAnZmcfU3hHihYwOWUs7Z1PvpuzmGGzike+6Y5b5RkmNUKK3y9x\nrykfaq7aIVCNflEF/xhDjNgah8oPoSNLzey/lDcThXyUYkJVERmgdoOBvTYf\npNthr7LIBMniJNzVHALZHE23KzbJfGL9FuyGeCYZi3g3Wm/QctDpEmaPRvJ5\nxp6c9weWAcAObCajuPPUDWBApOenUaDD+/+8+ABTXEixNVg9/79uzvIE4oGC\nAtNXi6Ch4oBfUXf2uhiFURZFIHUI4KECEQbaIKCkC7biBuoXw1DMMcKcGUhQ\nvdyImjhim8TCXQfLGEXD8qa7UwSYmFrXM8+Z4M6QR2Kj5DwRoo9BDOtRIVzS\nRjOp\r\n=KGMW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"anonymous","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.29b89dbc1.0_1580336200365_0.7922854549407738","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/theme","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.45985457b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"890fe3be21c110425dd4deb22d28b9f324e3fe54","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.45985457b.0.tgz","fileCount":22,"integrity":"sha512-wVT9yAxyhb1JdkGc28rQ1Db+aifKzZwSQPEhkKGzxJxumGCKQOE7Q9dO41Cz+XudsQxM7xnwFVXbNXj/7gVkvQ==","signatures":[{"sig":"MEUCIQCr0HCrAC/+9AFQCdisVXxRKJ/QYzWvOVulHPCsJmnY3gIgYXtvCcPEt8MJdrhG2nM398SjcwEUKZiP2wv9PYJcrc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhYGCRA9TVsSAnZWagAABMkP/j//EEy+3k8Qxpjy9ktu\nH/HGL1fcbCtN0rMwnkNI7rPVZLqkmWflRtOZtWlzIcFKnwPx1+jEjS4f/Wzt\nyGzG6ulkEvS5lPCRpI3YaZ22ECetZZKMy7l8flIkDCq5iWCa37IpHI+DnDqP\norhjkEqdig3lSpxSP4htLSG/88CnWp0IRZ94vpbuTih+Bdtf/I0eD/CWx73Q\n34+/XiBWM9BYvF3wEhCUFX4Y48VrdlhO/lCJ8rmzVLwwqjFlrtGMafyd9WMW\npriOWExVT8DVHVAv9pFUtaJhbw/5ELHrg7VDo1pk8oNW89tcw9tkmJhHQkE+\n6MpUQOJeXBx5rA9ZmexYtv3qhR6bwmNQBM69ogmxp/fQLufMav9YaBCb6Iza\nP8Cz8VqT03wrTp53NZyC2NmbAjIZdLncQ7qivW9fWw1Klxba/eK7VYQcQKof\nRgirBkaqI9eQCEkXsEYJQD4xolyvvFFgHKPlDj1l6Q5wG0T+pPY6iDqeh6dW\nI+xhQAyW5VHjyqbXdxZuc71BqozZZAZVlro7SazMkG77oyARONC2qOXRmllO\nNK6+8a7Jb46xB9r2qrZEiEQWUlPM+JdFlnlGJ73SOv88o0cKMOdp/7LVYrQa\nWPjbrqh1vOkGAdoI3E26tlCUuVm7sF1DWp6lzxTKGuIEyS2oTtiydp1q625x\nGIFJ\r\n=8axY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.45985457b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.45985457b.0_1580340741465_0.15681713493048322","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/theme","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1fd0c4aca49d15bda5552c0640dd7e88918ff0d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":22,"integrity":"sha512-WaczeQGrqZtflSEBK0XfuLbdzAoGr3VedarLEM3k+B2kfMzUU3f2hswXKawNQPW1W6oJ2u8CHHwqoGYZgkP03Q==","signatures":[{"sig":"MEYCIQC5IS8jHl3y8VhVa/ZEkjoV5vGaC1pShmXJ9p8lKn7zwQIhAJiXnE+mE1XZ7xqNrzqd5b6H90Ahzzzhaf31ZzmbdMvQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxQrCRA9TVsSAnZWagAA9lEQAItaIlv/72i+LefbFZiL\naP8RgODKqcXlpNyQuIPiDY9yE3/8b0yljMXqmEc+9i3Jg3/U9UOVyiHGof3x\nZe4/ci9hXdR4mUE2tPJaR5/3QXN0AGtucLTgmzAtUKIkIs7ZMhq/rAWCzR2C\nsCjRdROF84W26ZDxQqG4sA4XLPBW9o4yqn33q7Mn5JsCY13YK0Uf3JRGhBlo\n/tvGI5ttGfYnhPoEO9R3qFFfcRmFre2VuHo5OE514ehbMYHAMAkDH/bygGbf\nuFSU0LSMgOLbLvA39ngXMTx9ABXrNcSJFZnXOLexEt+Kbhjpmka6EbVehCr2\n7OBtmE2j7tge4QHpDjtZM39XnnDXP3yWtjpC0a9x0zIpjRu38csX5w8C+YmX\nzTRQCGzqZY5D3wuNOodEhpV5aBL1EbaZbADbnqe+M4ANLcwJMqyqbap8Ksyl\nxkeub8xbULwTZZ9MxbnsYceOS2ZzhCoKsPd+slNmcy0Gu8oYScz9V2a/yrTP\nqHiumIN8kbfxIyvCtdqXFEBxas/FQ02PxgJINNAariHfHHw5zPKaLH3UN3Iz\n8GipaHafnxxNnGw7wUJkPa+UJ3nGAMTYjxQrmvVqf9D3U7z5elEEd58Vgr51\nBXvIcNQ0cjsagRZeCkHTFYAH54vdOKkQBTtfoXG06YLl1RIZF5dEhFDo4ZWa\n/hLW\r\n=jcKv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.a1a0deb3e.0_1580405803047_0.7269500363802455","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/theme","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.181486643.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3088867cad9fe6a736f932fbb3636950b96d1b32","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.181486643.0.tgz","fileCount":23,"integrity":"sha512-zY0/s54blT0NS0aIV5u3oCuu9HGnBAZb4T4BPT4gg+9lhcYkAM6cv0fIlxuMJzFY3PuEOJZEURvMk5Kvb+yKow==","signatures":[{"sig":"MEUCIQCly6wV10jtqJWl8jjptTNLr06uZbXt3lrrJJOFvGMnqQIgRjapTNIqvGkRlaQvd0dXqHvlRY3MLItc67ej8e0JXew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0LBCRA9TVsSAnZWagAA8QYP/i5CW/wWmyNjcrVbuRyL\nV61tutI9uQAMgs6TahBQRoM+1Jt7XoC6AbIcsLjFnFA6acnY8RdL8OikJ3pH\naWxO7FTCyXPvRzzDFWr+VRLorTmt3T4RFV3bw8eeWGwbKsv6TQXUgx+QUxbZ\n4hZD+167YMGFFctqSBMgU5D+S0DqvOLH15zv+A65+2yHVNGaJcjFgLPZGRfA\nC2CZDQMhzg9ODHKf1ZZtGCaDlKL+zrkjQ/FqIUgnvx+hlVDvZuPmB2UKTSEu\nObhr5oIfPDapyxJnugWNOZ2KJB6VrqBLg3Fgd1vjzIA9bKkXvp+EThD3prhd\n5XJA7e+zFDsgpwWOCdrb5uql+QVyiGAflMd4kl6Zr0ie+TVC2DQiiLBKVLxW\nrJ2uZLWpFttSioG42nY/FUWKpkc/VAK/4TYkMCWGqhlNJMFir91klstt/gvg\nKsgkC/sSHM1tpzOumdP8cIITsZvFdWph5x7s3l4Ld8LygHPDW591E5N0dPRS\nJzGAAspF4C4/QAsQmsQsLcRyPDL5gm5A6jYQeR2lIeg2+3JPcbnL+tpR+3sY\nRVixYkSFQePPzKxL7yl+pHEv3GtIhNdZwOltiMtBg/lcv/VUud4T+Ei2KgS1\nD485mw1QRwb4V9wfonchwFd2jyH7I0Mf5J9oWWNtft77iI9W6Onc8w7eGK/i\nHRe/\r\n=N3ZI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.181486643.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.181486643.0_1580417728801_0.3715684883924051","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/theme","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d19c51b91e1d7d8a9d50edc4afdfba1088e9995d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.3a85313ac.0.tgz","fileCount":23,"integrity":"sha512-kfVXds2BgmRqtrkShHnjv2QkmCkmXepLJxalGN0Z1ssM6wn/azCuUKm1LZ9pPBE5AQ9S2PPejTIEE/ZbtfFJiQ==","signatures":[{"sig":"MEUCIEZUV106ojSYT+Z0l9MOKr++Ub2oYy60V4pkk7LB4+YmAiEA1ed1hQmxZ1amf8SUepC2ax8u7Ts6Ts3zAYVAzWnEBKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFRWCRA9TVsSAnZWagAArH8QAJPZX/qoMDiSA8MXperF\nTUefPB6/pKShuNw5SXDrEODwxbOvJRkOCjcRv0/pVnv5kyOmbMJA5pzLGXps\n/CoKL9knOwJHMp1TOKBpMI9MzX1vayGtxfG0vDz4y5qj+KR6lkOuz2TELuSX\nAD9WpIg64+aoNHk/Ul38rL3R5BVoZJst0PZC2Leh3GxN8NPlF2T5AVverBuO\nMVeywaxD6RGo+nuEMzuEwJSy45CpW3WcccQQ2PoPhlmQNqcmMKSSmtXVzCoU\naKhGNrZ2QDMNbVIF4GEqyf1SKGyRF3kfJDGZbK+BImjmL4E4BIN6NU5NLuKc\n/K/7p/bl4k4e4XCNOLQTsLxqpSK93turjrTmhg4+v13iAUTH15SU40z/7wj5\nExWrwTz3QKSAxVrzvLwRcpssK8+Qj8gOeejLpv96Yzn5dYqv7PjOXDNn+Sya\neU1SyQ51sE3y5645EI48p7XUPI8Kr4vz3hU8ziIYqGQigrpeDaRPphPo7U2e\nLvDSbp/7yhhzYew1/CVHHQcAmW81Q/afRvfOkkFRNX2qG5wlls7otcAIFJ0J\nWkDO3Jfqh5uJe1Slya8YC8nUSYoggs+CcNf5L8pKGlcaaJCq1DIrDeImCjiO\nDCou+98Uz/hzADSbFt2G4p9o/vDArZnrSasphgPT6g0SAjH6XrhtqpZtpVbp\nBg1e\r\n=eKUw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.3a85313ac.0_1580487764399_0.6446647975556463","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/theme","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2de0e09105fc676f323b1964ce8f5da3abeb106c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b6c7f624b.0.tgz","fileCount":23,"integrity":"sha512-cARcIa8mfUuhkFcvzDN9FoyIToeAMrxwX6blZiuNVRsTNSMKY+sOOIHELlCufDhcLbonhLn0IO2eeQLt3tpFRQ==","signatures":[{"sig":"MEQCIEWAZ3kZEvtgw0a76mGRwlGKaiV1xVYR1ZsGXc5IGgXgAiBlHkUfJew0Cum5vLQGjLFTqUpurEqCMtdKQQNJnmN+yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF2sCRA9TVsSAnZWagAAkIAP/Rst9C7ic5V/a7A+Lw5H\na+tKP0LtYraux392XY4nn4aMOzGWI3ynZAUkqJSHU0hGM2+EaPceSPXNM/gU\n7cAQQm4iq8V55Pqm5+GkNwDkhFLhxSlawIwvoOgyoxb5D0xEOXnvgCljacEr\nvtHwxBLMxgpxVtv364xtFUoR9WwUj+TUzXKaq/ks7oWKDWTwjRXHeK1mkmFE\nMnObNetm6t0tIjuUwacTVTA0P8lUnMfkoiXWoUNaia0xcT41uv2MhV6CzaEJ\nrGShl+f6lO4KsBQnt1H11oyJLobahWnLf0In54IJ/2/3AJ6yRsBIpeZr/Obs\nTwfj23JUnV4kpg/5H9JrYjEbBlT8dg01dkXDAUmv2dQ45gKNjX1W41t0vN/k\n9lnmCj1/Oafemq1KK48jX3QQMLlsH+Q9iLO4OZgh5g4/7vBiPz3UsXMP2NxY\nR4L7ABpqfoZSjZph28gE1sHff7ZOye3Kbm6AJk0cguGJL3ah3FQrluFnwnrU\nA3Dpe5sK4xkPVWSUdQkTdcv6AHDMlbdoKSwyQptaFoIBTnupbDLAXjRlttBG\nyF7mGlfe+x6aJ4tTID50VYPBpm8vsiVnPy29wDTgSjHJTzq15SQAtStgwSeF\n5fH7V06N1Hg7RZvDLCE//iCmh2auivTg9bxVFXBPxYNS9qgiAfesyUsV/pfk\nb4pd\r\n=Dly2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b6c7f624b.0_1580490155925_0.8417152650479005","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/theme","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e383fb6f7cbc02d0a181f5476d5a56cd92185845","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b3f70ebde.0.tgz","fileCount":23,"integrity":"sha512-1s57cIz5B+aAQiI+1mfHLpyY91B3mlTw+X6lbL9Nwa4DRp8xA+BnmgUD3yGE5fKCqxsHbnoSyJmQM6+aW7UFhw==","signatures":[{"sig":"MEUCIQDp/50qjJePGjqHbEGtsuWGI4r4tpLNjGx1ILC2+SnxxAIgCT93gQVuXZuEx3n7a7Y4A3h02WBoivVP4/wCaxYrV4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNImCCRA9TVsSAnZWagAAmw0P/3GYr9YHjxeLM4dfs4cR\ndBUWAkk08xz0lAE9iU52u4OxQuPxjJHQOy9XiK8kg5c5aEif92vQVBmEf6T+\noMUrqqUmsNiiEs2x8g/ouUHVzBLMdysZQ+XXwyQovZMqr4XGGHBg3iqDfa+O\nyWV6BIRmc+x0TA6hgNgNWj0QlCsC0Fe5wGJtdwsYOg6XEVHrT3ZkKOgASsuh\nMTL558pLxy0eQTwqb9unjR7jRVvLvT2Nkn4Psxjir3h65o4ODusea9EHultz\nebqhsMQAdNo6FfmhshBo73ozXffd8gIlfnMPrV2QgqaykIIULlgUVpl7GFIP\nKEb4VytCKHQvDx0joasPKPfLKRufyhcpLstBp1Z+dxUnx4z7iFkDM/OiaSSM\nyufRvLCROqfNVKOo3HpEG764KnbxahLisCtP7onulJ91V9XoDqZGPE440GV1\nDG6jJ9ZmHMkHXsyGSXvZLct21NAhFZGSBLp6QoWIaiteScJqHAGcdezEBLD9\nBHWtu8b5SrGuXV2hEzA+YWgXowoG7i5hUwOq/qtePg9qk1k5nX+li57WcUm4\n9SHhl7gsLH3Y4+pqo8FIoZ0AfGFyU5FPeG422hW79UFhuI4v8JMRO7CjqRLU\nzmmM4iBuluYg6EISAWf614Sghms6hxzGLrfEF0W7Le1Lw3rCvEm2basWgIx8\n5sJW\r\n=pVBv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b3f70ebde.0_1580501377767_0.19993766171540628","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/theme","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08d47578b786a344282facd5d63c6d1f50cdfed7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.3e782d8f8.0.tgz","fileCount":23,"integrity":"sha512-Bu+JtXwUCbY7ZPt2+g7G6swOAHtGy/h22d3L9g5Cf0ImqPNbaouMgH3hULzAEEQ05DJYBK7e7rhT0yBbogNWeg==","signatures":[{"sig":"MEUCIQCkL/exN2voegtk8xFwJcOI7oAf4K0lmcDo9+G58J8KOgIgKPknY0uMdehlyMUgGjVnwlBzhnd05dpP6XYnItgIQkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiHzCRA9TVsSAnZWagAAe0cP/04eChchOBkFKZ077prh\nwYLYV6r16JMZRYh5jVFdZ+9RNRpzfcdWvFRdfkvCmuJgDhtd4N2CGGdeWtIv\nvy4gNZPjKPNzXvc/KuEOw5t1Y2R566Es2cGK0syoAYTE7D0+TnRE41qe6grd\n51KVGfoZIp2XT3FbeBkJMUjxozaWo1ahWfpsGGF/AIbGz9BiQ9bnldITm92/\nmMVpeHTeZL8oy6AQJj7AWp68B2DxSDSQQCgbiDMvz/qmYwm7TFgIQdkTtS0W\nNvtpYQ9FfjmhvGknu2V3VjlBfL9zcE8H6XMPel3JAPVmU3qlHYUo+kWnGLPj\n3OJznRsxz6X2EaJdXtEY1qND8mpJGOLPDY7kbJU6BTY4C2fcFjYgQw6jpjYD\n9jbaiviMIozyEKRvshemKcQrOz3kZdjKmENoBQGHe9jdwpkCSFyWOOGci8no\nMLQCjB26IxjGjokVNh5EjJmHGJyXYbbUVWfeQk1pGK1nYwGoknCROsEvx93f\nwPELVN9OdHQgaj6bO4ezqGt8zDsbypLPpujccybbBcvO2+pMtpSOIl5SKSkL\nZlYomVlicfxxiBcjztgq48mXUFLMTQqAK6Y/zk+4911N1iZrA35PrxDxTwcO\n7/w7cVX6wrg0Yxp3YnLi75WBPvFySDUXUEEI11wvmbzRfFE+30Cx4cLvDSig\n4Iva\r\n=RrSp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.3e782d8f8.0_1580605939148_0.8690778470587404","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/theme","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.535398572.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3709a8af9da450bbcbb8673e8aec3f0bebd8d160","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.535398572.0.tgz","fileCount":23,"integrity":"sha512-WqfTW3K6NaU0vSPD8tXfnJhFSvE4OgD0DwUD9nNK/+dczTxaFkkWEZX1qpZeBLouTSsGk5HhbE5uNH0ruWx0fA==","signatures":[{"sig":"MEQCIGFvh4nFboYs/ZW/krzsYcA0KVrWmy0csxmu4hjUfpr0AiBroJUSlmyZpNUvBIlFIH8ZcOGlwNWfku2BO+AANaMLng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGIsCRA9TVsSAnZWagAAhgcP/RD+ikUuylx6Pz2nOB40\nwO8sT83shv6p7OykErLncYuSa0LpdcUBYCYF4EVu1/3BeJxuj5WxSFr9Cph2\nciKIDR+SBfQu68nkBElMGj1JP0Ke3YI3AwwELxauV/nX4rHMARfrJpJrSJC3\nOaJ8uarqXfZWb2nqMQ5FDxmoqNQ0WuN01OmnmuDS1nSJjeQrDy65pBCSMaAO\nSjsr0KBFpOGFqFe40NXC91jKN+yF9nfK83re971E3uKJkCrw1rkKR0l2r7S7\ncWF8Azz02OKrC6WRgwnvQa9ZusO2kuDhWfQrTzW+6TLLb7rEJROzDB3iN+PO\nFo71fKWupk/KV/4bM9W530X2HP/kw+8KAmh8enGhBSwjTQiwh2/Bqm5Zyhtx\nq9RFzzLlcBqGwbl5hJ8bqMHN7XVm/L7nqmzYmLqLxAxmCi+wD8GVVbJsTXf6\n2DeOv31vDwrtiUOQfXfAjuAFW1MnjxgraP2A24UTb8lQNrv77iGT/5shbY9b\ncL7M/O2yUKK+1ylUucYzEPeMXQ+8H7PZZyagsZA2ZiunwCePBOZZGWYgxrIv\nINHoGxCS4OSUSGELf+xUO23/Fv2DrKeOMkVAaCFNKLKxze7Sy953FlSYWI5m\nIcdkF1VnPMla9FlPx5Y3UzHpoLUVsbiW+ldjbiO9TQSA4pQZJRyp2ENfSasr\nE63k\r\n=2xdz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.535398572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.535398572.0_1580753452153_0.3301738901415048","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/theme","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0e73764d13138876bb4f44d2aeff74835365019","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.5ff33802c.0.tgz","fileCount":23,"integrity":"sha512-F+3O0+BoBH8est3QnAUi3bNrRKxvRUfkC1wDZr+7UTFfcFzIiJM8auk1xht3q+/mus7XoJFmnWAxWoJI6RUWhQ==","signatures":[{"sig":"MEUCIGOiOpNxTLI8SfrBfPhJcsjzQbqDd03JT356/+qx82TpAiEAlraNxlDaG11FjyTFhgyTqOnr6IvLKChP7WMIsmH04Gk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObHpCRA9TVsSAnZWagAALeUP/2eE2UXk33A76E2AF0q9\n8ciWWNnXRe5HEaGyD2DBYUY8kDY362ft5MuwK8zW+Ws/KEw/iBvsLy0X4RTi\nkECef/sVHeIdoDXxxQCyUw80h1hRUcMAsgUDrX1MwAz6VLPB/KHlPWvHQPkM\n2KN9PxF4Tc2ucOY2RgCPOcDun8iuIED8PKbDtLv9yrmC3F7io8w2OVi6rlMZ\nKxrvoLAnVqlq1B4OOh0xRslF27+NSdu7lXmXPu6VMRuHdNuctpoacnN/3t1d\nriGkA9vKperQ26Xi2/PRIZ4kF1P463OMN7GUKIopEcYl2cZatm2uT3OpO38b\n+0XWxMDUbH1BwnHO83U/brF8rKYU0RzNnG/BqmWzceac/8ujjCJfj66mY5go\nh8kbmO6TQCPI7rjuJY1xV6tF/kTSP3Dn79XmMH5tn4t8qwlQklds99n2vnEQ\nqELmVebcTMnN1r9BhjrsQOYfyQXQDAu0V8VcodZsEe6eOZkr4R8F9tC5r/Pp\nNJsJXctG2M0jAWPpfHSsCtGcdtem1kasB2cslBCHHOcTyptHvqspHowx/bG1\nTYPkFLz4NVI7BZ0/7/XVWaAajxyWvkgkO59tkq16cMAmqAUwpFpSJFJTJ9X9\nPkzWcKwoFsVapg8rWXYzIWbfHBwrJ/UmF5YCNNCuiikMQt+qb8ZNuJrcXcbY\nZ5gy\r\n=RHoB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.5ff33802c.0_1580839401280_0.36474330477702765","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/theme","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd6e55e578acb972d4c5a3183369f35290c4728d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.1eb29491c.0.tgz","fileCount":23,"integrity":"sha512-Iblwe+/BJnpynEZLumdyfQp6s2RNw0wRfv818TM3iRO+CWFw8MwV8tveqNKGAsz3X/vOXnZOt4Xljdq1MuWI5w==","signatures":[{"sig":"MEUCICXjpOM5+qcxz/N4GdxdqbtijPZ45BnWAD5YFNcA9Lx8AiEAmFXH8ACrDAh4W61wtziqdWOlli6o4bE0u+jvRTuCybM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdtNCRA9TVsSAnZWagAAKcYP/0w0g95BEFfJI/SnNUty\ndDQL/4xx2EH1+WreIQYHlI47oensMazHd/VYmnY6mrt2KL6ykIWeZaJFdbrt\n7AzTFH/JEE+5XU9oif8xIR9xNTTI+H79qz29CC0g88fxzrw5HVVYZymBv03X\nXzsuGw9QaO4CXzJRq59zQH9XYeOqgmLWvhJObFZM6ECB0MJ/1+6Muh1ylW+B\nKuRz5LHwpv+rZg6Frdvpm0xCW1GdzchVrLbrnzsfPq1ehI7OyxjyfNot8Vdw\nZVH4V/ErKjPE2eVO5ZSIH/EMDdFAx0vaTM3dB8SpwvBUmzNknsG79y9q7c+t\nqyZEA6M34oF8Rk7enJsClM5VpezSG9RFM7AQqcqoRVWARPiQ3QcdMzl7ORHD\nChdYduZy4In4xqpzcziOZhWAqG6wjW8OWR2G7OpmLRwrpTTKIRznYYCMxG5Y\nnBJVXqiBflKis3CbulZzdKhFPc221JETF0rUTQ9Nn0mugLG7zdnxtrEyawfy\nC3IMvPWVeoNfAcQrLbSjmzCX6pc5H4S8N/H3pQTqJrrF6onLkfrbw/w3QYI0\nTojp73jqpNB8EZEq+q21JGZCiN75SP8Xzg+jBCuPJUtm6YGK18Cce4QYkpzC\nchAnAs26mPNFBXZw3dzsGFZild7+fFM1H1SqcpOhfuEgWYrwEJDz9tcioU7x\nqvZ6\r\n=KuIX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.1eb29491c.0_1580849996828_0.01991899189702484","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/theme","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dcc9e2ad12bcc87b0a32d0747f46e3153be616f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.4c7154b26.0.tgz","fileCount":23,"integrity":"sha512-Q7rPgPY4JEbBYF2/1HQan5SA7Ufb49QKuPGYrmaBABUYW+30cloB/RcA7RqJPsUFTA0tSHJqlwUTgF01eiF/6w==","signatures":[{"sig":"MEQCIB+mnDnAr5NmC5ADD68+lV373oULlPHOYEe0omuY4FmkAiBkw8y4cu9snCHrAorSaGfePbEhE92d+H3ZCv4t+WDEZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOucJCRA9TVsSAnZWagAAdNYQAIymuYiddFt7XRp83rx+\nxbaDgWDuSz7XjP5wofrFS6F8FGywUKPSIeFTmivmvazeHpF4zVk5/2ZxSSZb\n7sB4hPeAbuDKLnHRJ6CuWK7rXlOD3n4dp99+9WlOSzozYNSzQ0snRH8BcIcc\n7dmtEERAXj9NCdGG8FP7B7Rn0+/qOmh3rV+SxhmUYPPW6+uyc04+v8G8CY2W\nI+sTyXZjX7f+dne0u+rQCksrZcX+agjBOTalyoomuWqP7oJIKsaEsnm4G/gQ\nz/Pb1Y/XcOET/8JYuDmBzY0ENIPUyxjs4YXsyFd6o8MgJsbyb/817ZJnuxTe\nE3pvcYLRASWaKTl9o8ygcjGF6GBzgX4xr/NfoSnQkYBztdn+JkCFLCdaTzKf\ndJvQO6UO4w3A1TDWOMGmcFsI9QIM2h9Kv9owOZkzdsrywb1fZQmCRe4qEWSl\nyWN7kd++IIRlAQeD0CyL8XjIi/mX8GYf83yVXPIdx6NsVigJIpt3ZMDy+7Hr\ntv6sBPo8alf4EORYe4jEfz2tFTFujHA/HPVjlphSD5OMrtXId11jH88xBd6j\na3cgxt4wIvnfMDN2d5i8CPILbD28wbSB5ogiFZOYQTAqHhP6PLyxoesMqWah\nrAlD9Ozi6AEc/padfbkMU6w7Zaj7RuP5GYcISxYBNfu+V5p185EmUgaQ2Hx+\nuHgk\r\n=ObSW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.4c7154b26.0_1580918536587_0.5496586449760945","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/theme","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77be050818c9fee314bdcefb2d953a67daf66c33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":23,"integrity":"sha512-Ga8AbeC1f/SXv/vkB0Xrm4oG8vgirYMdJW3d5SC+lVuyJsNDDx4sMv9Uu3xAnX6CvH9uj90Tq7jyKgNFjDgmTA==","signatures":[{"sig":"MEYCIQDEpucxybsvHODOmGNdIP0Hu0ErznkP+DT18yi8ndQ8+wIhAPuyYFoNlZ3fYZ4cm6wIQdS/yVxRgBcE14kjZ9SHPdBI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1CYCRA9TVsSAnZWagAA33YP/0wG3dMDAuhkEwl8nnHq\nz+RIY1D7JQpKBrm2xj5Yo19UnbQxiLvyWbtACyf47QquZ4WDrA5jMPenlPJN\nY8fhzm4mMtGC5+moduWUPiuUQAJDm2T2kGN9ZgnoFwtoEOqgXn21JqabPKXH\nlTHjDNnM8D5EZ8qAGno4G+3ctTD4xJvBE0wrw2xGI61I57k8/WVYcjFrD8zc\neeOgwtw0q05mALBw4UQKLXlAIVi9VZI6AQkrxn0vsDwzZpYSvx6JV6pU8GoE\ne+vp9zgKCWxQcsEV3/aYE9OgFgOVIae3ivWKsldrFj9d4O3oCRTknwH/4JMF\nH6YxkFu77d/Ztyl2xy1xLJj0L4vVhzw7zQZTgjEtZmymeixDfjUlagDroEGW\nsm0kxRNLLzYTTOlyrSEnSeKPK1j6GgFAmT/FdYTOOdUlay08qSg4qcKnxo3T\ncQfakO9WLhyB/7yQ1w1mG8oD7ML0y5aTkJ9qih+dBaKwiJpfnn/nW7HPXOQ7\nnNYuHq7xgnv8kp9hg/hHMRN2lTEwvo/jGjXCWPgtVYdI8NaTy1E4P+LYbQQ1\nJZalwh0MktqkoQljagYClxu8dGY8i31zA6xCiEfgQef1gu/wAQoHj+Df6Tlz\nHtNdaktrrryw6CJzi0bN7yfSiuWDiNbUXqDUN3n7n4WvcBp545XSGcI1hkem\nsjyk\r\n=sGeS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.ab5f49a2c.0_1580945560073_0.7873761615015229","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/theme","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f09d643a3d0b1f27c4411e0aeb725f05b05f9d09","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.c541ebe15.0.tgz","fileCount":23,"integrity":"sha512-5lEji5/UEiZ/Q1GnsCZ+MjBlIOoiMP6kVu0jvCr01pabIeQ7sn7ruDfWIMRKslwZ4z9FNkVPgviuXZWTLvzplA==","signatures":[{"sig":"MEUCIHTsmfGaVyx7r1TH7skbFwhwM69GdjQz2LpmsGf3ItyUAiEAzXAV+229hnoZ9hi0I2NIYH09DTASdTSKhLqAR0xwhug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNDCRA9TVsSAnZWagAAVXsP/2YUfqNbBwB5QSlQgRx+\nybvkz0TT3r7SpW4L1J2UpOsjZ0nI5Qd5XlnWnjGB5MIYV//c8bBigNPELvkg\nXuysZ1SwUi5JJpykHxaHeuUZ3g7ZDS8bdnupuladA7UMe2Wl1q/XJzyxjHvP\nYiD7bub/C0pMWWqUThyGhuu+t3uMbCUdYF6So1zQc3smsgvgnOACj7iS4r+j\nx+KSWrtmylU46Z/1atLCBPDxnOPG3/o0zxxu59v+aDv3YfIqi+IZUwzmgBsW\nsFci9O/ewG2gtzprIu3nw23iS24qMMacEkNzlUHPJF7IljIp7u/3xyleJTTJ\n9JGxs6du1y+MvDuknrsvVRdCO6pO+jYJgP2W9mk/W5UDbCU4l8PSbouAPxXV\n1Z51NT21DCEm3qbMNx8axN2gzmn4UtesYkdLl8l0QoQmvaVfty4KM9robiz0\nqxPhfpazoYnnMfZPW1LhSbtOZCw6//l0GQ15ry5DJuwP/BFqYusi+k8FMjvj\nyYidQqShB0gD/AteepVffM7usE+Nfi6bIX7PEVKG1GDdEnBBL+rGARbwlmO4\nC7SfkgHXOTgfHk6RyZp17+32tK+cejYtLuc1zQR6HYlYVqRc56PE1uAVgomt\n2i5LXlM/9OPmGvvLoahjsfXXkDy359QfUKsxhdHxQl3H/K8BaE62cxF6RvIp\nMPEb\r\n=Klfz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```\n.foo {\n  @include mdc-theme-prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug mdc-theme-luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug mdc-theme-contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug mdc-theme-tone(#9c27b0); // dark\n@debug mdc-theme-tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug mdc-theme-contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `mdc-theme-prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-prop-value(primary); // #3f51b5\n@debug mdc-theme-prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `mdc-theme-prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug mdc-theme-accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug mdc-theme-text-emphasis(high); // .87\n@debug mdc-theme-text-emphasis(disabled); // .38\n```\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.c541ebe15.0_1581028162810_0.09136959732782768","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/theme","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddd1b472e69bfc1ae8bc2bebf7ff915683e91475","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.98f7faa05.0.tgz","fileCount":23,"integrity":"sha512-cqwIgKm7xQReSVPiaPZqso8f2RQogtsgXGy/SIrofHGfuBNmIki7G97/ZXVqNyUhNew37SjxDQLZI4DyHWabqQ==","signatures":[{"sig":"MEUCIDb6cAW6hm+kZjm5lf3OcbAzZ+5B147eaRXUV2g5alJ4AiEA+/uf/hr9OqqYMo5RFwp8Svutfg22LdhyTJv44M0gdaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbiSCRA9TVsSAnZWagAAtuwP/i2/C1MV4XUsIF272SN1\nsckmyXANFfXLC1MjoBOC34Kverm59edJy4xSpEGQsaAjJXR1UGKO1jJYhuVP\ndoDRV2AXtxB+7D6rpfJFHQGd7AkQQ0wz1haUgDZkvyA+sj0ljhCDRvu0kVJ/\nHD5LRGmYmNhMi1f1rae7SPT9JpXcSkJt82gdWp+5V7bo5at7zIs7yruxZPkx\nyQbIdL4rTltU+83Yr2M/bd6XH5VNNbxnHmTWGegHwTeILgAxe7rtjIa0i0nw\nF/YSApcoV0NWx8AnbHzItLPtlMSw6KcjPvt9pKg8uMpuCZxCpUGT2g25STwz\nz7RFPQw1JKdtDenkuXbX8Krv5q+7CKkW6DxIr6yzNQ/19PJo3toRnkJiFbAc\n/GjVUJ7/7LpL8MU36PHYcHtGkpHN7AMXnO75feFnLi8e0cdnHqs074srana4\nZ/MCUQ5CZBosyeZEmc1MDX/Bq0rMnHLvqYLYvY0U0MfdchxljZuSsUJoC7mf\nhjMhl94gKeOBhDatig+ScGg0QCkG7iVU7hi2qxI6NLMwK0ukDjngar6AvVPv\noI0Z+Jp+amuovC9QF7UQgzHfHstDw2a6MUQr8vMEv76B+NVPE1Snn3dA38P8\nM1OHp9aT8eg3fujqthWlkc16TCn6jK80TjAX7H4U+wzeacD2JvYmD/7W1ogz\nLQE+\r\n=npWh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.98f7faa05.0_1581103249664_0.39643713778954415","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/theme","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04216a76a932fc17b026b48c1a92f6b647c30a7a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b4727e43a.0.tgz","fileCount":23,"integrity":"sha512-ezvupsDHvmZR26Red26lFsbu5vkkzW+K1Kjwlg1J58ycIuq5Vcb9QDPSDysHAPUp4yRbQGlPIo46sV0H/h/NFQ==","signatures":[{"sig":"MEUCIQCa+ZVLa2iDU6Q8wso1kVMwKDmmxxlO4OOcjbID3FsIwAIgR31TE8WClWMh4BwXG18V3z3zay4JNegkRTDl+RyYc38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcCTCRA9TVsSAnZWagAAUKMP/i72Ru/Jc74xIdFvC/yS\n8lPFCxEhi/+W6xyYh7x7s5G6hZNxLCm6ZBDCRHqO+ZtwBdbjAx8xkUyrlyKM\n2Pw/wMSPN9U7G4J6JfeT829Inc8MhQknd7G6LATgRwFOVY1D6kogFbqJl7Je\n7BwfvLCcN1iOlnAICL8bJ0ybWuEcwNRfZnlb5eu4HZBqMjnzZO34cf7swvua\nCstTc+mbkeOYBPZXaeNNIEbneiiszpjNKIvEuODItkA45rEc3Mqa5zM/NZWf\nvWOadnPoBKCQ3R8vr1LxO8rI5wnQOalbODAeF0Cq8M0DoiPi3//LLF3HNRMa\nVth11K20tYegde83Wn5HbVtEMUY8qWiReIrVHOkbu2C/HBwOp23OhFz0FulU\nE55u2TPCMu1beAxv1CXbWcEQcjfoNEY7Bxk5WUFLCVrR3X9KvunsG/bS5rrL\nd5pxLphoPmGIdgwokr/ivJTmDoatFQRBzItfuTzYRTASKl6oyOfA1vPNiQAi\nP8omMjF+sgsv4Hj7wZiwWYHbaMp2H9r5tnh+S2EZs/Wc+uxJVO9nOp6wFGp/\ni/c/5nMt03NWw0c7/ZLr88JWwh8JyIFx0R/VUz5eB/O6xiB5Y6VhI7wo32+y\n9v8Bghf42D8fBYBeIGqk8WCzPgcyWSP7rD34RI5qIOwX+SXnTp1kvUOeOHUb\nnRrh\r\n=hpfe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b4727e43a.0_1581105299464_0.6123642830806497","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/theme","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d74183f52e0377639da9a12465ff06ac40c4a625","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.91d9d5a65.0.tgz","fileCount":23,"integrity":"sha512-A4ALXtz2OIGyWCUWcYZcGDz4nLAnC4b/ACmzff+OkHniBO10tSdfvj5a+vB/FM5oiuhFJ09EPmiQ2HGlbWw/Nw==","signatures":[{"sig":"MEUCICvLkYxvyrBtbT9Jjd+vAP06X33v9AFlFMV90oWXe88XAiEA+hdwAJC8CSAF7gfnRVqxhSHwFKNAp0p0NBB/9Eq5+rU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePeuqCRA9TVsSAnZWagAATtcQAKC+iscipTVHLcXu+Foq\nv+ufvIzJQmT4LfpsmikowmestnFNTAn8rnNHKYCEpCQt9KfIVN8z467g6t0X\n0ktMpY6mJmoR3owuQCU9a/I2vOQFbHT3KK30hWduZ+shfwq9xNpKvdkGhhyo\nGNBK1dHsudEL2AgcNVNlK7wgv9RaxrpWO328R+TLFfGCN1lwPq0/ZqJOZLKN\nXdRzl0Z1X1BCgSQxzZo6iCgK+dG5/Pj52vPoLzEAm2UuJSgaBcwnw8exqeOD\nw/8JljdzUCYzkpm1vNFFIoKOpH5g2K3VtInOEwH135TbGEEbQNjAgPO/Ixxb\nF0iesnaSYdNy2dM+FtyArXCkh5vyQfJRLufCbl1nSmbEr+tvDERheN5d/zWg\nTBOarpzJfQBs/PYDcSeR40EXCB8ObcBZybzL/4mhE8p/55rlN0TyWejM9a0b\njwW+eAmJiYSltKp1iGQ3Rz+iU/buRYAhufF6eD5J9zB0aNrV2MBlphtqpxuI\nQWhGOUQMOnf/im1QyQqW7sLM1VryCaSx5HJnUVD8FxjkAgr94b4T+qrBg/qh\nCCrrLdxH4+9ZolL+9lJ+0Pk3ZAb/72JJsIDhVFYIFk2rXjUJO7TGlV5jhsLH\nTyBA6AEUugoEZBAP40zcFPIhSXmBFcoDdGQOFp7GDd5JDaPPXqNRcm2QbFyy\noN4S\r\n=hHUh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.91d9d5a65.0_1581116330294_0.004848631004464865","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/theme","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"432ffec68de5767863e60ab8873a09ad01a0ff19","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.d5c006ed1.0.tgz","fileCount":23,"integrity":"sha512-Bh0yFMZlqNLuYTxUEkgYk04MR09lmvdaNFIvVbNjjziuFx2fpixufk7RFhrLsCs2cp4M2Q5OWHcnAMCaMnJVDA==","signatures":[{"sig":"MEUCIE4QSqYac6fsgtgBJKHKIWO+TjhzUAY/xfo54IJavuyhAiEApTJKSmfMsvrAjaDDOiBX/xRh07swxDbPzxIWLVtLu4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYlFCRA9TVsSAnZWagAAA10QAKMJlEAxbyOENmrp1Dvr\npBnCDc1o3CjOVvLyBN7uqAWGerISjrudbY/m0cEwH91MtbMUnUtYPP4FPQL+\nj2QIpopyhq7XTWvlosWkTIWagDdsIsr77g1MUShYEbUHMPvC4CWiZJcdPEsT\nxJyovh/ivTyrWNJ/+zerIuAgAFIoWcub/DBMRhoCTRJ2wQLDgeOA3etPcNyI\nPaU9VL3rNTcEQZOi/Jk46YrbHOieo61U4sxS/1blyPFAq3WFnRF3q3dwhejI\nFU6cDSfDfWHLOm59x6P8YAkB3GwL/ET77LuuZlgLCN/yoFc0DMEacmRSM3r+\nck3E1NRVDsX7kwY+GYm/Q+8bXZavdRkvdFbHcKg32w56ZhULTmcWWTEzknQD\nfXZIUg74BDvG506x5FsnpKP97ZCxqk3h1ODIdlcjfSdddVW8/BCpU2B4Jkij\nJVH55fogQoHRWGlBcUawdeFTp62bVgWCdYU7RcCXbLXzyK53Msq3KAkOw2Yz\n5RA6ckvDomxM6GD/g/VNhen8Tn+wTIM40GJWGmRaaxq30pbACBlCe+hpWBF0\nb2uFFeoeY58a5EmfBI0yOI8ZcKMk8RfSb+N080Mmy7HONxMLK6XbH7Y3YvBg\nMQZcAazHD6brkImf+UFFAwue8TEwp1Io5AD0q4HKyQygg/cRc0g+czLhF6/G\n01m3\r\n=+mlC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.d5c006ed1.0_1581353285329_0.3131943943467592","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/theme","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.559f1a570.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b1f4aba977e9880d927abce08df558b7398fae9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.559f1a570.0.tgz","fileCount":23,"integrity":"sha512-9+FnkkZKCC5GkgtvIDKIpaUtkuZDH1L3GntDdbH4IihGFcKkq9xV+jPxY+1JWVurjCdE+ksV9U4RRruN/M6whg==","signatures":[{"sig":"MEUCIQDWvfboBVjvh1oCcRAvcbcJXVGoK/cv+eYmGcYQwOEGEQIgEiGEfCTnXFcdnJvaDPi9PzOOb7TnwqtRWpJT2stthHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZG/CRA9TVsSAnZWagAAp2sP/iqWazDLWs6IaeoPAc9e\ntP+v8KQHQpoeOckgHbOJUKKijrYYYBfR8MdMj+Wh22Pn2N0yysGP8IFzX1+d\nb1PuArP5ETKV7naEyYHxhRoAaYqATwSoEUk8QcbrDf3vmwZ7/cKisDN1zr6z\nCbRTPSyrPvdNlxmgKMz9DLizODZ6yMM6+S+W3ydepxuN8+/HN9eWII/XaG6Y\nzkY9vBHQtdbFcKCETsB51+lUCv39SiGAPLJPzJLQdaPH4Fyc3RBsQnpSQ2Eq\nJ8w8jlF4EZbatNh5tw9XgQO03kAZ3eMEoo6eKzqGLOEGi+1mmblVnItEVW63\n+Pp5o3XCAMxNu3VBXK1cZ7qpUi8Vf3DxqzvKD8gtHRnW9oPdyD6jJ64iTCzY\n2vum2zW2jteKmSa2khgtL/4PYxQBdhHhCpP3G0I08s5ORWakIsrMM4ChDKZ+\n2YTQtD1oNMQa0+qmRxLzu8fSN6YiMJoG6ZQb6UZpT/T+pQLv2e/saoCZlBQ3\nrBjkQRvdQAxYLukGboQS5fpKTZGkbJ3Lf8xVbPkIqmFoUnTVVT/GnYpX4WFS\n9w0OB8WINmr9W1Km+5sIEGpUdX0QpMGDU+Gy/i9D8EabV9+tLJ8T4WgITPrz\nIXzKU29DIGhsxutZSn8IUk/PG4VXK2j+QDpDu5FFnfefSuB+WjzEf8NiFqcz\nCJIN\r\n=sJ/k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.559f1a570.0_1581355454559_0.323134360813613","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/theme","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"196444e8ea4a73c0a53eab0eb2b7ce56c5de154b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.ad3bbf782.0.tgz","fileCount":23,"integrity":"sha512-2Z7NdfWAdCPwui0Mq3K3Kv4894VvEKWCA0TxdKKNkmuaQrxCgeR5fQ2pjuPsqPzZM6cWljYsmX79pI1SZB7nGg==","signatures":[{"sig":"MEUCIQD9k8FqpViTcbW0LZxhGgBCfB11WyNjcGpToJxHh3B2qAIgHU82Nmo83w1qVa/Uw8mTVEcAajRyeD1ZgOKiG4Z5Esc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQarACRA9TVsSAnZWagAAQLkP+QEQhSOLiH2HfwbYAt4B\nL07sJRRLZr+6TZ6Nhx8UuHw0HeLmL8q+56m8rHHhEbnhg8/Iew2vNwajxlIK\ndApKl5c3C4UDsKrangcxoa8xvzuy1cSctA1OtKp9wYL5gnx0S/KS0nVto5Gn\nYGkKXBCsYnNORmqZNuxWQwL2YgLOOZzURq1pkTzmbxIrCNxgRh7/wpSEh6cM\nMsYV1pb158L7f0hPUHj5BFSUAyd7Xzk5B173rP2XIs5ndWkdy82AWroC2VbH\ndjeIhdZ3LlCXcj7XANAnTNIwYQA7+o89PZbgkLp7zx6Q1iV2FW2UJ+XFtLVN\noacGdkmaF8vS82b+xPP77NQqlQooP22ZzTy2yerBO86zqk/p5Lu3E8FLEY/K\nKUjQ1+sDnnZFGSGXuqRVVnxcDXOGDpXfj17pF+d4wNN0ExBtONq5JsNCaPRN\nrfPn7I7i2eia8nn9613hdGb7MmZNekMbauLZt9kM23XHNAWlv2VkygV7jwA6\nwafP1un3rfRFBLAKAP6nu0CVzza6fj4HVKAgsA4doQkujI1jBQD/aJ93ubaY\n/mUpPR195nuTvGIXZolTyVTnB6xkml7cFIbWv+RXvtG9AXUUoMLJ08wz1pCl\nBA9GbWa+d9ZtluYSOgR/lWbEsMUmzlLWIrkxh5mQILHkH9LdrX0+wF8VsDIC\nHcN/\r\n=0/qB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.ad3bbf782.0_1581361855629_0.7172414552317394","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/theme","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"238a9c82af91bcfd08943a10e68cd850fe9baf20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.570d8e49c.0.tgz","fileCount":23,"integrity":"sha512-puo9qoZovRRbIBn2/Vd+oKsi/1jvq4hPT8XZ1FQEIMnT9CwnZ2zSwveX545X8LfNhlKZSgduTrDKhK4D+qY4pw==","signatures":[{"sig":"MEUCIQDsy0L4K9Z0FzMN4+Wed6qBUDOt2FrKXj5BMWkZ69pdsgIgW4I76Z1dfSI2Nq5+vuFUCXr71ZkVMe80ImKPRl25pKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcBRCRA9TVsSAnZWagAAMn8P/1SfL7GUTrYhzpx88FGo\nzDziNsD7ao5GvnwPPLrtWiSOThH8G2UxI8zJ8OeNFJ9pq7pzOOt5luGvl76u\nIGTXi2EGBuxBaPNBSp1xezWBqkCppxf/nEH7HsCMRJ6y7iRgVRvW1XVOG+gP\n93ywz5dm0D+PWGziUnhcfS7zSlp5yx48czgasEnvPUmLMDumqWK+H8W30sZU\n4Pla2SY7C6PkVmbPz4Ldy9RH9Sa9XYFzcKEQN6d5X3Qhg79KGJWlY82HZ2uy\n+TOmKLBRr996mESp7Rdeh9ol6kOcBnR3IMezLbgpplBdVDmMgiDK8HCgk++i\nuoJlqxhdhfTEspQlK0pCfNJVpi2wjF6THryA1xr3684zvl5lqsRA0fB+bEfc\n5vRaufd05h/WbSsS4xO1ivuHBoG/7L5iJKqJUC4HMh8Ismhir56tI6Xff2Fx\nBl7x6dOA06reUfNoXm4Ml5LYzMl0cK90RQXUyV1zPebOG/PcWu4Jf85oFDsk\nhNrNtU+7FoeQHZKFCQiNrbu7qEjXYgY9pu3cShCEwyE6W9qS6KOkPIdB+3aD\nUyWzbCWnGGLGjKvMUAiDZ1If2JpG9aasyCdtZPr49KFlupgGLthNwRZIXeeo\nAVS0Fo2ahsJVWn33LehZ86WottTvBMCAOgeaAd0Dmx7gTBG7wSjWa8ytRfdZ\n1g7Q\r\n=yi+Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.570d8e49c.0_1581367376619_0.6068750248476698","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/theme","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f27ebc3a24e3e52fbd101b3a4ac5e1d17a0c48a6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.48b06b89a.0.tgz","fileCount":23,"integrity":"sha512-FBDD03iW6Mk0b76B95WOlFZZRjAwW9hc9QWlclxC8Q0JLsAmCE7tsfj2EQJNYcGp5Dy92/2o3oJbz86YeQS+3w==","signatures":[{"sig":"MEUCIQCvnZ0ns1omi7GFrGxqCDYoA2b6CVItxKQE00FqF3JMrAIgG6+7ISn78UlVLPhXPoluLeiGVZV+Oo/bRZp65Ft7cxU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvWgCRA9TVsSAnZWagAAbnMP/3UbMVluiTGk2qguLLo4\nbk1ced4KQ4wRDI9QOPTR8ikLQHgMltN2fmGP6Rp5wOkLMS4VBAHklWykunNu\nCmMkkuctz8sq2KGD1xs0f/U8ijWfHyqLu/bQTC1XJllsGL/NBtZa/bnSEYEl\n7vG4mltDnYgX2jywc2WEfBFg2FqZXbWWLOaBlW1RX0UvQGksSlpgjvNCB6is\n0DiElgkkHDutkOoRQb0XtjRVFSIbjb7Ue/WkgP8iNyzrnayPJWakwACIRL//\nhYj6lGFPzz6w8iLh30OryK2ihpr5EQl5lvW7uYKW83a0WLD3vJ3Dgp8SbOJ8\nUelwDhnywRY33m67IyxRFkxrAT+5zbIBdFqJn29y9+0n64S+VyPeOfe1zYvu\nVQMusHqNvSiC+PgW+p+TJWEVbwSPvllaoeTv3v1n8ERp1ry8LO/T2AzVqsN0\n1R19ng+/svy//6ub2Yqd/XxVD4iIQrbS2N3+CBFMTVkQrOXlgKsZ/m535GQI\nVYNJH2IYT6TTbRBQRIByGyedvKIEdemhVj6APoIRvJvK7I6mDfSdPvZSYjFv\na9BxonXw4Hjv+70w6Pan0w5Qz8UoeWyko+TxXhfvIfZHuhdGNxjKe2O5H+ka\nEGIchKxYDiQko97A+SgUW/uv080Prd987z7mdHakvGvTaT9kKSNc9fPejhbK\n0S3s\r\n=UcaN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.48b06b89a.0_1581446559671_0.04599548631424932","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/theme","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.612443dfb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f0f7ac7430c8fea7c625e0196e910e718e26387","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.612443dfb.0.tgz","fileCount":23,"integrity":"sha512-8UnN5OqTO5PGvgkV/we2t2ObFRKh2ZV9Mqy3z4hRiUzsiypr84fqQt5qQsGl3bw92lAd3p2EoS/sHtzIRA/YSw==","signatures":[{"sig":"MEYCIQCzzpqVN+ICwQITPJ0uG8BZCPAFUDI1xqKll6gBHAwA2QIhAJnL2D8nUtynqFpnR40IEciNMF9gdeVzqy0rNf6IJMKF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwUQCRA9TVsSAnZWagAAiDQP/j5yoW/F3on9FDV9iwMW\nA74iUVj7t6HTZoa9OMMP3ezT/1y+AaLHz8DVNEeRYen+PVEe87/I8fTHsakB\nH7Lpf7RrW5ttCoiiw0ea88xgfFRThL02GMVhhfFemf/q+e+2EilJF3vRoztJ\n0uJ6/4T7QZdvjLtwmeHF4CoQ+WRxapOWFK+0yo7b3Sg+MP/v8bz4suG//nct\n3G05q6CMbKDN0GHYnmd3ISbOmJ3QDVvR94pVNoPHS/V5qmmnTP/S45pFRFzt\n+odVzI8KZMfQa6/RlwsK9BwqVfunYwkFVW6iHBoCh3q/REjiXfCc6kMdc9Ln\nuz2voo91l4sa90/WEEyN4vK+32o/sNnFVdQLOW2j3BFzvNDjl8takPQ7ElFk\n5TGPgfJVYzKy2Ww2rcSD+oidFDQUrRrB5xZGG3Svuo93/kRquLGDOuRgS1wA\n57EtLpdlFUdmJwgwT61FbSL4vDCsvu1u1atAWm8bbxIZgiozAAxSQbuGBOU7\nXNFfcp3n8wIbNHbdX7D6tSImqQCHCcHuW1eQU8ysC6lV1mA2RKEYNyOfsNHm\n7QF7MIMMl4Hxku13FFxPVWUYq5iqITYv0rzJ+9AQaJMG1vvPGFs6BqpBYj1f\nGO14q/k2UvArEDWSUlyLHzsKsLkwwuSf+BbCOY+qk8PLMMhagcKXfno8OJHC\nbg7B\r\n=Um+E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.612443dfb.0_1581450511759_0.7570217793598328","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/theme","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfdad31c9b9bdabb5fa6240d401a9bff144ff55d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":23,"integrity":"sha512-5MhoCscdLYXjKhoxgcUmPrcAcwJJJhtEcjUBlshcuK8UKOsZyTrQSCPFhKdJv/nzyFGEDTAzargM70fH1yPwTA==","signatures":[{"sig":"MEUCIB7Y9dTtINi1lEdo/5zEsKW06jzMEV5EKJyvVoYK8vleAiEA/im3Xpp+NGE4QNQjt1VYJiqd8w7Cw2qqe71dFXO6ClQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7xyCRA9TVsSAnZWagAAEQgP/i8gB44opU8MgclUV+08\nGE1WXJhqLGzdk608y95wEHcrWunMsWmcDMbGzpadzNLbew5Sx6fxxvbTVDfk\ny1cJl5MSzZF9VTOofqZOVb7IRH49Uv6T7k3bt2qdFwonGj5qLOC/qI6EWKVA\nvlcLcW3Tv/mT44jHe4ET2S9SX4+LRhxoAs3QvJ+xcwCpRJUHMrZ4qQPFKBqq\nZq92cuFxaGxlJMpcOAi901XZPWRvUKmRXXFHKGWbk02Tgu9yDLaV+FmxFTIH\nVujTR5147zPhdD5xnmKVyox8pGYpFNCcrFKhBKtyYTd/VRPktW0hmVsgMbjt\nJcLRtGDMaba6jD09SQC22pWn+7B+mKBuwOg2Ud1U3WFmGiGTv1wtue88lWYc\nAwHJC3dYv9umP6vq/i6RfhmYb8lQnm5Z+M0xT/3CSkSXgh6xiKYloMjTwwmw\nlRz9goabXH1cyFNR6Ek6sRqy+0GHBDu/dG+LaOo73P1QTsxjG4GYfhp4Q7uN\n7GoN1SHAMiN8NV4Q/XG9/IRqqTEz0OhBBGLZCYUouYKcRxhpXAOLxRTFVPNh\nzwhLXXoLgOktzFOkbwaSO1UA+0OI18sZBrsUepF1TNkePA5xlPXFyvZZQLRj\n1D6He+AsqR5uIOctxp7j7RaGjdVk2bdXrSJj8HMP0yMNnUumCDIL3Skl93Cj\nWGvx\r\n=JEKQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.8c11ea2a3.0_1581497458143_0.0763397812057256","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/theme","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3631ee570454178a085e32b341d29f475ec64bed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.b2f3d311e.0.tgz","fileCount":23,"integrity":"sha512-GL6WGHXfzPNvka1G/uxRtAUpMQ+PZ4mwfIEYtZ10HDTyXotuDz9Sm2L5VL//bQOtVokUxP7bYTWKlSF4iJjDMg==","signatures":[{"sig":"MEYCIQDM8VTDgL5V/Dwn2p1coSzUx38z3nrZKCPDxbYcAtbZZwIhAMgebR+ORviL4tbgEC9utjmLbv09/s0YmOvgbisJbmxw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcLvCRA9TVsSAnZWagAAShAP/0VwqJjw8NbKdw6wrp8V\nsNy4ToIP4Rgm7MOoMEFz2VTVrBKUOYQLy1aHpSyuFzUcFExrAlkpeBX/OQMk\nKEcgzOea8kU8x2t/l/mPjnBgi/NdQxrX7WkBehm2wtfoyrNyaja0alqfakf6\nEtjPunvz48D4caFSTAoBNIlSVFtpvSWPAQ3qh6hgG6mwybPBDNm4Lf+LTDA4\noxugBvkSYARgrfA5hW8q7JRBPcOqnNZ5v7AoyPNKK+HkXCfY9MifveU7GPhr\n5wOc9G75oAVObrwZr8erZ9rB5PirEMZSDv74PhQ3NLJnkECyxuaI8J0VYJWf\nsFiEo8eOxM147sElh9PWfYmlpQQFMhvR2F6S4lsnSv+rcML9bRF9lmYUjXQV\n/xvdpFCFOykkhmVFDobZFZDRSQUpmIYDJ6LTBhi+h0lj8FHl8ThVYgyLNM0q\n5m7qBShkwzl6+jhu7zE6/DRkvLAJ/8fEEdRt04HQ/TL+MaPQiWrYpzvIQM1G\njsT23VgbXm4jSVAX2+aCM0SrpEnQ58Pkwua1/NmIWGwroyVtcz/8iEJgjKse\nJSqbzao7RZxUsXuyEtiyXKlC0u80wRyuAtxp3NKbvToQAVZrDuF5Ec7ks6Yg\nXGggUrvsoAjhV5Z5JZJg4oZL+opxpcH6ofgVtlwOiniYgfzzkpQwZ77F8Wdb\nFAXY\r\n=W6oP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.b2f3d311e.0_1581630191430_0.1639253563180305","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/theme","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e2656349b9bc210c7c521a25cc4085d30de85c7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0-canary.4f488d0ee.0.tgz","fileCount":23,"integrity":"sha512-JrloRWgAHptxQ1TamjieKXXp14czaoy11wbTMde6rY+jsRmD4SmyZpZwG+ol0pKXiaQFkQkMpIskuPwC1HnpjA==","signatures":[{"sig":"MEYCIQCGV8t3gamyrtl/bK0ucRajoyJXNwRYCfYBaPgeavRRNQIhAPo/dGI2xGsi/IvE3aMZ0x3SsBGVw+6LTZI2AS9wU2ff","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZJCRA9TVsSAnZWagAAEq0P/AuSlKFO8Pa0gVLJFN6h\npN0JnMEcmjaINu7I53UlvPp9Q7CrLRqFmpw22dg3uOg+41JthBmjZ1SNKfVA\nxjpqnKplNVd9sHwODzvejN899VbcuQZv0rG7IxgUqwEmXBsqeaspmUu4u0cp\n5uP4N5LQtBjnWAAo211we5ZMz8n++I55WwPWYmDtNFxptlXNjxdUyqqBzvYQ\n05Dnr/7cN8cVJsT7U4L6/44rqL63wfju705WG2Loqa/TMCdHErR7onr92ENN\ns3PZhmcQ+Y62Ukg0UvpbKIZYUDFmxiXRFpavS38SMtM9XzYYZhpYkFKYlJSU\nfHCJA8ZGxhWFVWs0mUP/8JkS13TbiT3mGIx3Z4Jr297tHqTYv2wUBqlCPQw4\nns7s7cHD8/hvH9gKQAk7xt+U9Y7bpuaTi7N+7KOSsD+n2PDjn5xzoJAUqq8p\nyTfMyAGzrsNkQIJaR/rq5XRJEBX2cjoI2trdZJGl1gSwmHfs85x7tEiHb2vk\nvvvbhKBGZBnHuMy+8jCUPKKwTMQANWENYH4Rg277jtzSjbUmAvo/CnkR4ccn\nyQQMhS7mW6SiF25t2A0lzmWlRk+b4I9VhFH8c8riOZWZ9qIBEUIeQi3wZ/QA\namO1FHcSjFulRS30gY6CUJ2ni7GHqIUvsAgVeOGoaWVkxXG8lmNz8BFSR9/9\nkUqB\r\n=lV3q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0-canary.4f488d0ee.0_1581635143016_0.9211508637476058","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/theme","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"812a3c89aee1dd8e05521dd2df72a034aba54211","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.fe79de07d.0.tgz","fileCount":23,"integrity":"sha512-eiDKTp0hXg02a+83Absqbm8qxEX8pm6JaAu7oz1ocRLs4UaEh0JaBYkc0ACAlHF+32tzltB23Wpw4gCRvo77oQ==","signatures":[{"sig":"MEUCIQDeE4a7ZK8GCeOuQ8OdOkAV0gsudt5R8SD8A5zJgGYLowIgNIyuNDNsrWCgVa3NTX2pA0fq6FWfYi+puwY/1SkFyXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":89108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdpUCRA9TVsSAnZWagAAHiUP/A1f8S9hoT4EFpBy71I2\n3+0zZGMDhXl5H01Vov1bd/Qh6MddyNxGfAJ+fF3RuSE9YMRylVkk7gXZxZmA\nadwbAIzTYr5kQ73vRGktaz9aKttx+dRsrFlgRJ6Hpv8fgcp4XtsckmOYmhS7\nn4lN/+0CWAHc+0P1cweWFY6C6OJttgDvmMZgCKcwwTc8g71WzO/OgYW4U+kK\nddkpFCIzHQrO3dh2RRJJu++bBkUVlV7d23jzCVIfVgum+cYUrwYhJ5+nsH9M\nDNDcFaHzvWxTP57iTuq5JFRn3Vg21UhWg0eLM2Ar14zjNLu2llda4VNXNGzm\n9tJlaYVQiGivXnQ6OhqDmjuwX5Ktuolr3yCuXTF7W0pyLZrlIXRNT3joXox5\nuscUPyW0Nr1PgoqfTzxL8WMdMhXbWwKjRdjcj1I3y+AknRHQA5MBMY7HwgfO\nUFDhAlumGeHXePed3XIbk2gllhRIrVfv5FFvgGofGqI/UemAlc2Neug1d5tz\nbFO43W1Wx+IjLA1UrdPwkgRcolOJvTDcGsvfjudVHT9QM3xM0phHxmmVOSsq\nRyt3VgNAwGu3crxNI4iADC69klXhRz2vuCrkbJDyH5TdQAQDGsOb7p9zIAWc\nHQbMGBW5fCuRpCYmfU4+pOLZsrxL8zIPromxYHzm5+W2+f3wBU5izpFYGhV5\nO9xY\r\n=UK3R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.fe79de07d.0_1581636180054_0.9261289092888365","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/theme","version":"5.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff8498d883b083f91f53d0d340e31c78ea34cc8d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.0.0.tgz","fileCount":22,"integrity":"sha512-YBHxiAvT2ACIQ2VM6zeZ4mhq+lgYFAxB0CUX54o7/mqO4E/uZzyzPsyU85KtCeNuEJCP+a0cxN/aqIgLF9/BRA==","signatures":[{"sig":"MEQCIGewVhNSlmJ4nxqIZCcV6mb8rEv5zkz2LJVE0ZBFl9Q7AiB3cXtFkHCPUQMPt46lPWnZDulvWj+chvxMhG4f+OsV2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReT5CRA9TVsSAnZWagAAamoP/0apT8vxxG/QbYEAUOB2\ncKHVNGfm6dCaW0MI54RDlYGqR4qSXRmvJy9mD8Z9xP+SSO2yCy13fdI9yltO\nYQwfGFWv2je8zakPu9hzhAXg6zUuP9JnutOeHAtiUgPT92R6iQrWPZuaFRNs\nfaOsXcN0K7FnjAjow6Pqu5cq71oddHcYIdRjec92P0eaG9tiebzzDzouAuhH\nrDUSpImmXossBpLOwKeQVB5wu940Ed6ZI00EaNnLmq7dfDeWuWtyBOm9b29t\nijvqCLnBx7mvSJ+eVgW9dyZsYYkDjdIuqKaSgdaXh4ll0zjEum3epuHVvd1w\nQAGxgUVXzgRG+0i2HZj6bBQE7vzcDKayxHbzCrnAm3OBdYxoG/sDY6DN6FFG\npeMGoELOKBxReB2HNUDl9Bxrozqb5Ps2VWqsB0HVwtCuNqNR8Zn9kSoYbU7p\nr9kz4m8hdWeqKVb05s629hdaU27+buyRLb3lKr2rU49YH9Kni7XO17M3C1YO\nP8Bk65oWsMtgJV894+/ZRr8o0KVpafOOLTMtQndgyPiWzHO3WTmFjdNhwpQf\nPW9pOWHCOeX2+4Fgymm7KRkim4u5F+QfrrmgcxyvFyvrAVs3fWfKl2eqm4oY\n97yZXG6jsBaTJpLWNU6Ji4/MjgypPHfXCXSUkrT0w6A3ABPQ1gcpduiUeq1l\nrqlr\r\n=gFFQ\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"^5.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_5.0.0_1581638905376_0.6011045884746538","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/theme","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"361ec6cb3d92a9de5262be247fdc1a6774a1906d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.5e313b1f2.0.tgz","fileCount":23,"integrity":"sha512-ZgW1vOrr7Ve+bLPIR/KHVHlPPVhw4E1xSvFSo9H+zkGkrII8TgW8IWh/omXUoB8D6FEA4DIPh/57K3T5taC0NQ==","signatures":[{"sig":"MEYCIQDRAUNVjaN9xdnVqkRlnF79SQ44h8DS3CQCIZsdC+PGfQIhAIlTReIRJkpvhny6NIltCSiwHSh0HTXcHrUo8OzYg8/D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzGVCRA9TVsSAnZWagAA3v0P/A3h0j8gdt1sgcJU9abb\n2fOq2uG8JrSuasBvHKN1WyvWUxYyL/EtsHQdBaiKFU9x6u8ewobyM67RIs4h\noA7c3KCtaGpB3dZ+oSwzat/ItuesqvMiFRkJnG2v1mRw635hGk5IHN1GEf8O\n5VxvM4yx8weYUv0+nMtAgvhzr+RGX4ZiTo4FSE/fnDWWuFavBTTHyWFMMJEH\n8A25dqC3Go/hAXfGPtgJ16kMBfOGGDbUQQAfKJdnmnQivyJjxndZIbEHsDse\nXM0WEcfWQjfp8Dnf48maahb1lGsHEX96rLQGO3+TRVC26vVNGaCM63935BND\neB+Cz+MsMISZosZ0gQGouck8RgxqKoNv92WuvcscPM6+jjm3pusdBlwaj88x\nCI/4jTuRLQ2IpV0J+hC6pjVPG458y4oim8pM0w7y90QS7aeN9DF2pgIx8Xap\nCXE5dzdzPs1qFh9wdLvQynTnmGnZpJF+46dusrCMFCANvjVHbbh0h8zuZmy3\nkfSdSjVfT4RNutEfyGmF8OTwL/L+FhCVVFS/UxY+qF+WB96bi4NUNmRw4GH1\nqNreaQ2061FSKH4rnbH7IpOCxyF08Qs9w8ndCEg8raTKiOwC9WJblIYq4JYo\nZvm/edeY0kqelqiV/RD61Fwg4IKD1ZyuzZogM2DVUF6+nYrAxYPOggVtQDiT\nHQCq\r\n=GnC0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.5e313b1f2.0_1581724052842_0.9580302772997766","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/theme","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0953d5b8e16db2577bfeddce7343f52ba290a05","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.6a56f387c.0.tgz","fileCount":23,"integrity":"sha512-ULy0YSSLCflSCxSoqzecWo0sYsiRZo6gwfggrTDCWz3YCo9MaKJK3ma+l4UJNlIYQYoMSI7rzlTWnBz9yCZVIg==","signatures":[{"sig":"MEUCIQDmNjDY8WLQRc/KzT2Fzbinb62Nee+ux/Qsz2qClji4nAIgHANrUu4GH7NtJjaGKYhEFsUdALcm9XBLd9ikuyZv/Jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD5JCRA9TVsSAnZWagAAXhMP/1xAnNsPgawmmPF/EQYY\nDAN/Ytb8mgwqAXmCnuce6dVJ9VR5s+qFmdEv0ZWDqwbNzXC5rM6Y1MhOtvwX\nmxPL+ys7pXrBahCS2LZLuxoNjAcWHb9P2fNJWNSe7BkbiXnvTbLzAb5Qcls9\nfR8m00NgRgKgTFx3H7m26TIICCP2kwMqwDtGQSY3XAB1QsOtWnQ2HxOteCD2\nF/vUZZrTeR0bprgYZH6VocADeIMl21fMZM8gs3AMd0i0+mKUPL7nlxfTtvvv\nVWEZC/SlpM0Bj2tVRZAYwj+zzvK252Wa9FcEK26PnFb23Ot5mdRICuSA/KtL\nYxBnzDpsdK4ou1QXEHj2YAtQKSDvwF4W2XqMm2P6hzuBHmfDZ0tyLc7EF+jg\nDeAbu2r53hC/jkpOAJaL0mHEdnmY7s4s3kBFCm3yAl6hCngBRajjck02KxzQ\nuVMLtyiTgDLEl2osCXli+0ejB7A95qa63yAcr68izj5QMghH5cp7JIReLdAn\nHLyOlg1bM30hWT2oEF5/d27fCNdWnMzyJXKgh6xAirAjUq7okirUb0yO0CH5\nqyuFL0avihkjxfCPcC/fUytEQvqdwfkAA24rOleZuwqTcxGYu+imQJTgb4x5\nsDHJUhBbQw+fMRHP4yDh4tN7RSNzM5lURLEyttVXwEkPHwekKltixlU70FtA\nDSVK\r\n=FozC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.6a56f387c.0_1582054984778_0.21464525823853986","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/theme","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b26da17ec39bc1c84d32b98cbf242c56a9f520c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.bdfd52632.0.tgz","fileCount":23,"integrity":"sha512-hOtfbYXiy2/2CZQo0oZMe8jYHrnJdTKZG8zx9QhZw6AJuPICR8hO0qpVHFfKoudZbc0AQv9JBbtN3XK1lQYL/g==","signatures":[{"sig":"MEUCIQCyWCOgRu+0TOyA2P7dk03cvnRfBwShP1+4iErr/LKjQgIgL0RG7072KPnO6FkNrjONDiXQXJGVXeJXnka8RgBX+7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZjsCRA9TVsSAnZWagAAFHwP/AkvqtL5/vBM8WgkHw1R\nvWs9EbjPdC2siuG/Wz1a/RKQRoZ/cbn4/Bm9OMnViJPeSVUNC6qrko+INiO+\ndpG1DducXSn6OlP0kjmX9g4UX6iEJY+8bm1+4rKvHIZWYyvgmUTWtdCYQgzl\nj819tkTQQWGRFF0gCQZRH72MoOHo3bRlr3Lv04sNxrmj7H0CGI8bFtc2eAun\n52PaOFJg92lnYSlOiCq3mLtGorVcAJKx+p5XlnX37SKj4dGmUxfTPq4VqFwq\n8ukk8DF4FN4jwzboZmqHWTcMMelLtx/82NFJhc+i57oLn8tcTPArSRQ82EEf\nbI5ps/rGhNezYpAhVWP705/xbFrgkzPfrnnJlEQHwqVV32jylNSukXmTvgAu\n8/NpN02zJvfM7XjXdawe17udFJ3TEJKp2yD8+WpnTLByFnwhIJ3eoTIsbBwc\n+QnSDytFwtwyqEiJXtwtAYByRsAYA60ewBobSS1HLXiksrU/CFrfENhoxw6v\nGFHVrr76FAcHDp13o0cyFCCbB6wTFfUHwkgIrBCB5UEDqNO2ItSRtv3glvb6\nAbVtB6CkA+ofVtEMeN+qOrkinx7NTHxzPW0ziqtz1KwpxMm6dsRRGTGHN/xG\nyl+9ocery8MvUeivf8JeiV0pYDhGXTyuN80+ZO119zgv6mVWAG5ymVdPyrvO\n5PQt\r\n=Rf6O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.bdfd52632.0_1582143724039_0.5859116487105653","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/theme","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b82a322a8720765797a9b4ac206e1a71ac02ac06","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.ad2e4376a.0.tgz","fileCount":23,"integrity":"sha512-j37Ec2F1lPytDq1OfCaManKDgR3yXIYq31Ud0KaXsi8wqitmUWm/MHGpwCnq7SfNfAEkELKhNtnBku1Q+0b2/w==","signatures":[{"sig":"MEUCIQDMUiloX/hKM8wdglUsxQDxv53ZUrb1gPneSq+IabDYOwIgDCC1chu/7jIZDSyj+pRxhF7sqoUlNmSkQq4BcbydS7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxMXCRA9TVsSAnZWagAAUXwP/1hSKpdH3jNUmP8MQeue\nYEJAM8IVt2RzWRuENbwNNHXCHzeKE5b7hfM0opamI7vvYLFeDIKtFobQs5/B\n69jaeA9GxCq9ra3CV4PY8OIOu2tuZ644BkvohyW8U6yq/eIIJVBIfUueRnOD\nn7Nep/vCRdQf4pRzQQLOeOP3aCJW0Wm7Yg+iQGdR30APLq2LZETRxQShA8e+\nPOnvXxlZOl+f0QOcpN53omdVGxNgFYUikG+M1WMLDVT3eXCu3BH3TFxRE1Hj\n6H3w3og+DHLMP+TUIO97d+s9uLkG7kiJLOmXrsd2Pwj+T/wQEjNPHZFlclGj\n2zlju3hucvCQ0NiTHvjyMXE8OYCxrlQy1msxR/plBNMxz2Jn3yRVJGzQr78b\nPyShvI5Ok38ldyZA71B0YIMd6cxTA8lMF7x2x/oCvQ982OPUEDdy73tP94t7\niWuF2drQoHDG/FjwE6NilDC/pZyO4U+ilI8Tjfe1/qd7LdlDicB63oYJ0XY2\nayejRJKXHt51N3GHFdduhB3RdJhLCP3TM9eyr0O7ghf+2ZiDbT5F+KrM4j72\nVclStP354aCFxjZA7Dxfce5mkMz5ftJPWdLeeWhrbshTCuhKgHV5RfNifouj\nKKIs0iPPeAl145sC+8QEO2ikw13mjlyatCTVwKS3iP43bM+MMyPpXGTCOLtl\nJDYo\r\n=xF55\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.ad2e4376a.0_1582240535209_0.5675223650043963","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/theme","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.765caef18.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"320faf2499245d8a89723a61739847ee4a7e760a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.765caef18.0.tgz","fileCount":23,"integrity":"sha512-172cQZrt4xgvnNnIfG5rY6SumCpamy/BU9DJemFgsunpxX981r9lsdBGoZ5s5qBKCKJfoDMkkJly98fMxftpHA==","signatures":[{"sig":"MEYCIQCqYlitVd4loTGxW0piTt3j/nx2J2Ww2eo5Dq58KwB9UgIhANFt7G6y+optwLdPWMTHBCFIQw8yMBX0kws484oGLtqq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBQtCRA9TVsSAnZWagAAckcP/0MQJajnWZrzyKZ+Stnx\n5cHpwnB4QmxoTPR9DNIyL/ZXcnJFp8jTS2tFGP1X7S6Bca58hHcPGtI+Zvky\nFMUmhdYR0PU1ACXZsavgqt8QWFY/R3N3Q/lR0iaOWJsSlIkuttKS1UoNphOy\nWO/rYBcA8phzS4tovJBQ3tpKzOmvNKeFuG05tsGaxZ3CXujuRSAZj3M4pI8d\nisIb/rteKR8DzOUFQSP2TL92+p2vZxmwB8BXAwKMPZhXZ1HHwN0BX1rMl1xo\nVNf0oJPCHa0lM/7PfmiUKIWdvm+HNgJqerLg5GoSScAEPu1Ohxl50x/TE7yl\nptBRh3RoKiJesTJSY19v7BXmnS13QHxXnK9maQN4zCNvF5YogRGavTceHoRM\nTvEBDp1ffnDbaAJKCYUTuSpEwDyRS5CtKD0nEV82THVqMLzYDwhFWhiXl/01\nvXLRi14IOizwoNdmnZWBdJw0D+weWdiwLdaK/AQB+liMRuXjERcOmd3fp3n/\nVaMbcWJu40zrAJRgn4XmtFPLYI9aXGLGvf0jIkVU4EiX0N02kY1x4s7H23Jg\nRcW2DC+bviggUfmNPQn9yDrbYv+vNs25LQQWsQGyYtroLZ/B2wS4rXlMEoaZ\n1OpIm3NOKmDF+ohwKddkrAIUSfR46OedFB1e1tO6t9+uUcK2+aX85xvEOZoN\nZ7Tm\r\n=0TA/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.765caef18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.765caef18.0_1582306348485_0.013750078456618464","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/theme","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.949562303.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7137e4f77ce4dde8ff082ecd729df898940ebd35","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.949562303.0.tgz","fileCount":23,"integrity":"sha512-jAzxa0FeJomPetJN/EMwB/ooOufdSGQU51ZaqDFeIqrenhalMDtPO1vdlcuJgwzWAR5qRH73xCiWdn5c7EEhKw==","signatures":[{"sig":"MEYCIQDn3oUFjMf4RBauCBrlbVc+GEriBevVmUmOctejqTBakQIhAK7AuHhENPDtw9iYXS5lRm/HLkf7QDrlyKjHCZ5c8GFb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD9wCRA9TVsSAnZWagAAlHIP/iVABYGfMfJiA1OCSCa0\nJLlMv5j3lFtXJ1pOfvhLLnZia5/laTtQmLyoGlnAbUCYK9YNyZK0Mp0ud1Mq\nKnyNdrHbndFdNwKj8eeY/Mn9J6jd8Q0jM02jwRaKDLa3AyCw/RzvMlm0qyv2\nTAHGioFrZrzRpeC2tvVmjy3IS5zLpCf198bAIrtZeHD8TrnNsqRiMWLypg+O\nalDSM0O97ksYFh83v+RtHggXz5lReSnvymi4DoF5JaHeAZfIOMPkapuv9hYV\nZZHoubmIFBLiDML3Wl9pA7ENOLQiJeFp8jeIuHk+hflmf5IX1JSoJhTiXH5B\noKWWWxksy+61xVE2AnkgI9V5d9QtdELV3T/GbjVgqiuVSLQn0zdtPS9WlQKW\nyW+vNn3pxwABNF/6bcfWz0v/sF2oI4yH7pw0/Dlm0NhzeE4hp5zOTY4Mwn1Q\n1iSnfc9rPH+Xk194NgE/XFN20QzeOL/eB3ptxwgr4G8/ndlQ48N8k2BqEBQW\nhMzlEOHv5mktYmCjWdiu71QVcwxLNnZnxtoaZjVyfBo265ivbRUMGXFpiTkU\nL9GprIszmdGqm10Pwqbg8GQnBfIKbw94oGYHDK5a/Cn7q3xsdIUyfHNqgKEP\nDW8a84ELoawg0XAXFZIsjm3ahxyr/Kv4YMLANSxSUOFmOGhK41o+etUX23Rg\n17a+\r\n=zqB/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.949562303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.949562303.0_1582317423821_0.0005716065973710993","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/theme","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1a01860aa63b6dc44313c590bbea7daa162d904","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.7ec96974e.0.tgz","fileCount":23,"integrity":"sha512-3NERh4cYAr5cTO5Gpcvdwu3BAPlX0OF4gtLReQNWahPlvVGsjY9yi/rMTZI76JfOHn+EEkWXU17+qiC2lFNpGw==","signatures":[{"sig":"MEYCIQCzqll3WGn52waAAI+B+WL7rW/bY6Ar+DRjn+uDjEZywQIhAJcJLCcKFE1GihogHOB0h1Kj1SOKVf27UCu5QaRqFooX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBybCRA9TVsSAnZWagAA0joP/RVrzTyWKiMHHZnqaac8\nMKIzxQ7DnwzaF8buSrobI/1KXddhRx4GvQZD+PbWcUEtOkHL1rhHIqcqzcse\nK2phOYIUbYKX9s4CwqueIso/AY5tZC8OGhOBH2Ac++GT8QJcK3i7oXEVoQ6Y\n2gCxXsgY/EiqRDmpODR75maSjWbTsCXpKTnfobK9XU0jChRqpjrSCQTUEJ44\nvDt4yHEEwARf6hfXnzWYhZAtvSkVJTvFst3pXqvrqL3MjgNmUkctW0y0STPI\nfg9nGRgHzM5XPN//AzrgPOQMY8GgyFVJ5x1Q/8wfkhDqNe1B9RCezXY7Zify\nV0Kh45FpajWNlyM92/9CO8K15nMZbI23CkLFqZTYd/tBqi4Ui7HrUPwSlQKF\ncekVeQEUYbHIJuKVh9sD6J5NbfVqXFzOpJDW8dQ1Pg+hTqSqeKJLyXXpvvOj\nGSnTIlto+6RGM+envIAdSvy8gVcUe4WMTpSU+XNOQlJSqDL7nh8oFLAmObya\nLBX0Yc3EUVFmgsnM/g7X4YGd/QV3LBp8UfhpMTzo2/hlXZS8ExkoTjPq48hN\nYdf/zsLWlftSC2pgsiq0xAUQNZ+dZZCCtHm9Xi3i/c4jQNDlIKyb30tHNRlW\nI/n/XAxXpAieWdFR2s5fWZ6NLCTtLSmft6Kbn3NDU4h+/kMcTYm589kNEz32\ntks5\r\n=+p3u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.7ec96974e.0_1582570651291_0.5717164838570252","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/theme","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00bb1d1859559c8d9d8f65cc6694e0e7c9590331","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.265ecbad5.0.tgz","fileCount":23,"integrity":"sha512-SbyOpnv+OdPaxkKsTgKDlHIeNUBExMu9qzBCsYtb17p0evmGgwNYLw+qOH12oAg0q1fayvjTvq1yjz64PZImwA==","signatures":[{"sig":"MEYCIQCRnIeZoSJynmbdCptz/gz4QCbv2jFCJerLcv3QXuZiwAIhAOHTzAjURi7gbiiNMbvRgKs8a+ZZbWjyAqhZgHhzQ9Rs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYrjCRA9TVsSAnZWagAA864P/RLS/J6T2xIZM6SOp7Tc\nXMJ/MphSf1j5cL5ALaMWAwrjBtUTNbiz0mjdwvdW4JZ84mucM/jIwlLpt9Kv\n7+qZHlXdXjEQ2bvr3EC49BB4NaCZ0oCxbnC8AP+mhFOFS+ENoq9OTmyds/8C\nWl23AcxxzbMmgXVjjcd3Fs+/GFgvukufY0GVwnCIxxw2K2G0aXBqY/XOLcoC\nUMAL9DLcbp9TlGcFc9s4jtFW8MFi5GIr7pucqMESGM4L/6j7JA98IOKRxZiD\nd+2Wf787VEzzVHhg0/VrUX2XZgjMCmAy5M5MTERPl7B5i1Iopa3WAwHHKFWw\n8piC0jsuLYVZ3h0YhvbSIzqxbe03p+zTHXt+AU/AfrDTxZ+726easkqtHnTm\n8ufImehYTJZcZ5RlEES7SdpHp13mBE30Dw+zJfATX/oBFPVtKmzEamzPGB5w\n3xX4DnIUWgEd6CmI6sw7kac5G1sSP4g7RJkrNzlQeHDo583cs7GV5KfZg3Kd\n9utRmDE9Hkf2s5fmTq+g1ucb3Gmrb/QVY/GZhzhM5NTbUoePaZGtcBx36dwR\nWP1aZq1/yyTJPuojY/6sSKINS2futwRICZIysw9zuSyAdiThALI6C8iQdL/b\nGi4cDXgRrrIQhQ/uK7hOnViDQRub/xCxHM3hnREbTpms0r68t3XnetKnTbYp\naXJU\r\n=DU2m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.265ecbad5.0_1582664418713_0.098537104092695","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/theme","version":"5.1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@5.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"013c37d055afc5d4045c77e44c9fd1f940ff865b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-5.1.0.tgz","fileCount":22,"integrity":"sha512-VoaCYAubn/oEG1/fu/yP4nxAw8sLEphFOGGBJxcPGQoLgQ9qcvibsV3G5H9S6AtmhJxgSGU0JnO9TaiuhQq5zA==","signatures":[{"sig":"MEQCIBN8owBOfMdQefBcgTFJmU3kvA479q54Pfj41A2DANFeAiBy7ySALNqLQIKKN32/ftixmoq9YrA89dgdl3ysNtf7Uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZOQCRA9TVsSAnZWagAA48AQAKJhAkM3To9RbxL55pI4\nK8EUyvj+BPwidyqH4/Q6Kweca/UHNoPsqaFaFBkyFnEtLV51jfbq0tiPRbRG\nDpPbnc/tx1k87PXXiRYBq4/DgBFhZDC19ERW4+H+1R7UwAs4fE7yoFKkidpa\nzYOI6lZ0W6/F2jEnVlghxTlJLFixh1ew+tITg1tsc9cAhz2QgorrHVd9BhWU\nWWGHbcNSFopO006g8MOPoNI5Ss4w+7NeBr7NvywIodT3lgc4ydwU1GCQ89GH\njqEDdXoKgEA44AAPfmLN4m46jn0FRyWUsdEe05P764bhedO6Q07i7lSmZJX0\ntGAO3olys3R6y5ZdPse3m9NTrz9dtUBSq1xqUjJdl42xzfu8i4MrvVyXCHQ1\ni06sKUIB9nxhS8Md5fNilbJJrCAGUNRueLWBxyYam5ppjdPZdEnn3g4VFhN8\ndbaBtMj1v8c6V16/WpIN+5LPKyEzb7CCy3+E4+AlLCJyhK1PnVn0d5HsKsQJ\nKp8ehB9cJcwO1+jGOI//RIf8c89vKCUktn+CdqRV7K8Ey+/Up2rsbs0Zegxe\nJtmaBUFl7slpbN4UtWp5RDYrsgm36qwZeA9IXBqo55yWSFtcbAxnMQNnLmTP\nN84u/HfyMiBLwMvvcHzF3uJb/Oddmh8VL6vaV0kX84y1YXEl3sZoxbEg9SAk\nvFvs\r\n=7ORm\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"^5.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_5.1.0_1582666640109_0.038262815853724375","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/theme","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d345da63453eb99263e87b66d821b84b31e3fcf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.2cf87456f.0.tgz","fileCount":23,"integrity":"sha512-lLWk2lyCJC4ZEUi5rEujwTwUcR9ba11f+Mk6Vwu7hmKnvCYUFKGGIJMfmbHwtp80erPH4DtCCSV0HU7/UJIKzA==","signatures":[{"sig":"MEQCIBz46s8yYRVw//2y5BdUa/Zf9t71/fPB0OmP/TtLdUTpAiBmITWBkD3dwV3paJ+JQeGCIJicKDpr0drMaKIAz2uZhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPACRA9TVsSAnZWagAAXQsP/jRL314rBR149QwqKc0o\nWoCgWF5ewzg+ly4xGwBXfTUc7/qpFlVmspWW458DAx/wfF+jdOMQu+e2O72j\noRm3SsDHw7xXt88aYKZjyV3/9U/T1Dc0Cnq8FCZGOF1x/ayh4TpemGEVsqiI\nKD8y4sacxIFub7rLq9qbmbQmSBK91sSR76egKxNr4G5ujpZ9u5ychSocPSAN\nu9gGOmPWYQNy5w1kOt9vJr2B9wJ1kkjcl0ejD+mpbbw3eZhTxLV0VC7dKFiA\nce0c1v6Uw+7CxXSh0nvb4yXMxN8q+lktcD5vFandzz2vybrk1QitPF8ErXql\na1hCLbgvlooWnU5dGc2doPTkxaAI9cRCT6QMj+132xaKO5pLW7HXV2yAGbNf\nQs0daMz2vhvWp1VQ1nztEaxmGK7ZIlhXzL+jfZsXsl+Da6lGfUxIe5BsWQ93\nQydtgleW2+xpKOWsHDngf6XEZXYz6J9L2KbwP5XMZMGaBEwcGjkPm7ceFL/E\nRBG6r7roRM4JkQ+Su/Kr3ABsZIgGiKG/61tYV14QG8teIBnZ4mQ8xtpFs0bE\niLMyz/uBMygovZhthf/r63PXhaabPHXtGeF5IaAsTU1muIw/S+yHP48P5C86\nUTNQx6UgRcZfPuOMQD7+XfuyhjvuQYKygNr+QQzz3W1eESfuCMslTeXqTfO1\nUywE\r\n=7B6q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.2cf87456f.0_1582666687952_0.8577425723655749","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/theme","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.781434a92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"464ef92b4363b3ebdc5ae5d17041dfca11126f24","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.781434a92.0.tgz","fileCount":23,"integrity":"sha512-FdFgIMtKIdO5MPX5ecz+3FueOD6soegipzcy2ueue00L+MIHuTahsF3Wgi2s096ROnZeoJLuyHosyCDH4ergOQ==","signatures":[{"sig":"MEUCIQDtQ7ulr7um4DQviIISjFoys4BeF/qIfCTT/2nOhIH5hgIgIac2AcyzOr00aAvGDpejAFOrJR8wsgVgt65X3/XWw4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa1hCRA9TVsSAnZWagAALrkP/20Gl/JI/kdhcynJ+FZ5\n9O31pj72Oafkt4yYEigejS2yoWj8CSNGhry1BMuU6QPw/nH3G351V7NXZ9gF\n02ANd7yIX9giV/+6an1Nt1s+ZEQGWmvV4FhNaps34bWZ2xw2lFuQ7AP4kXPo\nmYgI0GsHlJRLtD99Nwiul0om+QpB3O2lDqW5iOqrpkhMBZgiMCLXZry+hhUi\n4gL1etRujUh1Y7VFfGVX+4qd615SW8RTheS5Zs4VG2Dg8s2gHNRRGxfLFTn4\n45XnWnN2VrrhJcTy8YDznMU/ZNtvaICVyW0+3orb8aWWwuafxtWQW11fZ/yt\nCb2eNqAuyQKYAYRPNUvc8I6A2uZI++6vPRpArIfWb8WVFb651yiAq3U8mnL0\njteskPNjHOhIX0Wc5Mh7ON3frWN2228Q4v1gdsB01WcTKuNOuGJEruzq85LG\nOq7ICUsx5lEIniOfijCBor2M6uzr6oFcBWKmaGBJ1fOl2BWuQLrfUKOErINd\n/4AB/No/wKAVkGHaSYEpU91hsx0wh0/fPEOUaiXFO8m3gS1YUt3Reqkl9zQc\n38bPYIbO7WpqRo+znvce9xa5b5uxgFaS/1cNeFP4hgbUaMrgR2pEVbpMK3jB\nrWUtvUMyZzEgJpXk9HC6ENlI+rkjo/EEoNPERPMVXuxb3kOPRK0UuNbDyKF1\ne7l3\r\n=lLgZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.781434a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.781434a92.0_1582673249520_0.009257747857660314","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/theme","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ce9623fb1ed4bda6759c0acd0dda3d9d9e83ff1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.d6f60c98b.0.tgz","fileCount":23,"integrity":"sha512-7bL3AULW/zK8GZ9RBW0K2rJH2kRSgXjmZYh0WssMovtKMJGSiVo73sPVWHaKILbkUMuDtOO5qdCzu7zScyU3Lw==","signatures":[{"sig":"MEQCIFX+h6HAr5dWH0CY0L3Djb0rQXUjEksf6tziRmtJ8O7dAiBsW77uQLC2IvdOnx7ljN3/ulHZRR+36BktaJ5/FifHNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY4VCRA9TVsSAnZWagAAl6EP/iEMs+fO+Vz09ljKdE+F\nOKO8D3Cwb+7OdYWdmSlpfCFMVB6wnCc7xD4qPm0X5kP/8HshRZVvJXBBT23O\nGtS/1H8w6bPZwaSuRvVA3n+HaFp9idCnppm7X4IE59hEdfvBRCaJl+Pals17\ngnuJPuFNmt7o1vbB8KGjjPQzjONlIIyQDayLDagqZf+H+TBStNc+k5eaHn59\ncOPCZQqX2Jc2HuIwHDuIt/GCgv8xhQ2EjCgeYZg2SiysC+H61AbUYeUHiwQA\nFQcmpO5TmFRLrV/OazKf+I9IQTGsOHaoN1JVHN5H03JR2YY4e2jNayMjl8oS\nWNYijnmwNqmuNCmF3u9cJoil0VIWcdveI26Q4Y9ZSEKEnv/QZ7KpLbpvVkCS\nQkJbeUs39apJ6/xbv/xw5EDnuN34lekjBwko+TwY7TGHpilvc6uY2Z/iZk/N\nBdRzhW2G/RRRqxcrB6kBnV4/zdoZqsJA8mHfswSmlY5X5oX7Toc1eyr8uZZ2\nOvyVvUVgBufN53V+reTh9IV6OENgT03BzKxLyjH1efIz24s8AY3dq0w/07En\n6CGZqx3A35u7brb8UFTIzEmAhsVlQqng28JFHyVryR96ILY52Qq3IrFiS0PW\nPCkvGEm/MZ9uxFMWxU2UlnhgV4u4yfEsHgRZtnDbivDfM7icmabFpTfEMW5e\n7kye\r\n=YDwa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.d6f60c98b.0_1582927380552_0.3973334908406896","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/theme","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce453a6b440d3f094c4b10f860dc369a434f754f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.69edc6e28.0.tgz","fileCount":23,"integrity":"sha512-D3SguAgEkyM6U0VSi1BtpB3VSbO8jRNcg5OeevLmKPVvDnpFuMGsctDCvhQRXuHkHpXSrU4u2qXZtvKBnZ728w==","signatures":[{"sig":"MEQCIHgod0CFVkXRtYPcIO5IqTLpON8MyvGpy61LugX4s4XDAiA44rrwZRRMHqSG5gYk0dbdbJoiGC7Z6rjxIakqootpQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZATCRA9TVsSAnZWagAAolcP/1GcQ3LCi5jFDkjKsx6l\nQL0y698Xy9XEhnPfMcBjMKaYWaTYfXamVWrHN3CQIvs8Oa4HyKu6t0xBbU2l\nUtZZ9YbmgRZqaDxOPyj4RlgJkna3kQgxO4ipV0cXhvxm5V7yRhQhtN4UN5wg\nSs/TCFgnUdx+fGz6SU8QyBxSL8beenOaWMlmJWWPzJYARZEKqEyhfTRdVV26\nLECjUokKrKezXhoIf5FhZta6QYKCID88LtWrsas+YSDnOkuxpWzKuW47Ad5V\njm8ifQ4qj3ebUa8OOlJ+Oq6a4pkBenWa+w5VWXCyBkEZmYxjBMrss+JmITKU\nJImI4JZvmNzunWzwtg8qrr/1zPac2Z2yM/4sjvRGwK761qqPS9HjYh7AFtUW\nyKHnz6LgMc8PD4i2VeRAub/Vdf9AkxhSRcZkieIFffqYRm7ZOH8/sLgO75Fc\nXxUJa9IaN0yqguTY/zj2bLRcPMf03Az/j4v9k6i7p3zVkYmIJa40KYXCBjnh\n1ju+Wc7VCHnwPAtB4K4CN/2uILtGfC8+SByOrjZkYNaJEH889LcwujpFZn8P\n4nwh941nACqlvfh2dHtY2lPQN8L0typXWnOaF9P8SIOYgbEWU+Bt4t4IvfzO\nDuzmpU9/TR9vcc31Vh+S8chcxk/E8BtdTTehFtdJ+ajQZJyFRA/aN9ua1FdQ\nYjqV\r\n=Kst0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.69edc6e28.0_1582927891022_0.4041074236162676","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/theme","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.9372e4939.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"329270cc9de823cfae7f2564267efce681219ea1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.9372e4939.0.tgz","fileCount":23,"integrity":"sha512-7soKxsoYtRGT7xlwuU9kLHICncnc/xHT6Hl5aQeJakLRLA4mF3NFbZVzl5iEVzsFiicjEnyVXorJdytmeObHkw==","signatures":[{"sig":"MEQCIFeKJS0eDyRtKByNSFLY0CD/P9Z9TKXBVu8ev0c6io7lAiACLXsXRoAriaOFZVSjukZTpfuM6i9DvoUrBmfvB/pPVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqtTCRA9TVsSAnZWagAAmGMP/18kOOV2y32SikDNQm6n\nhd3i24BFPKim1ZzRqAOuwY16/h43RIfNelY2l/e/Me6/2SVdgJS2t0+zn7QU\nlLRUm6u06BR4Iinh/kPK5kDytqlx3bxYHOFMNpYrmA2molC1ky1V0hOqbppd\nP9Tb0Tp+N1k5vUhTEu8v9qYRKSLZkUCsyyBvwotWx0DNTwrtS/lUfEpZ1S8y\nMIfm8TNSJJQbmNVE5XCRiGTIvjMk4S3tr2VlRBY+hlHcFoIt/0ZDUczI/5qj\nkQz8uPMlKv82Ew/8U4bsuYYpFwErN+NzYboplr5FCDX301IK0tp4DG3uidSr\nqLcyku3egW7cf91ix7+qrnuuXBMANte8qG1Oml4i3cKbmDAjeI/RgByS392O\nPOyMFYaWAskUX7QCz8mPioAxjTjohokqT2kdDx92RN4p+ds3eU0uK+CY/9GU\n5TZHYX078oAX8Al+nrBCypve4dw7CMcV6lSXcjumfbPhteWgCWBb1GBECtoP\n8jcPc9HBYik43AxsCbycHdSO+BZ0PaeLa3P+7T21H8IW84Cr6SxIsJyJrzTQ\nCx4F1NMUKP+jaR7WTmr8cT+UloGRnMw5jfGNBX0HaCRjkIWf0ozZ1rNQJv04\nysBPIBLZ9fu5jBd4CfDxvhB4oBlcp826qtbl/2q1rty0q5xhon/uK1aN6CNI\nQuld\r\n=G8Gk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.9372e4939.0_1583262546937_0.6563624016490182","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/theme","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4dea7c06abac6ef95248c4a7bddf876fb76ad04e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.9cf5e9842.0.tgz","fileCount":23,"integrity":"sha512-Mr+l0MtaMSsLpKaXUQv31I2JiWQR9oMhmwFAqeB/Mu/S90/azeSPAt4cwlTydFtv4NJH8mMY+eSHK+AQFkvFuQ==","signatures":[{"sig":"MEQCIDbXbGoQv2miPVLVb5Exv+F9uxzmW1WJAMZ+YCaiaPqNAiBibw7aGKEmSKYu1hPQ/uW4B3pi6TA0Rh/2ZOaeqLl5Rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXudUCRA9TVsSAnZWagAAVUUP/3qlUPahhbHNj7AuQHsT\n3n/cpe39TghzslNoRE5DjEhSUWsbHO/21RFfjsZ642L52nn6gCb/gdkLB6QM\nzFTXFywkhlcn1n3rmvzsusIIqC+Kg7UP9cAntXrkEbjoWOZJKhdnKRo8+w1M\nUjwkLyawdh45wStyudifhRBZ5XfvsawYgph4ymwyrhQN0WUiwseX0mZMIF3O\nS8vR8DgBYojCRW3+CFVSbrnc2QD2ZhyKQUhZxYgetwL7g2WfotRZIQP8heb7\n2krd199WuHkteFosGcokSN6pF4tMABaEM30m5HKOz0G8R9YO0X/mxOAnAkRG\nSDLiDLP/YQUAkzKi9EhTCEvTSQJB6wxnI87aILd57v7aBoPsHy/VM1ahEg6b\nKp82H+hNHzQHDJNc6gIRg9xel1rUOwrDpvTWWlAfNskxub2L1r1x9DdUIhdS\njd9208EiHaKs9KED73CB8a9MlNg3IQbbHPgvPC6+uJzRoE7RSYatOxJW4BYl\n/rumGrl/mSe9OGusuJx4MucYhEt/lzal4DM8WNvMDzAhORHW0pzFuCH7IENb\nRtBsR+MAkaRkAOkGQR9DWwJt9lcFG+9M4yRGPHYkjN9KvR0CJWPiBEwaLOTo\nhpP5hVYy5a411a2rWl6jZKBaPYYALdUpC5Om3F0oGJpytP0DF0zN2rSth7Nh\nHx9l\r\n=53wk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.9cf5e9842.0_1583277907502_0.7964438341283933","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/theme","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.3657f8863.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a71618f1b5f2f3add853079d0678be442740ad5a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.3657f8863.0.tgz","fileCount":23,"integrity":"sha512-Vc33zQeKhF3r9dE40UVCa0QRXSa4m/+cLUeCi/YOIm2q5VR5bSa6k3SUMqBoiAVsoh7LlIulrpVOabZCMhE54w==","signatures":[{"sig":"MEYCIQCXJe+K1E+RrQ8Z1ZCUtG/bdnQHCGhGGF/G00F0TStiEwIhAMFHvZ38Zt9OArBNhjC2Dyd0fRgAhRWzd2dPutTbYzYn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+jHCRA9TVsSAnZWagAA3DMP/ROCBAdKh0BB2koUKhR3\nPxcslqss8Ua2N4RnSbqjik00AHxnwNvjWh3CnWesWN6YACjxLLt4r7tq1ysR\naeEjRUPfUtQn9sZl2JqWNPjRHp2TP44YiNJygcqxy/biuuGibmYy7hSjyk2y\nLufJzfEPqixQbBfMad8dSpFdzOKH4GNEB2gL8XcP9bUPcMC7akg77Gbalg4V\nvXSJ0o8AwqlcPE8AjQBR20QJ1Z4jpelD7JKScWz3NsQtPKNA51vbvmnBVuNo\nTrl5R39y4RpfSfpV2k1kyfd8gLnd20ePUtGuvf0D1IahGpyw0o9hDRu0Y0YT\n+3Nnq0W+DR2+OiEOatO3akwOyJ33GC7JR9CbediHQigd6O17iztMCiP2M27v\ncPa/Nmn/jvn57TPhd5Mb3ZPrJ5D+BgHftMHMJCHJszVA38pZBpT0pCT6wjQp\n+CK3k+9O+ZYWHHgEZYiEQkXcJFNyOXQm4zbrd+V4UgdxAPPJYymTLso+OfrP\n7TM30dRD8cZjLsBvA9bSZBkMkfT9zOEUov0oBIFgB8+colHWnjNkiGN+PYIh\nHZpIUlzCNJErzOLomHnoXlmlNQraovHAe7Tf+vByMeosBz+L7mNpG+qJRJ9Q\nz8BX1c4HLZ3lld8Ha78PUzGAY9U1g299w/JLWcHWNlNvI0byzWu8F8tyGQr0\nlHcL\r\n=vuy0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.3657f8863.0_1583343814887_0.995431702868337","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/theme","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.98b843417.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a517d828994dde213b7583ea1e3688b76c5271ba","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.98b843417.0.tgz","fileCount":23,"integrity":"sha512-JsEwMTSS1FFlUzjojZ6i4QutuiTOPUddA+M3i1/w8KQDgnpFj8W4TmdegfAlsudmVEBCONQIV/GwirGrU7c91w==","signatures":[{"sig":"MEUCIQCWc7uGWAQoXQC0ytRw/Dh5QOef8I1O61GqP2MOqVGYJQIgSBL84ZsVoSQgDfLxbsuMZ34mUfYZWl/5Hui/EjAvPsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVECRA9TVsSAnZWagAAvOgP/2jtbkPvDg/zVJ0UZQXw\nYn5wJJVc/dxjqkO3hURrzvuYTqj/1NaPqdbb9K7iDEEVnHJZuUF1Cg8wiHze\n4IWYfrl5k7beRyPwIKBufwCZYCWbJIa97suLoWFDsV4w9kXtQLpbyZDfsgAs\ncNBOpLNihGaFKOMGC+nIvzmPWsFzZyAH5uEnC/3j+prpnE86K0OoUYjYOLk2\nI9FOu34NS54Efz3Xnnfh/rffi+Z39YGyc7kloN1fZQDTQShvNjj1qBXCbFo7\nISwk576aYJmm6TfRDIoRhOmifmN+mNG0MlhofbxFITAcDyxm3NrtNLoDTPex\nQuoc2Q5c4u6jKd9sx7gW5VsqeuFLHtEEMIgDZaqONvAtQ+MJe31XM8huUjOO\n6hE/2Pty0GbetxodZdW/dOJ46XsM5boyvnasws45uNPvpK2SqEbIUXXh6Amh\n0HolIr2NLC6K5IU4oN1GyHm1CbkgsscWSqjraF/HXM5AH0JEKZwSaSr6uX4m\nTIydcP9sd/v/k0TnEVpvXKwb4ExIr0YYE13TjyiP+laMKnnTdhThh+tuF9vq\njh6zI8b8Jng6LJxK7olzQDjBktj0cpxbLloJzV73CCDc3zfevVmNw6iMvutS\n3yVAfqHBBuwq7w7g5WI4z29TXRuaEkReHsiLvrSW0KfhsFr5s1789i9VxTfe\n18Sh\r\n=a7Ci\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.98b843417.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.98b843417.0_1583433027886_0.200456470985233","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/theme","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f35b6bfc5fc7ed6226b4efc270aafbecf48730fe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.17b9699c4.0.tgz","fileCount":23,"integrity":"sha512-Oko1d9/yacCLSuozh6nK+mLJL5yyLhWHFq/trdgbaq+QiM6vvJ53klWAk50Fq9QZUh5SonKQLxhmaLL7nTeZcg==","signatures":[{"sig":"MEUCIHwA7Gud+ihLXU/D8lcD/iZYwFGkiOVYEmNi+WILfx+xAiEA7RVa4ObWM1TGwFquuEA8Mz/467jOvzPkHvCwZYYHlcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFMCRA9TVsSAnZWagAARjUP/j3WHZXwCZJNtI6G7Fs5\nRv2NS115R4j9zSpMYILFAjR8c6gDIA2JMWL30ESi8woG0SYeIOymxxc4FE7t\nhSUUvP4dcdVw26s1P7otzuJMxhTha2zfIJ3VwaI3kJWU0IuoGroelipvFf6s\nX3ED13eCmJxZAEzCbJds5k3DjloiS1m8lGgrufkPoy/ez3vvIctHk61gFqXG\nWC0R5YkULP/u+jnVhSpdpluF8mmD+oJQeUpZdDgB1PxjLlutjFyfDoHIAvIc\n2ioLZrln7I/zlyFko6EbwKup3F+CpNORnZWe7t6RGwUtHGpHQyTtKDb4qQd4\nTXQua25F0UBjZudwpk70hxo5w2Y0Zfb2UMIL//pWuSXzcTkiHZujymE3Hk0P\nlwD/mj0PWZcpakjtj9jIWf/t5u3ZcyRVaq6rAfOI1oGGf6/243mG7oWJriP+\naVak/BLSfZl44sLG8xWyHK9TdGe23Fq+TemqVaGcrjD1wi4TYT4TcwE6lTBy\n6hOUovMHWQcdxQ+s/ECcxlAFsPDpcsIm4KHaE6LzwGjGHoFlukYLKu28bZFT\nAPs8V0fYyHNnyNXufH4ReeHiW4TaxdHCzG6Stx3dMb3dyEInQiAVWeA/MKxW\njpPnSM5EQyiU0FQFFZJs9NyG0oSDbBMjrTvFlWdbc2qoe8+lPEAoN3EKy+Du\nLo8z\r\n=+iIC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.17b9699c4.0_1583436107547_0.44184742760875895","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/theme","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.6ee035572.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bbcccfc716b7b78ba7f9c70cfbc58ce60ae436c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.6ee035572.0.tgz","fileCount":23,"integrity":"sha512-i+4vDnaKYbcQE++xaZR0+CcY0VW0a3750YQf3bpwvJzKTBxehlWc+MWnGO6N5xJxS6rsvBJ0ckyyC4+X5ilYmw==","signatures":[{"sig":"MEYCIQC1BVgCm28W1Hq87CZ2COhXPa1ge25OLHqeqFsD0ZbfbwIhANu6ygUE4//y9mH4oQYFGQwEOPodnL2Zvg3CLRPaSsOY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnLFCRA9TVsSAnZWagAAXmgP/3kSKoyK1p2HvHByT5ai\nwBiBbsa3/zAxfgIuJnjwCGctP+/PYgATfIi+XeqGACZrGsZaXc65kyUXDzvC\nR8gB2cfv2ZVwQuNZGfkUKWZEfy/Xg85N/a6wrWfb/SK1eIU+9Xb8ZXhlKqfC\nYMGWoux7yzi9cru4dSAhwZe4dNoho0gwZXCKp+t7vTj9sLWytReQLIqBrvPI\n2x2B6J7vLhuHsqGNE6Lb3PXjxt1YTR8602y+lBbqYofP1Xm6gaEBFWWA/E3U\nn+CXTJPowGzvG/WcgdNUgkWBayrXv3W6m0qSEqxdlkgYmokQlNoNC6uX4raI\nr8wFitCsnctNB72zFp5rD8lBwoR2stCoVQxUGKBGMes3xxEjWgYsEV9KJMoF\nPOqwdiRYzLvV8cmGxS9XPCxNuRfXCrIZPS2iae+wP5x0zjzStKN1Mq3Q9Wdx\nFZjvzteSYMyjH87yQuo/hjESMGaHG5ZWeRSQVticnp7Aw49J1IEA1pkEer0X\nqdAkQm4OVjIYYpnSp54AkOvol3M8qwA4yvGmXUj5F9Fj/JMZkLipqr9ISuSr\n/Ink0pFP6cdoNyPkeSdrdPr9Rwzix4BkCa/gC7zTX/tNdN6uf2019uZZhaLk\n4shqkCfQc1rGcSUsC/JjhgIEIYW05RHj3+Dn6zl2zwmnpsPhO9UYRCkxr9iN\nl9yF\r\n=F2qt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.6ee035572.0_1583772356691_0.8282479741515274","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/theme","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"059e902bbb8bb913fd8b170b268f126b89495c95","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.bd33cb56b.0.tgz","fileCount":23,"integrity":"sha512-T3gelUakbUCf3kQfAi4n9lxALKf8t+aDExTtn7lxK7f8YVqx+PSwEgpUG9kBpUnX0lGqmKczKzoYoWo7mvgkqg==","signatures":[{"sig":"MEUCIAYo7Nzel93+bxaFXQj3c3oYKCMo8tw11lNugKY/Rgl8AiEAl2zCt9uMGkOfPXFl6vdKBeNg/S0rj+EmPJfjGCupKtg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnsRCRA9TVsSAnZWagAA5rkQAI+e0BmOMSeGI6dJ/F6t\nQ9N4ZQ9cqOpoKSDhXszA0NF7lBakOyGyhPoSPCzRFpBRTcHwk+PuHW9BU/ml\nWueYf+4Mlo7HNXmS9PCxhJUmsIN5sguQ2I2rso+dXiIOGKhkU1HN/ycw9rxP\nszkiSqBlWdbAoSvh5MRk5QUPwXjwDptlPKmUmEPGw4/5y/EZDtJgwseE8fQO\noRwE1EyLFb1ovBomclpfYvqVSH7av9TAsETUb/hRvYiVHEklwFPB9RR3FI64\nI59RDjMhVIEtd9+ToS88FS0kD776dOlccaNp22fHNj3VJvONzigJAeP+itEU\n8cCOXcJXT4CnfwiHEKXqOBkUM13I1Ad3UE0L82gjw9bNEgCoSrxjBTj2pXnq\naxMZyyUj3D267rASJ0dUrA6SVUNuvBURst0SLeDNSZVJ3oY9Ny07ftIAI9aJ\n0x4zoKcC4aQ97NWxe6Pau45NJFPcMnvVvz424zRsOGPS1i0Ao3CtWt9Oskap\nYAykSoERQkAoy/g6z4W7Fk6LO6xVFXQovGzOiehPr63eArtJYmC6hEDG50Ij\nga09ECu+wkKIp1POjy+jM08iAalqQ+6R3mBhjqFuHGRK6z8fRTjJI79pyEWd\nGv0YPBLa/HtXXFrY8xXZ1cD93s4609ZTR+6l4Xyi3XOyurkXxPRO4O77fosi\nM7vr\r\n=rs3g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.bd33cb56b.0_1583774481132_0.11391020283958242","host":"s3://npm-registry-packages"}},"6.0.0-canary.9ebee4ceb.0":{"name":"@material/theme","version":"6.0.0-canary.9ebee4ceb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.9ebee4ceb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86ea4a8331a224ac423d873c20505e9bbc9dfde1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.9ebee4ceb.0.tgz","fileCount":23,"integrity":"sha512-7utXxoA/tfbpZgL47jlvR4uzDb/GJ79YSCYBVIiu4/ePAIWPu8NaoTuPEO1EY6ZgLyZ2Zj6iNenFh9fi6Hf60A==","signatures":[{"sig":"MEYCIQDiPEwTzBrA08zB/7hdY2pPJpaguEigkk8cDFKQxeJ9OQIhANdJ7gU5vAcLsoTCFqTvO+s+OePetwUq6rH//1vPgvb5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZrFrCRA9TVsSAnZWagAAxncP/09FPD3irqSxiZmD0HJg\njhROAgVAWA1Wr3zrwkpzIjK7wuFAFB3CQZp6a10g24AFVShqxuFSGXoT/lnc\nSQJtKS0PUC5W8JDMgC3SxA404Rw2txJuVu2yzqt5O3+OrRby6SgK2ykjs00F\nosCclM7qfS5qelRjh88xua21sUgdvpq1+SeRQyiRULijCT7Tn4CG9w8M9WCz\nCYxd1jmFpobLB4532yM5J15HFd4I0DhOPatIC/4h4Ed3b/2tCaxdrJ1h1h0J\nrlNYZRru042QokcSKKkNEpyFluZnRUsJGFoSkr30Q7GmIzyS0gyKk25SyCjo\nLA0E7kWMgpZm6HmeADKv1/dM9gixYVH3QLb+3rcQQ3eT0bKHgLzVQSOwWfpe\nzIH2s1NpzxYbsoyYO4OIhSvuhjcdOnWw/ldYtU91Yno61jk84VP6RFwlK00+\nYp2SfEwmVRz9KhQ8w9pCHBjIzwTv5MpuTPNJSh1nP9ZlEuceIKlauZen01Wh\nNdmm33ObCmXj93UK2q982R+FwtRSDbT0ILnLlj187Y28s+e8yrb0a0G4YJt5\nx11Nc7RcCfvQAgs6ufK42OJOwRC5BSmPKJBs6XpKzYCC6B5o7x6z4CjD+YFF\nZpq11uHVFgsMNGj+zQ9yhphYh4u3bUOPqtwUCZYcRHse0KZDSC3/4e8MM/2R\nRxvU\r\n=aBf2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dfb57a81f5ec017319a5b83b6acaaad397e95839","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.9ebee4ceb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.9ebee4ceb.0_1583788394427_0.44596095153568993","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/theme","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.26c049afa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cb9aa7a7c9ec608d661ea2d8dd2b5497e392678","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.26c049afa.0.tgz","fileCount":23,"integrity":"sha512-fk3zRT5Ba5N5k79F2c/KAFe5r9amQsxyR0FNVWJdmbnB9h6qQkQHzHwlFr+7by2rRnjvQQQBR+wb+UyF6aLjEg==","signatures":[{"sig":"MEQCIAokJ1teqKeyE0y5gnhNwVjiaGSV/rt2dgKdtwPlzPTbAiBIsmDtTdHcg5X0UEUFMfwp8PVJfAkrpnEahrccJ+akxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8gCCRA9TVsSAnZWagAANfYP/1fFfd2Nvon2WosU3O2R\n55tKqg02apWN1Kw5oJ/t1ORgmJ/qU56jzFZX3bGDcqCsb8GQdkWu0Sy4Rmk3\nZbs9qJQK29HOVbGSXMJtgr4q0UrenWM4xN/G+yTKHXvkk2cHH3QrY7VSG5vQ\no9cXumNxCNHA0pf0Q6kzbMqdCXq67mH3SvuUyZ/k0rr8BkyPdR77G4VvtFnL\nhFmTjAVknLo34Z3fIisttyRO0AZzLsMnSoOLak10dVJ0YAaTbv7axnt60krI\nArP0okvufti3M99cVODAHpVmMV69y9AohvijAANZhIdR5ziCXHsLCPkU22tu\nQN0Dnnlvb7j3qvSvU6xNLRyIl31psbGgzoFTpYf+xGIUydDGtYpzLPyeVeKj\nLRlfZy9q9NahfNL9Sbtz7hfr/YZLmXotyk0jjDadGkSgYuJbXyxH4/CI5zRa\no0jongfuOzr4N/bxz8WVaKrbxwL2aCzzsSgMjQYmtWzjXHY++k9PG0EgAT2/\nm4cJUHMRw2MVFxgTMvQvnoA8ue6tBvSvzP+3Mad0ftAlrHg8OkWbyNpjtEbJ\nqX+pSio/H0w9mlYzOCrKYpwtTa7+9VR1010lD0HL5c8dUclTavg6djSntPBH\nbZbVJebIMpPq6UaC++BM8SnipAaWzHZCdLl92XI+EljVJVTsY19Q1OFFbPfD\nwR6L\r\n=Pyph\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.26c049afa.0_1583859714151_0.12790779438437538","host":"s3://npm-registry-packages"}},"6.0.0-canary.a731fd0a4.0":{"name":"@material/theme","version":"6.0.0-canary.a731fd0a4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.a731fd0a4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2fd52f1e19f0fef988a96400142efb014b1aa42","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.a731fd0a4.0.tgz","fileCount":23,"integrity":"sha512-YrN5CuRzZ4cSbjyG7AUnOusLa/Ld1c9X7BXBq2hPrJLJ9AN1oT7ZKH10DiHdDdjy/9JyKTm14LniotHen5WA8g==","signatures":[{"sig":"MEQCIFnfWYWmpnti8P43Lb7rWpe0wCnQcTOMFl5dUbTM0FwPAiAJmqVBLdjwaJ6oPL6vXMvOGcj+o/31kBspzjm2ti/4qA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/kzCRA9TVsSAnZWagAALaUP/igX5Sqb8ggaAJijQUnk\ntjXICzK7JFf8hsiQc+H3kEMRMarRNkMPAEOOOVQzdXngqOc+HjgAzz6Tzymc\n2/FbQrMeLuU/LJQuQhnZeEbhds113egsfSgMRtgDJ9ks1tdylQUVezMEksZs\n5pRSyXOhQUe5LwFG1GXbSHFgKpXvBnPkuZ6+pTWVBcEC5k8Lz7aRm/o6GbEI\ngSBfkUCbnehnl9XpzLeIqOdv/xOcDV330Avr7t/CQ2FUBCt1jqiQOB5BPkId\nK8jGL3/eWujDkRuw9H828V+GZiX37nxut14s7rr0lchqXIct/IQmOoByl2Vb\n0gR1KrlXej/NXbmmdB6pFztjNZqOzOVGc1Y4qe/m+SHJHWlWEmUUiqSzHBv+\nps7BtWlaLEi8vt65un79eS43BdR1W5IEikZUOv5jcOfpW4XoXvfoT/dBujrI\none1Cf0aeN+4+oyz5+RBeGAB2VOz9r5+ZnCU5FJhu0uFkfXFbfzBU9BIF20l\nFAKZMCSqn5n89EAu/odMHjDvdB72MW/+bFAOBz6g9SlYcletRSOLJeNGzAp5\nxfVoP2nUuVw8VxwHcFALZAzil7dkmrNvlBkJMQBVKzntPpo5PvJ8xBmKFrPz\nPUsTSw9QrbyHM0WGEBdcVFAj8P7UnAKeOQ2l+5+hTIvmmCf45mM6zhU5JUsu\n5y8a\r\n=pU7B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6216eefcc94fba4c66ceb4b1fe9352d3cac861c3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.a731fd0a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.a731fd0a4.0_1583872307373_0.7259942351681452","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/theme","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c075084e454a81bf90d23fabed161a5c653169b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":23,"integrity":"sha512-Fpe40ZvdZK0sZ8shosKsUfiAxdF+iouvqJV8GkLXpAjd8sAdA8naqM2CIqstu3ieIHNIrae6lsuFAfXsaCpWsw==","signatures":[{"sig":"MEUCICRNEXTPtoilvEE+pFKd2VXrEoh8KdwOf0pxEjjc0JrQAiEAoEXDLHHCqEntG1YeN5tfwS8eBOaEFpNqeLt9EfCIWuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/omCRA9TVsSAnZWagAA7YgP/3BEaknLLmwqux5lF7Cp\ngntBI9DL4Le0nxAdxH2UvetPvuF5PFx/PWMC6ZAB/Pwaa+p0ddflVobcyxj1\n3bWyGx715izjdb93mNPsPh1odPN/9hyUnTudr5SwpqAvIiJkqrXegSb/sIoa\nN+iWPrFadGTyds/qfxrDO51aHUC8abL1LNOgQmDE8EjU2GD/jEsNwY1D7GL9\nQ8kqcv34HgEnkB8boNSIE+KfKJ+dp5v1fq0qXtStCv9i6UGfj/YpArjCvpam\nOJTKX1rAI0LyMlmGxLa7e3tPekp7ibrknPEhFUKaizphS9m9eqAPuE4AyWgS\n2lP91VOJyN109AxUnKzbMKQ0ExXULbPmv7Ir3nxJwBvr/EXBHGR5Pq8cNN3t\nFFcz+YCBXOH1cyxWXiXU8NeNmBMj50jiz0pUDAaPk6AvEBFeHufsY2OOOOTD\nWXvbx/m0CsTitqg9jT+ielXNWa7+wyh63U0yXTER3YXvv1sgfibQfZnQCq//\nXQgeKfC8ZYGaaoh0vsIhPbcmRfX+B+wzLbOBMQxuD5rk3pRcZZwRRkkQ3Mip\nogWgU9d7DvudshMmnKThjC4opxrpC/88LZOWGwra5DZD0ppmFopV2w2LLUZq\nTujSOgg1e25iLH6r67bb9xtXffFmzlWYMLXhbbRlE/VtBJBOWVgDin6j5flA\nJd/1\r\n=SXVS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.1db5c9fc8.0_1583872550245_0.41737061822746857","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/theme","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.4971637f4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5e14429d786fb09a94efa28b2c031cf2b34a7b6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.4971637f4.0.tgz","fileCount":23,"integrity":"sha512-fxZZG/XGoQrD77MTmnOl7iGqvNLsRXOdfZkCGf/2Dv8t2BW+dUEggYWjy+sHmLmOrClk5lgdxpPzYLrKRHGWYQ==","signatures":[{"sig":"MEQCIEuvGEhRXUsR1A5wrFqm5/8jh39fh2LK+iWo7HmDF8wXAiAU4Zh1KgR2CMFeBhijdFkHmdyxD/Znu/rgcjKUGZOFew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBthCRA9TVsSAnZWagAAVzMP/2wAnnNAD/LP+48g+y02\nFwJI5ktnVTCAWolHIVZPzWsn6ghkauV+FMY8EwLaM/Aq4x5pKBJO3DrgL/D9\nmmKq6OuOAEDLZ4z6yN7yxXewO2/5z/bEbBz/w0uSf/MB8JjKiWQXZvtW1w1d\n+BzhUamcB8JN+1T3qXUGUGUsWpSeVe/RfGufcMfvHgnhBqwXEVXFKEI+xajB\n3rkBYivPAwq1v5cI5L/nSoEufGoOjRV169yN+iCbPiCuSRTShu1KlMEcO2t7\nRkf6TdEC9qTaR+q+UEFb/6d01lwcZR5wPMVEjveAeLCJlP9GhnPziI3Jdllm\ntwvP1oWxLK5p2WFoLRxRYTd5N/NoR96YXj8kGSb/bfH1W5uLtfRggkyURyHg\n09u91L3D5FbulqyrFx26jgzXDe9PueshoF0YQAncMAuBpO+hT51pSm6ZxUTT\nEZEC46/4vSpaj0NM9sRemK3sSjK9QOLtsSK/0ViviFX6GtxitaV6dyeHesVt\n/o4WvzyokjpNez/bEx4am1dLPPFdAPMSorow89bSUT0ttUU+Yc16ZRAS7+qQ\nusaRsyU1vi2SlCZF+yYnZqre4tqRHSxjMfLHGOGSQWFVnaYAv3K4HfQZB+8m\n7F1xYBtKXijk3vO9Az+N08zUniICEk7QEJQv5azw5UDf8YXh41dJVtS62jfq\n3N7o\r\n=WkvM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.4971637f4.0_1583881057235_0.24392557317711705","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/theme","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2c1ea02c01b577a81251fffd4edd1dc5694cf2b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.1ae8130ce.0.tgz","fileCount":23,"integrity":"sha512-opDSljnrA67WJENOH63K1RLArmg4QBuPZzd/Uc0wrIZHjbfQj6XRfHYVYTIkEtIKZ0cgCj7bDeYJj9LMLTDNAg==","signatures":[{"sig":"MEUCIQC4tDzk7L9LWiySY8WIFZvamjPpLsFW95YYmasWdP0QdgIgKgxeQYktbJJBHhia1JcQs0tfK0+2wLDYpJOYmjVdYVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB0XCRA9TVsSAnZWagAAlhAP/2vNHP8ryarwR17vKg8x\n5HjL4ietjlxvAabIbtFqvPrXNiZndYWdHt9IqnaafP9Z2kTsYT+W2p4U2FKo\nGCz9SmiLb5pvrSUQdPGzfBkPhC/AQrTk6LgsFzY9/GfzHWUwiNhkd6lTPXuY\nFmZXWETbOb92ezfKQmJD/4dKuJ4njdBMAQML+WejrWCyglVC0GKNdqeOBK7x\nBMtFEkcyAmCknZZqV0oy3UH6MT0IQYSndhLjOwty0cnskW91rjXGIL8kewF3\np3JVCci4vTrZ9UrWNcSknJ/bApafL3Z/jMt3DRgdaiMooJ1ZUOO2aFC9oKAq\nP7OxU9rTOEt1E+Mc66On5nLEKAwzvPdjUT8WUtvKaVScz7x2NWCKF8XGt5W6\n/BVQZbUO68gGPovD0KbDyQkWOV7lk/rKOu472kLtw3IqgB5uywFv/xbb6OYi\nysZ0KOggZ/aGdwDVN11OVxE5OFnQSAdtSYZFmT+raST9BVmHw6nJrn2+BRLd\nyv0Ha7f+v0XSf0WthI80oK1RIt9WqQ2cZBZGTtN47u1qlUKWothozApexzYP\n/shfLVouFQpadMqpYWFHSdS0os9+J+w8JrWLu6wVsLrQqD1866wtmLlmuApU\n2bE3yczn4SxN3mjWSGjjfTh9qWz8ZU9VCS8G8V0M5ZVUJkkxujGKTIPZIIz/\nIW4m\r\n=ZZ/1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.1ae8130ce.0_1583881495246_0.8457310112321961","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/theme","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.8639c2690.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c25bf1b5f3a8cc925db54dc7d47ab3525a455954","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.8639c2690.0.tgz","fileCount":23,"integrity":"sha512-LZ+BoWzkmvNjyKNAdElfVs62aNyQ3ELXfiaNmHtdZGwFRGQS3eCM2ufAXuznMMrA831GQJAQxD+d/14mKW6j4Q==","signatures":[{"sig":"MEYCIQCwPYkC/oYypikRDXOhga2QLq4h4NkjfzWSdEazBT2nQwIhAMtAvYmfc7KqwPwwBN0FRXs3MhpTYOWvds9faHglio3H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIYLCRA9TVsSAnZWagAAinIQAJPzKxT5MOaPVFCSKoTo\npqKzQ4nM0bDghdX132fwBwWwcfqnbD+dn2hVh1woEUfI4hZu6BmGbQcO94CJ\njgtN2VTrbECKd/m3BNlOfdCaCaavqKFwQhoBUU6vfDuIK2XqUj5Fe9z/wh5S\ngHDpckbIoZSpM8CbGR/+lR2io5hFXDruRSQqYgomXZNtkpxbS67hZEhCCCaQ\n7IfiSkQfMwKAMgPHoux9/xjfXoNXFY1jlTaT73MOkIlwA7IsvwvBBaNgDzD4\n4JQc7NmdW82PEIk41SjelDBxpNHvAdH8aWT+pZZ2DQarArI32YzGZdD+fHH5\nP+azI8WyQ6T/jsynTiBY7AvU2iGh2zPJBXTFne1KJ3owYS3MEP1JOV2nXsTU\noJf80yc0ibYRJWN3tiuVgZ0HOENaIaCo2dA5bW2+wj4Q2CP26e/ytdPIZV5l\niGA6ocETv31tKOarN9AAGFoYTTu+QcfLq3+8gxTj0sbpJUpWwmCc8Yy65M+q\n3g+MMzmbEKegQr7kNmQgf/3zESKwt5BfmvjuY8UnfLwN3AIzU5iB4I/dSNmS\n3SGGAHpW5R6ivarec64+2jHMliiKqZG+HYH5RpsyhPNnhGVWilNfqBwt/imv\nhI54yJZSMZdt8LOdJqNoRjKri2xuo7iqziM0TYaMheSNSocaSJ/zu3YLl/IO\nZUiL\r\n=d0pG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.8639c2690.0_1583908362996_0.013604537494662061","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/theme","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.d5808057f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1757960b4f73ab36feef4b5eaaaa47b6b81ae8c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.d5808057f.0.tgz","fileCount":23,"integrity":"sha512-JPC/RwQbwfJt44ieGe0b6qZPPNZj67hsylIFp7+gdmTe5DUCU4WsFvtUmaV/+XABk5/lf41w1aXvoEzmQDqvKg==","signatures":[{"sig":"MEYCIQCUy9nVdRcFe1hNODnBwfRgnSW+6nH8BbjjkvebdVJN7AIhANogKr07n+LdBEaMIahNVslvpPZ1avOnxToTCgnJMRLy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRDdCRA9TVsSAnZWagAAZosP/01oOp+Z+Jln0DoToJrT\nXkUlE8yn3Ch1P2rIu5H5qVJ9PriAn4WJvLmWImnQ97UF0QUrBew14GVHhdbR\nQ2sug6EzWanHezKESagcv+58SXEMfamRLEGDfPTjtLOfRX7a20jFcSOWOMWw\nItlo1CirPFoNqAeRpBryLjerrIsw6JdEljVgIxWwgsp3qyZlw2zAe/bb6k02\nz8xSS4ngN9HnwANdYjpiAK9dpT0MkOf7ZMkC5vF/hZmwCyOhMPtoRzZEgYaq\nOGOzj/Jx5IPoqUOGWFLpqPnHFWuXEnCK0qnlW8pX5iLx+JUQzr1UVuDL4x4+\nsjgjPLyWvRrdtatJzKnitFBmofvyeUWu51QhNCH4Wc1vAP30+heV64SnetK3\n2oHhHgA4TuyWHqAhrn7rVAW0jVw8Rn1sej7Hqab1SR7GYgIqwtM8vHVpCT5d\nH3DLYeG+35cmduHIe5MVAH+ymSVwP1/9S3vu/5N+JfyTMbfmhPzex0UjSI0S\nJ9mda/eCJZj/TAmMjLOvWKMnvdF2tLFn4VEj7hgmldrpq/DmBVin1gbiVcLI\nCpXNS7wS4UvdVaFm4YaN44s9F85at8Wxe8ZKcEKmYm91cZjLQbrvZJxOIA0S\nMhbmUX3nE1Iwbcngr5304ENCSrsRx8ePBcux0rQ/UxuVUQZYmSrj+PGf+aQT\neDuK\r\n=QyQ7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.d5808057f.0_1583943901213_0.7156511187539945","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/theme","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba6ae684c4b09a4c9f4e6a4cbcd191457b3fb34c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.b3f58203d.0.tgz","fileCount":23,"integrity":"sha512-swEttkglmltimYvNOyngpAnfcTUSfCNQHXieyuwo/bwUPmGZvCZGrJ24QoAm0rM1jykGg9PNpn8m8ALUtyXy5w==","signatures":[{"sig":"MEQCIFX0dRRtpAGKjlxBpw4yJDfKKdHHC/MqIgeAs7qtGmCuAiBdwTIxCmVLhtlChFkQi63xnlSSuJAqD5zAVG/EHiSfIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT35CRA9TVsSAnZWagAAwZgP/A4eBXE9mxWW4bj4PjRQ\nPL4QD+rbhQWBfSx7EsKe0aEA+JZiPzxP1QX3urNan6BSow5JR/0oO98ZpbEq\nkyxp0dEzHC+ObwA7ekNraIuJjdflqtdl6ZF0//pa1269/NornGn+2wDY49QV\nE4JWCZzDd4MA5WGkV7bxWsJHfuUyW9RR/rQb6OafguyIsiBDhmVgKbcZ2uD/\nZoFyYz7flEiogwwnJZFJ1EAHAIHsxoY/UAdT/0Mq9y+qoAuTlZ80iNEU92jv\nJsLljWwZhH127xmNho/A85iU/ZycVYdDpkERQpOpnSREjBb3L7PH0YVs2D3d\nmsjQ7H1CSnfW25Yd9wwPshfY2IyLPisEqn2DhJTrdAQmsrPAANN7KYENDr+S\nI9fCKJGhkym8RdbDbaP8AfEUROBPsS7wZQYC7wM1t4IxvLw5c1MDiaJZyXds\nm6+UhjOz840E2fgvOuQlwV07hJEYyL3fsx9qXh8Mx6ZGab+feVnumfp0SPs4\nJobkVLDF402MAqWPKtq60bkIaYSOobFpn51TJDUYaDgH/gkN2htRtbTFDGwV\nZNpNUkzPov/sbcP6eES552mUSPvuGv05wTYZIKcR9PYabXAEE3mMMv+o55hl\npYo+1DJwTCXLqZqYOe5aV9iCdtHVbBKmOGHQH4lryFWx8fB72ZUWa8FPu1xE\n9g52\r\n=C3En\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.b3f58203d.0_1583955448630_0.37633547305365855","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/theme","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.bec065920.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f893f9565e9c074b69c866be1f706b300cd666e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.bec065920.0.tgz","fileCount":23,"integrity":"sha512-C3WK+LsT8qBs0X5Qn9AM3mnRzL8fR2Zof1eYdOroL3goFYz5IAehbZgWhx/kXOXjJf3kWmVZ8ZC2o7Pj0p+CYg==","signatures":[{"sig":"MEUCIQDoqZz+DFOpwQXbPHNqf9WC/7j4CJHR5+9IM9PkvtkSqwIgOJW91kJkSxMfHfkhnkg/XHVwoA6SUkSn+TRDJaImNzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapldCRA9TVsSAnZWagAAreUP/2NvYA7+TtCZ+Jo6TmvP\njJpv9Vk9ZRVnpPPTACSBN3vLXB31ziaOF1SR5qOvwdeo7p1PzlXpd6qnAk2a\nnoQS2lwgDfO7NlbjD+QKkjgq1yAz0dB+iiqTSvBQi1azcKjoEPPCsVlOkb5/\nevr9lLj8RrRJjgTM5Ix6wtTUmtnkq4yJWVnSXmX0xCd1HSjg9OXtbhnVj6Nk\nza15sHqo3ZKGmpGkkXqcLvVLignWCmksqEyMNW2gBwW8GAR3v19vyWtdlPeD\ncFD1V8dVNmaTNWxoBUfy+IeOTXMFSVRANmqFEWpGX/pxVaICJHpouGmftQRl\nmrre3YvjcD851WZAi6iq7zEHuJJPfMfWsy0nnvzqFJ7R6N9bYN9FAIrWKgBA\nci39GkLC1ZuDkR1Dxy7yT7EOSSu/P/w3Z7xN+tM0U4b0A79MhS0IyX0X7V+j\nM5LoagKFNNVIf7/mdFwWTPoNf5zcP5PKPSPluat0VDcwXVpQv+hSc0u1dAm4\nbDRI1/AO657L8wgmIkLbbZYGUyLcDkEPfH4u/Nc8Ec4Ae0De3UThkTUx+tl7\ngDvCTuQ+VDlzIVl6J4lZldXTIs82pCFZw0MUSBE2B5RYAqMvKmQeIJPieRfl\nygVnAboc385ErrrrApWop4PHgIugwnYLsU6gwRhe52kj60VLX6gwZWXDzVLQ\n5w37\r\n=udS8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.bec065920.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.bec065920.0_1584044381378_0.6941748404568828","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/theme","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.776291ef0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"493c7419ed6b850b441a27b8e17ddf443689edff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.776291ef0.0.tgz","fileCount":23,"integrity":"sha512-g/agR7s43IdJxlgsLTmBOWPpDFLqR8rqqhcz3ZfXX1I8RsXS+d6rDAdeUUUNJLqtPV7cvul0LJ9v2U8+Vhwlcw==","signatures":[{"sig":"MEYCIQCrgExJLpPXWu6jUYOZvOaTHk6BAARDoCATz9JfWRReowIhAJccVH+cPi98N7RwkbZBEI0Jm0eV2RFVQN9lSfsvPUet","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSLpCRA9TVsSAnZWagAARDgQAIU3PkWUpKf4XsCCQb1Q\nGsLUPKT+A8RhzPJ0GYGTXBgEgFiYf16WXTKe73y0ZCuhMAnCQM3cuMLvXNa2\nrDXbSH1Y94283+CJ6jHR39X5bFC0L32btoJFYhjex/QpNvz69jBfUJxRbSlP\nklGFVv7My46xZfk8wRX1GkigYlgOgrGgD0v0qhFmG/jvilj4eM/WckWJLp1k\nTHya0wqvn0P8QUeWWOtWYKRBSSZJoGIPiarmE9cGR3ReB1G4MchtokuOQ8k1\nlqAMGjY1DNsZNbYvAkN/Lg6p37SAoO2BnydIBWBe/4SJCkPMNIaToNOgf8UW\n0qbWS4hHhMtUa1anKo7PQO5CypFNUiZCdu9mX+5M0I7NPkVDE3nW4zVSzUkB\n02TMoSLtJMikdaVHeGOEa4eJwXMLUg0SIKjuOrajc9obBzisw0cNcwMSFu2B\ni3yMoINCS5SUyp51zPHsfUeYFYEWwRWh9RBnaa4Z1cIaDprclRn1vSchg+IA\nBsaLlwEylrSVc/ZF7DKr2Z3sMrO2vGcFOln8jyiUbaguXt8wKmqOIo3aafAn\n+PfXghboRFpvMPH00Y64eUuey484G2qp40Fa6TUpxP93Az7KTRNo/HthfvKS\n+zdrairRSOMPKeIVsEWGOIYzHkTZ9VuUbfv8vtVYlQOhIwn8OQ9v2wvS0An+\ncXrO\r\n=yT1c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.776291ef0.0_1584472808620_0.6706387325736534","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/theme","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b2f6756f7d05a3883850838ab79e3aaabfc81b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.ece19f3dd.0.tgz","fileCount":23,"integrity":"sha512-I02H+OaPe4/IBZh9+4JkRrZXLx6wMoITycplsVQkvSoVWjsuvTZt8jeZ5Ufxx6yH5vxKf64hREjJ5syeCg0Wkg==","signatures":[{"sig":"MEQCIHJ8M6hSbMJ5xhwkyvFoUeVjAO//RiI/E72VVeQxLwQtAiALCLThhcSFwQX2MPfLCSLh2jG3Mkfi9RNp+z0DSWzVsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUiPCRA9TVsSAnZWagAAof0P/1jsPp9S+icM623bQgxZ\nl9mLaGBlhyXOF7ZOc36nbFBWr6b9rc+xsI4/8iom56OtGDbBp6rulvL8O2pq\n7CV/Pp8o3AP8kjad+K17GknILNNRXZUj44HfltVzxJL/pFgju1CVu4hp+esl\nfcDkmcbCQuR9VUGq9Kx4E4SvAVcAAJc9Qy3ZD3U71CI6AMda7Lbzic2HvM2+\nr6pGG+jkXeSIS8O7uFMQ9QJvO7kyZAo+UvAzzcQltWmXapW1c3dwHfHS53Qa\nZgM7zyyOX+YN3GY+pZFg4pi5l4vBf0EgffbSJZssfJuRpKDIg/RQv9mEZ4g2\nt9+jWrGrJmYcIF7zD8Q4hlCayfwezBAByln6YGJTWIZ3zobIMZs0D6KN9PoJ\n8PWZNGgXR9i1OsFZwqN+Mi/E7WINuvTgmLtFEVim9b0Jkoq+IzQ/yLL2QZCs\nQfTdT2E9+376DAyXfK8eJEDcl1jFQCF5q6V+DdWip4j5Dg8+RGug30YAbMP/\nzCySSE7k8b3SilPrJxIwwytMxTjzCRGav9PQTSIhXp6DjoxV0zIwnypwKrQN\n+cLLN9+pMrtKSoVD3vpHF9RKs4wE1cj1AjYkDG8lhgv3vOTRAg464qj2CW87\nuiJsq+B3uQmLgS6rL2TnVeKjW2JhskOPuypocZelqdw34sgj3kSOQjFOdl6y\nAyA5\r\n=v+zQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.ece19f3dd.0_1584482446761_0.8049633666510367","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/theme","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47c5834806fb9359f98338aed4d232f8dabd1aff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.4dc45af6c.0.tgz","fileCount":23,"integrity":"sha512-HoBlxug4SIwrCDZL02QVNsMf43ZHk8+f1EFzwj1+mjazVD/AGkcnizg/DT2Ncsgf5+rCsuzaJgvPjRvLQyPgqw==","signatures":[{"sig":"MEYCIQDra2tkOOdUc96j2IYjJLWapjf5rZl3/bMTd6CDo6dR7AIhAP8gQt3na1Mu1EhePxvoGCFBLY2tKpfjXSmAg6EwrcvV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX2xCRA9TVsSAnZWagAAJdoP/1dZkXWU/TE+u+umFTns\nVXXjBccxQxLnZW35mxxAskMdD0Kzb+KJXMIge4gg/0xIYixHyLHmMYi+QLzN\nnmSmsMoc5NpiuUdNHy1JgR3lKGzNFJLhmmtnFUyuQLbzDsZLei+4TyMLw/b5\nMsUXydkhV+6dnOlAlzi7xsi52Sza+tS1j0AiEWxR06Xq2qaPJg9dX8AHNMT0\nZDapm86kEDFsOWgAu5SF1XbG+K6ZinxhOZdoooerSGZLWMDP8ugpLuqxOVhn\nMpMM6e038fF7oHjwaihH4Z1luXL8Adcmb4FXJTwExQSxyurtJH7GniFuam5K\ncMYxamFpE/3qeG7Nt4SHC6maS38I5Cs6/8x3R96sJ+QbkyQBNfQtDz0mEGVU\nT48trl9i5/kJPEKf5d5ZMGDCWt2KHbCGVzKsPO0gTX+vYqvVZCxGMYDIKxGc\nRe3legVVWbtuAXrqZIum72+ok7VecdoZB9E4AIZtLadZMBoU2VcHv4SXJ+gu\nAetJXgfcg0HlYldRsLcn+YxiDyVtifB5EdypdnLRkVaY7N5Av9a0+P1V286N\n3FmO4HciF1czwL4eW7eNygo/p+9ObqUlTi5qO4Z+9l7jnfO+Kud6NcVMRRhr\n0GzwvHNwk6dskgmlInWM9jobVA7Mh4IOxu/vamaPekLKDvWBdDYqFWsLY4vg\njAM0\r\n=FTyF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.4dc45af6c.0_1584496048257_0.32093542939479214","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/theme","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b4fb8efc22472160e9f8814274c92a536d767fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.6b48781bf.0.tgz","fileCount":23,"integrity":"sha512-dvgJtVdZ9jOPI0aJAF5vmTDtuogo4+Hb6U/UYnSFhE8D+17LY/7pjRsiD28MveDvtj6fCW9BmEueanm2TRT0dQ==","signatures":[{"sig":"MEYCIQDgYLtXlal+BEsC2wefkqpAkRA9KNmqIO7g7UrOz7gOPQIhAOqS29asAk5HRlLG//HBSCwmdPtiVank0ce+ez/Z4WPj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj93CRA9TVsSAnZWagAAaNAQAIngU8KHPQdrODC9oKpk\nDdYWMIV4/4bCOIdaaSsi4b17XC76HwI2GaOoryWBj9pI5LyKprQDl0Jfy0HD\n1uZZXeEW2k5SRKf4tAoVAwrUdtsNuq7kju34xoIMgrCS3LP2FbGXkvw+87Li\n288gOitWY5yHrqltFfQP2m8ZTIlSUZQ8h0ZjOS94fsUndl7E93/O2m5A0Hhb\n6ob+VBnVPrK5qjp5LYJpxIZUvKWZP9s8pZ5GC2zrWP4B7FQPl5mWZDAsLw0e\npnW+e4K1/FksySQi4la9rk3eOW+3AO/BgzGtsfjjshFxdSuOqMiLxgf0/rkG\nIxUEs/O/3yNb1FZfXKpYxxzVZ8f0vggSHLYJTWsH8+iVhv1fT726RqdRERSa\nFlaNuJp3YT4aZfluhQWNjDEHqs6NEjCWTQnauHOK7eJMCFHEjeMv99FvA4XT\nxMNpV74LokVJLtBC2IIXlVx1hHWphjMOKFSuKIVtvWMVDkpa/DPCRbdJz9O0\nMcRVyR2tDdAFScqzprY+fad7WWb6vi2ZAT1TsltReg0M76LYH8Lb2BOOYZsj\nksQoNWbybCOOrtV4gQvrOMrgfm+ULZlnVr4VQz5yvdZCy2VFN3nMRAIt1oEI\n0XjkYfw+gh4dBLs9KiuYwoJEhpKCsSfIgIQh0w6g1K7dxgkmOReeL1UKpBBf\nPklm\r\n=3tsJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.6b48781bf.0_1584545654891_0.3532782063817572","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/theme","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38a4959835030aaeca773c549b47d40f51a8bf71","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":23,"integrity":"sha512-wZEW8wWtIwYxLWEaPvodYyz8X5NWUx9V6LS2Vr2QxsfC/lESWo3dUOgwYnF9Dtemk9BcbfvPsG/x6Nq7RgubrQ==","signatures":[{"sig":"MEUCIAyTZH72w+KmOfsQoyspR09Vo698cQbMzz3M6tUciL8hAiEAvZZPTD4F2I4E85nJTEEta4aBQWSPHdBVyfnTnLGFpgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec61dCRA9TVsSAnZWagAAnqgP/2U+Y/PXoiSbco8tTjE/\nWUSa6Fh5/7sPKkTQfE5w1QkRQB8IH0gf5BkYDQPDHlp3dpumJCMTtuHv97zG\nO8OIvjakwMTqvJ1/WmxjxTgTXUy1nNl+oSGuJg0Bw6/4rJ8oD7X+JkTYH3cj\n/UkeoO9WmMaRLfhLKNCKrvOi2iMbE47rxpAYH7gjC3R++Z1xBTX+gQ12+c5K\nt/JGgCPDPR1ztoRoO+xn3Wwkg/hVduRnBZmPysURejgiW1pv+BSAQAkvYsoY\n50dyBxsoiA8XRqqMkrYkRhtwAFNxyczQ/ylrccRDt0MzsYk8YcYC9eTEerUk\nYpPFBRVPsIYzgypJHe4YFiE8aQ8BbKVYtzFsydiHa0MVUChxko4/1SId4gWC\nQBoCIhzWYIHf15SCYfzOmUAD/yRAQMybf8Ea/PPitWLDiTQyt+/N2VMDysjv\nA35RXXfE5Fga9cLlXh+6vgU4lAfGlbEDoDbX9FbTl4rco0CUA9UUja1SML0N\niFut8gjahCfeYEisa4drr3Uz0+AyYn8IqIztGAI7+nTwdSgOLGjYad8ra36e\nAtRAWCGvnhD51xBp09/JKtKY/NjtVFjktanMRazA11fVPXd0a4bp2eSVxqPG\nLFHCrOFJv+gZGKi/l+5bk/yB6JE9y6V2HlSe/xfSgVrvmfmvd4xKYN3Vvabs\no9Ak\r\n=GzAh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.a88c8e4dc.0_1584639324553_0.33526302175277767","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/theme","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.cafe18860.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf1872e953eab91cc423842cd4a041cad82459fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.cafe18860.0.tgz","fileCount":23,"integrity":"sha512-yFFd/JfPGPL0fVTLcwpJUqwSpDowoHMhQZs8zYEEZs5Z9aklT43+/gs5ZFK+HdnHnZrvyTI84m64aBsNXMXNhg==","signatures":[{"sig":"MEUCIQDc1hTZtMUoMrjGI/BxSCeTBBuXmliynNpb8AL4avoXJgIgMvGe/ciD2mMZvlLq+yKLmiBlP50lXRDNhjIxkxlgjto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNjOCRA9TVsSAnZWagAA65oP/Av31dWVBnsj+fBYjP5Y\nhnk3S7v+9O7WyI2ox/Z3mTEmbwQ76rWBFZswgNUNKKiv2xjYPphftoRBCbll\npTUC/MrJzjDHx374h9hvLz59D6TJT2nCFguBNkrH6VEQpIP34k/vlnGDp1qo\n7wYCtW37+SCohL3xQKpHUXmOcUPKe8QqcgbH6zf5rGtg0USzqsMKUDMGNvP7\ntMCiulMP7dDs+msTk09L9weWD8Wi8Bl01PnnYkLQID1xgRskisNL6sGb1Q+U\ntqv/iiKM1Yr7K2IV8HdXrjXVoza4wB01ywCrVkl1t6L8axXLXvX+dREhI4Og\nLsDk3libk/XKZaHKulz1DFEuk9aO+W8dIy0kTfEuMlIrUZ1p9lnrh+3+4aBy\nEZMTXDLUphBwiJYoTN2SVjCqOVuaVkwj4M8BNJrEC+ywcC5aeQ/8vX/bfv4t\nCM1GJc7Ut2UqAl86xzspqJcjxr/j5D2cEoYnS9QRM3hTlcC3KWwixrlSTgv9\n/ScnyhZcnkfqnBNsObgEPFTBN1o3dFOcCEX+Kf0Vt8Z7cRsdeTHTrsieNq3l\ngFPqiMzLMvno5cFO65iIs1Rw8j15XggZfS7Yibzi0/lvMhFEEP+l/+aTNy9j\np2Ezpfimzf6OTXlst594fwVFfxHhYKZI8ACW4RGDYUP/ImAanOJCxuORiQ5p\nqL6j\r\n=QoCe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.cafe18860.0_1584715981677_0.528175414248705","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/theme","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"242cc02cccd0b227eea1c73761053ed40e5e173e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.35a32aaea.0.tgz","fileCount":23,"integrity":"sha512-DXz4aBBWiI4F9R/LA2/SlP/faX7gQboPE4zMqHUFRX8pRotMRUwPUFMPDsNI4wUcHRTvL5TtN1CRT/BvEXFoTQ==","signatures":[{"sig":"MEYCIQC0/9BECvyl5o93Rx5iCbsH+NAesIjeu84UPhqbdthM/QIhAKYRiTW/rHjfwO0HyeWXqwqekOBWOwlsW0tTjDoCbhiY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSBqCRA9TVsSAnZWagAA+nYQAIg2TOYtRqI23eZJADYQ\nTW6ZIIRE9Lr7HLQTA/zDdm3lhBiN9WcYorWWtrqqGUZK4UUFsE/KTLouRjSu\n3wc6j2dvcKBAGFocChYhvfgWAiMmvDAnqi2ReDZhL6vzbQBR6R6FKQba1W/V\n6p2aFTODGsXhVRzPooKkt6Zx3DX2H9sXuhZA5LiFkLBC3e7Uaj6lWPfGKVSI\nIN1np6BlICZG22Xdx6MpqWFmX3Djbv2cT/WmeK5Vfkt1IRrPr2nL6gn41Phj\n+7xNH7l0jQH+xqdaUBppk2x0+J5fa8Sw25ZWnh5HYRbd9Tp/x9kNosoBS91Y\njW40z0HkpaJf6A/1Renxfq6L8t6yO66UH3R8LKS+XTMIQuSOST4c1tux+jy+\nfq7APBe/XgvOljt2TXdrOZnlRiAb/I/g61qI8v20VA4dvnyl3UQubYWqwpys\nTUNt8WJx1ypPzo7KYx8kKvn6h/pjyqZzQJxwGDuEI1yzMZfuxvyOlKseLZRg\nBFG5zCq0QkgQJqWQs6K8CTfh6CvU35sfI4KjgwaD2I9Q+9f5xo2ltLgLQqeJ\nSyrgKwlSfO1s3wFwtmtYEAOzsW1waCrAfzUdCfGiUtt6UX/lCr8fO7FkhxqS\nUqdNwNes5uJSrsmJQ5jPGAebiZJ15uOiUxTdWR4zCrf36VadVVBDlTc0T2zr\n1ZHz\r\n=5FB/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.35a32aaea.0_1584734314332_0.9397745153939159","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/theme","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.e75deb854.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"189a774096bc3b43e2ffda189dd50e3294a20537","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.e75deb854.0.tgz","fileCount":23,"integrity":"sha512-yjWmXbZ6kd7Dxab70MLQezuvJxZIqIzBmrlrMYoS9AE7yk4IoLwAoF/afBhWlfNNY7LEsuqdWKLUQu1LRJli5g==","signatures":[{"sig":"MEYCIQCJ37CZcZf9ezjR/MMOCdc6320y5IY9D4ky26oyMmGx4wIhAL54H+KtKOk2MgwWBbun2PK4dmOh5ej3Lt1B47X9RdxJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUBOCRA9TVsSAnZWagAAGXQP/i2zNRP9aRCdJGbjUtfm\nc20i6UQkGRxFHaEA6PVjJUG6dJKY1yho10Xhgt9x8gDnz7SF0YiN8Xc47dkJ\nA8xIGyvJZlBMmB5FKdw3mZcoKko6ibQb5lojPQt1gFBg6Ma2GxUC+iWrjVus\nKZCYgJVtIb13rmxU1npBBvB6PJB+uOuWG0/vyog+hCD+mE2gahC8yvhcwD7Y\nNu4+8SAEgDawUVQqJRjMYQuVuNb59IFi0XG2Nz0h/zIIDr/hmp4RclE31exp\ncFOFgqJxi6Gmard1caADmtaeRrz1tJ7es3rQmlKKoCSl7PY5vtyKhIbbt3oE\noZfovXCiReZhrLqHNePS2GEnw84q0We8w9XALaCPiVQcUCUDnjBdpc6yponn\ng0RiUxRXl04ldLOPoWxWUpgiSCaObbjn/J/bD/glowMJbccHWGS6FYOndsiC\n8JYjzAQbEvPbfq1Pe92JCtOCHjfudvd/O7aYmUe7ECMzycj8t28gBPdGEqPY\n1UnLJEUQlvTg44Bygui9O7YtC6Pw+UJBzCJsQjgUNiJwMfDelcsAkTqTefW8\nOUf0UaUNuxmwFXP7UDNyfijebmEo6qu6B9dr438liBTvpcBXn2mhEIq9pmnl\n+yDnPUagSFp5XTvbQALph2L1AQgTKfBgS7waWgspXKWBcwRWPi0B6ae1OlCH\nfcjT\r\n=zsDT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.e75deb854.0_1584742477489_0.5874873468295714","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/theme","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33e551eadfc3e719979b9e2b59d7debdba296fac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.2cc6966f6.0.tgz","fileCount":23,"integrity":"sha512-XLIU8DN17cXFXXgxRtcUrdFeaMzJROjcG2UQH6wXhiSI2jAxYfEuwsMrnD5M2Hc4fEwmvQnhXWFBWOup9sxIxQ==","signatures":[{"sig":"MEUCIHAKBHLZkEMCTuLL6f7yM2U1Ajih5Kd5WaKjxUuTsaomAiEAye4auycqAulyh/K0sOb5QXjHEaIHUP7Qa/DTwFmSu4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelSwCRA9TVsSAnZWagAANk8P/RJ8rKepnQOE4WoNtzb0\n7CZPVRWrCZ4xM0sU92kWPue9f72FHGCMadjrBlncURViYFb5tW9CtuPJcdux\nbapvgP5udi6yF8juhLz+M/qCV7iJKfill29Jjf4WgnZ9mH3fFDq/95PBJoLv\nYHLwPBu4LB2/iZc8sNFWGkYfnJEKI9iRGkIUYeOXkOnyjC6Y702Kd/EOpx2U\nt2ii/cs2D8AvbS8nUflKt2DGGtVdf7Ch4vpXLy2ldlrOhBo4X5Gf7jyp/2nG\ncwXsUyNPHqwMrJRRS+jj2JTj0qFOZI80iDpQDEyVRiBtd1esOZ63ssK/Vt0n\n1OJyBnDO6OjGdcEI7ZuvPNUC58+zXIhQblx/R3VD0H/7IFaRONq4qkFgARIE\nRuaF+ZHoj9myTNWW2kAWQIGYwoFeFwWvU6m3TbK9Pne9cIDFC54F15pOfs0g\nc+YSeT9mdvJE630ubP6MIZZurcAI6c4r40hX9+3yBIKCgYL8dbMgBsZCtdOI\nBJ1W1gVwtwzbSLdW78CYFauJmZEEu0xyT82YSP4cZTMJQ3Qas6FQX1ze6PAx\no2tiyqsOSz6gE6kchMq7Nx5KjwoSp2qw+HsYCSlq1JouReHZQxOwDRNpgdC3\n9Jytei7hTSNfm5dtJExiokuwoYRLC/pmIPO49xu9hTPtWopBDbjCusXdMcBo\nZ+bf\r\n=0QOB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.2cc6966f6.0_1585075376162_0.3167931834186122","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/theme","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.8707953b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f36fec901a97ffe33e0cbc63e5733bfb2a3462a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.8707953b6.0.tgz","fileCount":23,"integrity":"sha512-+cdjFF1u0O8EOcdYub6khZhfseywbQyiAocvrJAUWjkJUkomHilDNMGyeipCRxfVKwZM9bDXFc0xWZMHkEtauQ==","signatures":[{"sig":"MEUCIQDZUs2b4mciG6PB5lkTCfIVBK0s97NfwpggtP/LlwMGBwIgcrolLuWmhYiWI14H0mX1m4+3douIfr5PW66Hd2k2ODo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelWOCRA9TVsSAnZWagAA/FUP/3Llg+MursInPOFNZkOG\n16XAaU2jWyvuOR0JrG7GavvsD+QVz9KfXI7K8fbShl6l9fR1GR4QwWOjp7Va\nQUgAkdy06tFAWcXQk4hd3EBgO0k+7U6RiUmqhYQNs6CjQlA8GS/kQdGZHbis\nL0ia2AqMQi3Bweebw4ejOJwMhWbZ/3rarv024a+qVPypI0eue9DZ5fUyPHX2\nxV5cbhj/JKvb8QRVUy7HvHTpW7JhUfEATC02rF6Y6Gks9PvnMAy+9QAJNnTf\nKmovGQc02RFsM2olJVISBzOlA0zWtfu45K3wIsDQayoUqsgPBfULZ5trvTqF\nQtScFerwpMvVUKhzeMgYfLiW809wPVQfOH8xBs/mMBfGZHIrK4EN/0uCmvUE\nwpL3cW6UlnxGw8nHaLqpEcCEfc0xlKMkWTaGax03G6Lgmf2QnKP7/XKf5cZX\n3Vgu79OqDhdP9oghTykiNn9f++4LKM3Rzr0aGZQTF6lMVEpcP1+ZPtmfYMEk\nY8ShGX8H3DhK8u51c+xgE3pWZVr3OimpPqwAQkaoJysL5mDqepw9poLK6+8q\noxI5E3K4mZN+JYoteB8SHgzUAGk8TN+POIo8wX4DQ6FLCwOiDIJjxME64Sd2\n46+cawPzC5NauWVsDl5xG4DrE7OSWvHNb5c3ndxYet8F3HCJoyalUuHns8WK\n7eGY\r\n=cXIc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.8707953b6.0_1585075597876_0.013989707379970184","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/theme","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65410f0492e502d42047f3b29de2cb6dc7764edf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.10af6cf39.0.tgz","fileCount":23,"integrity":"sha512-lEsAQ9NubrKMLXkfet/GVtFPlFIBjpq0B++RLs0olNkTuYa6tPhBgtuE6Kqq65HGlvrZBVFHJxOL/u9uxmqoAg==","signatures":[{"sig":"MEQCICB7c6k6UnGRqpsZ9u57Qyi1/oJO5ijzcu5z2ZPpa1UOAiA0mcqo301GMhkr1OQnWDbvXZmDwFt+BEgFeTtd7JmRcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6BRCRA9TVsSAnZWagAAezoP/jWDEXdg3vO/7rmIYJYL\nKskgS3o0dAC3MppNwbsyyvrdpPKOJyVbXBK37I5/3YEzemLXVsZjENcQLqzK\nrh0DJ45U8dX9NwdaJAJ5e+BBYgDniHQBxwd8g6+kk9uO4eaqBNSHWysWwTQt\nv5mksvQusK6KRsZk4Y4bqkbd7VKX9oGX9Om8TeiIs8ElU18aozThyX4r3XP0\nNhoH+zsN20UgeZdsLi3ucG92y21UCeK6EVJh3iKEHPhkMPAyGcuuPuvMmCON\nX3B5rTzOWibkrTfP81GGODtMyqs3lEIsoNZgBXXN8+OG84YGw1BoTcnFyK3i\nsmdzFH47+TpqpRmg9UTDWj+hQnwH/LKmnq/FBUT5uZgkFRIJofNr5iW9kZ5h\n9kIzbg9jtaA6tJFjzMuw7c4cAhFEVFphPfXyXrguOGxDAubnMKVtanfksPac\nP31CW522V9aXHtGmLD7AmJMcviIu3td011dKSgfbDPlnoBUQE34zGe9D+ztM\n5IHETTSI95I2gIvxzHJLyjtAGleSA/07zjWpwOxvoZW5LcOf0eE5CNb522HA\nME2k+pinSsA20C8dx2mNt6hAUD2ua1zd8hgnKHImSWPO7UBqxgDQL5y0U1e9\nhnz8tGmSAGNeEdONtrfZeDtJL3nAlE9ktErxOJ3zICvkbP7BeaEkLdUwpWPb\nZ8et\r\n=T2CD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.10af6cf39.0_1585160272919_0.14623442101875517","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/theme","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0408f8e5ed6ba15e389872fdb055532b950eac37","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":23,"integrity":"sha512-x+N+PP7+Y5JAF6Z9/tXZ2KxHvSLI5aZEPMNOa7ktMJhuoJtXiHrqlQzbwVceWaazhLwi4Y8QH+aWkoyJtT9UVw==","signatures":[{"sig":"MEYCIQDXu+1YHjfPgyLzbISMbz2w/McDhd8JIpWq/dKsmSAqIwIhANaxA6rO0Y6GyAb3Izb39aM90hNoLWbecnKlxLbaHl+q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkAlCRA9TVsSAnZWagAA35IP/2T5KSFIdCG6+vF+Bmr9\nNAMr7aQboUktx9K3sW9viGJrc/moQkpY4eUsQEkQS2K0zB0BQnpDEg20REYf\nkBNbpfTIw0PJ9IRkxTgtG5gmFPSIyAQ9MEsn+kNDGUqUZDPXIigrahP3eCGQ\n2gXrfoene2N+364Jiy+I/zPtxFkCIu7KTgHiC6Gnsi7kG+y4rj2D6ewEom6J\nZLozWvhV0Cx1DkOnoWUtJ79DZX5kG1N3wPns17vqh4DtWJTZzxdFaNuLQQq8\nen8JbQl3ESy+4wiDRQxilEKwSW/LO+C1ZGYv/TZ1QAAljl76D+9U1/Ds5DUO\nbReCXkAYqGKbxPXteufW3/6CO+yHmS7sN47oZ5bSJXL0hw4G04W2pMXcPWTX\nYfCk3XjhFfeyeIR7Ayj0hn8Zk3uoc9R/9v2Xcrhdw/gTeW3Gwm3GOxc8tToZ\n99y37TzZ4jI43wy16ImhpObz4bzwt41SQo049HcjMi8NPANcMwemsSRyQcrT\nEP/mqbKV6XKGRTEGGFeuqPY5juw62ec5OWjVmJ2QTSrnYmn2cmJhYXdzNahu\n3528MGrIWDwg+RpVR+sO57PfMMB2S9Pnq9lEdEKjqS4lE5emMU3OrYWqY5gP\nhOLszy1Px0Ah/Ya3MUbeZi5BgJWVRw1uYghmN8d8orvhomuTFve1/Gu67wuJ\nFbKZ\r\n=6oVY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.7d8f9c8d7.0_1585332260430_0.40066303324318686","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/theme","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2779552ed3115395ba64025dc87c2c7dcbd480d7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.d6315efe2.0.tgz","fileCount":23,"integrity":"sha512-5TUtrOIbGfIVcVWUmYYXC0CZ/Ffn03U5YuDQRVrn4ZEGFwnwR0lBpjezlN3xZpTk+w+1jE4ZwU9gjZ+dksQ+AA==","signatures":[{"sig":"MEQCIDjkB6XEMwFpEKda9xMsN+K0ZG6W5W1WmA40Dkir+Uv0AiBvCHIE0pvnR6ZsQy3Spw/1YLj8bPZULwXWiWk0oqgm/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpLCRA9TVsSAnZWagAAXdQP/A0MA1pZ4bppyw26517g\nGnv9YphmeovoLEOPIp3S07aG56yCjtsw1e4PqkDQCjZahgsxrE+kdSM9h3Rk\nOKb6PBElGVhCmkMb2IYRv8xZF55GczILAGqS+LmtEJUmx651/1uPbrkasQiL\n7exMameljndEiyDP5jiB9qdKzseWD+G1J42JPBAymXfZbueUwvCrulkSy1UB\ntl6MXzMzWBD9qJpXulD3g6OXiPEmTyeNz0dAhSnvNXLZx8qlxiHmYqJ2B22v\nr7jYMB28I4oKhQTgT/MOXPXk4+U0A8bPnuF3u2UIs+Zm4+zIolR/Yere3wI2\nsgw12SCy//BULhcj7lYomkFdjhg03+J5heJqBPekpbboPAyu4FdPJz3gu8ZE\no+6R/ZnEFlk6gF1Mk9yR1KNbVSR37BWs0z0/TQCzLznazYQBCt967m8f0W0Y\nb77c+yOR5qeSBmIkyaEfyw0ClpUeBRDJSgwsz0DA5mj9Uur2L1gY5NO4tEro\nuhkDvTuJerLOvgJawY+JDbPahJImMNHqPy+O4SJv7//eJICw6qg7tW9vGMym\nthXW1pSsgX+p3QAHuJjaXnUg60kmj6YAy7TGTEfJSlcBYFImVgcsEtZyA34X\nXXlbkcCq2I36pClLvA91FOrruRc3O4WPWtNvHg+2u1nZo/E1jJVX4C48AnyM\ny58a\r\n=rcmb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.d6315efe2.0_1585338954378_0.9329033914321252","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/theme","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.a3016368d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4110ec5008165809e0aa7066eee57c7590cbc5b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.a3016368d.0.tgz","fileCount":23,"integrity":"sha512-D7ZY7yaBMaFkk6rfdeEyENpOS85vvpDAkaEt6nd4VwuvOHb21Y3zUS3VRxko3UgXKL+tZA0vFDYctcaiurUsig==","signatures":[{"sig":"MEQCIHvf0RZp45beWSbxcTqpeD0AZLhaWkiasFs9VP770+T/AiBTcogJQC+DXM75on5YAtHD2iPoWYqasdmiG9HYkOuZQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3ICRA9TVsSAnZWagAA1acP/0XK/2WWEOViDHnwmzIJ\nGnFp4RjopUKh/Aqa+aHbJXz2enfNYv2RxlWiBee1L0VkOu8k99vAPu8akR9L\nuijmOf8blE4oVp6ondX9Jg7JOjE6yvQbmrshDkO09kk+NORzgYdYl6dQuO/g\nD4akwNCn8BgRxMVCArp8Fq78RL8AWFjjfeKSNZIfp8uwlXQrlpntzi1CnEqd\niyWfzzWxvZAlcYWM+A2bXn7Yi0dRcKOp28B/AVrIJ5+3x5XJV+jd1Le73CHi\nHKuN0mbbqi0acIO66YYhpv038zqVj/OusyZOQZGtIWIpwOkAI1S2KQP9U7Lp\ngU2aK8wCNX0/1/U0RyhoqhffB6+HFgcjPYvvNadFQVaBMy6P8l0EFwiWfeMg\nYqcMH0UMaUtQ61+v2V8WBY2CGQ8hanKv1nhqgivdCRC2HWCa56Vy6+2NLP7M\nm6jcqnf85zDzJMWE0vwsnI+9BtEK7UPrsBXpMCbiv4Yd88GOq+4qaas7O6fH\n5PyNEMtwNkugslrdzF/KbWF/YdH42dvtBvl6baNO/5YT8YCwciJU7OKE/FQH\nVA6UVkXOE7jUSOTL0zu1aKzpUvz9s8oei8w75Sg329PI0vXKVWWLZm3PW6gw\nJwD2BgBYF+xgps+bwhUSm7BIHDX3vN4NXnmgYrNwjbzoOwF5reYh5SNkLcVs\nwFrE\r\n=RRPL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.a3016368d.0_1585343943948_0.8457943584735139","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/theme","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98dbf86a9781105cef936437e688bf402b17cf94","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.4b45b6620.0.tgz","fileCount":23,"integrity":"sha512-2g8zrzz81r66pxCzTEaUS8THIlSeRTat7yIxJ3z9rLe0I4Wi4LhwfSmS2xr/gRiqetI+GIDnA/WC1201W8CZCw==","signatures":[{"sig":"MEQCIDYK+ZVhru/brAfhbgrtatB/5ZkiNiOuLZM+IErrRjC7AiAaylS9b7zu8J+dVSAD/mGWX+bSlsV4TnzMdR5bOgweXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2gECRA9TVsSAnZWagAAGywP+wRkoi7jN8QX2cRVlX1Z\nZaAJBk9ce9gt1ytbfY+lx8cpXngzCX3d//DR3faXYJJ10OEnNjdanFwfJAfE\nnHi/NIhz8NY8tZJ5T4sgPp9MfhP1eC1Jp3mt+jzpwHICkRggWbSkHN8fzTo/\nGtjbJ0mbV+Ron4flNFiXHqlxcb6Qa28A+3OsImWqj8b80SvaIaAyRnGiEVmA\njqyzxPUS3PMFGhNEED0hYu/0s5WW4pyfCJ+AhofriEjai7z4/47D9lfLPpOS\nftmKZHuOZ7TAGkVpnzeDFYkcPuaWZyIi/25TewgaAHnPbym0Cx3BSsazWlXE\nGnIehAa6VpES5zprKWNS/FYR/dTIIAdIpu0a/Fw79Agd2FboZd8773AcI+OL\nxLd8ctLzDDgayS13juxr/bNIoRBgY80V4T7gfOvBmRXx0bD0RAFtVuP6IegX\nRK7mbux4sx8xd5Gf3WCm3qG9F8yzWVvW8jPh2saTWCnKapj54hqst0Qu1C27\nQ2lVq8tOTxULCWTaC8OKVhYcjk+kYDNUcSCKyiGx+8toDUlEJY5Bf2aiY0/t\n/xRdYvJgNETfxIALDJU0wGFcrVOKlxqfek/6FbVDVytFC9pCZH1jI6n39W8G\nBf2j9oYUB3On9186VwIXWBvKxRuieZ285turkzGLcRJG1yQv+/hYzncfowoZ\nTAos\r\n=KBHA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.4b45b6620.0_1585670147399_0.36507414002764005","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/theme","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f32f4e228c48263179b9fb907cb6415151757d4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.e84b9c8.0.tgz","fileCount":23,"integrity":"sha512-p3Bffi3WEMk2bovEOsoxqKVn4uovy+okHD+kb+M84luTvmu7qe6pN9WOSaI4tYzQkT/vAKHk/Ae49F5S//aehQ==","signatures":[{"sig":"MEUCIQDzoKO6/5X35TUfnHxHcSnmSroAc9n/UUpuuZ4RB+dxCgIgLpGd5fpIRj1sNH7CfJXcv90srtN4cDm88pU8pTUDnFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMd+CRA9TVsSAnZWagAAsWQP/jMl1Ynro8nkLd9PKCEr\nqZDcb7fURRYvzn6VlRq764vxQrL/zXoSE6zPA8qPvD0rNFwDicpsgPILYLoZ\nVjRUOXLU66eoPXry9o4dNUWZUmZa1wfe+gATaJpO6X8OGN2BVancm/eEplG7\n+Is7He+eKnhDSMaaIlTYyYyC+FL7+0+bquqmKY7w44JTu7xfn+2Aq+m7fkMJ\nAGfx8D4FxmfTq0wl9j+wBR3R3sJZEO6fYxshaitCRE/9FRqOt8a9YCWb4YQU\nt15Qgq1M0foMYwdkart5iGH4FdisBnY4xYAxOrMy6dSTo8jjVq8mNI3c0mn3\n2ww39RjlD+ZXvueWk4VakwvnMtmheGjVZ4CYjtiSPAtoZhqSxO2PEUp3hpA8\nwRA6kRZDI3rKXbo8D8jsGQXAXPhOqyGkoaU0lhHh0D4NPgjXBFb27cad6lgE\na9BhWLpnCzprXRk69+5+f7arozeYCp9hbtFECBhcUcggVdIaTYsTh5CV+cfJ\nFm8fr/BYQ/+zKHlQ3XH7Mfu9ftsHUmgrrxVPj7Wrc7UQLpa5UutrmOoCvLRg\nWLM5rsb041VRIBSL7hFSK+ic3FSBnsKJj9OqglpcQd87J76NUlW9CfVI5il0\nG9JyVrg2mbw99/kuQnYQeiirxP6RiVu+93QRB8TJmTHrfxC4PIMwvYR+nVVx\nhNDm\r\n=xTjW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.e84b9c8.0_1585760125636_0.015805231219636395","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/theme","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.e33c49e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aebc146b05d7f90cc007e6a202a6f27e48417af1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.e33c49e.0.tgz","fileCount":23,"integrity":"sha512-uKLCqrIKqsS3hf9fxtx+hgDbOuP3mwVHzN1CFy3481wEqls408lbjFMuwHxUwwDTfUQPoWDXrF36TsL7UWr1Pg==","signatures":[{"sig":"MEQCIFmO4UaLRupgPsljVaLUq/KKJu4IW0qF1cJcvCK0AdTQAiAM4PFBMx0HRN1f0bpy7mgZ238Hn7DsF0+EnCIcFmj82A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS0bCRA9TVsSAnZWagAAeZoP/3XIM9qa7LMAqwYMUrce\njiU7C6nbILl6iSZRKgH+yOfnjkwiNLUaafq1WkcffKb60h7ofOKWi0ToNtpH\nDncZjbLr1MRVDQps3t+4uTBWpEqwXRMAw3Kf5xh6Kj3Z1teMMUVWnZ9he5Ph\n5VkbZFBAZuhT1FtutzB7kXKw69UofmN17+bOoa4ZQqVEWDjDeFkp2AMOY/Aj\n2JOF75hAnGFsc0DnzuCTTluV2L5CbANY/FlptjTFWipB6Hs89VeBYfgk5bf2\nshBgyOkj7wCESIqvyQStR51wmK2ibmP3riVSSmFXzQ3L6fq4fINXCptVsBGp\nemUWQKQvOTozc1XzRtUBE5dgEp6QCuAIT8pcap8qKNNuek+7npWBAd5lj2cx\n9hFyXzb2kzKkmF9FSc2cv2usGEn9sm7JKD+V4e5CNMCS2LKjsJ8Pj0Z7sa3P\nOttiQTqcuaL7nAc4G5LUJGa+iiItCDhrPKZ8B7nP7ex5q+CV5vI9xnwBmZhW\nS0Og8S6oEPH8SsH5EDZqVQ5HtY8isC7guD13cLViY2BZJ+Iy37PTvAj213pV\nRGYwxMLd7oRwOzCF7+q3WBNgaaPb/4fqpEUESkco7O+pWTHGwuzbhHmM/EjH\n5vSnMZhr6PTULOv+LPEx9yZZ5/v4LIEZeaquGXJodeiAqt/S46mbMWc4L1j/\nrxZi\r\n=qBd1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.e33c49e.0_1585786139070_0.0998875912639614","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/theme","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdfbb8ff587613009005305449f44f5e27d241be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.f1f8e60.0.tgz","fileCount":23,"integrity":"sha512-rw86gwYoCg2AYsyHKIJJo/RmukppQ9SsVf2eJ1a9Roqo1k+9z6JXt/Z8ec6EHTPRWtTAzuO/hn5YiVhNI7bxiQ==","signatures":[{"sig":"MEYCIQD+MgWXxcag5hj3hUZR3dH1unvxSZFNfRRnxsCCTEiLpAIhAKU1oWR1XVEjPsyBNOPHyxNEEUnCtRoXfirTnAUeuq6s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjlMCRA9TVsSAnZWagAAiz0QAKDusbqKB4LWYLjwsSbp\nQ+SIyHaCljGCpjr9zy/vbP05jvHJW4lTyD52BglItrhr+W2nMRbdU6iIcK15\nSexcJ+CqEv5oc5gzQ98WFtbFR0VID1j4zW3UyhAh7VDxSjXk2L3pTlAkobcX\nTBGd3+6jknhruJRZnXwhvPkMYSMTvldOaQaLw8MHKUNTfBYOV3qALvt2OuVW\nDjm7+0fuqls7nfiSor6lUIyPo+CO8nQkRBAyfZgUurvRsgUq9Nzgmn6UrdCz\nE2wEDefJ/d1dA/X/OlQ+eUrihmNJGPC5zka9w8JnlfbIM2DHICzYUPSaGIX2\noz2Q5JeyXKPL+yccdty5j3AiG+i0GE+h7ccArXMffKTHOakyv7uiqx27tz/x\nLwchCN+dEWYgzwF4E3CByjbq2JK72Ht0sgFjdsAfNztPIPQabIHHVJN68kMH\nm+awGMdk5jUM+1w7/8YWoOZspD5Fdtw2qGEqMWX9t27q0NvYxn5ZZ0Mb5dN9\nDbBz2wTQyMQOg3vLiyyOpHKIaHXOJCdMCpmkFqYEHKhnaoY4wP8FanFNBViX\nJTcJ9LGnPmj3zKr199sn55JXbqRV1zxjkVfOkh5ieBYRqgmwbd1mz7qtLvM+\nahwyw/Qx68U8P+k12K/bvx3P0thTZBFAhRtkMiTWPDX46xn+t0Nu66VnPJJU\nco1O\r\n=nAiZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.f1f8e60.0_1585854795919_0.5905350989024136","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/theme","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbe81d8986691c6e316906615a8748d29f60cf70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.1e17c49b3.0.tgz","fileCount":23,"integrity":"sha512-UITpGaNywTKRR9PdNRhilGz3YoOabjoJHNK0QYjitMIRdkyaRN2F0B3HL+EVXZ9lvubwHbFghdFY45BIlX98Dg==","signatures":[{"sig":"MEYCIQD3sXK6seDMb5bUWkpY0W+lxjouBJRna+c/lghFlXQnawIhAK4hxoaljEnwPAlTHEFArnN2yRVsEBfr447DJSwhFHy3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3pwCRA9TVsSAnZWagAA0XsQAJ3oIJRobd0GExMWt/fJ\neJFZxpHf+dGPHV8pQANTeS9lTrK1CfYT7l80m9fcYmYegZ9DxRyOYpoEKINC\nfplGL4wnL2rze8pNzyHa+3V9APOJ6fAAB3MFMCf9mFFPBFK5pCqPESqQIpkj\nwdHkNcXGF2DoEHr3kYuKltlQYDTqkS2R2kczOT8R6bc6XrLoExHOASHCh6GE\nz8dNg2UraiQEadX2sagmi2FPXu+oDcsQJz3dHva6k/MYVbvJrwZalzs9Ib4P\nIO5eFgLDOhArSlq/M8siWyQ0ww6Vdpi1Tsy2gyOOiuZi3/n6wpnddOaagNmx\n8DODeKysN8qllV8q1qvstSeK0UnbzUlechfNvfhfRW5rWJVSU18XdxNGroKv\n6BA4luCFaLD+tUhoQ2Tv9Al2b0uqse9QFfwhRXUH/Kr8csH2/Mr7hPf3cmG3\na1qU5ymmbDkLumXrW9bfNFNLbSKLR4L0EFAnaVThtORmKxzpduGs5gy3Mfjl\n1XniSCQzg7Rdc3Pw2IJxS1usfX8o3LMUlJngpLRpvRVcK0nkqMqvVbzZBkQX\nHCMJdgkCaEgv1CB9ISatowL79T5fAK8iR+jCNOBgUoiZIVjAMI3Cb40YscCX\nkVu1EfssQUgIQyLca7ILwZPEzW/u19kAg2oF3k3odZlftSYSsA4kMM9ovEBY\nc1SN\r\n=tVXm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.1e17c49b3.0_1585937007980_0.3269697354608907","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/theme","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01a11d20e1d5a55894d99ca975ba0c126f77afc7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.6a40ef217.0.tgz","fileCount":23,"integrity":"sha512-xe+XkFkda+WEAG1TaYw4GhRIsyhTHfWWoYJZi4r9NQGLj2/nXAC4Eg3RZkXOKPqkvdghNSZG8i7cJ2VUM5V4YA==","signatures":[{"sig":"MEQCIEMfX4cVq/LD3pt/5pcJgrFyEYm/HHhHbE/+ReTDCQMMAiBDeBKxVaSkFjyO7gvxbGl+lt9QrDZ5qfNp14H3aAYYyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh41ZCRA9TVsSAnZWagAAnEYP/02aTs+vKvsMs7bIvpz/\nuvgtOactMIMCTmwkDEv5Cwl1IJh1Vu1gZhYouJ4STusf7VVKGTCVwTSamtAN\nQCOTTS8ISXiJ1kRt3UcuW9gZlSmxOH5XGM3W0xXi59cW4i22HvOFMGNrdyO2\nC8JHHxhU9Qo3b3vvJMJkKnxUUDGLluXPAeSNOCez/m8A80Rtu4TqmPEyA1ls\nUGWxypSmOMJ4hFOeWLbG5Eshaw3S44hwrkqc4lSlqtP3doZ/O8wYUv0CTBfC\ntpvoR0rX8/bKNIN6Gu8HztKCK1Ada+e3eto/xFHMRWUhgHZRdYJI8gOgebvb\ndRj+ODz3K3zaF7ooxH8ILYkMnem1LEFahmXe00zee2fCWDAVNByq0mHT8WUC\n7eFa6cbVpkka3yUn3cUw/Do006P9Fm6Vu2rOE65vWs2q74anOKDHIfVfANBg\nhsyBmuEDaQAO5gj8NFXrxtlszwfa4VPnomM3un2i7NFpD5NMshbsCU5PPVis\n1KSkoCPT9iUGqoDZNCtRZXb1hXnO1aWOYlnwyGRmNlRLHm+NKP1P07dcJMZs\nsuEqdSVjjnTKWuv6PrV2UrRStAqCZIQgarNTsJwOBicJ6W6hPgQOVSYQjxm1\nx58zBcmSOgZWL+RNEsMU7DH65bM+GPCgXfs9c6vrMDF9nMpVH4MJrQqkN3IC\n3wb6\r\n=SsG0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.6a40ef217.0_1585941849488_0.5987250806025775","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/theme","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9549603cace6bfdf78b1c4009171f83c597278f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.5f24faacb.0.tgz","fileCount":23,"integrity":"sha512-OorE0dHOE6JuT1UYnXdDjTrmEGJITfPznbkCLJs/Zv1d1Fqh+/JM6lOr6yCG/3PrWbbb4nhI7NZAIfrTG4NKoA==","signatures":[{"sig":"MEYCIQCLXgDkeMwVIZlf9wKtW22cbddbglQQIjp30mYJhr8jAAIhANOSlQRGB2eMg5cXuo4+wYjMMImmA+pyFl4sBJ8D9uCA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje9ICRA9TVsSAnZWagAA4vsQAIGjKg+hgNhRnql9xKv0\nSGLQ91+YjfG0jKDrgkOmeCTgT4rucKyWywCJro1a0HMoihy2MYXc6rPx3+qK\nRuU6Rs1ucGh99Z5wYvdzqA9weYT8QBnDtNlzRNyHoCuHRK1za3XXKmTJmq3M\n58Aqmnxz886w1aNHddBgvvSnCXkQwjVHAcV/0aKcxtS5FxLltdSj0kWtC6UC\nFh95CSd1ITIIsSoTOjj4imnH4mM2uqnQGI0uyfjtMRnt96D3pAwiPcPpfnwB\nrHylGpAw5c2lJZ0I8MGpO2VY+07Ieu39b1AWDP5h6kZqV1KVEpjOcdoB1z/y\n2pNRy5UCOCiDsxnpgZByuwps8DWMPFgSHejawqAMcJmKNwDTKmlfESnmEAuf\nCVSW6bqi3BsjASDLNURopmHytKMGMcxnVA6VU/EofoSCntH89kZ6fdpIqcno\nT+ZENf2cxE9vbYbQ3KU2qQXb1ww/YmULgLgyOO8CIEiBZDNF3n/dYWeVBshB\nnC5jHlF2KxwY3AlIoOqcIlao+arfYPPEFG5O4XpLj6vNrC3CnyK+ha6ae9k1\nIPode5pvTsuLrcQThO8H0xvEn24XzCW8M3u26Kc8BSExrw59b0nllbv+vXfb\nwlnUMyLmdn+XwEXGH+79Dr4tSER1rO9tXm/63gV91iInvIk+BidvXFEngUvO\n61kp\r\n=+Gzz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.5f24faacb.0_1586360136193_0.09335567735361194","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/theme","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57741985e22ae81821564f3e2ad8ef628f2c07de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.82fa986b9.0.tgz","fileCount":23,"integrity":"sha512-BWG2hnGm1Y0BsA5QWknaUMBkxr6urFbW6tdxCZvw+5YobJwe4tCL2MSCj9ySIvZC7h7bvgld4tLiKcCYawJl2Q==","signatures":[{"sig":"MEQCIA35ZYR+QPO7Zr9OodoBujeuyBkz4rlIR7xgoYuVJgoDAiBkX5hmg2b9SF4YWaGA7FmRZTWGtosrfk9CiWilMLDgMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfCVCRA9TVsSAnZWagAAqroP+wV72DXUiCCNlEXKLKt/\nIUcY7UlTlUGR6jNJKshlNLbkQ1b2yc89K3JHndQyzrfhtnjZ90kbUE0J4cV0\njQEw8mNxBH1btWvY63B59U/RMKKA6UOpuV00vYOjfO0Kwy+XCThaAGWi2+kP\n0Gq6Pvw7vinO16FK+w1AiEDRWvFqAJ+HdlQq34AFypXjCw+goGo7N4THfXnw\nP/3FkBxEv99G9N3ne6FYWMjdyVBiR8hyOWnTXl85OYvVXcw94RB9+jQa+MBk\nZBJLU6OA/+kEJ5c1CjKiu5AxdSwMPF9lr/T6l2WpZQ0vyFubymEMd+fs7K7K\njuK5r4oX6VOaJGFzH0Gci/nGblStr3TIZy4HJ+zkeN4L/lSz7AIVKTAjgNn5\n7+LHeeNJbLEFdkqWY4DXKDlgylE3cie91eQrs97s9OD1/RYw0j+30zK6Apll\nJn5oJnMOckdqAgzYr07ceoZ/fCU+EJCzk+BmQaMSXdgDjR7mKHvS363tbhWK\nQ2zFyNRBQ0tiaDjiFqJHiLD2nhcJMnXEi5CUiVm6qCbMFQUGZYMcgtnfAvGD\ncVFyUSvOYZ1dGZ9LQtzs09bDMsiuQSmUPKIJP1pRI60MiST+Fa2yBCLS+5PY\n7BZbhOwWUNp/biu5wEGVEabe2eqzMvyKznkPAWK2qnhURThoaolcxPwm7l0V\nv1eZ\r\n=CC1x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.82fa986b9.0_1586360469134_0.480604437138475","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/theme","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e590abc0c0789a4e91770a103e2684ec32278bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.9930d9cc5.0.tgz","fileCount":23,"integrity":"sha512-ecQFx4z6M/u1AN124lkbLpxA8Txipxdra/1/mT12cHYEdqbFPxBe/jVGzjyeB8LwzTUdzXYZx/IEeLepsZFhyA==","signatures":[{"sig":"MEUCIFSoBUMJYnAJOxZFotQJHcvPMUyce5ME8J9zdn/S51d/AiEA24udZ+F10x7Mk6+UhEmt9qlp2xAauiYl+xmYhxf1fiE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejiayCRA9TVsSAnZWagAANMIP/2cPzT/T0OU1HPe5kw1N\nHIuwGvhi4TqR8whAAsSfIx26T7/yg6oTN7HjOMKa/VgRaGKTuwWM+w8C8NVT\nydspcgkM6EDMm/Sgg95ao8xAhtKLn9GmY3juIibavQXpXR/o/vrBwcXl5U1W\nP5D2Otx1SMmjFCPXFSFYtaq+UOU4y4b680tO9Y10hjV3Q5RhbJ6YgFn/YuOv\nYF5tGsKuCj31nbYqvwq3xyUyuSnEo9Diyw1sC+Ga3Qpzpox3T3mFzVqCzRnK\ntIlRPmOF3VLmp2Q02n1s3Ewj10eA/zftP17Ur9LKFL7uOjD4UdszCXzAN5rJ\n7PxV7y1779gUDYH6jXLcNoTXqt/VhSKazjaOCsg00Fya7U0IKQMp6hWLKJhp\n3CVf73Fk61/c47ECfTcj3THQtKevlqOdofeA0aSodu0UMn5cqggLat0V97hb\nhHkb6Qv8WBFe8uiujvoxt5tQqev67eVl7aFTKobbqNTc8758AAWMxU9KXm6D\nRli0PWkLbx9CjE6d5U/IRhBQ47ORiJLz6olIL9yBhLB/GqYzUxWDUTqZZYE/\nZwCCB4iIPMijf3Th5YDUDHiK1fMTkaCcFHcGHNg5xQ1wElg5RFpp9WeUajbR\nv3dcun+SiHjJX0TvHlO0nAFm3vZYzpX2UEVHs3eM90kXhD/YgXN3/a45caQd\n1+Vd\r\n=FD+U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.9930d9cc5.0_1586374322122_0.6101127378158553","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/theme","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.6601d24af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6df0bdb8c339899ebdb7f75b4bbe7366dc6a1501","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.6601d24af.0.tgz","fileCount":23,"integrity":"sha512-M4h60YYiAJRt3vfEm0NVCtD49J5xWzavvWuDQeWnI+r/x41reyod/rd71SeVa3x+E2JiFI3MvrwLADNngKk2uQ==","signatures":[{"sig":"MEQCIAjYSzp7hSnLS7qqmDMdub1jTbzkQtC5gM3s7GhwO8c9AiBdx6wRPqDM6LxmzeLnYDao43+kV2lTOQx18YNp1GhsEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmxoCRA9TVsSAnZWagAAt34QAJtlhKWhwKL5gEKJBsz/\nOnj7gGcS/qBuJkeVZYFDKjy2KK8f/NQu2bclROP++PSclrcXzxlWvzdn7jDj\nEdFg2KDS/Wy9/piDysTWKAIXFuOpMsRr+p3Ci7ld3NEktelJCCge3WqPbaPC\ndVOBqQzcQohyZu15JUgWvRMoLX/WrDvj4/ezAu13n/Lv42BwkOjCZhQvEDB6\nmJSf084lw8aDc1oQp+OrN8pchuxl2eOiiRFooVBa0E4RemFDGUEBt5YkKTDZ\n5i2SfA+IcTzYJWxQYvTGke+6i2PZdcji7HEM8ENc+N081Y4QjaJaCJdAVWRe\n/86tU+Ju3VniD8F0zh0NquCfRctKh3tgDsw+iwMh4DbkI/GooBXcN1GCn1F6\nZv+wfUlYVvnYKwjWfYKr2S4MchuYZtYpAs5lsLJ8ALtsgumogOffzmZ83QCe\nP4hbPJKSb/+XLOUWokQDw5mopJt2brHAZh8XtkQHRD2TosCZC9bFB9URE1Yo\nMuJ6V3RxssER8rjbc5wyZ9m4XDoYPM6WeEQx9Od+L15/r66fbbbAl5R/T4O3\nXCDJJEveurnhH0ychBkOJufd7ctRJbVLIVGsn+IANNBAIgds8SIPMdyDMfS7\n7VYPKspgSNPVzRGUHxwkVKZRtuqr+ReAKasBOyZmkKPkXsa9LX8nXqXmrHQk\n96Uc\r\n=ALDr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.6601d24af.0_1586392168133_0.6530009289965999","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/theme","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efdcb7538d9d0152d0000fd26c099e2579cb8307","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.05f5e1583.0.tgz","fileCount":23,"integrity":"sha512-PBE7X/gtF6Y1PTWfwk8fQ2e12p52EXWk3L4BGho4JghS86K05zLK85WatgwH0kUwOe8yY9qfnh58+002GAVYdA==","signatures":[{"sig":"MEUCIECEbohjcOgQ54dZHxfh5hjG+c0Oq4BCIKmVqSQiD0VNAiEA7ZsJbXxbX/LnkKhyrU2bkxT0zUsZJW7z2VE3z40Verw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnByCRA9TVsSAnZWagAA9yAQAIAj8Ep3i6Ah09sYHTud\nmh3RJUeqafncSlh6RyHg6AB4KsWwUda2VzB7p3WlE2SJpjUoxvh2QNDm4YXW\n5wr1sQy2bllAO9RIEnVs/KxQif9MaZaX6E923PMAybI+44AZ6bn0CJsYGijb\nLuephRwZZM43nM1CA/TItOHvoJepU70edaZdUCqXNVu2t7za7zZbaLOVyuzE\nY76pJG/wTF2234Y8IqS6EG9beiGQry/6WHsyFklorOMLMa7rER7vt+g5wo88\n8vKQVstLwiF5DpTZB8PqP+LbRmd5esuKuNNDbyYgtoEy/u8VILCftKHHgcHh\nz8dDXjR0dkDRTxRay89pYE2gZRd4EInm0uEUaDrnp7HBusFf/BPG+k/Ce228\nlt7mVWqF+7ipblWUOKB8qVxxz6HtrLY8lD2B/lKs5y8pD3J6pGZDkOdPjmd5\ndnRK1CICKpXqCbNu6mQcv77LfAGMk1tWepBIltfUnA3IpBqAFH/PQmq8+Zi0\nSMEt/j+Tpm4QqKh4PfrBxtQzsq8DWAycitPCvHKhCmGGcTuwU1IlZMKaP4hN\nIxz5O/mGwoBhWhjPCIqCmUphP4Yd1efRW69J9vD/UMWKJXdLsMNpS14wvMS8\nGE4ZzMQNIqMcJfAS0ZRDPXVd7lCkDhlkcIDChhMK81GRv/T+gmckDv74QIpY\nQoYg\r\n=5JTu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.05f5e1583.0_1586393202409_0.9092055464915669","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/theme","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.bce00e186.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0e3a9aca53d68bf86d0f3e0d7e49c14f6dfa268","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.bce00e186.0.tgz","fileCount":23,"integrity":"sha512-6VuNYbNOHX+n7xGqCYkSSHdTxp88G8AnENeG3fYimiTxHLb2TbGQT3PQE2NPH70ldDsuOpC5bieA82QlRXxqQg==","signatures":[{"sig":"MEUCIQCy3ti8gk3vfEFTwMAbNRjMIjWbrNgBVBLmOckkF+MtTgIgZfg1SAzQpOeQf/5/Hom1E6Ax59Lxgv8U89dlRdldDWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz2gCRA9TVsSAnZWagAAvI8P/j69LWvi94vtmpb7YLTU\nAcsM4p6ZqZP0ohZ1yWASdKA+ArW/tyQNA2vPSSRa6LxTAFYeXGFlR5PmORgN\nTke8uqtv7Ktc2ikFlMeaDVWOit8kApGxS8Moql2o9BU1dFhElreEkz5DKdR4\nsSESCVWzkcKgumYwc/b5LPwIcFQqEv8ziWJcohr5M5473x5+NtRP7b9kc4Bq\nyYDoNMT3S/AVO9WBq2m7a7IRpYSl9srcwFgaH5cSurdpDyhTglfyyD90Bm8G\nogW8dg3+V+vlby8/hR4Luu3q8VCQjE3XGMMKuqaaTgObI5amMbqiAqxFu/qw\neotP5FXN9//7fuiFuchtnersCuDR8hB0TV3/ymIcCisH98OyKXbQIl5bOcbW\nWtGb9XeqTv6xVtKeU6Fdi5jzNkfXyWJtr6XO79VQLhdN/5y4HXpifB3Amsrj\npyKoOCqIHRnyG75i+Z8jbRjeo4+os6SOkcqIKMLBzKDe0WZC5Fw0Q/mpOo01\ntLwUK5PBDoZBm4AdzEqYWKjZcFRKhl9C3f+oB+AwBSC3pe0GmugF4iVTAGDl\n8mTHSSoAbKIhTH971E2q8R7rqK+VX+ARiCqCdCEc4UMD+t+7xr8D4x3lF2CP\nGEYene0cFPWA0Xm5bJgGz9yvkTY2pdquUBO2+FtGmeXOF6Mkk89KS7Z4Fqjn\n2dYa\r\n=imna\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.bce00e186.0_1586445727560_0.4456192861594024","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/theme","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.927fa902c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3fc0e41d28b473b6508971e9b72a5b937596f71","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.927fa902c.0.tgz","fileCount":23,"integrity":"sha512-GC2N2BFR/7ALm8Le7QLHxawa/B8Jfc2YFICCaIqnOS+CqBKeg4YmGWSyrgYncuUauhH6G1/IJuJ/muielUuS/g==","signatures":[{"sig":"MEYCIQCmNGT3gQkWBcu+iqu7wGBCRnqVH1FztJNAi0f6gEp2zwIhALWUog2t1hDcO3dThSSlS/I85P1FzjirXQJ8I3BLZo1t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej21qCRA9TVsSAnZWagAASv0QAJ6aoSCWAQ3ZbLJ4+FSK\nbtDNDl9f1vyNbW2hUM4uvdWrr2zUQc+eg/5uno6A0T+A5tlUd4SkI7iL3eFw\n+FWOEZOO8RmHgAjNcS7b8Mh4+YVo1ZUtJ0cSMcwdwNqtYGbN0VGfGlcra/dX\nz9a2Dv5zjrIIumlascPJaxq+DUXGRmG7L70l1XfDr4qZIVDG7U4bJyzs8DMv\ncAwdnJ/x+6avmX1o7IwMao9CYCuYNgoYydZmrH9xrgDnzEP5iMPUksgYGzsx\n26300Bi3KtaGipwOJGKXk4WgY8wk++MljFkcKobwO+GoTYVw32tz1rRZh0iC\nugXIiCVcY6jd6acahTExmLLH52f36Ejf4QPdvdhOpasud3wyOlK2P4cT0NgD\nqMmM7HeVeQoJK5TyN/COU5d3dlq+dsrLkAmV87EtjOqBn7fcNQrwF8QZP4IY\nIB72rCPUR0F+KRE2bw0hn1TlM8Tx7fGzNfw+esOjQ8zpdRwEWz7Ab1bwunMZ\nOj9FLdWu5YwVkvF2EYSs/aUGGILc6RbZRejFPkdzH+ypSzkUTqxfEF5DteeP\nE3UpE9pAsBhjVp8leCr9KUq7i+99qq6Bxa9t9Rp0nPRMiI1IjE36ySMrL1JA\nqFqn/jvt4c4RZfvj2vT4bXh00ZcmQg/AyNIz2DvKYj52UeHeQp9ghy/vjhid\n6+6E\r\n=jkQq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.927fa902c.0_1586457962111_0.6196607022647205","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/theme","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed0155629ed846070145c91ad837c55dbcc09f67","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":23,"integrity":"sha512-hDgqMPPImqHm2AFJ07v0wwcE6gf9gDkXusOgt0tyZwSmWauTTI9YrtShOysEpv8HgZ+bddpgfH2/ZlGWDUyD8A==","signatures":[{"sig":"MEUCIFm8boirnnlES+hjFzKl16FsY/ntsJEasMdOs2pXXBJRAiEAwXKlhaM6kmSlCpjO1Ue2QRp+iN77454QSOwPqI65nmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMlZCRA9TVsSAnZWagAAeB8P/i+edyftC75QKNME5Zhp\nTs+N9SUTUZHtQcLhhbvPjcllPVKEgRnDgxO6LIksdNJCX2cejglhgxqFOC8r\nKT3F/lqHifL8hLe4HXnTIQA6BSXP1FptGRSCrBuQc71e/pAKGHAyZ8Tb5NfU\nUVVJ8tyylHLaqFk37iisopIXnpbyvm8IrlSoTo0LfYtNucfb5nwCAtPCGb2h\naU9UZiqgtgpxsr2MesiiTU+9qzm6lEjGXEF5MAYGBTgRHXUFlgt4LShSFPuH\nbtKFY+f+tiXfi9gdjw+iE4JtZyFbxUYhYC+SrncwxrCidA47bl1Fc7aSDtFG\nXyDk7Y66kIHFCrc27+92CAr2snI+fgsq8TYXnIIqKcqSCM7JbvHmNPZ3GiP6\nvZXc1z+ayR4o1mWQfZpLDAn01FviRlObBQFCGcBkiuqYgM1Z5Yb+AzWxcPhA\nVXPHlwmWe4NSOYxh5SBXuXtzm1gBokYUiJ3ZKmk7WMn/p29SjDASq+CU/nGk\nJGy3o2MZZTUBcJ0J95FprAiPL+461/8h7NYricnHoWqts8FVSUU6omAofB9Y\nKV44ZL+9kX6zoM6XwBBCXe4OE3OFz+EmXrlyUtXISD7g4opUl3KTPwKss4dq\nEnOV3N0lEFDJ5Eg8OkpHt53hUT/iPj11F+d3Bt7GcPa+MEx/+TyEdrlVUg51\nIf8e\r\n=W23a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.eb28b6ecc.0_1586547033251_0.48293242437729567","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/theme","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.816a43b42.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9467f90f64940b5702bf3063cf95017a45f3b3b6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.816a43b42.0.tgz","fileCount":23,"integrity":"sha512-/0aaIsz+GTYM7cDpG26QQ0KU3N/gC6mjjrNvY1AZuSsE/1imzc1PRw8v7RfOSyBzIrsocyaADdYgNW1zNe1JGA==","signatures":[{"sig":"MEQCIG9cgRfw4soBrlP60Oj/N2tjR6bQCQTkgV9RlHI0LzrNAiBpBF9Dd/Y5p3xWZd+6CdE7uLLStEJs26D5r7RCPIojag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNx/CRA9TVsSAnZWagAAs5sP/R5GIATC/C93+2d069Dd\nfy08B6Lm6Cm5cq0+rc1mxNmxvaeq76MsFM3cKbIFhGWAkV4dAOX41i8W73pB\nvoEIH54O8N0kDZiz2jf7+kQFAEcKM6eJ2qkCUdzq17C3NJ2ENGAVAjMFZOaT\njUMqMd5FHVqmQ9ZmuHenPpQ+3C2VB0fniFSuQj6YZJuU+5SqTeqOCIR/2Mft\nk7u1p6CZFZoB49QtPXbj2n4858iWnN4YCrFFX0fGicrnPJL6yIRFcKC87zHs\ncCpp8TA+boz+onyIivzo8SYOx4uBo0dUBMbsQTZhzYFqPtjakpKEOqaO1KWg\nr1plbSQsst6TCjQS1x4Cd/OV6nCz+7oitVjtL0BgjGDO967zMsrq3TXmlLuq\nYv99TS3XZNCZG8oEaWJiSNobeYNU3Q7woyy582V6dJ5LNjQI3BHiuvlwVXDK\nQsIORPuW+ns7gKxra8Bwpmo4yp1XOox6AxUqvzxb5O6ZAAkSgwIVQWrzolRA\nv7xnnfh2OIMxTOSUbYnJaDBBaKYA87Pi3D8TKxqg5Rnl7Z2WTMV1dwbC/f+T\nxYNwdCyOoZXbtJg2HHqxQ0v+E2dgATURG+LKraS4q4V0aT0yFX93zMq6Ll+a\nG4wrVjOuombMnnoMg172Q0YY+N7H2Ibr/HnOL8W4jE6E5po/R10bA5TM6tx2\nU0HU\r\n=pdyl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.816a43b42.0_1586551934864_0.413357734734614","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/theme","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.008c4d319.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4292d04faf3915553af2ead4b0d15442c4a33c86","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.008c4d319.0.tgz","fileCount":23,"integrity":"sha512-6+LuLoOc56V5q+UtI1Dk7tCMGpQLeo8VgssGNJcX9FoBqZyBKl+08Ts6k310BYEVKL9Hdpy5Masl0+Yq0yeKrA==","signatures":[{"sig":"MEYCIQCP3CkMNetlg0ob1DpdoZAYhI/GOb1eL1GA9PdZ1iwWpAIhAP0jX4DYWwwbNZuSwBPh7FSjGaW3oHjWjt0FSt8EOM25","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJRYCRA9TVsSAnZWagAAPLIP/iJ0zhAbHRRntJSZD7M8\nLjDfMW/M13v2ktWk3V/bDxJbKHHW8Veo7y1XFaHH3ONCtjswaCE9yjLR0Yti\nApo66FLixQhuPtFXD9v7c+098+FmcnWQju7lCDyEprC11ETnmuk9V3chCQ1U\nSpmR0PBvS1Hr7Q0mZvW4wtM8Uj1ihUoNptGUYrxX92wGK0T9ZIgu+iytx1LR\nyeJbdfGaeOot++xIq5wCtJu8R+qy+K9I99Kw4Tk8qRONklxSb2Y2puo+72ZL\nBeS30/oBi19eRiv58xTWIygHwMSxOzGqyhkGeZ7YewdPMR6DStFHwJW2zkyq\nL4B1GN+u779yUUZYUrcX5Y/SwjMKgwJ+cnE+KnjOte0Ox2DZo42XxrWPy2Jd\nWIAWjvnEQoa0XtDARkfPUxl3mL1QItTqUlJ40hCOsNytr8+m3uALhZ6YlIul\n7g9wAut0UKt1Pgpz1v18tq9vraUEDHsYo7JHTm5eorsdtHkfZi4zqJlRM/DC\nqD92xOLlyGzt07iftHPi2IpVkwxSwJlQI2QiMkJNwv/K910f+yj9Wxrk718a\nYvdMZ023a4kBpJgjzjxi/CCGwc4vip1UEd2c3jYBAHemxinteFG2vl/A5WSN\nLGCvu8SbiEJW+daHeCC7Q164AJ6PAzcGqhtiW36keUvSLj/wEq27xuGBe0OP\ntELI\r\n=bVW9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.008c4d319.0_1586795607703_0.5553659965189104","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/theme","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1005f2d131babe0986b0a7279d16aa20e4909d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":23,"integrity":"sha512-m6v3mPfbbj/YL0sghuHZV5h1EzKa+KXuoLVrfaPSLPiA6APt539MmxH2Ovkz0COC73c3qL/bqpaBcVWkmrC89g==","signatures":[{"sig":"MEQCIH/mi+lcx009icpIESOtnXyql3cKEn/Ol4X2YAjcKPRrAiAE1q1BK/SaoUI5PZ78xDjyGHlH7jz1smlNGlvuiS/A8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUSdCRA9TVsSAnZWagAAbCUP/A2/5i76dtAccpum4t/c\nVNFsUE5AynyuIeOLuIcxR+L+vRptqiQxVSupcK/nfJ3dD9Paop7n5eCFZQZ5\nmu1+CgaxI+vpmCQcdDz+aqq1TX/Rmc2xV5aG5HaAqzNOKCHdhU1FoJm/nN/Q\nGLkrotcPnz+okJcShdyx8uJAGv7tSEH8CZptEsvGbBGGqAdMVLEqzE868okF\nbGfK7/wi9Lq8C5qiRGHA7th1p2aK14vMEM+xCEu+XjP7DQP6cazDBrx5PZut\nGRpSHGnzJhvCK6IIBUO1f54sIV/P0xjf8V678p0AZNTTstrcr0AN/weMaqsz\n/v2UWNMdwBmqTQBhkcCluqbyucRrZ5aqzq/xkMseocu4D4XV3ScH8qGQ3uQa\nln7C2j/OVQQy1pJBoKcxpWWhHpF8XeN3tcPXQwSqhPkOVXs6RTvk00E6GiaS\nrn/E6dXmD6lF6/qKv7VgLxovLGGdUVa7hXX/edfdn4o0MdxjIrw7Ft9LOzki\n3jlPw9vXT89eD1TEOsZR5ehV/tat9ToA42vuqL7rZ/ERuelL8mQGxoSEYa+E\nJhuRiJpPTQbsYnNRxFVknRbGBmUiZ+AVy3/jrTz9Db5GAWqDM0XhzgUsP3I+\nKxxG3RJGm7Zh60Ahw4feKOXBb01DocQNdPMKiJ8RSFVVGxIxyUvEd7kI5b3G\n0HeF\r\n=/irq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.cbb3f28ca.0_1586840733234_0.4628744541186183","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/theme","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"877e6aecdb5d7c5b623a64263c2790b73873e0a2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.f172b0f90.0.tgz","fileCount":23,"integrity":"sha512-+SWcmpp93tUzKQf+e6ZicWpgNGNZhOsfyA7Y7LRvD+mbN9hCliKkPMZzncu7rKJSm3x3Jg/UjaNzsXKJtXUXew==","signatures":[{"sig":"MEUCIARZefQI0WBu6pStYWlj8XClHVwmUlcArQHsHdehbBu8AiEAkUdXdQt40Boz11FEp97x7ngZ0zZxtt/ZR5W9DDF/wKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLGCRA9TVsSAnZWagAAG1YP/RuqDc7kB752afmq4iQ/\nRYeVIRuZzF0G6RYroX4uaArZhivHOIwvznGnMBM1ue4Wj5wWPEuNMgRZr/ne\nrSbrY+hN1ZfI9U+SKl0ajnYjMskwhDZNl2MGNQaDx+Cq2k4Q9+SWCqTfv02O\nw+kWeRuG8kQ8XL49Dx13QApVQY9OuqeOMmWgLEKCdoekGMWP1wJ6XFvO64zj\nLPpV0+cHEvsijgHN5UVsxyUxdjNWvQ0TXU/afYGsHP/60ZsWNPZgc++ohWbM\n66IpAMke1bjBL/LdRIbI9In/3VMeG1Cm9p3c917hBPDo27HSJTQ/hq7935iz\nvR6fLFngq8DgPRNlohKwqe4KsDGoOcbAw49gHHpZCxbYXCqzwLeOnPVp8NMw\nKIV/2i30Ij+/WAPl6IAZpWaQtb32yG6i3l+PTgFiJqB3F7FQsxMKvA2NcRcD\novz3uIvW+axjFycfc7TzFXEQyms9vFW1r6g5XJUmIbbHS19Evy8H4m+RxgZA\neIFXZxMmfvkxkC2lgzXe3qOkNuREaRAPmc0O+oomNGjKtTGe895JqX5cBhwO\nSryGiPo9yRtd4EEO60DcrQLqOI4Gv4FnCuF+QyNpeQGAgUOI4mmwdDZwSVlE\nz9Enr9XX5AXAEyMzQMyQByFvr24aHOHLoLtm4wuDM1/SBbFgg25R5xyHfs4k\neVsX\r\n=LZs8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.f172b0f90.0_1586905797621_0.42091265614134943","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/theme","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.c02642273.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44c4fd94c9db46da4d7311591b4cb587911458b0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.c02642273.0.tgz","fileCount":23,"integrity":"sha512-9v34iObimqCHLPQcvsMVieh5ipmAuwhUn1KXRhX/8SvIyGnmM+/5ryAaDBydBXyRG2PoRMo1BLaOTT4qxpDoUw==","signatures":[{"sig":"MEQCIAPfJDyYTLBeYY4WxhCMvsGp9FqdFhNmEiAnBbgEnuSHAiBuecq28GZKBuR1GJTfh1Um50d40jY89fTCXlKasYjgbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzN2CRA9TVsSAnZWagAAqooP+wXNxLqEW2kFcEdOD7fO\ndTtMmyEVojyOuLzmUGAIPa0/pSrOZ+d7/NjRb5Xy9V4pEm1L8CEAZqkdYp5B\nIRPfyOaOSHFZ2Qeuyezh5vgkKFpfG9ZSfkuWU0DGZ6q9J5IKzfajnWJY349C\nmdkQC91QH4mEjy2iMtBdm8ZSYw4YFfmKG2TM5EU6YsxawX/jLCGD9mhLsDs0\npgc1ScrCTvSId3+n71ms/J/QjC3/ehWXYgF4YzKHlX7ZKTKBhxFr9Q28GaKu\nIAIynRt4YVH3m8MZlgN0bFEWInTrbxbp1vuUCJDkKTGt/+oX+9AObliWVTUQ\njfbbdPsLaQ7M/9gZYd5T9udKqcHeZIVJRISUKulrFLN01j0m8DVhiF4Oy2K1\n4YxD/Fwn+IIIDpkdCUTJKv50gELbsVuycjWHUiRmKuant71ukHhUaIEIwBh6\nwoRoti5RGmN/J84Tg6N7wipcPBjZICywffVEIoe8vRVjv1X1HNatEfYc5/qL\noj5yXfDRQvyQYT5fde3GZy9Ym/LyhMqpN3KvivzHp9STUZVPJYb1IdKNDhcu\nwjgW8jqyLpkeO03g7Rnksjx7W9dM097pGDk6m9PHdcc6p7t0/9/HXa4mgBCv\nCcBh7kovzSPBtyd1x4dEq8011baRxLp7F+0c4zK/elJNYiGgv+aWskeBRVYq\ngvgd\r\n=3+o0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.c02642273.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.c02642273.0_1586967413768_0.30171759019657785","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/theme","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.8a299b568.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66eb4fceb5615fee7ed9bdf6f3d70324dcccd97f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.8a299b568.0.tgz","fileCount":23,"integrity":"sha512-9jWXeOT0ZRE3+kD6YgRRPOZcckoPg3uphSb/ui6+/b9Zykq1AEaVK4hHGpR5r7ev1nKIR9i2qiBlqajD0EvjNQ==","signatures":[{"sig":"MEUCIQDewFKsZvB9t4OKcG0P256d3NhgWYoeoq+AsyPMsK7P5gIgKTo6y+/3AugHPK8MpH/KCodxRCjCLGS4zWBn7mFvmD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel43vCRA9TVsSAnZWagAAo9YP/3Mp5MI59528I+1aEcCm\ndk06cV3LRokJvkA6BSuYjvF8qP9735MYIzU8S+EgTamjlSVH0RjDwgxU9kNN\nGVqQEU22m6VmnR9tt8QtIavyJyP53plFlFjEj+SbIR8U3vgLnmAiumWCBgiu\n9XA+zwlBeXW0qn+lvk7sEWBWGVynOIGkTNPvswnxIgIwUe5C/7dIxICLPQYG\noe6OgocKIX/SJ1yOrLlscCfzJCiX64nkHHDbpm49MUVtQ4nJarRk4/b0UdLx\n9n6kNIg+M4Hgo5e3mPmVP3qR8rEj8drJy77gnOj9EdddpbkdvXi9fUhQhWq5\n54QZkH+BUg266jVbz4EKVVllEDEgWuBLfRAaMb75USrfxuieWv7qsWOvbs1j\nZd4XEOwdGYd9qYP3YQhHh5198m2W/SA34XCUkUvPjZKgPnD2RaTFQCwVm361\nOgvSlmIhynOfKSHezQQr3xKCRUcR7AwDzrnWP0sP6GamHCMcNQTd+aSdKdzX\n5rQkr0le9VSbQpLeVsS9VW2Pp6ioWpQskIY4lem9bRnk3E4SrzyRXu8E58v4\nq1k0IkCxLCW3rM5LtfeW7l81LnGGQ66w2DofbekLcWoUo9uh65GYg6T3uFKz\nxVgaD7Fz0waq0b4OHtyn+aV6gf98+wA99VACkSAeutjkTzdx1pNzHrPRU9bn\n+eaR\r\n=jv9L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.8a299b568.0_1586990575390_0.30821134642001446","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/theme","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f602f33ea7a9360839ebdbfe83fa11093c53e5a3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.490fbdc09.0.tgz","fileCount":23,"integrity":"sha512-h49yBw1urFEFtLQMH/5W8R0s4XKzo0lRPqy0jnjgMHGjDcZv1K8MNtzWALIDuSHfxRw0Hoy0KI5bfQscZRCvnw==","signatures":[{"sig":"MEQCIC342VxzME+DBi/Hzk/4HAh357I5Yd6zjuJDPWUOvhsTAiA6XnHIq0f5cFlb71UbJChnamDrZcQO1c4fpbUMKChsdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/Q6CRA9TVsSAnZWagAAuGQQAKCfFlwBc8x+dJZUvBpr\nvAJtfh9nuXUQpVJHk58Yj1aNvktwGI6WGWpzsO1JmtA/VVWxVtQBee+lEc7E\nq5WtEwTTKd+bLyvlNL6FY2ZhQwhyC9tBdQwtLtQMDGg452XXWMk8h+FlEnrm\nCuc7XGlKhZ5s36uHVIrRUCVaBMTaYI+e8rbdRTnZPJac7XR0Ls/HloftHDYa\nsIZzGHDDc+cJxJ6Pqwc/wSzTQkniPA/nY1sReU8HBkEA7sYeta47P3xBrvuW\nRhsY7zKFOp309u0jK6Ywhb0SCuJnkJusFc8iYvJ5SVmLhmgt0nNi+FT3FytG\nZqDMzOtLT2oxVytAtuAoCjV/QIZws1BHU3rclaFCn2nyEEUqt3BsrtGrdOFv\nzPIOYoykWQEiJYRt4qcsbjw3sbXGmmpesBaPZLw5mok9oEXcILky0rVm/Qxl\nZcnaIY1BSqEsGTMl6+eAD2qxB4X4O0wOTjLsVcuJox/xEzOqn05XiiPUie0U\nDGEvTayAHrsBQLheVVX6zwJ+0Gi4PXwmdStZskMED18l1KPIReriXf8k5VSm\ndxf489ECWqUBRorh06HXB2eHrB+qiIA2c6pZwaUZzRsdN4wl2qC8Dc2cX2wx\n2TJMPU+aiw68hz3qCIDzQiCbMV7SasQhOrqR0r1DNs4hrbze7yN+P9SUipdr\n5PTj\r\n=dMMr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.490fbdc09.0_1587016762087_0.9970186084936985","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/theme","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"068163282ad52a87161f7e69915ea03ff9e034e3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.f838c6e55.0.tgz","fileCount":23,"integrity":"sha512-8XGUmYLGX5YZdgrWIRdZpCuhSZx05nSHBNyzJhcaQ4aJXzMFGSs5TiCto46v1L5fq9r+degUf7V1Ta25d0WkrA==","signatures":[{"sig":"MEUCIGXcUD7AteV8CVyLDF++Ql1Mf7jyxLWdzMUn32tFBmJsAiEAwzgRZdzdbpgwnuJUmf0lxV3TiheeB0LUP//hEk8b7N8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGsHCRA9TVsSAnZWagAAtaUP/iERY+Kiw7VMXhfQ/ekU\nxLKtRj2rTeS10shThjYBaMcYF5yAK2kvDpx3b4q2QbAPb4SvDPodpaDailxC\nu+PIcwkVDgmjspdv6ri+CWu8ENeUo3IY7ZJkvhdqQXkBjqnWE70TQSyc0VrC\n4J6SxPLXq2x7+pOddHBasAwGVRW/7ux42aKQV+Ets+/jpcJMw3u0ip9Pddqx\n1LBouJ3T0XfQn3VtNYpumR+6TLVBe11MOnP+l3PLHdyPe2+M/nNfVPAgvqZE\nnbF7muOLmEra8kxe8laxaoY+0lqbZeQKOABaLq8mwtPs0ZRkt/LneFuU+OKn\nfccVnQf+GHq4Lz8Jp2tWEhfbTwqBOZ26AhCvK2Q3TX01SW9ZH65j1vuzGcsP\nnjQb+hNtBcekoWWI8QpvDrxfxH9oZzXgdjTreeY1/flrOwrHoWpogAq0G7Z/\nxfE6v7kjNP84GOcCSRjsugYC1++3QGjsfCusKmwBTCQA5MTTBWEpuw8XkJhi\nOt4d8sx4hx6PoGcGTGiwmzMo9bRKSyQZnn1baZPZBl9v2RefJ/9mLMI3gKld\nHp3Ij6qMzIoeUilnIWeX0NwPq1v616iiifxbjKf/14K6XYBH0MB7hIAC0gby\nVgv6NhEmDq0dMhRefEfZC5XKAI61EdRvsTHQxXmQInF9TXWAqCdv44rTfb/t\nqmuP\r\n=zWr0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.f838c6e55.0_1587047175346_0.4551550372403752","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/theme","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1e2977ead5b069a92e3c0830a030b6ecde8c14d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.ce6cb7024.0.tgz","fileCount":23,"integrity":"sha512-vn7y0+/kU3wjL9xelH0gMv+PsCpdOlA4TsNbx/XQPz5qvDObk5vdntO4asbiwkqNmlaKiPEna1CG4/9YzXTi3g==","signatures":[{"sig":"MEYCIQCL17Iht133d7fOrbbkZwVmyM42mRGCkz2jxfH4d4kwOQIhANtols4eSuA0oCpT6gA6qnVgC/s8ocifm57PnFKwOjsY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJNxCRA9TVsSAnZWagAAN/oP/0Q8rf1A0LTJhAsJqZwu\ntJwB5SzpVUJ77Re9ZgqXKMUJZ+/WsGk5o47b/4v5eoNQZMWIRSduWF0LDwG+\nYoLZaDYFAuaBr7Dxk8sYJ+PKO5px3bb6HAs/Pb9LVtZLIrd4STrGpZLu1OdC\nXNR7uyYCcwadezf5ndnKDPoaY548H+Q/wS9Riv6I60cx+q8wZtlaHOX4eqce\nXhPf/JPJqjD9+TeiDr7dgToKHd5FvGAH5bXXP8sFBnK1ncc11urE1qVYtaYW\ndcU/VKk3GF8Og2XmSiXSGkpRXE+azE3LGTWDI+31nE/44B1FrB9eKupKXSCg\n9k7f+AIQb4csexUUMmPhFWJ52LN54YUEW3ylt/fboXA66ivYbnRExe3eAfiu\nwaBfyBIMpNOaDsnyMmmGy6yk9ByBILy8IbWD2/t70z3a0srV84v8LiBVik5p\nENZysvv2NREo5yoRlaZC53cShwKYYKZDBno3Zuz5HDu8YVq7hNAmmVfGuGLQ\n/WbDZfHUv35dr2JqjmGDK7SjCJXZY/c6O250frzY0HBEBlh1Of8SIKZP/QpE\ndswEbYJ+LYn/K7OGKBd89GJnYEJ4jmyhPh0X7EXDUNgY8coWQUSb+Skm+jYV\nH4UqIRxziMq8NLnD69ETn42EcKN7+2NN3lL7pupXcgwBSFIKexZmi+TdZtdf\nid0V\r\n=76pG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.ce6cb7024.0_1587057521356_0.0026188694631288367","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/theme","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af0ee4808faadffd7d3fdda769ec2a1e43df67cc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.0ab62a65b.0.tgz","fileCount":23,"integrity":"sha512-pt2GyRxAzTCdA7J/ESdFA/ELI1n5W3Y0XZJV8DpMJC+ibsHiSHPnXwAkl+sfzCV8x80miaK26uSFj9iiRre3fw==","signatures":[{"sig":"MEYCIQD1fyz9pr7bZamSfMQCf7u0dfAsNClgPFMP6aL6TIR+GgIhANuh6/1vs5LM9QEQw1h4kgzJ+0wDbd3yUTHH/j52PtOv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKnBCRA9TVsSAnZWagAAVg0P/2ToGh/vsf5Mv0mQRNpH\n5pYXaOnimtuHhwvvHoewb6bQpjfGgNhsXz3N7tzD7Tki7omjIets5krblIw7\n0NB/mThUwGBLYNs4+/GPT6h1JzYaV4XynfG+S71INpLJh0/AjWNllQuvgwal\n2P+tafkCFhZKPpq/6q6unZeVoWFbKtY+hg27CIOfX5UKXK4QK0G7djmY9IYj\n5k7FgUpk4/hceMvpOXRohS8LlRN8b3T75SS24AdFsceGrB/HVuCux4c92FCS\nlvrNtlAAQtaTTYjf5n7YILzu8D0bB1IOz5skcXQ3br5YJ0jC3TDiKmJa8jHZ\n6vzPLb5NHkQRjOXMBiTDGdY71X28b7OHdO/mxVWcPC1q3Qogk8dq4UQw+fSY\n+HZ6kHFfLBQQZ0eX8333cDnjwhEIsksGez75IsAJpRhA8lXI8ufXY1T5JUNT\nhB1oRnZhRUuWMvY5/aE0U+lCiRZgXgWK2Sr+UJm3E1pK3d5y/KOtAO5TAPMm\nSJt8cXsDgGS59JB8Hh8eod917bRLi3aI2XaIIoFhp8HaDjnBx3K1saMbYh40\nCXI1dFHTiwmbKQQ/RCbcccnDgroig3oj7BGs1X/QJh4y5UPCiMX+NZSSmSpT\nmQpWeivFa5oesFY1IU6QLo22tI6MNRGkaZenX5Wi7BHMk5lpnv3QXPsobXPz\n/2In\r\n=5Cf7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.0ab62a65b.0_1587063233119_0.440963972374266","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/theme","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e731d098f5e74ce8f5eda6e0ce2a34f8697c465","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.ca61b656f.0.tgz","fileCount":23,"integrity":"sha512-ZTfsC3gmy/tWu+MerxDjKg9bsx0w2ESEx22SaIcYKfFVlSIKiUJ2VxP/9a1IaFvtf8CAcsMwRThXw7gBlD/8tQ==","signatures":[{"sig":"MEQCIEXW7SJvhGbhpjFddI3gNgwePAVwu9Iml4UrRfiuBV9qAiAc92GCzoC0uYL3xwfz0JlXxUtbxRAlaRzKhpKxjd+0XA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLkoCRA9TVsSAnZWagAAxRsP/2ZhxjB70jTCZIC4Rkwn\nk3Zgt+9Yb9hO/O56042zWSmd99Zg+TXAegFteGzjHFZjK4xRhBGQwtGtJEeR\nN9pDKfGHho/eI34ioATseiOuaa+4OM0skWt2dpfKR9rShyiYKfwDC9v0E89v\nxAW6ju64T2t+vdUrATusX/F6+U9crpkIAfxyxdMNrgZsp6QDcoMwVnKlIeya\nJfSTTg7tY91kUGpsCVuiO6mK4S3e3WgA9lbBh+sA4uAOx9yi7mcpkUUFq0zh\nPYa50ViGD/Z31Rgb5ZxtxebQwa7T21IJcEFGUszpPu9vUuFncc4fIl7Fbwft\nyNcGsGPEWckpNIpenM3SixIqEpcQOUEpPsSzhpsmT0578giy+++T4++jNX3Q\n3qhg6UEmBDzXziZyM2vjTdjJzL6Jrm++BdnDbkYRrPOpT6dwT4CokJFRL++R\nI1R5uGETSNNLn4PozY99ORa0pEiaQFFJwxnP+vUmPvXqrrNYUKmPDlIRTFIx\nBnw+EXksnw1z5b/CzJ+RPKkn+z8aiD3HsrSa1Hl+bgUym8Jp6YFGow92+T+h\n0vBLSTD7CPdSAH6Sm223qV7VkYG2T+5z3BALbRdFHOlJqqTdxlQbUnQ2DEKH\n+A+hlPdVmmfOqYgFj/YVVdA8X+77V6DvXUNnDTOJHctMNBQVV55KYTiDwmZn\nwlnC\r\n=B2qg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.ca61b656f.0_1587067176119_0.4509784278974056","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/theme","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a812fe8d6a66e46cb26f403b8615a458ce6cf14b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.45a6615e3.0.tgz","fileCount":23,"integrity":"sha512-xEwI/O+SOzgTjxhOibDSF5dLCyonMjk5WWQbiEzi0cnNvHR26li1SittMoGQpG5QGoZPVN+oe/jGfPf35ePecQ==","signatures":[{"sig":"MEUCIQC2q+sffJjgX2bRn7w+b5P6IWKIEuvImCh86460wOJjRQIgP3I6ttv2Jr2KiXVKIFSynDukyKrQbv5nZ7CylDLsK5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMDiCRA9TVsSAnZWagAAbEgP/0yuD6A8culT9aXFiXDR\nrYDrmXsiy0QVFyofM1KqxKrWgKI5BDQp4+Ky04scbyAc6px7BiGqgru/DaJM\nAvx0U6gJJJfCvut/xjsJzNqazSWZG+VeGW9O2RKTqYZKwZZez/P+zEawp0Fo\nV1ru5VYVWQjrZb30+T2nNPRecuaKQ9seHz6G+6bnPGA9AvT4nz46Pm7m7aAM\nVea5dmAuJ5jlSDYy1bcH/bwCgg3Kj/KL3OQYgLRG6PyNbDta9m3KtPVLUW2K\nOvV87dBDp36oR0ImyqZWI8ikbQI3708iFrYReCEgA791ibLmoXFCjWEoUic5\ngCRDb9A1P63Ht3LvPRAzF2lNAZJ5UwXKqZ4t4iHLxJswR3K/lkFHy0mTz0eb\n3qEooTIZyCF7I3TZvF8PhWDfJQepIVYyQBMfPLY7MT8kublmZB0baH9VUT3P\nFId9g62YkhcK9hCEg9dTX9TUTO21qOK03bKDrqNWeIN3ivshMzQ967ZywHCV\nZixPICANdG9kGTLkkxfEqNw/icplp7G7KzLpxWWT9yVLnQyRFKGoeP0R4x8m\nRYhDn0SQv+gMWMMFABlvy/Nb2z1JkOCcq9gtuA86ZSt7T1O2L8u4mXcv1i5b\nPZTPCbPQ8GrTuo1bEjmcfn0IpyBxhFTWSFNXaXi4UWoVQsW8BrkCisR5vTv3\ntlCz\r\n=YNNn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.45a6615e3.0_1587069153781_0.44942775698436455","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/theme","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e7a2b047a8c03fb0898549032067c6304ec21c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":23,"integrity":"sha512-ZNl+BO2ntz5H7+QUDL5Pft24Fkc8b34WOyF3za3XwmcYPR9JDI4G1sQR9OOJLLk37lr+op4IN4dKNQ2oAPmOcQ==","signatures":[{"sig":"MEUCIQDs/MN9eGa8EznbU/IsNBtI8IWptA3i28h8yV4x/AcaiwIgD+RDtD6UNCK+W8jjgsPuOolZEusuPsVtT8aD5ejmuZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeoXCRA9TVsSAnZWagAA7pwP/jlIaneGkqbpepVC85OA\nTVhFOM5VrDPy/rGt99IZz+sUK+ljwS8Zi62big4akn6wlAM/1XDPZy4fdIsr\nMkzLdQQ+vxeMiYUxsZPAoAWb+MeAUlzwd4TfG/i73iIjcgEbaIIddOhhoz5s\nJi7VQg3OWBqMLVKtjYeC6aRw8LwhKs7/fSoatu6TxEiDm4j3//n8ZiXYYZd0\nXmFdwI22g5UCMZ61l2InHPqD+cVqoHhlY1VbsjG2Jg/JqbXO3/n9o4meJiWA\ntsDxj2+tlZNxd5bdLF/8t2/94PsPnhcCPOXszME+q/srFxlBdHo9FZa38XKD\nc6XJlud8uUK/qen3X6gw6DJnlWuxiQdW2IfrzPomPiwTIx7a8OZ0YHB4IBoM\nDRMnqkgG6srnbRkk4enqRhO+IJJG2K8WhCTuczFoXPbrwYsTEBNsc37zjVtb\nvFNImDvog5Nob6PEm7cV671cs5/sYXTdwKQII3BtXH6HzeDpid0v2SbuiDd5\nj6TCfGbkBtslD4+k+0LeIN8OAC8lkZSx1eOjEV7AaDtt65n3wbKt010g2H6K\nSWD+YogQ0uR5+SDmK0ic6GJBAG/22tthjxrBwYaIIEDV1drlz4OLB58vmsEN\nR2P9wD92skdGOZad35HaUzTly/VMEfKEDs/a45nd+ZMiwpvth2vKtSQMh1V1\nfBcp\r\n=0YwZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.4b04cdb0f.0_1587145238479_0.010025066564063545","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/theme","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.b273afa93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"825141a8e61d08a6dbd69d6f9c85721cc994b475","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.b273afa93.0.tgz","fileCount":23,"integrity":"sha512-eLjkaccaq+qB/jWskjDLvJwqfueqTW1SUCEdJAVTdx83su9Zd3ZwaByWeq4LTs8B+0lC1h0W3+yiXTwxHKxiNw==","signatures":[{"sig":"MEYCIQCf7Er0x6Gc8MSwWa/hE2j84KP+k49Qz66ylAaPDPL3KgIhAJNjJexy3Mxndk2kB+VAK7GaEJCjWp2XB9q3KseDNJld","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWICRA9TVsSAnZWagAAtDgP/1PWrIDi3NBFXyyAtKHj\noADPLzRgtyc3pzp+jIOTaYjJ51fijTPrHjwm7+PUM+3lj5hDSpkE1nz6VYzO\nOuRdKaJf7nm11QZ+r8WT5KZoL95tbx2Gpat/Z8e38nb3yttKrWxGVBRQrEHR\nOty8QNXdLXk2I8/NqHs8k2x9v2y/tjC03R3nnAFOvMjK2lblN6o0CdBgZ6eS\nWBf04VV956go2Kwr5xcOuQi58icj3KdGwhoabgCKClxCitDVjtLUGR0tLWZP\nvK8bgf6argiBQC8W2FvaLQJCeUQtdEzpYuMQyl1OQvD8q70CYIcz3251hqRB\nbmB+YVUF+ocPtoIfI6x4yD8HZUwcuWd9sFFQG4tMrlq4F0BrCrjNEMzdT/Bp\nD8jIECG0mqxJHVZkLBtfKolGJTy5ljvI2/pV2v+3GgWwN1CZ8aO+atJdoo3c\nUUwu4wlMRU9rUK3vvSPmJydF1LvFqPfHeBBYj1x1HdJPC+Vwtikh8KkZYuaQ\np5f7ND3sUDz5yG19yUInoiuUlpruXAJmnjlR4npSv9tlvU4oF5bXbCg+EL0Q\nKXoJo8nfVrugVFi+iP3uKLy0NHB7VmedU9LalhpsY3PuLXrV4EUz+MJJ7MEz\nL7upt17cV3MdRQYPAsydPbmb7bYBC97aotuXMlu1SINfazFVpDVdS8zEWhPG\nGqQV\r\n=Ah00\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.b273afa93.0_1587164552431_0.4653349728589009","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/theme","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bddbd0c3bbde9cc783d2c476bc311b5a73869e3b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.b70bc601e.0.tgz","fileCount":23,"integrity":"sha512-q8U0DuWaoVi4F8RDBynlm9QJg7c+mfHz/abSXuugIYynjC8XiAq6XuimMk6JjJw8FJ3mQPqag/wXYyDshukP7A==","signatures":[{"sig":"MEQCICCmUplo2iHPgCAELFZDrQWa7irsWl5uktoagyyAWUeaAiACbyf2bGqwqeAwnCfV8NgpZ8Am0Nyc6V1EHYdGcc/KMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjnmCRA9TVsSAnZWagAAPM4P/0MoD151wMqmxb9OlIdJ\nVd/wrl9ezn41C0V7cIV9FD/y6Whw7tM+wWDRRI6t9RnwUsyavvKPXD3HWAoB\nahtm99IKOSUohaAk288iNqHvv3ZgZtobMuC2LktyWlOTAKrWkdAuFKTsukgv\ni5XO1CUqw8qS2mWscD4WlAlu/d8yD3VkQ0Qs0Bz4kzOja57n0hf/ZAQ2Essx\nVqpGX3cQtJauUlLfwslVbtXNLONRc25wDyKWQbLzTcPBSkKR9Z5HQCj6Soar\n90MkFX0TxQQyblLifeZZuVny9lKMxIcmQAFjvofeMhZnB8saodq13t0FGfte\n93bb3W7UWo/amUIGRcmDhRGFC06SYqSmAQxpJln6rIczYjo9HWRtBsW620t5\n9Cs/hcjfR5qP4cAz1Wb95XjS0FKTgd66FcNntIpm1283aeJPGFQa4wIwrI5s\nlFxolThPh1G9XX724a4zZlVjiA/RPGP2F7wu6bJAsfefMLhYBWKv7wCg3Mx2\neW/T44TqSAm6nCyH6Gy372imo4g0WhHURB8XQJe/eQu6iCjhHzUnvC8g03yX\nl1f200u1qWAnI1yqdpjRM028pvLE2xtt6a5QixKbJ7tsaP6d0WZ/fgPe1lpA\neqQ8ZuWilyAujYsLrhYBm7q36kvEUjmTupRe42gNMKHZrMeKeKsAkGEvanGr\nq0XX\r\n=zMc4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.b70bc601e.0_1587165668289_0.04977938798300641","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/theme","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fff070420e30904b936cc72f80bfb3ffcb9d8fc5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.c4b4bba96.0.tgz","fileCount":23,"integrity":"sha512-nV2o7zrImjVomcXxOxsIgJpIjrPmq1/KJPssvTB9yW37irJXnqTg0HhcjSLmL7apq/p8a4kGFAbhIFBkMHVpBg==","signatures":[{"sig":"MEUCIQDFeV+KH6ZWwD9I93WsD0GGv4YTNeWbqqQJJG54ngDnlQIgX9saN0xkS3bYMEefT25F9LGFJG93m9PNmfhtTjZoxHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkcTCRA9TVsSAnZWagAASHIP/22i1DzU5pdaXYtU9Xi9\nkR7Xa7EnwX5x1wAGzdh2DfEGk0pkzACByO3bQ4COtVbQz0uwb3hroO2szD7T\n0WYw3IdJl1bO2HuxxGhr1lkBfbTHk3u5CHw3rJs8q4FnKRGlPUC+75UdVld8\nEsPkkbQ0X66CPImIjNoAnk84FX+J9H9R+vmSStOmgGk13EsB8q05NAzYE92J\nOj9aEZgqa5ajKKQl59KEk3Flbm+0DdSqGZ6Qx1X0DjG90tEnUCog3XPghAMw\nEWd/tT3KwklKFrlk3p1aiblWbO3SD/wxdH3QOT/8u0FAaPSijo8v2DiVuQ79\nJZAb5LGa6RiPBkRnhS1j19gyCVUJYEdam/DxqXVuosg8J5hK8+8gbkfw2+TS\nQVgr7FFILrB833b82RZlSDDuf6TKwDsk/9h87zCPx5zFEU9zhVF4qPEx7HsO\nsXtud4cppI63qb1fkMaZc2Uf3eUK1+6A77bN6vAukiShLhuHi7TueOU/xFhH\n8aoAnyf7TsA3G67zHI/v9uM7GxVLjXW6nxm6mjGbbIW7pWXeoYtFRa8Gxub4\nhJ+46vf8c/4LKXB4XM3bSOOd4r/57G2rEuj7R8ZfMWInb1k86dgSeXMMWPK9\n6/c3r0DcBaguVRE8I4J9coH8q7Bq+4xHM8aorUcGtbqCtcH8TiLJA9Hr5NiL\nc9SE\r\n=Zo30\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.c4b4bba96.0_1587169042685_0.9915059674492035","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/theme","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da6837fe85b0b350dae708d72dcf254112c330ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.6c1ebc721.0.tgz","fileCount":23,"integrity":"sha512-I5U2TB1g1z9B4pCdAVAybnqlmenMVX+SpTZPrEJ7SajnTP/vzQtkh2HtMz2+RYJF5dIKlcB4WrVhMcoWumdrsQ==","signatures":[{"sig":"MEUCICAVRS9PjBd0NvByYVwScffkBbwMt47QvrqWPLotlOyBAiEA/kqnN0Sb5i15Dk6L0llIljAOJA2NYOgr9aRM6GVlLE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7DCRA9TVsSAnZWagAAAoMP/jUmTIKKofyHOxFShNfC\nVgR/9SRJSIFSw6OKJjQUOkmdhPiqRNEZQKex8HGi0IB6QmrFNr7zJEXUT5er\nmqc7wmoWqDoIX7AX2X3w/+HMBn2dTvTitBn1HnIb99xMPItYvJjl880kt/t7\nwmCLpIoOEUVelUBwIBCuiUdI2xquZ5jv+yW/80BVvAiDGt8N9rbmjCTAAbnE\naXuOBy3HbvzQtLAvJGA6a8IL2OWp6eLnGlvsz9e2sFVO/VxTUgnyKiWpNKuS\nXPubSTlkX4ky5+Gmub9GxeavvH7vV7eJapCnFOvF9A+S9DD/AQQiBOZj+dKX\n8SLv12lyY3z1x6q3grFHJZI5l4k/Ckrw44ITnsqqPgHChXFw3fZzMrWmYAnN\nzx771/zza/dWVVr9gz1U6usM9j11cBJEfBok0hFsoyoI8xeFo5gyzRSy+1Vs\n6XCThnGIhvoWkXMNj1RB84oF5sfK5i+H8ixrkp/1N+x8O/dPIzDVFSYE053Z\njj2fLkLKupRNu14XsI9cvb8dPlYgTXRigdLByg+jFsoeUKFsb/MBfI3s1Myh\nrn4aj4MElwcxlmpm8Y2NapyPv9yCnVhrz13LNAhUdS66r96E1Nw0GytgC5oR\nv7OpPjRVd0giSOvzfG7RZWkUbWeAh/DNAFWf+xXyAY01kxOBLJrKpOMEWlcW\nJF1n\r\n=aGbC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.6c1ebc721.0_1587412675261_0.36463760005785706","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/theme","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"401f8d17c5e038d8c8aa142559744c8048bfbe8c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.9cff4318f.0.tgz","fileCount":23,"integrity":"sha512-DuxXg/dM8tcmtsKqyb2TiY6aRjqKW+DlEtfrcW/mJ9YYKXvrzDqVyG0Agzivo1XxZSwf3AwYn0F9ndnFlpZOVA==","signatures":[{"sig":"MEUCIBs9cmUn/S7wJMNrmTwtfaVdVkEz/F8zJtN/K8ocFSKNAiEAyUKltCeuslqINHGUZvaZtUsjflIBrz8+ockdZXPAErY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengw8CRA9TVsSAnZWagAAOfwP/1ENxDcvmJYRybNmXTTQ\nQsahi6x5T8rb66JlLj2MgEiswVz+G89AHSyMQpI2xNT6CK+DGoAr5mAk7Cj+\n6RsDqLTE2ONyOU1r3+/st5WHM1SF0B+ouGkUGaDfuX5kP6cYQ2J/GOcKbGxC\nEz9y1mhyNrPGlJeZaecpGrKWlPcd74imV+eP1X4CKgPs4+6WdylYuqZEdNrC\nYH0kmgZMPZMeUUYAQAEZOg5uMDLBhwzLftu6qXgUjDiAplfnpwzZ/wHyRpQK\nEUpUoApb6tbD5NROjH8z25TiDuYAvMfBYonQo9Gg28gaSTwXTIj+BAOwPCqC\n7cIcYOU80VRs6v9UgKjt0NjuW9qUmS9MVYhmZhH7R8OR0ZUH90VoSoI4xHrU\nLkXYsaYOn9ZcB/vtUmUuif3rLDzXQTDOsZbs3l2mwMW+ReMoRjEC2yDDHzTi\nimsymHlKIa9NBJH4COPiHfulq07aA9rxqN5oYVKZImn6LjLHbjvu4WiCGv0h\nWAeXG3JjgVn9RqP8Veu7JolHb8+C72sf2JIf7u7SGTXdMTFrXMD2yEb8evft\nzKBPSMhpSItRapz6hOhGnTVZpqQ2/Tca9w2MF9xfOayGuGVcKvNkGJNQEqFC\nxyvQ75/CVJ/M59HxPEgUHkpIXVkRuGyvdKwQAkEAM4y/vzuMLj6Kz6jZDc9J\nIue4\r\n=DH53\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.9cff4318f.0_1587416124420_0.37398879021877596","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/theme","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.7b4482402.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0063d63b65e8872943c5c1f420c427b414ea5a9b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.7b4482402.0.tgz","fileCount":23,"integrity":"sha512-NvQ3KzO0AjcmhOA5zfe7Ixuh3cAP9UxExkufERU+0B13n0cyrbKdRb8Ub8yemZlQ7bOhIDH3fP4c3C+IwF0mfg==","signatures":[{"sig":"MEQCIEgDzQHYoQPiLK9CYs8tINmSJaXLl2dhskOgnfkWKPtjAiBNKAUNyVLiAqsoh/NZgbUpdqM20mfOwc+sT6VWo/2vvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniAFCRA9TVsSAnZWagAAKgIP/Rna7N9Mp93Vp9kJYHwY\nSZmzoZXS+g49D7TKP8V/Idtv7m+du5qVlAigw9EZGhehVAwAoncPV8kvwOsu\ngkyEkMRvG8PnqCKlX93pGN6qx3GCTS0Dpe9P1PAbfdWpKMUeVyAwjX2gSX8W\nMNhBktjaK3E4YaAxWVuOBt0Eb2/b+qf9pFCMpcqg3+Hnoxe/LG0Pq3twWoKa\n8nPiviKIxpRE6tnNxZ6lL3oDjJky5Ka6faZo4HIfHnIOMT+SfG0+fPFM+RRN\nrckAwMUSJ42IMxm/OXkrRYddtn2B1ND/Wl9p7ubsZF2gL8Nn2ThLffMmjfer\ne3x43AZmPmY4ZJtslBaFJeTEMh/Z0yMG+PNKtMylEv5fDwwK9xi0tYINT+2r\nio0qBjlY32m4T2ba5xlqisX4hvX/U+fwtK70uA2UmAdRwOBw8W5SVN6HfXPT\na0PP/ow0W/CZTvsMGOKdqYZLoZv7ttbtnnqba0goM9TjlqzXfuc7P2ZOJgP/\n8HnmoiwGb9CGXTZ6yAVMtwBl/n+cMGOGzsaCvibnarLu8T2JrM2b2i8ybLZu\nuAwfjvn4hhlwM2N93KCCS8C1Q5QZFR/vapbM8QGShIcd5oGuNhBGw3TSuE1L\njJKvUiDh9lqhpImhzv7gerlhwKPtUWQFyWFUa8DnvYDOn2IyGn3QYmzOsCBU\nMya6\r\n=A/6l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.7b4482402.0_1587421188871_0.32120652663823956","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/theme","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3eb9770fd221371fd5cb96a0c13e8fb84ac8bbd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.deda86d8c.0.tgz","fileCount":23,"integrity":"sha512-Rb8k0Bx1H6EAezKF848k3zFul2XMg08a4A/q9pFkgLmstlPyRydnF/8XsswQRsGsgs2hXJGR2HD9OL8ai+ESwA==","signatures":[{"sig":"MEUCIQD92t29Uv5T3p6Xjcj7M5OZ8/thq2oqbGDoKlPbJRKVlAIgcGYK9Y+g52VEI+/xc3FYwjrQcRDIIRACM5CzieW43+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkjyCRA9TVsSAnZWagAAfMQQAKJW99oZCAbhm5wDSpYo\nwELzsQHsuy0MR70nJhvfr7epl/SzlvgW+so18plJGJTLtgc5loxLwaE6k6v3\nI47560lZ6h1npWsKuiuruAbKCgJwrxQrC6wGhHh/xppDEHqX8jNAIJF7ItCd\nMR7hC3GjmVwPfGVfPBJdCMJg5M8hIVFk7pVsMl9L4vKbhH60Gj3QnHZhzrCr\nZBbOJ0D7zID9TURd7ulTwJk5PXHXcaBVdM7MZADFQ3PImD7p8UkYuvW1CN/N\n68Q8u6lgGrnnn7khP2Hu6yi/PxqMdH83KY0UQyxEwC9AeTRtCKQnVST4ukUC\npZGnGxhXFZgumUupw278TdvYPVZGB8WGQmOJgQKVZCjH73OB0PLaWs09waHV\niNWgqlDwpvA6k09gFzCdX1YSZWcTBvkZSUb6eMwTfNCTlzd+QmW+wyVlNMdy\nkPlsBcL6SzkhiN0Vm154M+1Xi5Jzo5yW/yIBVgyQhR+PGwdpwByQCo90pGo9\nqaM8JvEfz/8F67W7d0vwMv2Xb9aVExa8pEJ6KV357dVZQdCshNSTYcK+6F1D\nrJzOE+S5bsTfS8w08EvB0SgMEk3k6mjl6fm5YosJTijZLs5AYthU/J/AHNaY\n2vPjJUF2MKL8uPlYsvdTTA8paEzhWuHfKWpTO2GTrj18eOuKmvViTf3suhv2\n9Dm+\r\n=CGEK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.deda86d8c.0_1587431665524_0.7308769654801337","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/theme","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cd76795f2c38efb83498a7e286f7ad896a71257","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.d10412cb2.0.tgz","fileCount":23,"integrity":"sha512-DfwlxOOqibXMVTVasYBn5myjxpWEVl2hqbI+id7TSqFLgctcl9Qvs9Fwe0jpN0+yK/YwRJ++0jytwtcmiKsI2A==","signatures":[{"sig":"MEUCIQDo22lB36fbejhFoekk2pjVlzK3OAyOwf80P7hYhjsSSwIgDay0gDA7/2Fwcb6YGd5dnH340mlRMozgYvMndBkdfK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzjVCRA9TVsSAnZWagAA2tUP/0Lzk8mI3E71gZdCVctC\n9n+1V/sSWJrcVbZe5M47LIOao50H+KuYGvcQvm2rRGI8uEjjiqsA7OTrjTTl\n4QZ6zejl+KrO+HrzoQe232NPwh03h60V0ymQHIwCTQ2+tUxzhbNQze5N8/AW\nyIR77ZoTzQC8evqew1VKq/8NOZDDI2m/h76bEyYo3HsAqHxKid7dlTHqcTNK\nYW7YIo+MP1rzzllxxhdx3oMdLdOsP1V6QlHAEvGMZzpUNJeTbkFu7dE69QiQ\n8WBFc5uVkxTnAW7nhe9R3sfNpECLgiQPFvu/WbDfVPbP/Z90cAWlpziHYaNW\njTfgS7KPgMM94MhDRkOPBivP5mdt7ku1625tqLd7kP7mo+2Yv5HQQ5FO7oSu\nMAjVSxVQ9AYGthLNSXhwch4J9OTAcSZ6xL7vdRPDO1kYFxWaowA4sLe/YFIP\nYdyXGoQKuvdmds7n5d1tu4XhKhiE6Y30t4Xd13oYm81EN8R1POhZpCUCvQK+\nQteDcvCTN7XIvy/8aJaXUDTMOjODmuiFM0XXBUci0AYCl8Um81GeDdEX+j4s\nEvqUcHQKlSAPtRBgGYj4cyHvSiVPxCf+jic0L3akHsPNIpW7xSadL5FgV0/M\n3gBys2y6X+DoGtd82lTBMpZ7pl0RoueT4LRH4odTWwNNC4xo750CabsQtnYe\nE63Y\r\n=QVfj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.d10412cb2.0_1587493077419_0.6825066489097156","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/theme","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.c141801d5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eac581c71d9c940b2afa6154fb607d69ec8a2f47","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.c141801d5.0.tgz","fileCount":23,"integrity":"sha512-EEto+ZpIQgTTdullpLxi/bLDWzXvf8jcggts3aQkh0An8wl0S5/XEAw9jbQJal54Nmcb420F6GVM2i4WAYfR/g==","signatures":[{"sig":"MEYCIQDXxspc+Z2HrAkf3ViU/zcxVeQEWT4M3QlbnNg+/ULgoQIhANWtdS/nROFtYeYO1kGPjQTqyw17O7vyzyWWN+s+rokN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0xtCRA9TVsSAnZWagAA9XsP/ihsvob3j40m8rhaQ1UN\neO6DMPlK/AH9l3owTqvEDOafdzW94VogXIeUlzF6GyV/hEwzlc5ZyJGcJddU\nuk0/ZPixSJ7e7HRLngOh1blnDjAR4e629DaKjI00k6caDJL1lSUDk8FqJF/2\ndM1Jl0ivu/jKlYVQ0VPEJoSkTfAzaXXmDQw+oHAeX/DkQdZLr8NF6oYMKTS9\nkc0QnMBsixWdqm51pm4+tVPvbYjna0mn4BPUwON5kHDBUHYE5wNzi6f1EQY1\nJTUiRyOXmvIszDF1eCEhA+8mLYNylIL+o7B0dZgqr5hMApgUcPvR9C3dohPh\n+eG0NgsDunibVKo6/TxvodbO64+Re4QDJqHQHKHVi9QNTqzsgin6hTL+XHFS\nnnJblaccP5ME+L1uvIIncVb7f8YgZdLZtghKXYKxJatUH2sLUgG/yV6YMMJz\njmC/p6rZSypsBV4eYx50+JKhmr4um3+35MDoHbmbpOz8E007B7kFg6gNHETp\n0EdajYmXI537wQ+2ayFpuOqfv/3dj63SBgiE2CTen/hB8Yk+P/6SnuIckW6L\n+Lj08LAF+78z89V7CI2IoRmGtlejyevEXoPZbTLPzxekvJEdEYU6DJ1A/3BG\nOK3iHz0HNcjMHUNwwCn+bDzlIufb8GvDh1GtZvcmwJhFDhhCQPPGoaU3jaB1\n/Ksb\r\n=Dsli\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.c141801d5.0_1587498093033_0.9644530147779007","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/theme","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ec329eaab2583cf5131e0c1e3d97e1d51d4ea6a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0-canary.28d10a96e.0.tgz","fileCount":23,"integrity":"sha512-Chl0746c6eHpx8gyxbXi5zPZxVwCoZkFOStbX7/diivM+6C7VXRaZAMsGpJjZ6FqzJaBdG/fq7Du7m1zff9BoA==","signatures":[{"sig":"MEUCICLpU/fHoogq9ua0ERlO64+K2G8swSVMBp9Q/Abx0ZP0AiEAvdM6NP3Da9Xdc/u5GkbfiE8QDrAvekd2zolc0xpUIRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoL/1CRA9TVsSAnZWagAA7CoP/3bvFI8NWZtV8dEwie8w\nDA2x8HA4TDVbRApBdXDrdZoXVecdxjcIH+/SWkmlLb3W1TpuxEhKAO5ORmDf\nA8N02aUj4MYD4ogOqcykXAYEKe9llTzMvvJWW/86WbKUVjmqC9Z8CITIu5os\n32GuV2+FdPlZVJ2hxwlNAnH+z+0iQfldkcEtK/WXun07uqcQnSCVmhX/cWWR\n2qUN26b5A0FH850Q1dJs3tFquN5Kj6iDK8cV1vvX570ksB5LHHpISE9DYkzg\n+LfniLa0p+NjnwsH1XzCR7q9/wvrUCIsoXNzjUOGyTJw7trno6W7HHXj2Gjh\n7tWFbwUl31Fvg4oMlizO6ioyPZXClRd/UXSGCOZwsLGWs9YFlMtzyAWeVWYJ\nnrJ130Wvgl04++wkMFaMTCoDPQLFQS5NbtMfaOIb2Ng2sZEzzKABrWoAxr37\nNyl0zsil4n2W5yftcC0WjKwtZiw9Pf2chxSYOuKptzCGdWNcxJ0j5q7od44p\n5MUu9RZc+akxxMhZToiuhQT37ONrNqcQ3uxZ0tcUwg57xpsn/ct2MJvXmKNN\nJYL/lIf1mUdL327smumchqLq63kLsCASB15hCpce3miff4q99645awO7j/92\nKQy+c1ODw1ZLd1QdEzHLkFPOOJTCz9BTrlgHsNikW6JwOOBBAgMpy04kzK2U\ncVcz\r\n=P0io\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0-canary.28d10a96e.0_1587593205327_0.14889461126514836","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/theme","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.8540808be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13c482b0034a5b63e98a968062af1e203dfd9d3d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.8540808be.0.tgz","fileCount":23,"integrity":"sha512-yS340Wapv+bpCLgUDphTUPMGIJMxn1MzCgHW8lIyY+kyVBkL3yL5zba0cKCUrFdwzOYdIvCQ9iJR3mOI1gVV0Q==","signatures":[{"sig":"MEYCIQC5n0X9Ts8FMRqFsW8IK4aQP67dUsn7XzeU/YWjniuKMAIhAM9G5NOT/+Nyel1IqzlMZRE1QoZII7XPd+CZDrcO9GTv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+JCRA9TVsSAnZWagAANi0P/1sY2yD5hY3jl+l4NbhW\nO0iakfQ0zBie3Ys7782gpvI4+9aQXu9WSDvaEZocvn+OzkCVUISocBvj68st\ngZQJ1ddvU8cuZRhyLYIaGTgH+d05aIbZv/NPtkQYlmKfU198nPVJDyN1x+MW\ndXID5wgoodluxZSAxZrCGSXgBezkfup9XfA7iBVWj6S7Ela4BWyt26pYDMJK\nq3q6ov6DXzlCbMsLs9XHyZdKyIF4yprvR3NSESuZ/o/jY2ywFqIjAYsQr93j\nn7eo7/kpv+NMF3GVIbw54ui9KUR6HCTxanhso1NS+GN3tTkj9pUQWpP4QxQW\nA0KVnx6mka5qgxRp9wbUSZZUokCMeI+C40iqgbF9DkDzz6GPLFpEQo+W27f5\nkV4Wv6O3WKXx7RJo7Up30KFpOuHftXEx521zlP3n07EBRp5Ft43kXF67/6kr\nkElPhWyFWsEYzGfF2WCQTZ9cCHFtRrp+zP3M5cbBKmtHTPG8EKsTAgCjLpGf\nFhAd3BZOzRSXvmA623f0NB9pphFBVGLwAcdDVC537VM8ZbWvywZc4YwQViHK\nKkjNE0sfDQG5RgllXM+GkofNK8hh/KbjSjlAs8DjZ6C25Ey9iJy8Fz163Dd1\n7uqg0k9TbVVRWFgeKA5XyjvuMdlXGuQm3VOmz5Hqwybv8cG+ZoDFPK7ZUGZc\nY0ML\r\n=PHKL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.8540808be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.8540808be.0_1587662728387_0.06838934330357671","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/theme","version":"6.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@6.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35da34965737e556b35670bfe4830de0a6d1ab9a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-6.0.0.tgz","fileCount":22,"integrity":"sha512-dViBx1lsidoQhVi/MYksTmDs8aUPj3mPVQIaBPtDRtqpIuWSwG7bCHoY8rG8FHRduPLpq3b1A4OwKHBd0RWVJw==","signatures":[{"sig":"MEYCIQCzt2zgLy9eUyi3KbsYGLHNWkg0tdgZ20k7U5cPtAiQWAIhAKf7xQ9NvRmbhr/h8j98s5BV0fMzTkKyMgecLRBcei+K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+mCRA9TVsSAnZWagAAnGoP+wcb13NuqHMU+8nGMTPb\naaMleHMHR/7qdhXVNjYcP0ts1dEGBFaqR6mBAvojIXUGG4eyXKNzODhMJbfl\nw62YCZu5dpseyXTe/K/QRA88IKIy1ikWm2FbJaVVXiL3zdMZbQTovE23uNQq\nw9n2fYmJQqpQvzshj3HPXM+dsOD14oUJiE/z7wPj1v268oMO5ZxJhHOJ+GTM\nE61RUm4EJS7dz3x33TPd2N1sFqOjZL4R+jm3tC8BdsnfgrZO69IQQIU1RURS\nKt9MiwJiFFRPJwkFEr3HvB/fntWJCZ8cON2NYyAZq77Wxv3qfELvIZJc1hKN\nr6EqnGVUUhsKymqOQjw10rrkOHAKXrjCxqip361T2PkwSdf+o91iDn2wO70c\n6gjNuodouRJI59u2JzH2zR4V1FwENg/WokrHu7wn5hx2y+zzXBiDYpI1aS/J\neh4tk02z7w8vVQnUEx13/r6SzUMRD3pp8J6rGCMr+5SvQebkaiOJ0lhAKTyn\n6U7XuKiVgi9sC8IsNZGwbBWazofDJH+ZTs4B1/BLkG89pdLMBb8XKHV2Fxnj\nIEyZNodzA9Y/LaZMhbS4ni1pORpUmvqSHcrZviO2Js+TWwsC3AT0G2ZQZ83c\nEmEcm/6ZYVC7WQ4hLr3V5vzxnI0Hnl4ckNAmFNmmJUWA46REvP37QUCGihHQ\n5iYp\r\n=Bv1H\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"^6.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_6.0.0_1587662758174_0.8848692285933162","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/theme","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.2673adb74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bb2403d6176db0988a577ed0f8f3766791e1034","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.2673adb74.0.tgz","fileCount":23,"integrity":"sha512-oHn/uJGE3tDHK2FT6D4ac1mERRiDGLFg1kskW8zNLJ+Zptz7LqckJ/7sCoiFCL7f8JyvjPrPlnO/G0UyQR883Q==","signatures":[{"sig":"MEUCIF7VkoATVSLYc6LP3haeU+pu/DVzHpg3CjVAXHt0HpmwAiEAh1iYBOXTruVOgiFECvjiyrtxLOdg43fA51FqWJGBRUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohp5CRA9TVsSAnZWagAA1X0P/ijP5BjMx+Xhh0fx3fGs\nFPhZ7xpfSthPVD376IXyxt8Yv2po1q72swigvtXBgNSNw7OVX+VZicVEBBZm\nERPSdz0s+h4ikV/rgpjtoD/NRpynYmnPNDEMoZdZ18JgZj67GkaKU0QACeir\n1v7+JLPd87zILksYltOIUDQ3GIetiHO2WJoSUqqANfNrQ/6lHOeZZJpAGccm\nDhqG6u5E12DLsRJuaVg1hcmUrueXHBoeBHzaUjXFMZoJRrH019fpqSL0HdQS\nEsOjbLyThrvSNYEkAuftIYV/2yswv6Pbb6G92aFhNYZKMU16cxFmfndTbvp3\ngzQYbLXdOLh+fwv5uZgqYzB3twOD4jV4m6Jt63BwWMXy4t6PAvoYXNZIxsF7\nksLq//mrLmprPTBeCxQUa2GnveL8H015eGfsqploUgLN87d9vnMs2ch4qNK1\n/V29sReyDN5otzZ1BC9clee4JKuXPSQkhUMsYXJM5GF/dbvbqiQldqDoAslh\nucHzm/26PHLiHWgT9HH0gYFLx9Xu5CY/Mn8+ZMip3RKDlXBpaUbkXKkTQaiu\nI06CsHX1jz4TdtA+MYbV+T0ty/hGmjwFGXEJQeRuVWkiyRe1IlY7oUNJfJiR\nVZuZHHxwCD0Y59P6EEqOOl5bkb8HwwIo3O9QyGCLElu8imwA9YyL9+E9WNom\nkabP\r\n=QnhR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.2673adb74.0_1587681912974_0.7336699860389075","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/theme","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cfab837e98a441f7925ce85df778b093529f42d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":23,"integrity":"sha512-VX0NAQyfrp51JCzRLsJAhCjqUI3dtfn3nXnTgdtDq4cryF0Gl3u3Xj8twbIx4Lne40DeuHVrcOGCbfeM1NcfQg==","signatures":[{"sig":"MEQCIH7ZIwTMWoEWsJQaX0dcIMhuKrKF7Ctd60m4TKz5xMCDAiAntDuQItVdThF9oTgDy3ALPzqYnYhZNJwX4rp31auu5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojDbCRA9TVsSAnZWagAAeSYP/1YZqytGZHu1wXNId9AQ\nQHaXPvpj25ZybC/m6oYlJaeAw+5dwm3SvaBhoW5jmbZJvzEkDj2HZmH3nwr/\ntQMPbR8WzEZykXvY+uK+cBlg3cqK2unv6qCI/tUZoa/B8QSkiPHvIU7sn9gP\noHaVUFFe6JVKOUpPOhL0UgfvEzaBC+JP5WsWpEFhzFZ9zJfw8DZNpZ+YiLxW\nZcCwA0whi+USTRM0lDS7wlVsPN+Z+duceYqudkpYf1Gw0mkEvQ9sLdkLzY8A\n+3P46wV2/EarTrwxfVEpnXfNYZ2S3SOKoOoMn7qeCtei0/7tjjt4/L9d1IC9\n701E8aOX2nXcbJfnZ+xs2cVa857bdr+aAfHDW6MUKkQyktrc4MY7kOu6tLCD\n+V/YazCcE8DuZ5rzAVSQBfOZDRxXQzQaGvBi40R3BW70xjjQIDS862XLhSWK\njV335ISo/HxnLReXCLhAvBNwuyF6/0PRO/AmRgeeIrjUAnWLWre8okSb65FY\nmoVSRzGN68Ixa9lmHsjRqiUlBauuGt+X+B9UzO/dnWsSc48lxfhGE2HvwtQx\nyiEb6gom0bUNxpXEXGnQh4gmFoirEewPcHi7qIVW7cGB7uF5dsnIZQO2rJYR\nLDiJt8BeNzkjczrM/8ohHSwZxFmcbjXIkF6Ukv+3ZSDu0JBNuXQ/jUnC2DF+\nAsWE\r\n=Pi6/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.b10d0d7f1.0_1587687643267_0.5106023343911053","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/theme","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1098c061f84d56a04a4bf848c15532236977ad62","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":23,"integrity":"sha512-fHRqOjKPQuRNdSc3qNJ+gRMzTtHPXrAYPTWOz/y9XUzHlApG2YQa0Csw6zPSP1dwRACvEBy6QwI/QlBtoHj/YA==","signatures":[{"sig":"MEUCIQCq2IF4CGnLoOMxApTDJDKiJmZyZZ6/AEyovk42HtPjngIgG8DI3S0x2Id6aPfw4+07DKft8JogOHUcrNtNoqY+4No=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1SiCRA9TVsSAnZWagAA01QP/0NHtMFOQlFH3M1rKc8M\nZvE1SYAKvyX0eN+78yAfvful8Y0tw9PCovZlSxfaov4YznIs0P0iC8vIUbAt\nxZ80n6wpAQgr3JL6vORX3u486yIYFow8ytisIQEhEb9JZ4XD8wpIvOAn4tJE\nAcTsPH/3e1w7LmppAGwmcYXOZB1NpQwC0/hMIf0S7MxTQSaAlcBcFDzzK6zq\nVHkYpnhYoeSDTDFrxf8Wo3whd1RPuCwfDO8CC3shqkrjwu5R7GgJv9FhqNdv\nhPZYgfXDkuYvQaB9DjiygwiPg2Za+SgCkOxEu5WoWFz01X3mngS+pDLeWbRK\nAehUeydZfrJodN6eydNYFsdRJQD2rGyVY1ierVMO/bDzRV9IUH9tsRC9t0mS\ntLANejAWki3Vm7NHtWXv8Vn0Y97gxo85kLZjUyw66zw1O2L9cEUGEmlZj+iy\nC25HXsr2hgCFsP9nMnONm0BNF4VkI0LXMDX7k//taxDt0kZ/5IvKf/nZnfFv\nZepevISXJ3yBJpjMOcf6pKWCiK00oum4W1qltUFRJfFjOAw8QXgecIFzKvka\n2Ld/3e7Qs67n9/QFR1czWkqTRQUsWDolhuCa3O5bWD0podWemZe9gU6k3qia\nu4Wp09iCrnc3Si09oPrKCyfL4xkG17RPf1j6xnw4DOcsfPbGHzcPn8gdaKoQ\nA4E1\r\n=P4WP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.3bd8c1bac.0_1587762338305_0.7164009937881122","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/theme","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57968002bec8c6937292f4a6c13c6978e5874a2c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.b83c8dc22.0.tgz","fileCount":23,"integrity":"sha512-xC3z+CcoqiTnEzt3CGVobTurJurorkrVcXtOMmGhBbGwr+Nl6exkJ1Tafslk9tl1gHIma+WQFmpLII6kS1qh1w==","signatures":[{"sig":"MEQCIGyeFIMJT9KiEmEuBDzZ4i0oZBUKHdkR/4GGQhabsbo9AiAF4/OUXE99G1wL4vNrZYAdWYmrPaZ7J+hCozBPmNMSrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1ejCRA9TVsSAnZWagAAkwIP/3m1R3o5PxzZgR/NwgNA\nyX8E+22MEwFI+JUjSr/v6gggB/BLy8lGNCzdo2rMEmRpdoXDGQtjs1hgUvzs\nRscqmidoqscOU2A1qfUj+HSIkOBcankPk6HpUO8zTjDDOVVF5OGhgjymr04r\n2FLC1bE1RsdMhoy1lXtr19RtPjQP/Gq3RuFUFCbIGFthQeVdFHYL5x7Hw1Se\nXE5axkKqEYq6wJ6Uz7xfRlvnAR2XQiWjGVCWt1msroBFHsABf/fYWi8pgse3\ngUHSsYImj6yavqZbL+gjgwb0C01q0tJlJ/t0g40DX0VifpVt4loNN+6Wqplo\nQkClu8itM04PMmL6sIb/8uIl2x18cNomHngF01Glrm4L+oT5tIx84hfQup7D\niRFYBxb6m62eNo7nnhzqLhqfNCpM4WlSlCNznx2y4RXfCpChnK4380WROArW\nb7MC0assXJpjEKw5C+VC4UOwYdkl3dKWYaFFB1+9O8N/lGFAl1KP/biV7nui\nC9vLDqGH+73q6T+xb7NUPu9WdwyDVzJjqBBx+o2u95yt2EY6glYwkDyk8hbd\nQxvEgU18PtAAH0DL791Ori1s0D7ihTcos+qR9GIxhWqisHPQg5r4O+U/xadm\na+n+nYDXZVFT/mltSOKLpMcrvJVTrhtC4LwjPn5brsSsEPOK/i5BVnC7mXDN\nDb6B\r\n=+eUp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.b83c8dc22.0_1587763106662_0.27807921471638664","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/theme","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"535f24312f384e1710682279939f89a244ecbfb0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.1b3dd846d.0.tgz","fileCount":23,"integrity":"sha512-dSfPP9Tbgu0kZY6vdhvz1gAYiFMAQIyY872Jhh/X9la6EphfeyN2Y5n2bxt7+dUgLDV0mJXe9DW1Q+QCqkQ/qQ==","signatures":[{"sig":"MEQCIDndBcy9oL8y2piDg+ga/je5bmwol08yhEYabvHcNbBpAiAluuwcld02bukqwgg/JmeeKSaRdhwjQRnt5gftCy7JwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4e1CRA9TVsSAnZWagAAvBAP/25J+3ydm8EDgV1WDFRu\nhgBwLnKtHXyemQa7p5ervhX+vdYNc+++2mBF0MlnhYOISY7uOuPa6WtxQslU\ng2KmqAKRVa3EfGUHF7DD75+IttM+XyPMPoaHPdT7Eiu6xYk2irtsc1OgjMNH\nsTixUrA9nls67QLeZR+bZS+2ALScZ72CH5BjTiBC5OAommeGFlLhr6UekDOo\nF9f6dWQ/UhXkPULaSfEyMffx+O0A9NxwfJNix9QbwUmDbwXdcxVM4tvGFCWp\n6V+FKO0cxpmuX1TNSgbtJISfMLK9J/5rNVbOHt02pLQmW0op0dkPpQ7wvPcq\nWuvQR5PZYvPYnDgCe4NX0lt3z95CC5WBZToEYIu/UpV1wa7buWxo6eOm4S9+\nrdBl/JU8hfFgvv94RiytCBVV2XOhdibTUC0JMU881XRJEqQW5m0iUftsW0k8\n4Z21stXYiQ3uRMiISCZbp6u8ABZ0LbvXEisEdWqJo5Kg+6ji0RLUCA+Osy9H\n3QdeXwzcKQXZ0BT3bvOhOWvraOYorm2F11r+94iTlftpbp2xFI0oymFTCmab\nOOGu6jyYfk2JiKV9x2kgku35NKgGhW/uER0VX9H4i25ZbJz/AHYGihqDV4im\nmEkrED4qgtK8e5gYjpm7M+Zl5K128iYLYqbClHZAVL4tVmKiQksIqzDhqLGf\nGdCq\r\n=kL4e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.1b3dd846d.0_1587775413173_0.06490752563548052","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/theme","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.29debfea7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18600d524d9901243c22b477e7c01bc8acc39bc3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.29debfea7.0.tgz","fileCount":23,"integrity":"sha512-1wB0OU3z8j3SV8HOgFExklNMyfYM7eh9onnr5wacYfs+NyLmChj8jhJk+pzwvlu5P8jLaK0sJ9Q9rySIwj6P4Q==","signatures":[{"sig":"MEUCIQDbN/Q1KnWz+TnO0bjT3I4AFbw2VW5KOS/Sjho8sgh2zgIgI1mKs0KBERi5iqannNJlEtHjoxl+Jy203l0jfHw9V5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptCuCRA9TVsSAnZWagAA5XIP/2e8lIpTe15yi3DwcZDP\n5/wE7IOe5D04HBeRtsDjbu9u7egtFALRQmIBONBpdBtRD7NPIMym0uAHK6Rv\nX0SZqB4FU3qnOB3quGaWnrm818pZlPh9YxQOFuCDQehFuruznj4aiz5+b8Qz\nckE8Tb+Sn2bEH4WSZ0f2jSu5I2Xei4lGFZmnInTzXFO/xP1/PFw8PipWvEHa\nWJky36gJhBIRuoSFwC9DCUTTFlAcWBVIQpJ92Y6FIJtGw/lVJYh9Kk+Wbaco\nWQs/WLb88bSPRdf4s84b8Wk4omDgGRY13MMfblZm+qmQelEaMYmCvnCKBZIq\nh8hoDVuAKSkwT8OK+W8rrrGXv2kZ9lgvWqhKJQ0ezr8hoyMfxdYFxXQJXOPw\nKWhgjVQWdG66H0XfIcohI9s5ucpJJxDDnBrYPAETmeZdwTCqUGxWYUENk/Ob\nNq5XkhR7LVVjRTXxILqqi1Is0fcfKLC26yr7958Sksfqh1zH9c7XVTwRezsi\nofMC8IusMMbXbgYhzyufyTprJfYyW9F/gqsC1UZUrplHO+NdOPP5gRuUhXNE\nXEZ4PeFENHXeWNp5500OmvnhCjJ2jn8W9ax/rHR9ZgATQt7KBOU/TJu4/H4e\nrPP70vn01jgWKD1Qpcfk7FNSFBR7F/TFDaPzDitc+c4IoUQevE6KQYIpcLIr\nkA8j\r\n=gkTA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.29debfea7.0_1587990701607_0.8287043159965519","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/theme","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b3abd97f83333c23eb388e398bf286b77abbae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.28d32f8e0.0.tgz","fileCount":23,"integrity":"sha512-+a0MUYsflgqo+RutXQ6gf8AY/bVeHf9X4z6I5oD0hEDlmi1Oaz6/8zo6S/dtC//6jdGMhyLWf/QBaTjy6r755w==","signatures":[{"sig":"MEYCIQCY3NMj6nEV6IQTyOBcddMP0sDHO+VIMJ62jfZE1grD9QIhAJHu1ADmUxBW7JbN3LxL1RcZQyZ5ZJYg/5CqrKEyLCLP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepubbCRA9TVsSAnZWagAAxSYQAIYChxpU9B48HAtS7X4q\nsLHUpz6vazkjD8/JwqfW2GN9Lry5971Gq2wg4l9DXaVA2taKRHzjNcbmKlma\nbIIP2Ml/oN0geAIWz53m3dQt9fXQ793zWlhv+V32tda3bzHc2pSMlDjdWa5O\nwNlHdRp5+30d/3eqTuAQSsT/7aXr28dWK4Kf/UoYjxrE5RyxzQUW5APuccP5\nO61+UtwIOIf4wYGFirbshRV0D21/SrwEs54WJIVpC75On0dz+ozRJRsEsutE\nqcYIMhdImzAUFZkzzeOVCkOb5UTWGZJ7LXI6Ep8Ehl2QhOO6pbGFbPLof83u\nlYobRAiAUfbOaocmq5lMGYtE/eyZi37f5EpzyAhBAZ/gxBVGs9voICpY5x5V\nnKBnlvw316eepAHeoF+r4GibLyvH4hyu+xjYzalZVknuADKIeR4/AH9AXzdG\n3woYl/4S+DMF/o+nAvu2VVRPuqxX/oku0JKN2h9zqOQpGbEmSqYImxi9OYyt\n4k2v5WaEqnR7ZWXGWTiotk8Ji6yjgwWPb8+ZckzRqSNauT/i0fqRqMXtjOWn\nJWRYt11KbS/bI2Qa6O4Ts1QDFLyIBv1mV0UuMahylerbTVHkNY9rPi+nRvwd\n2fEN6iASAMvSSgDEOTqVGNHcPg98P+4RZ3gxtXsc9jViKspv/q2U0UcUf+8R\nrdRo\r\n=dO7t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.28d32f8e0.0_1587996378570_0.05150124320322602","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/theme","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2775a14676ae5f067a8a93f9bd163e0a363856a1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.af71cfdd6.0.tgz","fileCount":23,"integrity":"sha512-IZKE+NSbSc6FH4ufRJK7AWOzgIqHTtxePCXj1REKHV3vLGatRejiFx4P0pHcCJkr7od6dCkDhF8AArgG+p9I2A==","signatures":[{"sig":"MEUCICkucWPU6xpG+Vi7tSIqM2jaIr3eTZBfHWAa38VZZYwbAiEAjnCwXKfRFehrnoaEco8HQsc+gPzBsdhgA1j8TEF1y2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLlxCRA9TVsSAnZWagAARTIP/jv87AhkfQcz+gP8/YRE\n+HgjD5D8S/Pm66GVwWTZ36reHLT/4/mBqPgEyEEk7vvRpOJNLJDZRWEnEYUY\ng3z9CsBScdrl0Iz61qlr8hZeRIig/ZuiEKNjyjI03z5OtrdLoc7CXjeNa9cU\nYhm9H3sAeM54O77pJJ6W3MreOSgWh2wP0KJ4xpaw5RL+w4PzXEI+JVKaQAHH\nisToP+hpzL6i1yMh5mN0HTISuv1RQmAxN5d+S5xu0zMA6tvYOGhQsDrQOo1j\nypW2g69Bnfh48UE0rEUkIhZHQpzOhMd46sWzYRlHK2tNB1cxxTUjwZ0W/BCj\nyndBki5gDJ8Fpwn0jF6kIzt8OijGtP8l2+RUFRODCTB1GfGulxakoIJDx2a7\nqb22F7JKuOdM6KhE24t3YfCtOOSoVFPnAoy/oYt6TdFrEx6k2cUPJuTwZq0K\naVn2ubz1GQ1vANfIPj3OmzO8dycPKeCiYl4kD80rnEzZ93dwQw/wOKZeNsvu\nujY1mJ61YrHFviJqTqRahMX5seQTS5PQPAqyIddN/1VHGCw31tNdVxNdM36R\nw7bUj8KfpXSwWbBCQQWmW/0NbsU23/HdBh2E9RoMJUjwa6MobFGU34G387mV\nhO0tdR7bcHXhFlo9aLr6MwoHPPCAMM17M5JPIzeSsKo6lzNc7zcX8crFVmXU\nZ/GX\r\n=rtm9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.af71cfdd6.0_1588115824449_0.32292060255814836","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/theme","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e5212fdca3fc13061f125aac1b27be932c29491","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.99d2fc961.0.tgz","fileCount":23,"integrity":"sha512-r1HQeK/60h+qoAxcKIvlrOp/8bQh/IdmC9EvzgDCBUWrBWk/dWjdIuS1aqtrngQwDRli9BRBif0qwLhOjTrxXw==","signatures":[{"sig":"MEYCIQCL9F+1fQnUIDhRTCxpzaX8lncAQwRlJlmu3TddCPtoVgIhAI4/2E7jNNbsl8Y1eqnSIm2VT6ezQhckVCBjIcclRYpu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVpRCRA9TVsSAnZWagAAVA4QAIaGfGkNjSAvpyaY8wRw\nW2/Tjuhvt+cyQZ8jRGiQPBG98mA4z4m/Ig7uV+SsZZsozpblexNpZYMfnWje\nJI3ZKE8TRDwhRmaBnm+74hyaw8o/7KojmwsPvesBfP1eOOySbbhClsVmji1r\n6c7J8nF79luif6NY6ROcWD46zp2HUv81KPMI/MIp6wEuaIjxJiH/GGPzcwR+\nKeboN+eW728u8hd/O8+yd+OnrkFZeSD+dBhFpQMCiaTiN9gChfDTKuD8Q4I0\nSNFrN2Q6oj2FkNGotBjZrR575rBUDcL/5/Y0YP9VPG5toDV4BHRAtAaGTbY/\n4dUGbqlkt5BmFvYHsUb+Q4jt7sFtHRWAJ+cnWu0FP9BdkUsl45gPzg+HFXFM\npJ/LnFkZmioTMyvqw2ktLCq4rFGxJXxSttgNzU/dujVv3PCxz/AmBseSF+Uf\nzl0BQe0+2t60LaVFOsklpUNZdYv669i3HUDuZ2Gy4yk+VszG3cYJyxjOcZXi\nZ+0iYvNKUaacRacNm5LcFHwyEYGhz8J6X5nS5PSi8z0R3I1avfCoDdOidmZT\n1pSOmZCw1BJkEEchqLZPpvfDc/T337X2RF/3n3VxFA4q4PZRdql3FkgbFQdP\n8Tp2XW6wLetji8+IEfB9VTE78r7dMNhbVwW9tv8eXuFNw9irbYsCV+/JJK9G\nTYkP\r\n=W3qM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.99d2fc961.0_1588157008792_0.9903013729072794","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/theme","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71105355d0a21b705898c29d9acf8e1a94b56917","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.0e052b24f.0.tgz","fileCount":23,"integrity":"sha512-cSqocb8DB+LbvBcOcCSdpP1D/h7stPuQkdJ/bsu70XYM7QTjJCBN9wBqwSN42elvfJXnzkJlMzsjMIfWg6XevA==","signatures":[{"sig":"MEYCIQD54L52sbM4fQtaBsU7H4Cay22IntaxkhnYAUR7br4H1wIhAPDQX2gNSKhCHQeOTEwjPQ3L7zNSWmfyzP+YBpXch8NW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqingCRA9TVsSAnZWagAAm0YQAIT/yn8YYCwYPlJ60/II\nD8z6DSOTI6P+NrH8t6TXD2TPQhEeA3jiRvctq1MTVZJyvnm/QnioaD8/m+WI\nv27UBr5WFdrl92IeiECf30/kZj4QTKrXpeRzeO3jzJSOMynFn58qnqe1x7J/\n6vItSiCMfprmzOaUAbLeAUmkaSnhtP0F0M8k+Tb7Afu+M5ArKDvJppeOt03D\nSkkV7Drq7mIVuqu94hW2f60Y+loGo3+EIg4rDhqjR0A2ismsZAdSjkuaTKXJ\nQc9aT+Obp7tIvN2LqqUsFXL7EJxFzWPwtWKCwodd4pg5kFnAErb1k3voBZ9x\nXrx24Sbnb3hBsgoZtBJmx4/QUl4RsTQpwE+Dks99TR/8Tic7bKyH+ZUH7Iyg\noJEAyo0TpdYoquBquUB/xtdsp/UYYAfOrvTDdk3UA4h3cMUtiZu9KDayt+ck\nUUl22qXtfgIzSzQsvQwG98uCV5J3hVh4XA5MADk3iREk61/kNpL7Uvw4c2g4\nJZn4VVVzBNBDzSQoLx0aYBRq69ENz+G6Rlt/eoycKl3cd0CFBP45XF5OhdCx\nfnfe9mPsXGLwMwz9Ix4OZAdBz9pf1Y1XwJNb7mCHh3hCDeEK0+FGlfFy4t4j\ncaXQQM72gV3QYNhFKaVjcgQGb+xENH+i0SR5d8rO8MrEA3vVFMij9cks8Yp7\ncdRO\r\n=AFVA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.0e052b24f.0_1588210143744_0.023102251779408167","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/theme","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3884c51b5249bcf341499980abe95b5fcaf7b92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.ff4bc632a.0.tgz","fileCount":23,"integrity":"sha512-OYbJe5SIphE6X4lr+cvS/FdvFKgXR366ABt3DrZrLdmwt0eAgDYTDRIUuL91/23pv0hTEy1JQiiJ1pzO7qz9rg==","signatures":[{"sig":"MEUCIHS8tcR3PtxK36EogXfZVaT6aigRg8ncu96dNBPR0KtWAiEAoJbYfgtzUkL6Tu2ml0Hg5J3zT2IJuVv5mS/GgO/h3uU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovqCRA9TVsSAnZWagAARn0P/i54DwNZz5NR+A+loQPi\nL+1yfzVcTDug3ZLkqPs6XbrXBMbxnF9XuLjH+9IZeDTIBpZa8iR4qoVMLqLr\ncuYGEZIMxHu1vROvpLX0AbEOeHvzgULKtHbjwCSxTL81q4rcfAmg6nyT7e1/\nholPVV1QecAIhh5X3DDDxHImnznFLs2mn+Z54c+UbTdRxiJHrX2qSzRvhLk3\nubEOlRvtHafCYSFDDoTeDByCXWTRxtP+dMbkyI2ftAo8bh/4wJvx0ExWgF84\nKR2PVZnjwdP/Li/taWaimAerSr60IGU0ZF3Xsd+6nOYdvkcklYkK3QtLPE3P\nsueuSLRUucf3PvTkwY30h0Lbz/7PXDTBReUMlt5PUnpPYdaBnsu0sI8f+Jr+\n0FAzR62sKwg+m2quGMdrNA60GP6H7wkr2BVdyAfqV6/QyhTL+Pe5vA2bvtUT\nWIF8pX+dPSLyCwIGQMvsA79MF3jY37nnXDL9HRFwMtS7B2+KKeQQ8RMpLj5w\ny27KBp1dBmYhUqtGf+DH4sbpJ+ToVf0zVqsOCrFbwOFK86l3a3yIDr8zs2FH\nkGXYDvaANWaO5hFWWlJQw5CWfNpC7+7dDou/EomAn0nlpTWvDdIU+P40/7IW\n7v4prYJDFUaWd6OmQ0gLPOKNmKbwDE4ZRP/lcHgrWrOC+PH142BGpnl3t1eJ\nKlD7\r\n=flT6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.ff4bc632a.0_1588235242477_0.7443381066412753","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/theme","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ba932b594af261096210d3579be9e1205178257","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":23,"integrity":"sha512-bBCHkadImTWhWCTUu3xhe67zEwvYda7cpxyBea3UdZ7fZ47QmxpaZrgjhjxG8BXGAQ0/bs/nsfUH2dFptyo4Nw==","signatures":[{"sig":"MEUCIBpwKgC6B/Tmr+n2TIFcF14/qZBzqeY80KT4cEx1mqmTAiEAhxZn1aAQK5jR+7MjsxN/ZdfC1KK2AhP4p9D+osav7MM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequFtCRA9TVsSAnZWagAA1SQQAIJu0ExEq3/tONBzkip9\nGdLMoyGNSolLQWHwKqdpQ4NtPkYOTFQh3FWVavD4r0PGsinwzArPSFGkkIgy\nq4qMA6Y+h/lKve8Ld5rVOfsQXY3G9eyK6cSZnsD9aZ0lHVgX70UjtelCt8dn\nJrOgAWzFlbGNlwNIhPQTPdQr2hfkKF8Cxeb6TCHXuJ/FYGyZvABenEAiSJIs\n1UhUNOTWzNcbKzYOoI5NgUP9HtMBDgxHT9NDncKr9ZgMgwy7IiMU1NV/8lWl\nrSjRSVO/KWdpjdzoWtfZUjXAebNETU9DWsWt37jhVkJfumZ4GMhUC37VR4Fn\nUus6bxIM2B2VW65gqiMmSQhJj5wRkgSmGEALBPKn80B8KoR0dJBukDDwfzlO\n6ZP5Om5SuCSjRT8ALNlH8C4VgDrHkdXEp/8CKfPorAJt73aNlgp63tnzZXau\nQ4CrgHSEtpqS+t+vKvxUPVYWv04RCllqMOY5FBi898+L5R7bV3aj+jZbh4QM\n5v+UmE9AdvHQMaa9e/l3LUNOh8mShbMb3y7eV2zij1bQSTQTprrDxplAyDzO\nvFm3DUJ9Ljls2Okww1nJnE865T0wtts//HJG2+u4NyWdl9O9aLsvAnbu7rA1\nKobmfwoetfl+8zDOPc+Hu64K7uEYqa5TnPZg8RWcz9rjbw9NOL7SAytk660J\n0+Ap\r\n=ygRx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.b0f83d2fd.0_1588257132797_0.012413187930194303","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/theme","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.e59906a57.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cda1f21665efad8b31992f60f149e0f36b05a519","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.e59906a57.0.tgz","fileCount":23,"integrity":"sha512-a35jKMzE88UlNStT0b0/WWeNH3ZZazB17NIt6p1sCPFr6raHcxr67UVEKQCW10B42z3JpS5S06SwKBLx+YNxuQ==","signatures":[{"sig":"MEQCIGFHvFkCON7QoL9F/9ylkxmMZGWLshp3Pt+jqSp+FFp3AiAjKHZHripjdDleIpIUGeuYs+nqokX2YjA4iYHT5nEVhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerENBCRA9TVsSAnZWagAAjCMP/0CMml0UU2qo1mUwHhzl\nVb26+RYCJ6TwXAnKQhiVIB81LZyuK4WUP1BvbzGUNrczXXhXg3rmyg1dvlus\nQ8gt3P/VJokl5NpiQ7kfq4E0eQzSz1Kl7XDQ56V9eW8PKBOTI4BR4i+SULJ3\nxQ6G3ybMaoyJo9x5zvPzfFzlQ4P7B5ZABRCWzbUv8AzyDRWmkwsNDAkXNgwB\nQPYbF0uA5pMx7SPe1RIpW9J5RlyZxmPKRtSii4Oi7rYVvFrO7Hiw0nW4W+oA\nSjqmlPj53N8T6FWNlPJWSXuZvn164LuUkgB+rzlZqfD1wwbTFjDnhFLEeV35\nuedCpA5xjCVixXxhxHFm/g1F3l9rDH32LiC6Vp6+qkJTaX+hXzQHwq2pMJGh\nP0w6kAzjmlbqLTKGyufuHjrof2IHZNVqxUE5LRB115XQrLpQjIJf1SJ3X7WZ\n70yMh9SGG0knmxSdq4yazlw3M5F0UiWnIgCv4kDRCCbJmYb4Yl2HhT+Q6v47\nm82p+jD5oTN1tabE5g3V7J6O0msKzZDAGjhdG+KmZGMR0cRugtHPbqjUHzYO\np31O5ajHQUC9ihi7Zu0CpiMp1bwaPaWG1l4VZVzMaIi4JpmIQQOKKBBk79El\nFp016LlI7JW8vfk/z2A1mYMftcbgsj46aKM9LY23YWvYNxVtS6TDBD02oUQW\nepjR\r\n=0F2x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.e59906a57.0_1588347712877_0.6807395089074373","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/theme","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.c02712b59.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"868b0b5c3ef5807a3ef9c7a866572f994cc5b6fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.c02712b59.0.tgz","fileCount":23,"integrity":"sha512-wLclb1strqXdrtrQcMb20Lku74QQzP9QIWhYLWFyJ7j9TFAyTCqCWmU72a21KneQyPdDhvOySH4PrARMLtHIuQ==","signatures":[{"sig":"MEYCIQCyZU+uEdsGNK4gvjJQ2o/2nplSv5dtalJ3KKpA5RCYEgIhAMrHvYPVJkq+zcJLtLm8q+l7+6HgLNMeed2ECMbj/KGW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGmRCRA9TVsSAnZWagAA60gP/1xxEDni2c5JiJjII1lt\nsliYsQhL1wj3se8x62uI5DB0tKaDqucrwMgflk5ldXusOsejTK3XteiQBkfF\nNJrXwa5MyIa2m/uaSHBFkJDY10ORwX9/AAh0YymrKl23BGWICcsam+bt5R+i\nAUHug9CILVt/jZc+HpWx4dooZRZLX1UKnZHznsSmw9wv3/+ZbdIz6NukiGbb\nQTw5jDEpFRTn078UA4NU4icXRIG3axZKDE0IUftxHrbjWl+7e5azLADNupPo\n/gCvY4X+jxeEfBcqggWd3mAsjYZOvwO20IxhuYTinSFYsQqJKfhOogtH6K7/\nQILhMQzxXSqFeFbYVyLsUHJYtP/VqFeomrPsFY2gNDCPey1kZ1J8qhuw5W05\nQacBxTxVqCBx+iYmnYSspDux6hX1i3xtboy3MaREhWgiFfQ0tsYSbhCSMJmO\nPgRw+yiHadVyr7OUy5GkBxmmzrsLPFjeXrZthLT7ilvUlTCyKvzPe17b8L9d\nmrnawM9hVonmZl+ghPVJuQCwGlBCfZYzEeEMyM1YwdvglJyVDquxBSmq9Han\nPpbwpA+ZhWjgmlWs+uHGEHayncN2YZvC+fNKDdebtQapQt/sJdedgbyGOEtA\nzt7m5h9dkd26NrhxZUZvGRWq3xyzkce3lqpnFpZGWzUcl4lDc/XhtUHVZjt4\nig23\r\n=ZOu0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.c02712b59.0_1588357521188_0.588979216294921","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/theme","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.15d65448e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"718da736f5457ad72668554b6af7366da56f6d23","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.15d65448e.0.tgz","fileCount":23,"integrity":"sha512-TycYUWdZQiAaP/BXqh0S0hjFpl2r8ldlZVZLkCf/7GcqMQWXiyDfsKWzUuaeBOGLSzD8jtw1IbhOCbIscYS1Iw==","signatures":[{"sig":"MEQCIERspeNIf9CiHg8ehCRSAmDHT4/DpiUJNxTv8XwPhg4UAiAiPH49hxHdLrlBjyHw8PKYhwxdGjogJ+7iGgEee5H+1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHbfCRA9TVsSAnZWagAA7C8P/RuvvEcLSGeu0oDesWnR\nQCzf607Uo91bGFx5Sy/L16+TBL8tMjY0S/73oYy7HJU5QkWlbqrQ2yxJ3Ry1\nzMuhgIyMsPwDS6YI/OHRXalBaw8pbF09Fy0nyTJNMl6uZbhkYUZD6AxdbGj/\nMQuJe41XMzlav/x+5EYsjPhsDIuKfVpMNCzUlr+Rzl6Y6FnIc57aB55areXE\n8XfDnCfvEob5IOP/QAtmV1cucOScyFcfHyUuNqOVjEBj0grO9EBf+5qVXRAa\nbFqBWqA/jVXUtTQ74RxVHMGjkoPFHYSWFCYP2G4Zg2PUNYhH+H7ylmGAEtVK\n6o5vPCwOe7dVQBDrVn/94LpnTM6Q1Zm2jYFtO0kPhIUCgBQ9r9sBpGgG4GoP\n1Iah0+mDpqNWt8HIApaX/uUHiKmGWxV8IA1bAGkjRFxumsOrHHnpTKxz5JR4\nurOv00UPobC4V9ctcWl2XFCVTWcSQJysAbQSaDzyyCNEJ0CCWQ493DOlx2gq\n9tYK4TnGAdHK7Ic1kcZ3Zl7nc72eJOeNdGaB6CndQFI+gz/TG2nNSeerKuVS\n1pGo7TJEia7rCH1+QkYNaqhvPxGuXj8YbxKZKCzGaoBrXVp+8R73bN7SFOL5\nKEwaJdyFy8cODmfxmEugRqSb8JwaFhNIWTcZmoVAHBmaHy3ODQXN2XSf1QMX\nOMsq\r\n=BfBF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.15d65448e.0_1588360927375_0.8483500787748977","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/theme","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.142b1549e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aee393abb1312fe3e6b2b5900166a5af795b555","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.142b1549e.0.tgz","fileCount":23,"integrity":"sha512-blrVy3pYgtpBt/qbcLUnpS/IyiyIiWdBQhDGPhF2acjMctvn/yGwcOwcWQCpv3fxNSeoaDe9iUZ1eg0aZZBisA==","signatures":[{"sig":"MEUCIQCIPVze9RQLzQ4BKYgI6xNfP7VAFlLlmnvRVdhBT/8EuwIgCWpbfuvtpQqPw07a8Yhulc5szAyiabUYFdZNlixlj1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKQtCRA9TVsSAnZWagAAiKsP/ROOQNKXrg2K+Fm0llAU\ntBDI0GTOndEKmnviLu+1+V2y2svXrBovsxaP7b8RHIStmzr1OlX235VsainU\n6M9f6Usxw9c7kfWMb/ZGdeidrrC14yr82vqR9E4J8hUG26iMP42PJFMM0Y8l\nizgco7K0ogsJv0tUKqjjCKBLABQWNZQhlZCnwJReie51cZ2O2jzU2xQDv7Ik\nVpbI8gsO28LLHqD6gTVfXUrK+U2RoOzM4kg29MipB7686qaZ4GvDnIqzixGS\nxz720DEGJifIKzbEoXr295GbQtlB7ApfJagZ2YgMv3MiNalo/zmiMbXP3yhI\n+/VLGNUbE7j7ppd2x9siWsg4lvqABdAbfi6SUKstVc67qXHD7pAF2UtaGWZs\nFrCS/5gDRD542eXyZ3h3dt6Pw7FeNovYYDRG0SWGlJHQm011u0Eflm4gy/Kl\nJWIDRcZMy0iYEnWeDoA0pIohsgXUylhlbT4aHwKiblbwCwJF0mvUxP6AE7dZ\n3lFizBow0g+E/ubpy+bZN6dTdGHp3SeCQ5mGoZYtuye4/UNd7ItukWoFmcYL\nWrVNkN0EdpjXNfP1jFW2bsbKiwZAVQ34YHKZV69QSm6HLGknE4sEmEZR0Rs0\n/qVrPjEVuFiWJqkBaRFhbTB9RaKz3u+GXpIll475ty+9aN9pxLuL9xG39ABM\ntVjO\r\n=/nky\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.142b1549e.0_1588372524914_0.8802751808876152","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/theme","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.524b7b812.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35efb917d07d7bd58f1ae5c7b328dcf60adf2386","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.524b7b812.0.tgz","fileCount":23,"integrity":"sha512-WzMQP+zunsf6OTJwx2nTE4wXxnex2DSqvaSpirlSTkZy+RwVHFVsNCbQ0q9IcdvqfWklZgboBfdp6GWBnCtG9A==","signatures":[{"sig":"MEQCIAF9Rt/HCaLAbFVnawJEpr0bDEV+yNKsAgXAggt0lb9UAiBy784o+m8lccihDKAcP31Ul5BCrsY1VfZt/lUOmfcLGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery3OCRA9TVsSAnZWagAA3XYP/j3eHWlCI3wdnMK3kHmk\n3mVx0o95nX2XSF/L48a+kVP9AtfhGHX3qTklWQSvkX2hLXGMZkZTpCCyHyT8\nZ/IPc5/MxxdN8A5bdEl96ehQl2u0FVzFj88vFOBL6jDZO8jWWM2FBJyXUNaI\nhuZ34V0O+KqxrIo+dKzUlS8YJtXg01+nbImOccpgcN2pcLUp1XoRtRRcNk0T\nnZP1g9zLszGLeSS1DezwVeLex0CAcUJxhtz0A6VfNuxr0mwTdWds6fdJ5Vrt\nGKfgkqp+B8XeAxGzsFVNqBsjQGVPpqdpmeJ2KBUhrO7fumWpV5l4m1UWf3lj\n3CqGzm1Iud0e5M/x/NB4IbuhdGBfItasLSyYnquVb79hSZz8sj3LpKu09jc3\nFCOA8/D2d+Bw4S8t5r2+CnAaPgI7GiwQbdBmZ2iWD5BAwZuQHsLvqoiXJcc3\nQNZQeAFSaPx3mI5QZRq0wArolYYj4M2Z5/7uo7gA9GvbZMtuPN3aTC1hRdDz\n/Rahxw2fVSoEZRhTrXHGMYqoPc6/AFK1m/shxdtXrzX/i4ivvei+kRfKVZOK\n4LBIJ4XFsoZ3vo/nszWGTa+wS+ewEb9ySkZrvAfVqOv7kabdY5IIYtQ/uuJU\nJIxsI2SBNkMiW+pEwZDoKFDlupR1UTYHpye2phcUWievmQHXMs6ZmlcOEKJu\nK+RU\r\n=efWM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.524b7b812.0_1588538829592_0.5592459252012523","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/theme","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3115dda011eefa184ef9db6a8d9c1fc1004fc13e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.bd8ca9678.0.tgz","fileCount":23,"integrity":"sha512-4h19QNXeeE5iiq6FsyLIxqRmOPPFe/YJQgZatW3TBSzko4hB4pkAZnhSi7YOfBAXFRiYU0/x4nXxAMcriwxpYg==","signatures":[{"sig":"MEUCIGGt9oMassIC6pkW/UxrarNF/IPO8vvwHk3xRB6JSwtaAiEAnEobZ2DTylTBGs0WmU/gIuKP3ziL8bqNxj8VMtLB4Bk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE5sCRA9TVsSAnZWagAAhl4P/icFi0mSyjuGxOjAwzp4\nR9A2nDqdp5RmLTglZQS+B1PGohxxxG6gF+t4Kjnkp6IxUcUtLUaCwBIbk2jT\nwuF3eR6t/9F5BKXGTuWk98fOcRLy6FeQh2VCj0t85rxn1/zLIYSdF1BziYp5\npgGtu6ZM8i+6cuwLEPnd/ME4wEiyUvvx12wZlImT6r5oAqF4VTeQqdKBZXtR\ndS2ur5wLlOecLR1poOhlyjdwBm8Azg0V09+GzhBm8YzCCRU+DqpXBO9Ka3nR\ny02uhZ+uwNL7GZJGQubT+UkH9f3pXR6NaQceVYxwDfFupWydJ7sVL5Rly7Lu\nQbJg277av6AVtfM8nTGLPhJzpoWoh0lfarpldznolMwW6cXzaBcewHzFq9/u\nODgsumAlaX/ySVb3aykiP1adumyO8Y8PQajcpqdjmnc9+NT9Ol+9zW0+2BX7\nD9ojGnmq163b0oWNV3GkkFNwr9URMu/Y0rkcYg0FKB2NX1GzDB5+hYb/P9x2\nCFvm1FsZcU0puV9tFCL2UAw2IJ6/N4k5M2gn/v8qjPNpj13uFOu/IeOMxwmV\niiNQW8c55EhMOQ4erpFJnsUNhkCo3GYq2WFmFnwRsOW7YRaupjb9PH4/SEbY\n41dB615C1Si7YieVzJctARjlz6FkB/OEd9Kj2DVFNqbiD7n2YPUY/KxndvXN\nzX1f\r\n=T+o4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.bd8ca9678.0_1588612715908_0.8147171791777625","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/theme","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6df52c6ea5d6a11ab56f1e67450239ab752eace","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.2553e86fe.0.tgz","fileCount":23,"integrity":"sha512-TVIb2rLGRHhtaQ0H9Pvg9OR21rk/PTst4KmYPcrueN5e8pBZ4s4Ld4ElHhGz/dNG2IGZXywGllz2hG50LMVIuQ==","signatures":[{"sig":"MEYCIQDDoxjqMdhXbYrE7ny8/QW5T8XKzCmAbihas486kAtxigIhAJSfIx6W6usOX66bVKA5MFKl42FVImZf13sc50/BXcui","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFE9CRA9TVsSAnZWagAAodYP/Aqnea0I5HH+qxAO5YVZ\n5vd/g9ixZrURq723X9iFIwuazom9ULdWmPAv/i8LtDVjGULi/pb65EZd8O45\nG7ZBlCVkTlN+A/IT6JWNuiTfrrdciIEDCsnLuuRdTXLvtPnaT+sEcwD7pn6m\nLfiFHL/KeO2WPoDfOMYIxLXgVnARA584t62fE6KMkQjWpB3J2Y++VT5+h2OM\n5lUTwa5+NS9CJpL1+wwKUsyxwpcp4uvEG2JPATpqmO7Js72HprDIB6yA4TY/\nmB5V446gYZqxky1GKMMpkkGzgyyrI5TorVmTv/44ej+diqSufZqlsWjcGq+O\n/m3V0P3OVtkJyCMVIv8tI+N451FdSTWMoIuASjQXFDJtcKJkWSiXx2UMqj7C\n4T+xmgJWoXDUjC5GdgX0ocFyYj4Z+EKdaLBlP1nEHiKbRMp8R50QDRb2hpZb\nwbHFNrcspSDOyxokdDM1W2OIGwlSJgxBCI98xKbvZSKg3OzyPYBAjRz341Vn\nD3PTB8njZkiljhesG4kWvx6X9vsQKQfOq+WOxguEo8x5ZjaMcHksR2GIFw3E\nIf1Ze0+3I6ynLGLgQ/Tt+zcUTqTrH76Ozf46CIHqbbkVPKPfGyq9nP0EZwgW\nSvJZ5FuAFIcNMoGfycpuWJgqVwggfUarwqakD5adm6k4UYrgJkCCmzEvaGaA\nPA9H\r\n=pjoc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.2553e86fe.0_1588613436597_0.684408183865532","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/theme","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.03dec929e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae8bbc85feefee92f2dc2f0d7e11aa60c757a77d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.03dec929e.0.tgz","fileCount":23,"integrity":"sha512-SuPDFRo9r5T4ZvVeCHgUgar1UVYP9zAARb3r7THXFkpdG1jj5NiFU2kya9HOfoD1w+XtzFu+3NLbS1WJA79mgg==","signatures":[{"sig":"MEUCIARAV3PCnEyZblt8t3Ii2H/7gPXDrqWiGwtl51ggv6PFAiEA6x9QPyoeDDAXot1ypiUTXk/Uhzdssh32OtLtC9unm2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZBCRA9TVsSAnZWagAASKAQAIVwzzeNpLV8p+QUnP6v\n7ypdgh+JY+dz9SAfodmJ8MyBZGpKiCDYrS5Jk7KSq2pTu93wcAwzeXm3dCMq\nL/Nrlhgyjpbrrf+SfZctr3X4l+C3IgWPHHE4MtLB5OxLYQ9qKcNwLG2AblxT\nHPo9xo5WdaMJdS9J+pPmWo44/FMIba3FaZQnYhTAqRWAyIthrdij6gczHvEZ\nkCTiR1EEHF4xfnJwJgkN/o5IVnZ3vc/kJF1UznqWVVg85tFgmjXreHRF/55C\n2L8SGXZn3WElLTjgpSIRwPnwWf3Ys5FjxklsZgPEZcxPJCLRd5+olzqovRgJ\nw77Hroa/EeG/J3bSCvicTLQOU0UKGBqou+lKDgTXMx2IrH+DVxz9zWIMo5zD\n+d8bS4DFAWDWFs1GtvEI344PUc1doEvQkbQoeQYASJEp+7pefYHpUFIriHLk\nS5N+lWdFB3Vzlqy4xeDvheeIuDr0wOVPR3J6hPNRk71A/KE7uCGNYL+655W8\nzO/25BdqHneLKvIKXAkEWgWkZQe8zuSIHxYkOSWHrmQCTgIfWcgMiMCQ16mp\ney5+YfgMgKQljHqwDZb75IbundO29+M6eis79rwu5QyT/yrPd1rdlR0uyF4/\nFEuuUcT31xXr8MUhnCtqNWTGYh7q6awt3LzS8uNA+DTVm4+Puf0N/NW5EMYe\netNH\r\n=BD+y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.03dec929e.0_1588635200348_0.17897985309661113","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/theme","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24da57015cba9d4759dade806a0ce92e10bf937a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.d92d8c93e.0.tgz","fileCount":23,"integrity":"sha512-Qx1ZPWDQVzE2adGGuVZ3wT0/jXvF8dW2Vei3oIbe52jNmHKS81ZMPgkHlYonKX5v53nKuxEdMIclZcFaEoBZWQ==","signatures":[{"sig":"MEUCICkWRuQ1xrjbA6CmDYrYr7hcRQKvu3pL/cLa24JIU8LWAiEAijO/2uNIBBJNfcu3wg27+xlnbyywpvFHIE79WC9VGto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZs2CRA9TVsSAnZWagAAiVwQAI2CId1QwFXcvwqcSyCc\nbxdOCxI+rGNIzsuGLcqQSkoHzTE3WjxKZGUUfC5DhzVw2qnILBOrgxfLQA36\nPpmDB6rcle5aBjRdqFFuU74ZXrkiHWr/iVyj3aMN/1PtQiJSYnU4nkuUL8Yy\nKzkuoSeG2kswsakGBGhn/E8dm4WXAxdOOHzemV9bN28Sqs/NLt5Vs+K1DKSR\nZ/pQ2p6bwr+kIjZJcQLhnQAZsiyaIsmk60OZIbvOm5LcBpYazc3bkf0+9X6+\nUkOxepuQpPXeHrf+Acbf5GmT+9jn5FPEOmzvHD4PYGWSbJn0h81GXzKcotgE\n2G2f9jys63U+c05qMS2BoDo6Nq5VLCRaaFbAzrU3XFnZwou7vrVeYvKsro7P\ni8vN+vIyjRsiLxdvIa9efOpDPIALHxJBycDl0+pZzaydZx9HuovDO2jCRoGm\nqOx9yXsrxlUeb9hKbS3cIcen/c8mUgUgPRU7Fa0nT6pKOBs7xfnnMVLs66lF\n57J2JP3DTQYefwXCzCoi65RnRjpQuHvs+/AAgMf7nbP/my/5fi84oXqIBUoW\nIIuez69jAZ1vatG4ps8DOaYFzm9a2VuFZ1eUVzZsjClL8I+8D+/fY5zqmV+4\nHx/OmI6ziSMarxo2QRTwJ5W+aUjeCu+bZEX3cVMAzOpsZcCZfq9aRG4zAES8\nV36W\r\n=pYR3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.d92d8c93e.0_1588697909352_0.26645556598236464","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/theme","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.09f591967.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"860d61e55ac8d08bbd3448ca3a1758feb9ab054a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.09f591967.0.tgz","fileCount":23,"integrity":"sha512-MOdld1Co7ROwBXKdWU9dJir4PY+GTGnTs/vzWv9khxP4Xt5r3Bku71tKKCshjeBci7gCIqVteWOyt917RZ279w==","signatures":[{"sig":"MEQCIBOgN65NHLwqTUndg3m8xKZKVdIqpFK/qgLNPF2/SAQ5AiA8AA/gyt9ZL60ydVmy42MV/siQ9tdOY0vZSZKSdwisrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdS0CRA9TVsSAnZWagAA+3UP/3KpU6iqysssc2jbkKSm\nPVhTfvSs4xyyw0T2SBap4FCMdXC6bBKtrzqHt3U6xXdiBS2rGb70Bup9eeNf\nccdXNfrLbKZJ0xc2cspSt46PE4qjXRG5sVZ6itV5EEB47AcoifaagwukDAXv\nSiuhiP2hNA8nK9ZU8VAhq+9TK8D6+4FH45ii1cSK0q21S3RVJhBvyyi0n0te\n82MndKDlfstd1U5ta9oAfLSF7Cz9rQHeDjCzoD03r4ka2T5yfBw+l1unQRwT\n9vqrNjfKim3ZeA7Fucib81xNNOz2Vv4RcGXkZbuONzgDVD/coYQhbyj21txy\nsEF4k8AoDfLLQRmEHO184X8/yxQ17MgWbPGn+lJHBl1n2krQDNPxdYipsKHe\nCdSVkl9xw7cWq/jarfRQCFQPMGhxy/q1GPB/BWF/tcdg1OJIfJcgUmBSv2Q9\nDwKAqd/OEuHjCuA8xl/Jul+F1tDkj2tAY3KRSAQG7FbiNLE1On5pAcROQwZD\ngAz9Xy26hho35olXhKq3SNYqtiPuRSxFlT0w47XfOdNcM9Zo3dsizZsjACZ5\nfe6NacM694NFnY4ZT/La4++8UwoAEg8dGgxsq5nxkXvqQnhoXZPOkiZWgbJn\n4rNxKkgVxE0d40vATXUtWJ3cYrxAEVhRhHdD3r4sLhtMQUS/FisC4eWxtyAU\nIz9m\r\n=n5Ss\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.09f591967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.09f591967.0_1588712626859_0.24331544731652022","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/theme","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.3846ce311.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2f86a6d76dc0b4b97f70e8ca859a87f5b154e40","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.3846ce311.0.tgz","fileCount":23,"integrity":"sha512-ZKvVwjriBJ11qBkBGKy7Di4AJgXNhynl1jVU+Xiav2tjOSrF3qfNo/zA25Pjt5JKDfkOnyDN8VV18WCe8lIepQ==","signatures":[{"sig":"MEQCIFBEjyzG+vx6NUlr92kMUqfke0fYhzCNa2citInwX5f8AiB1hjT7sxeQSqRKevUnwtJrIr+zAHQoAkEHlutInGPB1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessT9CRA9TVsSAnZWagAASYIP/3jU2Kmvu8z6uWg38cfo\ndZECPRkrZOF1PhU7k161y0W+AF9XxqN6qEaWC16qPQW9ndipl5CGrRjtlvU8\nLUVgrXzbVxCkaHVFWZUPbcj8dZdWsxsyVdU4PyI9R3x5C0Z7ARWmNXx0Lrmm\nnqvWho687LSgZpFKIGj9LQjRlvPhbTsapTM3ArbiM0trWGaP3UlRTvJ9hxWu\nJdCZoA19LuD30tCshi84YFALgc54Mp/pF+hKDtVEWsW6ZYDUt/6vdcpJgJz4\nlbeYUde7NGLT5bO853FJmplmSuwn3hX/cRjB8atFqUTjPB0gsgqneqvJobZm\nW6nw+PZyRbBQFvE3boBl0sYHbfC+3BLtorHMaDLjFO8YTDuHZrDQDUyRMoLH\nPoNhOBdOVPRg1fjJ+QgVcmpGid/v40gJEAIEltjOOnfVJKwGcuwkDCrTH2cu\n/ZdNSvl0gaMELBpHKeNRSOdUijG0oXAmw5Kn1pFFBAU1tA/rFY/n2wx3JMhU\niL8dpusuThAt840Ad+506N89UfW8CqLZ6zLrWnb2k+dHg+HXbZ/1bIeNu5DG\npkoacVHNnO7VbePmo55h/9UKObcx8gSBI516C+72deUp4mixY2IKZAJxcUWm\nlZZVLxIqnlKpOjmmo4T5xp/w+b68DouwCvF+j9JRyy8FgLmQk1SHA0oQZwhE\nVa44\r\n=z1av\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.3846ce311.0_1588774140640_0.5921307175153345","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/theme","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fda1324385168ab3f9a785501b9e6d60a89d1ca0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.ed7f32463.0.tgz","fileCount":23,"integrity":"sha512-g616VAzeup+916go1whGU5QTJZYRiQF9LjKRk+JXzlcf2qK0ie+9bjCzcLwsYXAM9oH0TozMgrTV7qsmM8fzUw==","signatures":[{"sig":"MEQCIEFOWmU6onqTf11CR9RfCKwnBOrR/6fLPsYTblYO3ffGAiArueFnGuqJODAqy2BzB4mAVt1G0PNOLBEjEa+9/C7c0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuCTCRA9TVsSAnZWagAA4x8QAInixo4It8cDT4wDQ+kr\nu2LAI5ov+ixQzOgfApIGpPl+Qg7aE8tkfZoV+TxY/PM1YA/Lt9qEB7tbsAU7\nWtRP5Mh4w66bsmUPiL+GwI/DZ7CieFu8Dpyx4N+sSZpCivscOtFRpc/9Az36\nqd4nBVgnp0ufjljSOT7LxIwcpoqgzUOMzm/Jvo3ApAUea/P2mpQE5NX2magi\nyDwVX/gpB5nYz9ovNkmUpFzhKq5HHH2x9HI/mEc+PWBrQdZ4XBcjWW/HSdP9\nGEQhj37rzLYvD8eTievLjrWtlirNHAJ3ovl1dSaEfI44iF1fJCkwdUGVQIIu\nN1W55Q7g42crskbhM+nuvitUst6dv93iKVpihUms4ZuXmmqX/gKHRVMbiZsr\n4rzyu0xKhczqM3Ng2xWfBaYbBfOYxytfU9hE/SE6Q2YvRPtL3c7RnUDHy4pC\nPQ1zKQZQ067x+V1BMyNVfGJb51GkogKqXH/GZQDkcjEUNdSW6vo5P8TqrTK8\n13vcIiB8fes0oQ8qQ9wbCvwFXu9O2y4zBsYuYT0SAQ2DCMHPIVwr5xXKCoj8\nyQSVqyGzI8xmRUvhp4zyqLk/EqGPDRpU2r5nyscr5Z5i1wrmzA6cbUncReQB\n4WwULG/jk8wiPOn7WKfUYtZnZ5GLZ+J3yTjzgbysfBoQfzdD8ohYiTBVpKqX\ncmtx\r\n=ut5B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.ed7f32463.0_1588781203131_0.9377771987196803","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/theme","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.8135cc085.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60c0218acbf3aed3a91164a9d86fdb8d94df71f2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.8135cc085.0.tgz","fileCount":23,"integrity":"sha512-432ibRREgK3u+Wjr0ShYqBUCs8tKANF7c0Zqwfs/zbfN0RtectQDyv0sutAYRNQ/Gh1Uyr3UuyKAdXvqunLOog==","signatures":[{"sig":"MEQCID80s1+f0enZTiCaGL8EfhbRs/1IGkkaCnvPX/oP+w+JAiBzvzbL3nrYWurDDtQ/5ZdQ2RneLRuFzGMN8pDrF6osmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYACRA9TVsSAnZWagAA5TIQAIXSRDddW96SldXGp5lv\n7jPmaPB1vStfC8k16N/FO50saX6j2rfDxiQ1weQR0jNWuJJ7GrMV4weXDcfB\n4SRLAowAqiC8LifjcftTvBnnw57Zld+rQsqMh5YoXHaWRLjyEI2XteU09SOg\nS7tyAzmF1YvTL0pXR/qcsifFYHsEF00bqZcjSaihSgbwwsxMPMSWc9Vd6vW1\noww+so40o7PaELNRR15nH2CHGUVktmJ+xrNEo7u7RoJrOqnhhGg3qmCPE3+k\n5aG7DGiJsEIXSGaC0mzaa4ibvDjqXqgG0/yHOt9sejQqgW6iXerfTYNzR2eI\nakk7sOQDi4SpIlrYBtOpiWM3LRnC+YRmmcwKHK+YWRQd/VJw8k2rLsPLssLr\nCxIUNF1I5Pw7afYeTqzBkWJvgd8i7E0RVb6IHjgyuDwXerkAFLZPoBXp+2lk\nHnLYdBQA2SQsa7mo5dhAplpi0bPm3DVLK8IXJGEDjHP7nAsZ68DkUguw3hv7\npghsfVwDoeBFWyI2NgIMdu2uZvQY/Pyn1CLz18TEaPR93a1KoCeX+cHyULtE\nQInUjDh+kBZjGXmW+o1A29xvSsvIFYLHqwWqGekMteEL23hmFALeDRkLz3/j\n4IvtlQg9WQiXkXdKC8li74QPJF9bKEfNSUEIiHnVHS06JX3lwW1Z/KPF4eli\nyzQN\r\n=uyRM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.8135cc085.0_1588794879559_0.06579889736610434","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/theme","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.deb212de4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e405048f2d05339d823df2972bc278520e74905c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.deb212de4.0.tgz","fileCount":23,"integrity":"sha512-jQP2z566sEp3RPvs5IjeWvNFubCfosmjWdXRvMNcqq2UZ86GqV90gZQ6UYARmobeLib3c9FvY0WWGsK0gy4cUQ==","signatures":[{"sig":"MEYCIQDEKJH7RmvbZUg5ZhR9KfBZ9E/PhhZ9u02VKkv+IpsI7wIhAOU3eVIsQ5mWvL5ryGeS//WkYyQvENiylqTbTmLC+K4i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszeoCRA9TVsSAnZWagAAzmAP/jt/j04GLCNu5awaFQhp\nBNFlD+dg6QQwFsa3Q1aEBjDHsrd6R3k9otKecjCFLodyrCO+qXF0lZxh7N1I\nTRZWL3H46VYF064Nm18ku26QMj9twV7KiTcu+FNV3mLkpy4CCPdTTspFDNOr\n2mzbQiWygH4J8ggnj3gWFtxII0Gcr0Em2hvTTgt7lsgW5P6LTceKPWA4OC/Y\nNjEqbSXc9X+H6bVDuT240grNF9Onsq3qqaKxC51VSv7huVhY/Mz7rMaeb9V4\npV2Z7Vb/z+wHqAlt00YZB2nQAqZ+q0ZbcaiQyLz0Cz2RKdwGerr9v5ErYL0N\nj8wYY2LwwmgJqSjcgGjWOTMOAqgpcDPwPOjwphvTbRNtWlvknF9ek3yP9g6F\nrKH2GKSC4yBDBjNLeNn6a177NwrXxeQgcMMBU+TLftt+DFziFaz0HpPn0oAF\n/eEyNaLt0/S8xuPBXt8Xez0vLiRU1gubW6+bSAuFP7dqFhXEOaDSQPwEfbG7\nbzrBnDdypO4zP9A1LfH6NNrE5Y3DhANAyEYnzMC5+huYhAoWEexYvBDeIRzd\nPfBP8FX+SChG9i33zryt4IEjm7asgq1Ywronv8Q87KxAT5FNpweJ0OuC+riv\nDa5V4UMvhiDwtZsNdgB+wUrARJsYlcQCc+AO+qKJ6oNkkL7myBbZlR01/Ehn\nL5ek\r\n=Gyjf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.deb212de4.0_1588803496246_0.46079375425121616","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/theme","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.f83e00898.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8af6074c8c15ee11baf1a15ece70f657b7fc19e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.f83e00898.0.tgz","fileCount":23,"integrity":"sha512-sII63Fv24MkYBeFwQdXuvZYnMaxF+v1leVSYrL3xQ0EUFbg+wW5QCxAEaJYf9s5d0dbdylTyWJBHDV7ODkziBQ==","signatures":[{"sig":"MEUCICKQTpk+6U0p+8HDOlrSp/nMBr/fYB+Tt/slw3d4ctKCAiEArVeypZwWlAlRbwG9OQ1OyYm89pRbC7yykjDsV6uZH8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDv/CRA9TVsSAnZWagAA3hYP/jBpGt7DcEqcfm1ZQ1v9\n1AoK0FqEI42cLyEd5ptkjYKg7kZGfQhOgi7KrO2Rr3AZbWegppfoAWdZbafi\n5oBLCx0bRIAQLP3Rm5eq9/IQ8LbtP4tOK/bFvDy1HrfefZdBwJF1TqzHS8kc\nNBNUkXOB2osJEfeJ+DqVaAOiZEwCTluK7QviNXH71Y68M+NHPDTQ0wGfB3w3\nVaRHxjIUKw0xaODsDI2sq6Zg5N3V7VpfHuMHHEkcGg1Zs2jagtJRU/5kaQaA\n2h47RhFD9No+KNWjX9qpUBbyOoXaoFCwdh3HZicJMEOi8SswlrRwGpM4bPPO\nf3ZDGCGMlEmxVigaA0e9w3KkHUNp0T2CUpjhr2pSgFITmFVQjqV8rj7CYbkf\nJX/C1iJiPPT/ibcP1DbdrwjjVutMSjnY2i7jWpLea91DhA/EY555xkh0bLvb\ncWClYo03c1l5iBY8E3GeoFCZTrokXSLXK9JQXRZwwR0qY1iDHh7k+uQyVI3L\nN/uhlaKDbdE7lg3GWh9ug2m+H9bzAVQnDfOyMwtSug12btDRuhVcKWWPbRdu\nrBJr7wVrAcutqNRmq33Oi+TH7dpRwSed87G+ZBEhuhaF/6rTVjEKlYa9wczS\nyKpWu7qALdQFlI3uPgkKLQdxIai9dFPg+jeCFdlVBD7SCnLGHySFvZQjcy84\nODrp\r\n=Yy+/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.f83e00898.0_1588870142503_0.9019514272662257","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/theme","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.047e6b337.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b97618c3b943b53676aac057fd2a2ad03e8b763","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.047e6b337.0.tgz","fileCount":23,"integrity":"sha512-XJvugV0UPcE8W2/wOonRZCM0OUUiSNm+aoLmBLfL5n6+W+OgMWdzv3JRn+1LLJVcrVA7MMda/CNL++ktz4tPKQ==","signatures":[{"sig":"MEUCIGW2lEpmB7VpjZnvXyMKFqQnIneaxz1PUdWrWeOny120AiEAgju3GxbucH+a6fZg9XcHvPamtxow+TfvKp5M0BrPROA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetacGCRA9TVsSAnZWagAAY+8P/11FzfMQCpul7LsdE4/H\nt6MA49Q0p8HQyELJqiIKj72fEs1OdnQb0h6m7Hr3WWE2j1m0UCezRm6171B/\nhKwgK8r99X0gl935q6iOAkeSTIUov2Oavyq1V1Jj9wJ/WMu7F+MD2kd9PKN+\nA65+5p6v/q4AD66VdNk9/T/U0LTeabBL49zg1Qzp86AcR4nUZZQdFbwnJQw2\nrojx61R6s4o9S13APJtRxTOoq5U7VSQn0A16gE/kZ3kh4AUV2PSs+5JkkGXW\nNGZRy1YC/m4Xh1es3g/ZCvqwovnucjjOcf8K16XBgE8vDpiQBaQietELc1im\nivZmIqSzuuWqrqksNUajB2Wx+g2y00O7ECJWjfnTNJuS+ZAo1QkabB9loM8X\nJZwCNrttZcA8fInkIT8PfCXyHOQeodXfCvDwhciTK1yvYZ0ZxzE5k43NWXNb\nBqGsji8ktHkOFQ8DLKIOhvkDzimMSBig5Q1/K+kSvzabVl/OKODbcplx+Kuk\nFL0kBrhSsJt+u37woIyx7v+VhtIKK7YWEYR421xRC/M79Nxd7wK3Kdr2Qa9d\nSGvf2BU/RJ9Pu085Votxe7lHuagbbZYGgZh0kmUDI6Zh3SHedszUQmL+MIDg\nfCZMCJN9bI/Yfcexgx/wIE3vOZnS1jr/YseyYTviyr14srHZJcRLwEMlcin1\nN4vs\r\n=ayUy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.047e6b337.0_1588963077794_0.9963446941035008","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/theme","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.119e21426.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc874f2960db20bd9440836f3024750df7d063b8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.119e21426.0.tgz","fileCount":23,"integrity":"sha512-JkwdrY4oTBXEfS+F2R10DgnI1Yg8VhnL+jXQVyuxdNB/0Kn29C80Nzy0S2Lrg2Zaboqpujltb2n98u6EmVcV6A==","signatures":[{"sig":"MEYCIQCRrVqXw86pE2/6S7Wet+w90BVnWd4BByEYkFRzo8c7DwIhALtfrkYl2yF++6/8NlycQaBHnV1/UCWSnJZT2Ivx3hXn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb9lCRA9TVsSAnZWagAA7HkP/3kAHPVnzvXsfjG977lQ\ntbEL5EBpxW0xxM99jY8cDNKhaoBEGrlyfD6xMFBxCyV2Ei+H6XWOvCxLSv9U\nO/kx7k6JvK4wiEkYnsx6SNyW3ZjWO2kn3AgguH5fb4EnrmuaBP00KWoWAJoM\nE5gP5HRg1TR0m/4pfVBkoAFrmY5u2ccPVn+yuPO9+AiDUt19n9Vp2nzBEpsK\nB9IRxd4sToK4VEy5WUtYdNio16XPox9D259fEOdsHdHAf7kqK664Fyv0VaEv\nSFIBElyuHMaSS255LeOOjciEvL7sYg2ZljNbZ7aROlHYtFfIja1zCQx2Pr2D\ng7yg5BAMody3KHmKVEUtDo9qOhNgXnKxyD3Dab5GYWvAjzSwLErI/yyI3J7j\nyGauwx9mS+6clETe7zf9EPvY9nKp7vrCOZkNGce42EpBv5x1Zo8zhg9MYdPi\n8kMdMpbsbkP5ng4ADh9z7+CYciZ3l6BFs6zjlP0H1IUurbJiCvnG2Y3svyah\nrDvJ+wd2cDI/wi+b0EmEQPMKe7uHzgUsK9eoVP0mXokz2sXQgxefRTmqbzOC\nbpmsIwDgWYz9H7UVIM6Q6h/mtzHtQvrUmMcdXt0gEsT+djXe6IfqlVhFpCRf\nAZYXqH8z6QRAD2ERrf/BGMHhsihY0fSH69DE1w1pD/H1fzcat/JvtSGJ1Y61\nZEgn\r\n=ZTnu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.119e21426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.119e21426.0_1588969316879_0.42862961949812073","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/theme","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.2f052d824.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab7a127ffe0acf5b8eb470cf8779c7af82580f6c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.2f052d824.0.tgz","fileCount":23,"integrity":"sha512-gAL619y5QDBgfnuGj6ZKFPs9Bn3Wp5C3RPrkYhRfQnB8X0ZUD2F4R72UHRM39PVhxKNndYuiDfmVb4Zm0XtQ1Q==","signatures":[{"sig":"MEYCIQDLjnXCFOQiC/dUOfsUl1jDH767vgRV4zaCHdxZaS2FUQIhALTq4N1ay00R4IUQsJNd7iMfxkbYCqqNB/uRibSAZhnv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcnmCRA9TVsSAnZWagAAal8QAJMIHwBiSehBR6VHNZMR\n2lyPtRisDe6VTXShbIlZS6xUQ0mZARaDtSbJJVB535j5NWpydfiVngdrEEO4\nOU3U0AdaGLUKwuClfXHuyq9cRhXXrRVjKuNEFE2hU/Y41ccmJwgIIV/oNykh\nlMTHIGqwaCyLo7mPvfvEV1xJmQHNguFb8l47ELLQsePQqBby6j1Xtr0Q3rSg\nw0qZDVLIuV1dowmVTdKJQ3u9TCfTUV0848DsdY77mVLazFlXNZFI7aBgc2SZ\n8hu3dFIcWhEFSv+PCeY5id9CD2xrUjqEiyqm+FsW5a576KbJkJDh1oNEE4ji\nsm7+I+DOkAnfDQhmty01v1mpBlm9veP5g8HjtRn18MNacwQnCbo8z3ewstLJ\nZ6xV0ckBB0r7oDLF8HQRMCeSj01toqkQ6T32SDvx53O9DecJaJAeppNPPWgm\nN+0J9JVPyS6o/1SgAF9n5VH78b+IUayCELNHY5E+vZzO6B0sTSBQ5ZQadLhU\nygflM9gOblZgJPE51kSw38RVg5UUqMruwSWr409iyVEY4yyR+njhSLYwEkK1\n/o7GAUes17w0l2mE80myVSY+7n41ki+CfMpHEKMwl8yb+zkwE+1MxGgEef96\nuJxYTsa+GevDNMRBlj1LNm6QXY9u05KM6joCjlSE0NCKh6pixrivgcj2cosH\nbWUj\r\n=2u1C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.2f052d824.0_1588972005710_0.7073680638194828","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/theme","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.e84444387.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d137456a31ec8b7d9f90f3333febb2a61fcdc8bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.e84444387.0.tgz","fileCount":23,"integrity":"sha512-nXgoBSpA59F4+CwMq86j9y1RePcQi8XzicL2i5P/b8u+hswSVp1hdqoctucd9yAjI9C5eu+gR4FvdAJSNk5Y/A==","signatures":[{"sig":"MEUCIH/pgYh8o9PJfvPsgNs/LhVCQwqXsdD7c4/T5wd5KSQmAiEAjGLXlxI1wul08uUy0c2F6+TL1OqlOB7iIeC/TEYH3Sg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc+bCRA9TVsSAnZWagAAo/oP/0TNMpfOpw5/0hCFe/ru\nI9qzHQnobNnjXC8LMfdYkx6qMTLd8pbgVzxa8KCgr/irnZ/MNcCCIYQZBMPZ\nIXzAq87TyRT7R1oUXVXc/by5j9ztaBsha0A7EIIIDC/Y36izdRWGPPLjGx7O\n/vnza+MCep9m15+sJevoivQ/oGrM5h74xV4ToI0Pi2mIG3qPuW5DtQVudfgI\n4jFgNlWarVI80tKG8Jc2mtM69WRVcMAH67QOkJD5mfBma0kl/Gb76sJAi/HI\nVkhI9ON6FqkNGAaMXx3WndfqHU/H0ZTpdxf3ZrXMfVQCHcSaO6a4LT9i1lun\n8liLOMHe32FxaKQtEIO6L2kW5I5Tgz887UPKhCEpSiaj9Cr4+EF8ssNc/RJb\n2z4psa4wYRpMAQ2xVZTBIUmfe2MNd2I/vYZLskDsV25HqPlC/+hszS+TNkts\nCjZontRsdGx0qrbcush5fZpSP3cSlZ7CWgnv8BYhBTvNy/5XWYP7K/JLiRMl\nFmed+iR1l2lKrNHPtB44ofpC73y/smMtEfwIottoijRvZf8d+zurxbeG+hBj\nNE9Norpbs93eYT8iY1RsaZME5Wk8TWGqzkk1e4t5lbBNdu2OP3x0lNwwuwep\nxsBibcnvwklOAkMVEQq2Ukcu6hKYsVxdnzU2dUcWO6x6FY0jzDRDPCOEZ+ed\ne8p8\r\n=vNrO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.e84444387.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.e84444387.0_1588973466870_0.9786173999942849","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/theme","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.893eb1876.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e4103daa2df5bd65deda41a35be82106dd7aff1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.893eb1876.0.tgz","fileCount":23,"integrity":"sha512-UOFryGxdwU9RuiRuS/++ehD0yJZtAjUyjRLI4ainVTX1hzBULRjzNM2zPGTI+gyoCqMD+RI6cwCp7+G3DYSGaQ==","signatures":[{"sig":"MEUCIQCFdlmqU/CWnVgxFdbByeTfheWXRJdtyutaoQWit4nXlwIgGivOM9OTzHzY5rfLbZEoI820ceBILexHUkMg/lIN/pw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV1OCRA9TVsSAnZWagAAZUQP+wSFxGEafYMRjwsoC3Vk\nFru56qC9jcpOBh2LN+YjXvPPHqSKG8Pwnor6eJN9oFGiVLBc/rs51QU+48Bn\n7Y/wI3ca6mdRftBwdPQ08G06QS+0Sdn/faaGJH8UlnDijU3AS5oAWLwCUxjb\n73dXA+z0JRQ7frNzxS33Y/QZaJLkG2KwzHEFk6KbR8XnAiwYNQES0w+epHfF\nyM1wh/si1U8duBuSqlW2SRsgpHYoNrLJkgdKbIGozJ/rO2hqhUt1cOOXYg85\nrjToLvOfqAoISuF6hSOSbyjKZdgC73fkBd7siXC6WMzaBYbuNgjvyHC7s6pd\nPQR6aLXK+PEsvrc+6fd1EtX4n3pAdK9OPjl4r+RfxGX9lviVdRgXmvbRev4u\nW1c4A8rp+JIF/W1o5h7UcM3wA60b0XBuwSKbGc+qKCrOqrviXHjZCfaYA5cX\nWPfVwVk2JHr0uy4ymAmoL+LNxBZknsriab8cIjrkvLcEZc3X3xliISH1Qw/9\nN7KV3dclf4HpI8isjv8g2v/LyoMClyEYBEdvq+hdsOOLrIcitlQgDv1eFfI1\ngEqU0aF2uKtOuUWKq2lJCbZrAB8sOnBozmIPa+qQVYWNInFuwa+WM2WaVyYj\n4VSgrODROKeQ5G9sh8pUv1jxR9jyL2Q28AXNMIniE71xKtl9QCiASetqTYZA\nSKAz\r\n=FFvX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.893eb1876.0_1589206350237_0.12120440046960712","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/theme","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eb1039916ca2189d61362eb45f6c7e9e6ade7ff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.a5aeb3001.0.tgz","fileCount":23,"integrity":"sha512-wN1rHd0+QW9waqRzhk50yoDR6xRPZ7TBjWztLQoC4mKyOLAp2tJX9um/9sfChuQz4+3/LVPFhzC8msXA3O8QUg==","signatures":[{"sig":"MEUCIQCFEpLPxRnIb+XcRiS1tENQBqOUNvPLZ91tpR4zJi39QAIgTeeis5Em4S9x6HBW2DxUN4YTsa1Mvcvyx9XY6ZXIico=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWEICRA9TVsSAnZWagAA+IMQAIrvYU2CIVk7ebvehA7Z\nqsRzsxcobBafLrYJJFW5bjD6df7NrVd6eq2CLgho6esRFt2i1+PCURAgx8eu\n21bODgdQPw1NglSJTFwWeKxsmIe4Fyv4frKk4cgsU4+bKtmc7JMK5yUBrGvs\nYUuzULq0zdwjdJ4tRqA7XhskC+ylR48xycQ4WxMyGEE9o2Fv6WAH85HOYJ2+\ny/gq6gW+XvLPJTeKx4NmybwLMvmw7LkaqZqVAO9YtNUMrv5CcCipSwbWOBMQ\nEGwPMU+LmMmr/woHP75U8V+DbZZw/WSCuj7Bz/hp0NWm9R8hI6Ztryb9ifAK\nepnn4qy2glyv7pr9bsHKeQWZFnNZomGGDjgi4xdHM9DCxK87WHKMptuxsEMf\nXxP8c73I9vVer+zgZb9Em6a4jktKImxN/I/UNbE2PQfumASyDu+7pvyWgLQl\nTM68Tf8vo1tkgWDu7MEs7NQ8n64/xP8rbAJGrrMyUt6h2plZP/A/cjrslUQ8\nIzmoLcVybHrhtMxJWmHHEjLAK7ZuWvmiCyYey+z34ayAUl0OcEKOevPlTaCh\nrBs3xMeiLc8v1N7mFsYkv+tylOge5PFuZT0sFmbtxOIA1K7VzSPjd5QYjWYQ\nlv7GV/50JxZoOGJwQ0t2gMdIVqc0EhOHEGhpIWCc7GTc5KE9vmhY2KXOlu4Y\n9gbZ\r\n=u7ON\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.a5aeb3001.0_1589207303692_0.07253958604520316","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/theme","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.610c68d97.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ccaf726ebbd5683ce313cc1ad3710d803d13807","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.610c68d97.0.tgz","fileCount":23,"integrity":"sha512-RwiC6L92lqJazx4VZYF29VTPbXJUzebw47sc0tZ4dQKMUA0nG9HS44iu2OeZ3pmUUtTNhIFB41nAVZo7fyrzNw==","signatures":[{"sig":"MEQCIGIxM6MotafC44x2XBt1Wt8UCCi6pMMaVkHIqJTWVUIkAiA7ywIzjkGyOwS+49F4uQzLOcIKt+7i2K+UCuGyAqAscQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuagrCRA9TVsSAnZWagAAO00P/3v7g5+F9d3UooF57fhg\n7xqa/p0omKAKouLFr/g8fAq7UC1q1SCKgeneD6PkV4Su4Yz/5gcyaNF/FQFC\nEJnYEhFjWyugGuSlRf/JVjYDCBP+h8LNAsWt6pORIxbA/1+WS1HlIzwMP69i\nG3Zu/HR69xx+nsRLX6dDO4VES17RXu3xAwmQDGjj7JPsQSKcujClJtL2LJqf\nXi95917RoaeK0Z9qlNmGivqO3bOJstXhXaRyxpEIRiD/eD2dfW/JC/fingfN\nr2x/XLiUSKbY1l05/YpUbQkcbdAhGwkxBGLeCy0X+hhg2dkKMEbwjLQsoXKP\nkY30cxhqitw+G+HXLWdgV88oQ4eozVAkEDuxEcWIRyJhrFiCBmWLlYorweos\ngjpscBmYifeVe1CUHoODFBFXlTOqh1a/N/IznfU7N2zvR/tC0sUlXNM8rLqV\nzVMtl8yfy7H4zvcT4NSgtIGYybkhtsOsfQJlc+xhhAV1ATS/kXd6yEa/bpEw\nj5j32WrBlTDqw6agf/U5uMkIrbIHDZRG8srkkVartuyW8o2kj1s0g9uzFGkJ\nwwnYZmkfny7DO3HPk46duQNg07pQa3nNDLPjnUfsYcKLjGxCHZoghrmIjzzK\n5kzysIOz/h6SDBu864NveeZMMGV57fMvUTM0TABjPYaMSYo+x8wguS10kkK/\nnvq2\r\n=3VjV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.610c68d97.0_1589225515348_0.44158911196709183","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/theme","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.ed52af767.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0360a9accedde7086ad5132e8e2d0e9407536304","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.ed52af767.0.tgz","fileCount":23,"integrity":"sha512-CkboN7QEo81SZEcrIjWkLsfQHnYFNg3viWrJ9jab0iFA0sAhfAn52hnEmTGf/P6Ik+Ab1kktxlvoFYRvLtxl+g==","signatures":[{"sig":"MEUCIQCOCfzJAKp5hHMVq1WBCGKMj5WdEJjqFop5pmk7iLYV7QIgYZ5PcpqDtBpBcx/XLk9l/6tsKiYw+w1nhyxwqMlVnrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubUFCRA9TVsSAnZWagAA6QsP/21qqurARhXqPA9CRTWQ\nD3Oobwd/y67WrImwvGvefN5cLkzD4Jjhsph9B05BS8BAga9vVyptl17/95H7\nANSBeeOALkjyeFKrSiei4IJTOT0a1ZwHEBmLH8JKPLxzoC7imSripmIAKM4n\nrKrD431mBmLl019lfLRTgkmoWyJvW0xUtjHJrg0oHKhgWREW4qKKZDqHW31D\n+7Q+105SIG/Jr5L63INTUWMsmujZEJBg2aorVOD79nG5hn5f7HRCGxzsnMTs\ncZ8o8oHvfx2pbPfSQ6glutFwsu58dJ8BeJUt5IyY4Ls1xgoUYwZ2s/ogKodP\np+7bCi8aZNiMIyRMbhbJMgeRKi6ltnXKK6dE8wy9cW6rViMIScDDo6WhuyGX\n/moxahCx9eb+qCB5anOjcYJp5Wpx65ZA8DrJAZ3ZbzO7hck5SK+RK3/X0AnM\nfLDh6tbSTm84ck+IHlrJxrfMIPzcEIqIQoEtr6XAN83tbtImWK8eD1dSQhlu\n2ac/hjxsN/oz/5RycjKfjFGivb3JJynZT7jC5rYZr8lOqcwVBfoXFhJd13DR\ndPBTD8arTYUKtXOjqkWf5RLuNf4+GNynffy4J8LXBxyQBykXVOTirq3T1hz0\n9qyc8wF97VZ31atwNZ1k8Sczdr3EgiCdkMauWrci4fNGUGN7/7EkO2FJl/sJ\nh5mL\r\n=Wod6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.ed52af767.0_1589228805081_0.058097384850350764","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/theme","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"987287150782d2fbfd3ca1c2450aa98208213856","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.058cfd23c.0.tgz","fileCount":23,"integrity":"sha512-iKKV1nFMF63bWHwd6YSCeMKKcfzkuG0pYhZR0xdWi36cWYY3XpH0p7bsTIjqbrCelHa4tL89eaTdeXcyjw3UJw==","signatures":[{"sig":"MEUCIDM8Mc2jyAR4bw8IxHC5p+XgiDXvsdguHWiZpB4IOXQSAiEApXqtIA+FT1W+BVBOYuRMOJ+OviK8KFUt8riu17c2GRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucKWCRA9TVsSAnZWagAAr7kP/RIkai7o36nRqEBjL9WR\nEE1pJ44YVxtKEyfAcBha6pucRrWjHClBNDuyY61lmKcfjo+mElYNfI9K7EmG\nWJKyym8V80D6Uz9G6McnXOnwgoZVi1frJyJpa09sawl58v2Hghlv3XYnA5Z9\nCWn1dUcxeqA+8tZoAz6n2RIDqm35bI6UrsWGVws+4/0nmGxlZZu0xnzvObyk\nF2RkgEC9YZCYdDyf+WG4XrTRs38Bxciryma3grBrT3ir569EMoozhE6Ntlex\nzrKqkRjc2D/g3XN59r1PQMEEUEQ1piqjpgz33NJBYVRaW0gObql6AGgFHtZs\nOgjMKJ3qbF2RTwtYtI7ndYMz4QmOL9hcesiC0WLfEZTIm3OPOPUA8hhWpwTS\nOZUv7tUR7baRwzi3MvnW5J3E1Rk+/9uZXYb15kI9UO2Ei9z01fxHuA6r3scs\nakWl3fvbP4dOmpqXq6eWvcd3yGaMlkxoryiu/T5QsMB+A2gY1Cd5zRKfOvwr\nZDYgfdW9pfmHzTXPCN/WZZaoP7XePB/UhgSo+s7Mw26uy6ZKvUW69MUBhj6j\nlVnqoGJb9Oz+7fouTcN2XdgdNs6rDPDmIZCJQP8ejTWV98FQUa/i+gvj1NFs\n+VjoXmLO5dSM9S/6EcLDbMQuR4EdEbVHDvTsYHD/3lbpaoqsZry6xtzry3QN\nHWju\r\n=IAoU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.058cfd23c.0_1589232277990_0.16241655778089648","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/theme","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b94a6993daf88eba7bf83eae3c34c8bbcaea87b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.0a371b4fe.0.tgz","fileCount":23,"integrity":"sha512-NaHkUPltJE4zILpLryDUsR38wBYZIWAtQ24/61nm/ZcWpsz/i2I8+cTe6qAGlKq3unG1++SjQuBcqAu0CdFTzg==","signatures":[{"sig":"MEUCIQCWeX4qffScJFVT9WQdLqTE+NDoM6UGuMR01J9HtqDmVQIgDSTVzKE6cCtBIUSNu9lutSI0S8zgFY9w1EI0gEP8T7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy6RCRA9TVsSAnZWagAAAxkP/2cTNzpvss9Og4lN6kUF\nJVRh9my9juhBQc+GCezDEfF5z7MHAD+oavBl5WVaulSYefJW4Rxi5BDMgisX\nNVPdOOLbjGyf+ykfeOeVy5+bAVDGJP2avGwPwOGgJR9ygnLnPtwxCRljUlGc\n3udIopZgl5ZEmlnfsw8uMuuPsrDMIctpitxqTiO5+lubjpTh9Wxdn//snOlt\nbBY+7YC2wF/gXpLxklC734jCHQxa65Z9EAqUAQBb0fHojCh06sauoGIWUDFG\nRxJNy4OXnxjFofwUOR5IpQfx1Cnps5ZB8s2Engi9tREOQxZaAKIJfPj3A3He\nNUDUoWT4F63Gx/0qj4b+1WGpzV7eXO2B3h8NNeHLje2g99FELJ1hxVDWLmM0\nzycN+/TU9QMnwE1Yb/TbhDV6BaPzeyII4eG75O/8BpwU56Dcp3PnUWp583WE\nBwcovBoDFeK8NJbAXaeFSPtW05Pv+E1C9K4cZFE2nz1nIcaN8FpCeQFqOGs2\nPKo9HGbDY75KEM6ebwxo+dDxEX6Brc+ohhJb/7ickCha3Sc70DXBq73ZhPo/\nzqTP48VO0I4tYhUW9V5FvStZbuMBCbznrGgQB9e4mkZZXDVULdnVgpx5EX2G\nDP41KKjwRj4PPSK12HnxC2pz5i3MFMJTgb/hCDVaEEicTXXVl9AStADgIOLG\nNf5V\r\n=MJEW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.0a371b4fe.0_1589325456515_0.7229243043490505","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/theme","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.2139200b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e98260c66b7b0513a1eb855e2b7ea5568fa9838","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.2139200b3.0.tgz","fileCount":23,"integrity":"sha512-84T4HHq9+pAQvXenkDsCdsLq/eTRZKJR4nY9jBhcXKrpftexw2xacw5dLkKRpP2qlmUfMSwonUsQothySJUulw==","signatures":[{"sig":"MEQCIBczZw/pzbDeNPKKYTapXQEBDGegRgM1xJyfzhC0SUvfAiBAA0xYqsyeVfiz3Hp2Bk0wzxlYdrbtH1kLCt6GDmlZ8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAhUCRA9TVsSAnZWagAANMgQAJFVyOI2Z0xD4iI0ugLH\nGtdN98vGqLbMWEhaw1Q2CLil8/KniIay8ch2xgSV5gxIfQaxomwipDTe1OeH\nV7O1N5Fv81r2TEWx5XQJfAU6sSfe0o9wftEd/bon0szmn9ofh8KtdUpI12GD\nhkvx++PwfAOq96dONRLFz7rIoPRPXDKy58EEYty1Rqxw48ufKGe/qLyQPVJz\nhtaj83R0v8Nccfa7kXuBZAa0vjJPRlcyJimXOejP7+NOBu6MJdG292r0a/jI\ngiz4GhqxdHNFl2Ykg4/dVjO63iJ8pfW0rDHHlm9B4Fml2qj4ZEwCft+T6xcp\nXO7qHsPps+lBCuPPBQh7SFFzTspgwIKNwL7T5iLuJva0BBFETRY55g6plQFw\nOh9CopGEDS3daKNsOp+KXRlSJbSRTDEfCkrN0WxKs9LhWdpMoZSz8kZel6/b\nkIJ7W4PV4jEgGKElmDMmN+7z2Lh5/3G+oM9CB8616YlMSKHJudohPfau6ehf\niACDWawpZwPk5Yq8+dA+b5ibWVqH00+GKnRjmTJazTSDp7viZsZbnPAuBley\nfN0qkepNPbokn9uiiqPXTGfQwJbAqR0yKz1PuQTscsqimBD8GtNA8lnEp+vI\n7FuC8ykrPNkywk7dm16He6A8ZPCSp8zTD2BHPprYUK3nfuF/hlLNSh/5LpqB\nkB2Y\r\n=glg6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.2139200b3.0_1589381204176_0.319433295153978","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/theme","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.744d751a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d7bc326849446177b15bc0063bb8bdda6e86f06","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.744d751a0.0.tgz","fileCount":23,"integrity":"sha512-J4W7TaVtqvICo/rb4jXqSr8X12TmFztQnbhw6z4yuaRxheQJdpsl4o6ybzLfGU8/BQzlqJGJ1BZzyrf9J3Z6xQ==","signatures":[{"sig":"MEUCIFowdaNbO8w+X3RYZ2TfiIyixZPZg+rufppM0u+A10QhAiEA7p5Pkls33+Q8t+HXs7SFd3na0E8Y7YDepuoL+vWXouA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMwqCRA9TVsSAnZWagAAb5wP/1r7HlDameWHOBs5cQ+o\nB9OjodRqbfjnJzYJA2wFQUDq9VdbNRknKcLQB1OAvHZm+jswZmkT52Ya1mzB\nK5hN0DLOvQZIockCHNL50C2Y8oKKnven6xjnEYRqwVLiSudD4gcf/I4FaIyc\n8FFaHch0sVy96Dt7lglG5z3FfrN7n843Te26HmD7P/rdJwXREcnVarYHYg5Z\nYnna8PR9xNvS/a0AkrgrPrOvYyeh3KU1ICOd6+w+Hjxku6VAZk3cammQkP6Q\nHUMmdOTqjoybZyipvW6NyKlTLFxGjxH9OCRzA/fxhLf5Sw43HCzKE1YsOxQu\nOzOYIvo2sul9x6w48DILwmlGpwrF5bxGDpHogum9WDm22hLinG1jQEwhjX7x\nHtk+4LsgzhhGk5Kqrki0ZBbwk7KOWh8+bWj+i8mTO4GCi5BiLFWuWGfXL+O2\n8qCQp92K+XG/7F26m5J+2TVGYrYmAjMt9heQRFpf5orAcoQf2to7GqqAf/Is\nxqSyqFEONGecWhD1sKWEvtPR8S/dyXa2sV2aqCQooE+utKx0h/ui1fVgegYE\nA6iRkbko6mTgvWYXzxqPw7J3cA4WqqYlrIKsZoOGNU8VWI6Pun4sMIKskAhW\n7uGiNUCQ87lOUx8n/GjAINeryxBBpOe5EZu6erHiwM9OPCf3O2kBGNeDUnBN\nwSiw\r\n=7q1j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.744d751a0.0_1589431338163_0.18571255512619933","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/theme","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1891bcfc162e9c5611e20701fa0cc05832eff426","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.ad0c0c103.0.tgz","fileCount":23,"integrity":"sha512-lyBECtYSEFAAC5h1HHf9Yt5IcOm1iw37FnCXkiL/8hzWfYd9D7pfvunQcAAIF9JmL/a2bOXaSMbFF9oGIg6gvQ==","signatures":[{"sig":"MEUCIQCKxqItDLZ79n31+Rw/XqCINZR9GN4VF0v23oQfguyRlgIgX8qjuuJmds9tPJyTXkR9+npAuSKeIuzVr58D9LVU/o8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVrTCRA9TVsSAnZWagAA9OIQAJLPXwl0rFR3azImk6TV\nhMlpOMjkWOn7XsMw9ht2b04hLQ96ZVnYE6bi8z9M9aVgtXc9o5kH/iXvAuMa\nSuN+CYs1VmoCqzMS+0xNKxH0uSNWJIIxUZM+GQ06xNVnq8j0zN9x4pD2MjF2\nXk/XS/0xvewm9VG28i7CRWZzRAzetGvfYnscyIvECtzpepglAxnEOL4SeM82\naMC8I7NN2u0y+WJGmXjGPYnKGoQNXU+Pde13x/L59wWSuqpjM34eVDp0G15m\nGNh/vLXsUkKHRhzCROu6tnOZXlytThdqRzM3hJxTDx7t0hcGuWzX0//n/OEv\n6XgmED9lhDZp0rfdEuW1TNw/7Z+uCvn1s6Em+hKPtMjIzu7gR/jozkAI/rVL\nqdUJ9Owt8enOigrEFvvBQ/+1mm2Ny4BZDtYBSjLlWwOZBNBRKclO+BfHOD9C\nKs/Dnhbuq8KEc7lTnjkMhD6GVPU9KsStNLYYUCx7lptJzQOptaad9QqA88rS\nTIpVwcd18NQ8CSJJGjsTgixL/I1eqkuc23r5jftZVA32w8hw/Y2wXcJM2GL/\nVWnnb9QXOkXpEEHF8W7oFDCr0zZ6ZoP1SZ8FlwtfxEtD6VGpubhCwebtuiYY\nXCldeo8ye1lzjzooeJg6tbDw4ESZ0DVCo+PnrxQwU4kZ1PtgwaBDRGhCu4NM\nuFLb\r\n=X1pt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.ad0c0c103.0_1589467859458_0.37606072039360505","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/theme","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75154458f7dc56ae233e4f47466e9cf2936dfdbc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":23,"integrity":"sha512-gz/YkbKVxoL4eCakhya9p1XqDbWK0MLIuF8H2/3xvQQ3V8oB4N0WU4eTlaaQU5c9GyFsJLSKs3lV9lBENUzShw==","signatures":[{"sig":"MEUCIDrn2ajSHi7CQCb3YkPZj+dZRD6PxXBm7efNwVn5BP3kAiEAkAP98BisO+l6Jr1w8XmA6bcknTJfT2mpMjt95TkHTmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsuHCRA9TVsSAnZWagAADEgQAJjaF1xXe1e/a1dbXHnp\n0v1f+HoTZp2KGwSGGz9JHhbVCino2rjFrlYWYcRFOSi2vttFB6neN3CdvGNx\n8W156iwF3n2TJmNX2CF3rXTU2ICkzO1dhqgR4AUgQjWZeZ6PB6yjKYdbqt77\nIsKBXo7RCho/icL5OMXQ53Drs3VVc6acyv2ZYO9sWYj7LYnp6KSFaQhBPVIa\n4ClpoFVuMrOVUquQfhdogiStlBN4KMVA+giQJhMsj0RBfabfy0yybxd4jW0+\nHbvSx8Wd48KB0iNvwo6oKYLYjcWA05NB8mvd4jr9An9H25niqXN/9rMubp9Q\n43Quc03rQymialmCuFC39OUtm8h/95QncJ0zWs3MuBEYyFt5dnpg5tJ5tKH/\n/Goeg+pahagvLB7PN8vADM3OwFcNXccv0FwUfM4W5gvYwxdIUBA8HOMn16YB\nPMHraAegiVUgknPH5S/TPcPkvPoaRvFQnAbPg7aprIG1pMoXeZ7QylsZ+gGs\nToH0nDSvaHABEHGZyGJhyFB4U4pk6Xue9inuQ/JYVB5RN3o6sdODzBDlXdqB\nSMtzBjdLjrruZ0cMDJIBc5a9D1tMwmNp2Zho0yYCcO1ZGjoezdq1wO1T0Key\nTEnjpFClXx9L2P8D3WqAPKjP9z2ec1mZtTFcQqsY8CSHkPsapGU/4F0uB5ca\nae+1\r\n=DOxV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.fd8f8f2b7.0_1589824390723_0.7568062762034433","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/theme","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.730920fbb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5e7c2167caba521793920ea0139e7251e0104d0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.730920fbb.0.tgz","fileCount":23,"integrity":"sha512-Kwbe+2z1CS4QZB+np+GKWeq0D/06aJIAK7bIDbbDMB+CNNekEj+5mjDc1dcqJ5S46xJVsZzszPtRv8urnG3Jcw==","signatures":[{"sig":"MEYCIQD4YKEnPa1PgKAXF1iNY7ypzq1IX7yhQhIy+s5wQisyaQIhAN6tc0dgBBVZhtv2HEJVcdZ55eCQpNDEGfvEkRZ3UIqX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuVlCRA9TVsSAnZWagAAGfYP/i3WdPg5M5WNevqKoutG\nXZbIhpwlBQGujJ1CSdF3uEj+5mA2fVWKzvV3Xlm+OA3+GrD7gfDVBjkrg9eC\nYPnL+pmKfzO5CgGaJyZgTE1jXgI+TOQ6Tk/GWJPu81ozJekKJp/hT/817ckw\n52HFfBU4DkwDP7Q6r7spNAwxrIdHPzJkq05KUqdPOF/5+C83QeoKuLU3GBPA\nmDYLH5Mrvu1dZiYACdoQDNjNLJlGeJvA40sQcqZXKEEagXggOA8ExcnFUxo6\nVtCw2SNUqzn3nRcfu/OtVAY8KWfkP7MamA27zh6u+wxGA2H3Xo5NyTAfeGUz\nOt0BSQDsmpGq5TvUD1peGfIyl1A5q46xCtpzhOFuhJ4ap3By7wLAEIiq+tuw\nBDzpSL7Ial3BoYMmJURiAyBF2yeFKKvYH1OLsbhp39jB6qFFLJRWrpXulKxH\n7qaBdb5eq8YO3iSu56hcAV87DfEQ97PFxCdhNjY24omN2Dcg0F/50ArHSdDh\n8oqmutpfXdK/mLkvVXm6hh3aep/406YXlookxSK2UN4oRhcjTmgbvp5hrJdZ\nNFlst8iaDYkOL+vyT3yoxZbdZFv0eP5660uIl8wD+GW/em9Lz3K0+2Jtr2Mf\n9EBQM9I+pTHFqqvGPgSvNUmh2AOhTJ7XgH0VgCpRF+sz/tuKmkqBWYxL2kmD\nm/05\r\n=k/DP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.730920fbb.0_1589831013333_0.33471196090348054","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/theme","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d45ca2b9bef27339128e2e8e1dc270d19fe81ea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.bcdad99bb.0.tgz","fileCount":23,"integrity":"sha512-IwojqD52wLKrx3n+CVirtqa/aSpdYjZtWrAMYkWM7iYZeuRGBIC9F3uE+5J6hrKu5HTV2hFjkrOCr1v/yC1Uzg==","signatures":[{"sig":"MEYCIQCLt1K2yVMogZoGCIhEd76YPBCG6XYVZ8pv8x1OA8glxgIhAPe0l1FhkAPnwqVq3/qAbnQ64sibbw7YPnCoVb/jB6d7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/OCRA9TVsSAnZWagAANfYP/jLoqFjsdPSiH/RN4toi\ns3+wMu6o43z1Kzan+4OESJw38tBpqyOE9w1B1c2i/hEU+iJmNL9D2nkoPJHu\nLcI4miKruTvWmxbmXxEIUQ9ZBCFRYrMVGq3iAss2+g4DFaiCNOw7tO2Jaojb\nYIu4Hpw1PDCefksWskAqZGvyZJ2qrQfJYMATfwhOjhT7kYSy1Kyjms0H66RJ\n6g2u1M2Vh34/4zZpnAGo5zGFkihs54Ko8soqls+dvFyRXjy95RSHFsIl7yES\nwzHRH/N7BAcXZiwdiYKxPKqVhJFRno4/MKSTAzadj/l0AYN+uQ12Y1GZWrtg\njHzqqLxvLo3TgXtUu0LF7Qc4SQSMS9I3I8evyGFOoQVIOJCirBpo+UEvsHO/\nZ96k0ry+pAR2JpEOj/SuHwsVX+M/rRxCM9LvCoPhtVKL4eXllu+96sjtSukn\nsxwgWkLeXZegbS2j3iPBes5axR7OzF8JPGL3SlgxZQSS83s1P8rQ4v+8hoaP\nrFsfJpspEDItezI05RldiP6tuHADddtCPoSi2NlZVpfzGuHiqiL0U7VgiKbz\no+QjF7W0VvLSxb3Tgrdab3+cOwnl6s+yklKfSG5pFUbNxiTZSVeA/vNbW9VM\nHlff0cign//e+o0ZKmjs7sBE2UkREOlSEPcd5dzEjwRYp+tuxLujvGhXLdbi\njkkS\r\n=Ddms\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.bcdad99bb.0_1589858253352_0.6140419807878137","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/theme","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7ec41d7575c92027045e7c67cd68475053531b6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.4497b86ed.0.tgz","fileCount":23,"integrity":"sha512-AE2qiW2tdf8EMbDE9ta0mRmvqMHvfPSESHZodh7gAcL6ps3NUo+BgU25mHxZllYaJp7i7XI0Yly1ZtJ4Fe9FAg==","signatures":[{"sig":"MEQCIEC+EmnH1lvgE2+BDUmetpe+u0i4rEnmg7f1pHTqTwRoAiA6X7q5z+CZto+IZAlk6TWh/L41G0A2ZMvdPZ9rTpQ/2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1d8CRA9TVsSAnZWagAAgAcP/2aC7KctNxCE7nGDoP1o\nwMxHe63xeZFuUnIpgF+q9w1f9VFi7Cn4a64xlVwFmkJMEZrCsokQb51BH7FI\nYx3vO15UL4MCnfWmdFfOyMzPYDbXQ/mBEWwXAQ7qvTR4lZTKTndUHyevxtS/\ne7VyGUBlgqWDC2xbvoPihjNa/yu6vtItq5PqEmIfC/JSdn+4NL7fnjfE57rl\ntk9JhIPnpWft5Vq9iUSDC+uhYR97i38dJPLekVORDLet3byMkVBhqAFVheGx\nXcv7bdgfK0LzScVeTCy9iO3BjBQg+3/8c7rEvjBSC3sUMLtBhs10PAXHsuQI\nyHA1Exv/i9okkKhZj0ENteVDfMXME2q0ZPge/Xir0KIeC2WVsVTg6zfDLsZ4\nzJggeZJ+AcbYwbehz3CbL4j4OiAzEGezyILkc3QAskM2FqEQabTRRH5zNHJI\nN5TnAiCyF2KhqhhjuQ3+yxenGf+JtAQFTJJLs2I42WRFTHYXFUnPtOeYj52h\nEdkn9qEQhRafkW+jYvmt9pWIwXwe0wLtayFEcDBzVGopgc9DFBwlYMoNURQJ\nYpllRVZbPi/uxo+FOTflEFirE9i07TtxzOfiS81E+68F02Ac1JmyP2ROBq8D\nUD7aozRJ5F/Ti1oH8ILMph1YshaeR/NinylRWhGafs7FPYUZo2iyHjZjKia2\nV82M\r\n=4IM8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.4497b86ed.0_1589860220268_0.5192111424014476","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/theme","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.2e60575da.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"129356b576627e8f9e2a4a2b24e4afdcb47786d4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.2e60575da.0.tgz","fileCount":23,"integrity":"sha512-8uLbNe7rVcykXDzMJoZ8/qOff9kVX9j6dlE7588yUFrhjIrUWQ9eBbszZSQOTj7ferrFznn24TSWHF3k2t5tgg==","signatures":[{"sig":"MEYCIQCdRK+HZ1oChRWFnJ2i5Es9+khYGTTp0pFHYKdtu+zHAQIhAPu5Ox7lzzAoE99CSWNbvG+SnmRlHooQ5fyagk5RM7v3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexASPCRA9TVsSAnZWagAAkCsQAI66GiI/oz3XaW+bTGSh\nncPpU5DY1yD4dN7gFEWDSpsVmUaZ0sHlD3m747rYMToE9zlxAS5Nq/ez9h39\nD+ACojaRgMNWiSpmww20/cvHp5XufZMYByYdzNTt/+bFu9WHQw0eTa37SPBL\n9yIjmBXL0V912iHuY/NhxiJW0LW31UIrwsbBbCVl60EY7HU3U1+hnhRowb5X\nTIAvrUf40GkwM2kmrOzFJQtIN9bf49Mmq0qBk19sJrQfKbjcx8Bs1qF43RpR\nfP0xDpQ5w2/lBTQ0mmradFEUXwqyKYUp2cou1vXRasUO4i7v3+ewnqyV9igC\n2AVf0G6d9p9RUsQlhXUXJlpXWAggNn1ZhnGxTA6R8sxlgjVYqM14gP9n5cqy\n8g87BwHCQXjf2k3Gw7MmHAtQ16hEnGnNQZbNxAvJHh6vcWJH0Cs+JWpciGvm\niX+qEinenVm9MFhQuUw2CQevP+009lUFBQWnolOfRIw9BjHE+NXFEvVzXYX6\njf1rn/W/k89DWRVYi1hFpIOnEv4SYoz/HpIxI1YljLfDA60lNelNMjMFuGrP\n3LgBFHR0xoFss2hlWtL1bPvu1JSWYL0uU/vHMr00R8KewHpTa0LzZjNhsdwp\nDaduC20oulGrl2tM462eMBgiy6JtQycszwOSwzrO8xN1spJ0bVqggQFki6u+\nbBqo\r\n=NjDz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.2e60575da.0_1589904527427_0.6557217717001864","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/theme","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0f7a2f2c0a169a1043440203cbb08577d62158a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.e3eacefcc.0.tgz","fileCount":23,"integrity":"sha512-kshtztXEsYYEzfeFFkGRSC3n33emWdqHgbOCLEa0sn4QH12mjBrmSR3v+bdEsttM/Rs6BjSq4+JKdFs2QWa1rA==","signatures":[{"sig":"MEYCIQCGavKoKDWPzx/5apedKx/PDv0lCBK3p6p3qeFhBZHdtwIhAImEdY/oTKAFNk6FXIRJoFKBPYXDG/r/j9H1ImO5Alzi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBljCRA9TVsSAnZWagAAtXYP/2mEk8r9ILoxK+2Fm7qF\nDO47Ms6Ji3QOkbG76nMRyeYterdg0iNYFklwaiUQ5yEtnw3wB8dSFU+mrGHM\nCmdbGEMiuZxaVswW/tJRJaYBNHxTtHtlujCSBWpLs2AF4RCNisNBEBEbUprX\nbKIgY4xlHbyOiQfCQi5+HGMB40xpTLN/oRxnkVfwho5wRaIiWEMG1PRDZci+\nRHfGaq3uISHIVtNc+sPzHka7IlVU85ogdFhC/QvAQOt5CGB76gySIlkcEvcb\nBaK1ygxbwmi71lRujEeeDvPZz87gTViMy2xfyBYA6ROVJ5ijJYgAH7Tcc3Tr\n6E4J671pL1WCkSsHUQh1l+SKEkX2SET7HTltHIGebc1eiJKV7ADTxfMIT7Up\n20gIq30BViwptXFd19kLkZlgq9LhBl+GPPTu7dV5eAE/YLzbiRTC5ew4GqVV\nycmFjzAur0XEF0NuF7osG8M37rrYKFMcJyJQJzW4ULhCgRPha13kNE8b2KCH\nDCTikdzDI7eTFPS3FQ9uJjZzrhDc9MRwVzj8xPE0PHWbO9UHoA19y7RoSqZk\np4sEFTq8DZdgTbSlBKieE+H7yt6FkzUCR43r5+rTwtDduc4Ve3X7PIqLoeSl\nnfAlq1JIcr4+z+MZu1uAdS7N22ufP8F0U2j+4bRsO+v9pUVQXN7CGgG9ECoJ\ncFLM\r\n=R4pk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.e3eacefcc.0_1589909858843_0.9286315640900977","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/theme","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f229459cce90a6a0f6f6d5ea26b3ef9ba545f601","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.b065a4d2b.0.tgz","fileCount":23,"integrity":"sha512-pLUKN7TPAC98A5nSD6NuibdWIGm49XBBs7NSWyZE3H0i7Vox6FKuUSIOq1/gvdyHNQgFH+5YTlv2epQpeBlRUQ==","signatures":[{"sig":"MEUCIFDDra/PMpaaGxROXR3gx1ZCw4myfIKTL57n/lSuZ1aQAiEAvnwuJIWI78fb7YSc80+kxHoK7+VdY30hwbsFW6KXD5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUBOCRA9TVsSAnZWagAA4AoP/3vkR5IoBK+NZGUBw5oS\nuhvvHLOKcAHIRGqt7QB1y0PGP0rmj8trjHEVr0Qfcpl8thvISTP4vDeXWbjk\nxOrgySgEbdB98OgeO0T0B344xnQNd0p6M9Q6VvjjBjP9WTYYc1WjglhFrqbN\n85J/uXA9jSQYHuO7LvWZx4IcSVLT5mJLIldm15npKhr/45jETe9SOw0wD8h8\ngS7evvZaa0OQ8FIIXfAdSoATeYizJ47T/4TDxxJzFu2S1p9emf1x2QEzHrBh\nRlE2WZmeonz3UawL94wH0W1OAERIwN1v1X+AMEiQN/v7A7l8WynBpZnDYKZH\nspCsMBROOXbX6MUZv0xvSBjMEO6zd6HhHO066wRCcxjQrVnUDdCn4VxOIfqC\nuZuIyVgnodRIC4dgYSmDLAZzoEB0EzAuah30RaRXnaRkDHNxwjTNvOkcRkQV\nLlMGUGhNRsdd9VFZQnaM57c/+EcD6Qez1NSC+C/CP6jlmN8Yub3IOj8SNMtV\noHGqrBBQpVmBtI09hJ4giR0Iidd5zKoOCGAy2aTufTRK3pUMq5fLBQe2ylD3\nImnpcDecUr1JaCYP2ToSHOpcfik1OnQst4ND4KcniW8jwwcbyVtF1/PaCIzC\niLvDLIoPAqnZ0TZDMRo+mnx7vmb5ikV7+VIg8P6uzUHyDr6ObyqBKv9svtVH\n5I4d\r\n=Aw8J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.b065a4d2b.0_1589985358082_0.08573626538742629","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/theme","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"389ef3f71a53b6c08b32c4e2178bb2a0f2454764","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.4ebce8d78.0.tgz","fileCount":23,"integrity":"sha512-6r5zfvh91mxB55qa2M8BvTEx4C6Oci+HuFmX7od6Y/ZAK+mB/i1Qkv7p7er/jSc7YxsPpIafL0zz0hDMC+5NRQ==","signatures":[{"sig":"MEQCIEtgC5HXdiwBLR0up7cRqTkHMJl1qLdFS22J/sLCcv/AAiAZ4xY1lEYiaUqe63dII6c6cQc0n0amVB7Y6LFAqMiUOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZf4CRA9TVsSAnZWagAACvgP/2AEsNPgn2s0QAWBiA08\nOdPE/UnsrK9qnJ2WUuFf4GveeX6QDr632wQy+5nfzwFapTOoNEPt/U1+JSPk\nX9t0A3gwgwuingbEDFCqPpbR1h9KX5sa0ABu0Yt3Xhktk+9apf/bnAQPG9vV\n6mTlRoLjcrBvSntiMGDVblimR228Zjv7QxYvdI+3O3B8rbRyrAdksxvH6yxR\niyXkqj9AL4euLdLGVDHhc0+anNXDkilcatUi/Tqda+ZAmUu7ndGjIcX5f4zE\nu7VfG5sCVYMLns1q6z7MTq0jfYEwPtOPq+GZVSLsEs65v32T2MMBEJdkTMED\n7o3vILwzpCa/TSohxq8BB5KPnAqnZU2SZA7AehyuiFs1oVOsTRKCzAhmxUlD\nle6cDZ2sQ5MvN3v7Kq/dRwnWMw68U51vKTdcHqIuTUNuZO/w7kRtI6FuMsdb\nYEgtQ9NL3GhZkn9ir5qiYI3sOnUDkPaE7OQGyINb+hbqMU1AYdJrfe4XDecm\niyq76Ll9QPy607UKxO7AY/7LjJOy0U+yNb4ktDSWxRd2yLNsr3TQl2Bptbl0\n8AWGMJVvj975OsjvSd6fDzEfohwcHy4bZtQkjDvEX2m/dMhxNbFoKFk+qAzO\niGcjHxM1NVpsDbcRaqfxsZE3iMhMxFomAT9BxYwQEUSfaOIg5QkoJjM61bLC\na78e\r\n=somo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.4ebce8d78.0_1590007799896_0.37496974232072366","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/theme","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42663748a679516bf5956d0db02f7b83085fa784","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.b0fdca492.0.tgz","fileCount":23,"integrity":"sha512-wNNfMXjPBZPhcHcoIq1A185qGgY6JZOwJ/44oF+GPyTdjhk5uYed4X4D+1FBRytUDdg9WX6HEC1eIScG5/U6dg==","signatures":[{"sig":"MEUCIQDzHT3pdty2u4pvgdsf1/a4nSDjlc/x/FXPRhMY7SY/HAIgebems3FOrxsd/Tx1nOhP7JQvCbHV7Mx5EquELrXkWxg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbb9CRA9TVsSAnZWagAA+rEP/Rr+rsYB1v8bGC5/MJJ4\npFVS9ZR+ExH6PQwBhsqrPRCLizUdgDndOR+SVFXVNDotoL7IDMAzJkTIJ8YZ\nDwsjZhctk6neZVGk4hq+G5zGoEYKOMA0niRs8CIHr8hJ+7ErPj5FbOkUN7Oz\n3Sn7f3USZs/+cfMmpNevsEiB5eCJCLn4wMyvpRIdX0xcw+bqvNa+NyKXd9nE\nMVc8cNC7SlyqmU5p1vwlT9L9wkn306VFmukFzBKZb+Uf/hwQXM+elgJmhscx\nKnsOiLwsMeUsiuw/TZ2/ZFXnqdLYNhL9wzkAtMsU/wilWAfhQn64V4onaRzs\nG8CxiFJLzrri85fViekOL6LC8s+nYQC9GvVmVxxdZHV9D2QPnPlnhhHMORc5\nqZWJYCUOvUq9Qa2KJbBZ8FLPP8SdKnukqn4cZpS55/SeOnAYpKSHzsX4SeZg\n7t7xveiCX5EaBfHW5hpgabzrkac0YXsDVeXkI5dBjWFyq3fNRnf8iXpD9mfR\ni+84eqLs4k61ekTar2QzsZ9OLHHKbB+StvShveo7E8fKc7NpareWOuE/PviD\nWyzv956DmeyiLXJz/oep36W7dDTZHKFf43QIPFH78VN08CuRzbI2zbcruyff\nZ1Hw0UX9xOv3Ju4/27A+6ErIVeVcxgHlDMktKHIvv5qFxmlCMgcravt8RFpN\nYvdF\r\n=hcOJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.b0fdca492.0_1590015741177_0.29269933742471443","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/theme","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"924a6513eb299c9f72d4bc446f408e715075f899","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.c67667e8e.0.tgz","fileCount":23,"integrity":"sha512-3ZaUqVPEzfAb+DKaDTZFj09X5wNvbT7+qqgu/WeX7uZ3EWAUOijP2h73y5r2P67xsNR2XX6YuSsMBJJpk1vCaw==","signatures":[{"sig":"MEUCIBr3WU/oF/j2hUEOXOx0dGqghaMcFmUBZczOcevt7oB8AiEApNzVtRVAJuQlwQP4ZAKKGrI6NsnmlBkL34KGiQqd+0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexowxCRA9TVsSAnZWagAApzIP/3R8ayxXFKiLNtBKOutO\nHqR/lt4vISAkkfEflILxNl8oKGIp7ssfBjfYuYYlUw+d+51kw7zsJbP4QQVh\n5PtnWP/kI31P+TiCUiFFWijUfRnLzAO3CZNr3DnxFR3JGD2Ug9xukSPVFK+k\nPS/HSD0bnyk9OlqHTJHQP1M5nxVoXLq+ZX7JDoGC1gtSCUW9TIVNsPsQwo79\n1dYflo+/dbLuI1+7GfOfWDVvdXoG0TZdbLuiiW4FJeedv7UJIACChZTt9gXu\nzGd3gXQ6jtcsMq5DgJMOKAGypbRMROiXrObz5pRYgmWqQVufIgBAg/huCjG/\nRxLjmmLc46pVu6vUD9E8EmuHBM038hu4gc84ppfN7lfnQOt8mGwtwGG0b7jq\nWBvnqN3U1L0rR9QlJGtrn+MbD7ATJCfU7JTUrSpNzYYoJJ/zsU3d8Pod0aYZ\nzxVPQO25wU7laeusKo/djX9dm3vOYg9Nr5KJ3Flevx/UWsfBjYXfp4BtnPFa\nnJaB4lovAml7Nd0GbAZH8rD6RNZHGYPnYEZEaOIpdiiXKr7rI77yUhf3SSys\nBPYQMMTSdljRE2UoeetLnzG7NQ6vuqZRQlBVmOP8aCOByvQFNQNshgTAzgF+\nqkB3AYPH/BnEtkI+6fJi6EDTA8JLDSGqXS3KrWP3ziCbzVpR+EmMRT4mJr0z\nVNc7\r\n=Z+Xh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.c67667e8e.0_1590070321054_0.5972040418693745","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/theme","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ba27858234433b1959634047fd87f84f6df0769","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.62b5f37db.0.tgz","fileCount":23,"integrity":"sha512-ytNW3NnvCBPCMMnKNWVtn7IsoZD8NkieXKfBCRJYNnTQ0dX7ERHYtkp5Xc0lGRpXXuubzt3YRqWDkTDyKj5aXw==","signatures":[{"sig":"MEYCIQCZj3+g+fuZnW1UqFD0G6Fjec8/BR/CKjKB9INSEO/vgwIhAOvDkIFCo2Zj39c6QkUlnHc+c7Yvxo+iTCInEweRLF1I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq8MCRA9TVsSAnZWagAAjJIP/iUJp9xG9Opa+ej+o2vB\n4oST/Tk7V4JoplpN0z2sVFVIFH2U5W06iqFB+FsT4F+w5jVKp7yUHG4Xb4bB\ngAHyAP0ajAlHlHLVmLG9iNp+4Xa7GbjGQ6qqfU1jLh3+UmLKJw7FQ44jjlN7\nbAPNJ8YiKY0qRTJnKr8hJZ4VWCyjvqF0jpW5+pIPd0n+kQMfPHi/Ns0hpeB6\nHC22YnzF14CB2/seuq0cgDz94qRQww6qyzLQIcw0XPmP+B7pFFSb8k0wNgKW\nWlhVrfKLMeBJdM7kPphyJVAF+jmPEyA5UkKV84fB/v+AeqYO2pgagMqZaKVx\nlrJ4Xxufb2xNRbTxcYy8TWQMiVFU8bfVM4SVDldXY0Z1xanOQZMFluFdkOBd\nb/NvEqeDwFpnsxQtVKr4k0TFLgADSmZsGhzfKIoQfkbA7iBF0GaNGnDvbSIo\nAP1gcl03tBYK6njOmZ68bvL0BYpQcXA6Vp8gbgDxlcg2wFA6Nl+q2P4pxdOG\nFLamfNIMi1CjlsJ/Xu9+d/EdCYsKbPOsNjkXgTNzW27UHp3TqHqmsktZXZ5n\npt08HkIbdQuTJK3WzspzTxL0nj2JyocrmynAtG1Rmqx/IFwWXTJzq8+8FBrt\n9wHapk/q62IUjOtA1gt21C0JnfOdy5HzzydVG2nWUdE34DBX6hcmetH3mFPX\ns/vc\r\n=KLse\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.62b5f37db.0_1590079244244_0.2247898572684286","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/theme","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1dd7e8eb265574ce83764313b695fb87332de39","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.2e218dbf8.0.tgz","fileCount":23,"integrity":"sha512-20bYFhegF2TqusSfLmVOZ/U8ggUs9yoqaH88jwjLpFElRk9QX1K9gOcG6Tp2COMe99hV98/ELlkVvRhhYjo7tA==","signatures":[{"sig":"MEUCIAh///5U6f2guUd5PClwVHXNZP1TiH35/9IaSl50BFiQAiEAhZiYu+wt0sLXpisriWBejAtVb8dlEJ34GGyIoo+CdcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrPxCRA9TVsSAnZWagAAxCgP/iN2XzNG9VR29HhwBITK\npnr79cy7QFly1kNWYHTKDHa8YxQ4XXrEzM2O1WXEUFRVHK06Yg3Lg0wFvAzd\ntC7R2APXZRS8wI9RS9rFDB6ejdum7saSGM9BGJ1FCvP87nDWimUkLMXlUxXU\n+pfQt1xoZPnZ/CAAadMNaK9p1s+3SXWa1VHj0u56HQHmTrqdVNSFrYk++b3w\npDfwEDN1+LHsAOYj1ykYGTSf1h1xHKqDL6He+5FtAIeGFAnycnZ/rZALX1ZL\ngKYGuwvKLuvndZHfGqsNGsGoEUFK0971ulLLtxRQlvD6JeavbtZOS874U11d\nkDAo+vZ4XitJhEgNtlFS01mITYrCpTObSE81tOWfx74SOR66+YUl3BEo0TU1\nT1tfpgs5GkG5AWdW248qsZWVw8Z0A0bb1OK1T+r+XSHJpfsijbX3Ur2T347U\nySWRe5TBgpnAK8cMYBrVbFmrGrmZLNFM92LtaxDf0KxXR/mkz77LF8caUFpQ\npBDR5oTh6fN/GeUnJMvjyMXh4kK3b0kbaYILL74JU7IBZf6GGfFwylCze/00\na5r+bliSNp1YyBu+amfPEp0jfQ/CgYnmnSQdYd/PbiYstZoBbXZ9ZbjjGvDY\n298eO1nRExcFVpGUtPsU5C1apbaDI6STL039ydyS1dXuXQFddbrYz0/Sggh6\nMtVY\r\n=TGHz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.2e218dbf8.0_1590080497003_0.6990001741673877","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/theme","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00fe4b6622efd64c1f64d473534756166c56400c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.7fd792bb9.0.tgz","fileCount":23,"integrity":"sha512-kyONfV7PtsHsRAbxsTSSzUmtiJKujC5Qykg0lc6P2/ensHSU6gTF2CqjvBzfOUEeK8kFpCKMuYoKOKgmntQecA==","signatures":[{"sig":"MEYCIQDBdBkAHBBTr5+3wryJvoYcP4uC/+5f+wTk/SFlnqmvggIhAMZyer7mv9F63wHPLO4GOzSuLkpby5sc//nbyuohn6oX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrbgCRA9TVsSAnZWagAAoTwP/3GzqX/V3Kby4qzEiF9C\nuxzgvYvGBmwYs7fHlCZ3zsd2hPplhdJN64euOm+YpMG3p6iV3YGtScV9luJg\nqUBkBeGFc4HX81NVE+xbgrherptyVRhE9rIqbl/acrgvotN3n8pUMaalYD9W\nUVrjZnv36yjWo+/2hytYNVO81AyTmpJui+EwEBeRw3dP0J5IQeAnDZA+y3hh\n7kOSzJMACpTjVYFCaffIpLZFBn5Q/j4Bl8f/gnYxFRlVRk4/8RwrLqSJPJbt\n/XABl9ghBBhWd1dXNOqrXEa5opR5kAHn6Uo8rTbR4vTpLoNvFdQeD9Kcc03r\nmo9Ax0p0iuHyk2B4TEjx1Hj94EX8ekyz2fkVJwOxIaXJqWECZF7Jrhj7oq6z\nU7u9CqfC4j/xjNAv+HRxx5hqx8LRe36GgFv/nYIZvPZL+YloXihFgT/4J/B9\nFkj6zPDLcLUZh6n7jbqK6M7gwiNmbvHNMGeshVUblHBSpXYyZuMHEf/msTzz\n4k1HAohHy5kg2VY+LD/xGrVVEW1CE60zbq1CxOxj2TEbx9Ih5z2UDgEqr/UV\n/Uha1ELgt2prrYzk8ygYWOrRPQdtaBiTGo/UfVFx+XiurTyyUQB1guP9s1wv\n6jS85SdTBjx1KexwdDS0ihePeYIq698WuiyuWgWMguxAZ4gjSS0IriNZcHCo\nYFbc\r\n=PNga\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.7fd792bb9.0_1590081248142_0.8464357014968311","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/theme","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f71507a83f18abd9b3ba07db906bb1305a77310a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.a66493cd8.0.tgz","fileCount":23,"integrity":"sha512-4SjX63vVUSOueahcRi3dv4lNSXK9Wlw+vGSDiB/vvwjKaqH7x15ggUtHoADuL1LTrlZ6xJ8mSxwMvt9H8G8wQg==","signatures":[{"sig":"MEUCIBy/rlGCSCSjfOBClI+JpqtJmCj3zl512HvhRFVWKz+vAiEAxwM+pY/sx9Qeit5QNzfA+cf6xjkvrl7o3CzLtZY2n3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrezCRA9TVsSAnZWagAA/hMP/0AOgtO8iiEXiRbTZZrV\nhP0bagZ9qXKfsGwHdy5fljbic+T2g/6TwughpqSOczTvENHoinVrypNVUs0P\nFWZ5OwsjZzyXZfv4yRAq/8BO4R/3YaKBh04Gw41iTV55m3A04wtE8TVhHBcm\nFoybmulM6LLz2jQmqbNJDLmMoSkkJ9Md8Inp+HgtG8FoKTkAOYifaPFdCAIf\nhlo/jH+hYoTJSFyaucrW9HHbGESQK64QzjbVBKKpPnP9yr2ehUXFgOKIH4gS\nAECjKOTos378idN+UyD2IZ1GaUZXz3Yedfg5/+p6TEG3AVMRHfids2UuY2pD\nZGwpH2HHH9vKCyJvpNGEhmBLRTsMnXvfnFe6Onl6SPldm2p3p4Pv8XMaGQqx\nQ4jOIem9W5/Oswwh19jGgnA/LA0rXezNM+ERgVZ2TpihBSCMnRppsVJlKY4v\n/AJhazKFQaxFui8vUiUBXLUtjk+caG9BDWYxLk/003vhiy9CsXkLpWEqJxzH\nI6lW9lebaCGQg2s72i5C6qYAl98Axr3wZ4LWtB1Cem0Wvy5ECBgIKdiuRlh1\nq/JkWMjoOEJqT+ShOOBIlx1pcEaMgs8GlH/DMn3kAf1AY934270dNIV86bju\nGUvn3q0bPnevnarzZ+zsTN+5MEexUrSAG6GyxtmT7/Sb9KUyZOyOVgrtqAqv\ngqsc\r\n=RFLh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.a66493cd8.0_1590081458573_0.782394243941706","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/theme","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ca0ed698a7c9861f06eb346fad561aeb10b2f5c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.da05f66e1.0.tgz","fileCount":23,"integrity":"sha512-fv9UnaKo5jxV1eKiTc+a2151MV3Y4VyYRIF1OdZWiOKKY/jtmif5oMEhUaZvJOSKTh+GHxjISHQs8wec40e/4A==","signatures":[{"sig":"MEUCIQDohW6vmOF1FBGni6a2ClaV77QMfxq5XYEAgndCvnS/QQIgaUbtvtWBw51YXKd61CjhZXmFrhzXZMeSoz380A6Cjc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrggCRA9TVsSAnZWagAAbhUQAKJDx7qeGaS+ekobiyUV\nTQnOEPjmPk/iPSxsNJiEEbbiiUYOzIWC8c43nsHVsszM35MJWWvx1FZ2mTUR\nAaRSVUc/4nmIBctcniAqMf35qSJUo5GfLHOAUjAYuM/CuYw42Rnfjs/dau3v\n5A0pcUO/weAH5cOv+1ie9AXyx7I4u/TOv29USHNN4nnjowqjZXgx3sZfRT8M\nF2uCmBKuFSqcy0nX+p/Q0voS8HSI9HfF4d6oIodYwHUBpTxQdGZ1kc/GfQDv\n14031XhsPs0FCeE18ITrwPG6+++C+Y3MLnI7ZlhM36Tf0FSPWTxzipcHfhfD\nZf3Cq74nIRYvUN36ndxC18WDPzAwczFRhYmrUbyfh6rvAymmqLvHZPHhrsAb\nloLmPman0cv8JAXZrbZuJrO/u3EGbLEfEWGvRr6iYKnVwofNtu9wC1N1U5dp\nOgm9sSOhBlPx8KvwAVhIRaWwYaS0/iA0C/BB2tFn52TiNFQck/gTvEVZYDF/\niDM7aLo30/FtMorQSIcjokwy+orFe34ICMiucQYuRzngQ2Vx0WxHfDFBsRvs\nY36zG2YZ5yxbxae9TNFLvdIK/9ZJMf34zArOpwlqFg2jGfpbyBlvPeI0EGXA\nmIBdR5NCT1ESFmu+Bu8ULeVqXZtwGxA6HXcATftqy6MKm04ZZhqsvuTtL0JY\nPEfu\r\n=gKgd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.da05f66e1.0_1590081567675_0.6246833005608845","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/theme","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.740860e78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11943adda4252830ce098e5d7c4ebe252899c88b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.740860e78.0.tgz","fileCount":23,"integrity":"sha512-RXXeGSJWqkdzuFLdVM2JTtVw5q+68FjEO3UQ3J0eYKjza353FVts1j6EYROvDhT8KOm5SnUVGecxqrgejdzn5Q==","signatures":[{"sig":"MEUCIQDf7hgFiLbwv+3wUOQN6VrnO4nDNKSa3D0+y7rLC6mmtQIgfQXo/AEH9E328OVBnejve3eWvx/mQKTkEarjDQmS05E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrmzCRA9TVsSAnZWagAA460QAKPxA4LgtnvgaqZXQZBM\n1RFZjFJARlbiH/Dv/icu4DmusRvy3z5a9XRcmK/W/hLuvYG6zeYUdVHMJlNR\n/FLF3Ni2QSjjS349lSnBR7Lc3shHHpE5L+/+yCQrpjqc0gsJa6n1bEZbCbhf\nYWeq+QX95EXGgcz2R5ckSxO439Xpt6v5kMH0zxleOzth7Ilm3hPKTsXRXEU6\nvOisuxNCRzCz8s+ZdrUtVv8N4yPlUYRfoGh+Rs5EuxHoydCd2wvlaqU435Wr\nxmNJnKpTf4zD64gWP+S+fj128so4oxd7UTbclnnKoWrargskAOdwYZeBypKT\nV1dnb9RSdNKz80TlpO8hAjS2fhK00Zdd6Rxc3oGwmIR/+TkWcJvCpZUa+/FQ\nk4RlZu2PlsMTl0mnp3iu0EkeU1VruZeoZ74MblJMHvtFUHuA0yk3RiAEyRLJ\nFvmRwe7W56QMyrRX+MPJnET4ZwkA1d546Iss5y+Bl2OskqIyo8BOvCRw9X39\nFRq34rFptzI74hOrvsgfJoZw14DbPiLDQazf+27TOc4F6uR7d9QuulXuMMfc\nEN9xKiqCTaMwE226DekVYbxn3Fa1PlPKbtWuszBK7h3PqgquuhtyFBhJnJ8o\nNNLtmjfS/AgvRREdiSPxZVuj2V3yAarrS4BuMyTddU9s2oWg6uSbBABIIb62\n0y8L\r\n=Ux1i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.740860e78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.740860e78.0_1590081971251_0.024942790606983234","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/theme","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ee4edbdcf7fcb3b737575a644d4b87df83b06b9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.5cea2610f.0.tgz","fileCount":23,"integrity":"sha512-VlGbXobSeyZdVORvd++lCg1mDGKCVSbYL5Kg/JkxhLzQ/YnH/+l6Lcm8quQBbAm3pIIpMDptr4Okms18QhGM9Q==","signatures":[{"sig":"MEQCIBGfyAZZx8vGVUebFCAucqOSBG3H0CuvGYqQDnGO6UwdAiBjTIQf8Y3hV2VNs542wKdgzbcS6KFSagV3HcGZ83/FpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrovCRA9TVsSAnZWagAA9u8P/2/yln52IqsnJFkN9JSR\nQ4wH2jUDCrKKg2qbA7S5smDkXMCIwoYrG3jyNqt9FgGIso0JnRicHy3XSGkI\nkYshj5isoZiq7eB0+PoYgh8gW0G/YLLeElJ+mwat95EHib6P6gEFMe83h9AV\nnzrRYtKOE+yMrLMfrZbVOMNaMzs0GgQU/5I06IGdozfzHhcDPfT9ZgvW349l\ncPBTRXUt4aV9S2x8X81w1/Q5eI/+9/1QVle5fDagG9yVx0c1pNWDZXb3Fu7K\n442Nx2rnZW3yQABKVr+KYDDz7ZoUPA9ltVfki9GdUOoHSmRpGYp5QZe97sKH\nAWQedbP+yBCam9vibLfiZB3CV0eiwOOAxkw92vaDRrglzouQsLx6BA8uKGNv\nIl8xNJSScyxaZkQK7c4Hn/73izDQVsK5ibhQqHB/tgI2y4BN/7AYqSkR9RK8\nzkRAxzYxRrmI5wK00YQWyjochYbJYTFNvK4RYN9kvsdIter6oCdXNlODgdbC\n9wh/KHUWVQz8ypi7lKMu5HZ2y4Ib7V8pS/co6OYWW+3U8Sdjp2ojMIzWC6DV\noJ2bJhtSORRgOyqQOatPbHFvTGWN9cYzKVNyK0KcCSttLBciPkNq1lmiodxX\nVztP68UlfeiwAdT61Q4mGXeGKOJTrH4JID7Xseof2yDnLm5D+XgHW4HuWGqg\nT/np\r\n=VgKU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.5cea2610f.0_1590082095127_0.46652571367096085","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/theme","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e94532ffac93fb3ae75ceccbfd8119b850ec9465","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.cf7747ef7.0.tgz","fileCount":23,"integrity":"sha512-QefseArI6y3BTKQod5muqmtzKhMAsDjl4Ck8FQymxakrZAXMm2y0UwfTEkh7CWVTefCoExTwRhZBps4l047GrQ==","signatures":[{"sig":"MEYCIQDdlEONiuPKz9FvBxBHASsmBLbeJkB4yXTCQRLLNzNidwIhAOhdQd4jjaKq1BN36MtrkrRI4y2ry/OiommOoF1Xt9+h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexro/CRA9TVsSAnZWagAAwPQP/2z9GJLe/Q8qRE1vFQ8K\ngGi8px4iBwmbLaaSnlMvsQikr3kVRkM0SjnbYK3D1Yw3ZVsyGsbsW2fiO0hp\n2GdU8dkBPFcfQm+/qCNN/MOxQHNKvd41fyN6pYHL8hdujeVejapv0OvNGn99\nz3PXWcjBxdpVv0oGA/JtYAagLHAYM2qXhFcfcawhI6xzGeJlFW+Jrr415Hsg\nxQwb687WlLTLma00NSNxGbCw5bqvUqCKx1n2ffbAgkHwqy99LQ/3P/lMLTI6\nUfGCk9n80U54Qk1rmvvjfG54rvdH+TcWhTORGaaoohx4zTg9Yc6nrSl+zODF\nsaKG8Uc6ISDR03Qd2/yApDNQne5hMqqPv75kcq7zTo5n0QDd4/YvF1JSdvlI\nAnmCgpmYLEG3D/MrWSzOAI1GIF8VPvWkLvnbLT++oOEFII5JYgPKJHvysPce\nep1F/0mXiIaoszh5o+58IkFo115VMjUPyaHU+zHVNarChu3Qio6CDMeL8Lsx\nFmGIjcnDQekRCtCFK3PNuHmioIR+ww2g2GB5hcJaN8yEhGEFVMYExcjNjsf0\nC88oHU9XeuezGoDaYNw0oaFHr8zcvl6CtK4/ZiIWC/fJJQ1UDhL/GWxwNYwi\nmxqj4ce60K921ViiONFhRWNAnjL2LGmV4FBPIPbzFM2mjf8l0RGOO1rOFpF8\nqMCt\r\n=vUJj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.cf7747ef7.0_1590082111090_0.37433618882612185","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/theme","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5835d962863a0877317fa18cff75b84c62ca1632","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.862d0d7bc.0.tgz","fileCount":23,"integrity":"sha512-vZOJ54v62yrlg1G85aBMfYXWLO5kax7xMUDFJ8wneBjlbzSQt7ETh9xXN3ZvNSUax7k9oHWgbDar58t7zFAgBw==","signatures":[{"sig":"MEQCICEKEGq1MNAUiyneLpdq/UtRWru/mt7P/t/cR+lr7etAAiA+QyCHjpzyK1VseR+WA0nxZ7cSipjPGwbNthrquLVyfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrriCRA9TVsSAnZWagAATGAQAKNW36DFQ+ZI0KraTvBE\noysxlipbqeG7Q3CCmlCmOtfXZpaS99P5MEkRHQcUEaSaaywHCcvz6rJpB0l4\n7QZFdGl1p05FIrlAjHJJ+z/KilZujXHn3DNozTChN63ZNcKQaWkMQMWuUo/0\npGyMk6ZnX1WixUiZdOCOlBfkEi4WqeQBA7UwuBuhNk2hkmTkO++64paQt1YA\nHS+fvdyZsk9OwqoGuaTF8nSni+A2CemTfHOPH3LD4ECvJN/s2mz0a/59NShM\ne14Ma58VMLKvlz+zdiZV/9LFYSLpkBYjLYRbF1EYmCJ36jd8FVDEO+COb/0M\nKUY2oYFXSdITbduBbirpRIJNSlBmrtg2z1h9dmyGhImVodTnTbqmM3D6psOI\ntYYIhqSHVDCwKQqJZ/qosBKmS4e06pp+tagMfWI0Ti9yMeK8XPzPyyMELMMf\nAB4bkENAVT75kXqzQXpwnBmXfQ0ZIrt/3uc0/yfrDazWQ9sBvIqnFCcxg6U/\nZ0TeoeGT/lk6WMFNyt3KhfZ7O54yZB3XN26wACoOW2fUmMCbaBiCZEBe63fI\nluLjzDifAkPRmzCjvQJjD9XWqIMUjENHLLpJR0lirx3t4ZD6r+C3viGLRSWK\ndFCB8N4mtrKsAeJFg9lcn6SKamJP97X2SKiLk4sOGoGHBrWAgLqhOu58DLGk\n63gB\r\n=Vra8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.862d0d7bc.0_1590082273628_0.8098221183095993","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/theme","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65dbf42bce427e8dcd59c08e5c4ba04a706d222e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.0008c8a91.0.tgz","fileCount":23,"integrity":"sha512-VhmZT8soEdc0ZcGyzdOQJ/j2C2bp7voYG0FqF1p2SwnwI5Py9YVRQklq4poBAhpSZSLe/ZpwgXg8xRh4sYfS7w==","signatures":[{"sig":"MEYCIQDcsoU+UryBxaPelWHkV3KbiJlZI8aSrsFI2vT2UU8N2QIhALZ0UHCKxqFpoUR/ZKwEFubZORrdg6OFKCnA+ZquGNhT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextdXCRA9TVsSAnZWagAAcz0P/3X4PjV6Je/2qiUm3JQq\n1dj3WtD+9rIhUSkMhtdKABf9F4mItx2IvQ5l4XQ3Iy20wDgAcZJdYk0oBjQf\nvYTXJ/Xnx33fTaZ8/782AnrdDNUjhZVgWIvVbM597maAh5naJS21RpoJtGOn\nWFg3zkZ4lXztFoq6vyuoZKf4rxxHPKcjQszMcpzJlnFloFI4d7wo4WoGI3L2\nO9F89u+IaSvdiH4O2x+LZUZtThrXUUVvz+MjrZVy1KZJ6/ha85Rm6opLtf2/\nIrSJNhPmlw3ew75t7dTy0kUWpt3dN/THZUSRS0wRL8ZQTulpRwhg+r0+8QZn\nWNg2fuWfPm57X/KsLkK6kIQC+Gm+ES9PsAS+dcmTNZQwHGIdGzmkHigrtebj\nKO5U0KRybf1Qscz9R6PDHe5lJsol4jKewZ2oJMjYWcbX7581XQnzssn8ESrT\nw+uysnPbRVP1J2frTgMY6aqCJEp9e3PgkjAI8WzKxKGHserAekxiEhDit7/h\na3WN0RTVs8fbOrt92/stmD9xonkkIJIQPnyOKUduIvApMLI8/SnhHC4kOCkZ\nQ952Y+ff/H83LHNFf8ufOrLD8qafoHyDffVptONoku0L8dPwdEouP9FYxn0J\nYCGytOCbtM0dt9CddBPx4AD6I1CVJEBQyUPhegQtFrOjuBV16FT2O/Iq0dQ1\npDus\r\n=I9W7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.0008c8a91.0_1590089559331_0.520351171513358","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/theme","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.541638fa2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59ce39fcb92822679c9177f77a57baa6ba17ae4f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.541638fa2.0.tgz","fileCount":23,"integrity":"sha512-o1CIYwG6WY7zKW4EpY5wEdyCx/vEhcMqefxZz9W6tQdiw/A205XiNLz3KNGUNIJun9iuQJWxdtJGg7fxSyLMAQ==","signatures":[{"sig":"MEQCIDJT60HNRvJk6uutVKD//HVZNOay8lEgYYJH20wpev4AAiBhJlox0B/TuC6lSNtCihxy8a7gwINm0V23/fpx8GhUzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextrYCRA9TVsSAnZWagAAyhQP/2B6cODCUY0ZwjBDfcb/\nd4/hThj3RY4cacJDT95SH0cgHD3t6FFmTdcIMPHihfbGOC78yVqjrdvo8Xsh\nAS5CPsbHFgxoEvnR3Oya5ZZBxkk3yvdwPS1SWmwREg4IAyza+VAmYZZE+EyF\nlDwER5tJTtVx6Es+xzHdctL+bDXkiidZqORGSTl4+CrBoIWd3F51tKModBMt\noE4PRYXO22PcKPGBwO3PuKNhwPjx8eqHyCAo2z5pnpBRuM+I1cwP7Zbqc81z\nhMiB6sHDF0f4Z6V3KyTMZrH02A3o4wIs4iKYskFMLJf37niKxvp84KlaIe6J\nu17OKB2com5L8pNOvViIhKDyeNqC6uQymqRwnZbar1Pnz8rl83567MOK95kS\nsIVZt885RZmT2Cgv9dlt62w2UI/tVt1XTtspHc/bUMqF1bHG3IA/qqmMGeVJ\nsegc7rPIB6Mzos8O+yhVufkoiKi2iCu8XziubV2PimKXUtCB08sugZwt65cf\nHIcM0zq/PsNc3AzKw5gbn0AIb/ZVvgLilnK4McqS51z0asT8kPTEGnaebFnU\nEQzlxp9ZPqyNhPvQjYTdWCbubrobOFyzYPn8M/igGAO0B3KjULaNlogE40ko\na8B7jj97xCWwFHTPp0GxVDrsUyWWyFgKJ2AABKOqZQwFudcFFxAz7QRTpABD\nJrmm\r\n=1t4h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.541638fa2.0_1590090455634_0.7439853956001439","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/theme","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.6167cd075.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a278fea841662bb4d43381dd9638ce1634c5853f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.6167cd075.0.tgz","fileCount":23,"integrity":"sha512-RQt3ZWfkvDrTknugTnm28UXZk4cmIhDo2qz811rpDJk7Cl5b9QvooiRe5e+VccVDz1PSpLawQY6JYSzXbaYfIQ==","signatures":[{"sig":"MEUCIQDO7b7+0YraqsM7mokglhgTiDYz/BIUwB4ByA+26PSKowIgA4yQjX6Lx7oGnOvFca5kabr0f3K/qL//I0zhi2kQxs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuKSCRA9TVsSAnZWagAA+7cP/2UMjUcgiMYfAnQzc05L\n6U7iQImsxMKv+3QOwXcl3z7OnnXrR735mgfJUvfJIF/4lOlh9rvDLSSP160Z\n18I/o67Ao55pM4vK3Aw/pvzefaPRESQhdtedGDMqUgzc0L4PuX20kcGmRXht\nmuJsHpJGdjTlGvXJcFDoWhdHzakl2AK3YEzpm+bWwmrcU/bC8JH8Yif129a1\n8Cmy4DmRO+cB0CUbK47StFnciGAVYsEBivcQQ5Lq2Wdi7YmhcWFK0zoWzrCl\nDx+9gpinyHrgWbVjAMR/SAv2CB6uykW7MX0dNC3gebptd0/QC9mz0ZNOpcSx\nlXrgUyrRCrrRBl6ndaly4BT1nBlgiHeq92NK4Z2VW/r6uU94IELJYdZo2VZQ\nHIykp+bWyMcLN6Idbsole9NxE3dwZmcuO0wj1lVLx8npj0sSzf6fIxaIo47P\nPquMmlGhQqFnFpsZ/1u2BTo9Vtg4APwvCMtfZaD+X92d6njdZxd+jQ94JYgL\nvN2+qDWc2f6CpwdooLrI9gKjUlJT2VAEqYQBldY5Cr/PKWkMiq1A/NV/4o/M\nqQyYgzbvsTGFT/4UgbFziUzz5Mr4UcVvJiM5dOKxGu4P0f2PQzVks9lvWuch\nzxfM+HUoXi8BiTCNQBzCTQm4Z2WVtQ8PTuBUsdj1AeFEZTaP7vBiLN84kkgW\nAWkx\r\n=dvDK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.6167cd075.0_1590092433552_0.7413537498100065","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/theme","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd9093d8ce106739487e9d9d313cb682ead38ce5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.863ac1b0f.0.tgz","fileCount":23,"integrity":"sha512-3NNdTP8vO2xoDD0St0pnTJLjyEkBpk85xD7HQBwt422Ws+8xMz+qEPhD7s/FEnb9ygMr64hp//Td0IWN1UH+mg==","signatures":[{"sig":"MEUCIHr5bL1KRfLPAkIKjoqcIAuBaYBifuJ6OK+K0hjlJvJPAiEA1CqklrD+/cdy4WIJYmhZoXzmHdw7rlkAFGcAVg0HDHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuugCRA9TVsSAnZWagAAzcAP/iBp1SRO6WaaFh/nrMaA\n7jfq4DrOtwMx35KDuMC/xSc8wnnSETsmoTqt+QyuQQJ94j903nHRekiAPl2E\n/RHTrYgu/Rsge8NlsFjlPXsNxlbWzr7MeBr5VG4IfzcFgp5Rsb7lev9VNGtT\nEk8Z5dGH0gXTjqknFvSgrmPcyft9EQfMmS9J/92vDrAXDHa7WNv1biSOLRiH\n3hEEizVhzaPuoorp2UN2PpbBqWtFq0k8NV2jfD1ZKvZXH9LFno2IdVQY4Tsa\nT/OUI4oq519FNZI6Ii1RBW50J/qBCHlbaBarMF46c5GCaecoI5O+EFvdn0a7\naUx1Bo+VEJDni19gZyvkDrdPKDuXLoWDLs9WVMMvjWnN0Yct70a/7Oktlt+S\nEjomVjS58w9j19rqVOtApJ7dlwWy3pXQPqB4JTn7pe11uFBlVIBASDWSzbvd\nYaLsl29DD76Ww0THxkiLHO4poHakdolUwZlR5pFJr6Fz1FkqSvB0L2tlkUSo\nD0SVnhMCZsJVM33ukf93R6PGilKe8s8foiDqcirr0zf6rhMCbHvhcuwKNNUP\nh/v0CtD3ZvEUPP3JNM35LEM+AnjQERF+b4tBfnTtBVa+BJK92zp9xGopRNHc\nK+veleVzA2C7UWOyK/ETCgMRXTsmc6YRZAOkM2R0qh62TLNSmV4b+gbCPl84\n06Jq\r\n=ELzl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.863ac1b0f.0_1590094752530_0.8794256795219035","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/theme","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65ca01dda61428c5fd566daa0f24f24e83f5c101","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.d30a214ac.0.tgz","fileCount":23,"integrity":"sha512-vclwKkfLTe+TJKTfuMBvNuR0UTA0dG1yW/i63xMA2CRs0/AEE6oNXBf0D+y12yvyWTXpuvW2HhsiozRhucQVcQ==","signatures":[{"sig":"MEYCIQCk5Aui0DQC42T5HQ1vXfdXggj4BrZmoY19ZDpYkdNNiAIhAM/nc2w4LkVtGkjirPxEfE7BmcOD7oQZ4O1ohUOtoVwq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuybCRA9TVsSAnZWagAAv50P/0AWlfsZ1UlDIL8bylPM\n/+vsrycppQLLoNjW4yjPy9Ex1QiCALlcxqSiHmRv0Vd02SabNxURnr00DZXL\nEU35ZwS4zjLQPyfQbAzOiAJi66MJcCR/8VqIs+8yxFyUFaPwFrUaO/QVpFoR\nPgaT4oxzq61cxscMaJsV/kJm4tUVKvKjOP7hFWol+ehF5RjfZLgio3/ALAf+\necdYDEj9hqew46wy2Hshslrybw+12bTqONsxRo79BpdqGqmN9Bqtb+X1f8vc\nwTxr9IyJGiGqb05dVVZiaC2aeS5Zc3yyvFbvq2/iiO0LLjdE2jTyA13GJ/m5\nfZYPQBfF/GcY8HwlAngwCe9B5EPrHIN639kNIR37FVc7kPeI5iXlyAYjEZHe\nD182YijRt267lBWJCyTvKHnWb1+uhCTFqkqNHhyu3Ypb8nISoOuVRpVjmS2B\nEOqLlZfckAEMCoBy6RRGHWSGKxChldkJA9rEeT9zUAFpgBDG6bt8WCKTTJxL\nKKmDJ4IOlWti//B/b9tr+oke6U+sKvqWf8AwNjIltRgnnJVRMX9Er7DW+M2n\nEFE6qOfrHF5XQyNnjeQ9Ckv7RgSPB3Vjfa7me3PBQDB0Sa3o0NB0GB0QLJsw\nRajHn2qoyoTiWOUGFJkn4ImHfoAHihKb5SqYK1Et0XIpl75kixAhzY6cvI+G\niDfo\r\n=Spfr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.d30a214ac.0_1590095003405_0.8741338258349332","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/theme","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9537efe5780b717f956a2bc436cf83b68412199d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.62abbc8d7.0.tgz","fileCount":23,"integrity":"sha512-bq60SlRXlP0cL1wOoQ0lZRlBPyv/S2p447+o3gZUz/6gArh+wLGTTMxVB94b0bCbd2JuKbnK0T3OcfAFlZ/hKA==","signatures":[{"sig":"MEYCIQDxbSvmgzU1KhPGB8/ZCpg4cDClPzhWgZvj9kT2rdNwbgIhAPfdpgkbVj/YQrFZ9sLgWqn+9rQ5lpfiBzfYR7ghsNXN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvJsCRA9TVsSAnZWagAA5L0P/AgzXICmlg5w4eYBIITx\nVTLgZkkPeZf2zz1iIGk39vlet4Bq96GDXOpihfoac+/39e707rfZAL9hWJ9B\nfRYUycTbw32XcU3znYBtNDoJViFQPtsHMk8Fwr/aCjGyWtnS7YKTI9vxU+CX\nIADbZVDMrOCWh77/QzKmCVltMmeQFyxdwB1URJEswKF5R/lP0oI7vetljTXK\n22k+oLX7tbTzTBqOCVZsurbLSwEOyzzwWKn0rkrRUc9Kdh7z+AZ+d36Sy6JJ\nNIPt+gvbJPQbf0lCgWAIyLxZ1fQ7YaJy4Mj/xwDJ/I3sTytXO/6saDAZjXJR\nPVjB/eFzKKkcTRcB+GFaFldZarvg3t7Hf7zMW/UK/V2RAAbP8rKEleZ/WCI1\nrSjbgIfILb4Qq8uh+Yf5pjUkGNokbF5/YuywbdayRc3Ri+f46F6jRk4ZkI/e\ngTQVHL9ef/YWqkbX2MrKPET2+bLfa7bokHukIQUXDZLpq7uUxk40K99ldql5\nNCAW1lSRgMrdK1jku+jAVvJldG4DYh5OiKBcDHeYI0XKG6HFAX/R1v72M+aU\n+tx7L0RW8wOYbIRz3fnBjbo4h0W2FW60NifeaAZnV/23bXiIqKMPFeJszHc8\njP6Dhds1bZdbQz/1Dq36E/anPeTG6whteHLH43X8jQuZrACDLZuj7uI4PVmc\n8k2/\r\n=YmSN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.62abbc8d7.0_1590096491695_0.19215386787830968","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/theme","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd70b7c40dcd141ed9bcb66c1b57b18d52e13d57","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.49bf31d5c.0.tgz","fileCount":23,"integrity":"sha512-PNeTmqoNf+oM9jepjbNeXrD3XVhW3fFxWQQ2CdZx6eiZ4uXXhsMmUUU6uASYucOpi6jWw4qxYrcDWRqXJuQCnQ==","signatures":[{"sig":"MEYCIQDkwmHtgNW/WDARSxLDjPrxc6h3s/BgSrLy08XLXtaGAAIhAN6713WUux5/PqTkisNOpFBP1F6LPrQk2TfN2XmAZS/f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvMzCRA9TVsSAnZWagAA9AYQAJfhjI7kVjsubZW8bwJ8\ndK/ZUdyVn793nkQryWesJAdWduAHfZHqe1fUpzm/BPBNR0SmRnhp6ovMemXh\n3Lpa0o4bru5tIPUwHfdTRwzrCjELI527nPRaSFyrjiLO+EK0aHTAiO7U+Ekv\n2+Hbe6d4g6pcJJIG/IyiLlGBay0HfndoCnY7VsEDEsNZ3Wv1LcGY/uSF+3JF\nENXzbL0Sk3MpO96XpUjn+hb2+QKVJDoxl8pxPjDm+Ey+Nmu2dUkWQ4eGYE3q\nQK1FjIBPylXvpqAKobrXj2wBw+q6X9DpxDy1ExwFvgVrAmTb9kZHC+WV4JdM\nOzYk1oe29StoqML7WGnk9iVjoMvkn5dO0TwGIwJNqfqVWoz8z6xBiFPy7XyQ\nDmmuRwSfZweMjj06YiAK695/UHeHmLpWuxRHid2MmAZHEC/NGb2ucno2kShV\ncxpUkEMfRI6N6ZEbc3/7yP102KAaGiueWOZZm+glrkRq36f3pQ8KDwLNoV6F\nZSZSkxhUCsMXg31iEjlvX48tBiti5K64llTqkS2uvptD8SxghDRncma6j5fq\nSvUOXPKybaz85GUhmTdlwlI0U1M8l/Bix8aCSPYa2qqtzQeP/uwAnNpXv6wI\n0tNTLGjXNujHC++DNgC2HP59rSXfXCCZYMSOTm6XLiwoZgMouimjq5s/Di7i\nxigd\r\n=4D9I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.49bf31d5c.0_1590096691197_0.06287604613680498","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/theme","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5026f903edbaeaf886656f6563cd46664ca0b5f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.8e17857d0.0.tgz","fileCount":23,"integrity":"sha512-ROhVczSSWdWJ0+IM1Zl0EMDtdqgkUgOxNNTdrtHYZMBn7TgB+kSAUVcNp88JO+1KMjAEfsRzPSL1Wx06lz3rDw==","signatures":[{"sig":"MEQCIBsm2yt42ORAzT41RQ1rk1Hjzf+f+BWi6PBEyDnQhAMEAiA/GVYSjbVfLHAdaj1NhxFxZGU2w2G3Kxs1bcORPbpL0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNpCRA9TVsSAnZWagAAd7kP/RlW7ogpXyjMK+JJ+mPa\nvAzsggXeAJ5c1NKn5sSOhM6l/h9mQb2MWsJpGB63wS2bTo5vb/d6okQGPvAN\nAN7EO+WTIa/clItV/NuSSJZ0hAfSypkexF+2kDKAdJd/Xm+5WCZ/R63dK8/8\nWu3fSdtkuAtCtH1orkirI2T8/OQI3cXLowTc4ZeQJd0F4NEFa2At5AISfjeD\nzGgy3OY7LS8IrDO0pZgLDZG4tikYAlnPpkEAjPFiYdB+vHMaY1d8INu9yq8Z\nI4Eh0TnRpJBJ1VEZ5C4u/AWD1Gunij33xHLwPqad/WckkekyDhiIXavKlB9o\nugGrzImtreCOK3hjgkh5m9W/1l0q8EWb3fj5oXwnox0YRUlmTM8sIMeoiJes\nV3fcTHn7CCQvzu1NxI3jnXa06WhZstLZVYXUR2r8U54fJX7O3lL7aVTcs8u0\nEuj40ew0X3ZLgeFmu422YPy3l2Bt8xzUtA4CeyCe8HsQJYw1w0GMvINrWbLN\nXWUbpXi6XnLku8EDVbb+Stv18C8YJaPtuNk/3GJoVK2APKX1LsA9YAoGK5pG\no9rl1VZkjAiXIkJFMCqgBL5dUugrOZxZvOxoV9WjD08S9jLUE7bAF6uXlUxg\nliZkgx7w4bF/e4FYEAOC4jTyzwMWbwv9uqJ/CNeUYhL+daFnkngoFUEB4UOJ\nksv/\r\n=eUe6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.8e17857d0.0_1590096744738_0.9772754994525741","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/theme","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.c113fc942.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f445fa9e8605242c4d0f195ed6fbcf1e44fb3c24","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.c113fc942.0.tgz","fileCount":23,"integrity":"sha512-HykpJSFaXsyDgxvk9CIy6TqOniN3mdjxuBfz7bAPMqGlYmZWoTtol0vyEwVyy80GJckSf9sB9SLk9qmhnrnTaA==","signatures":[{"sig":"MEYCIQDj14anaykrMHepzsVvQ+1GSLB+p0sTQwG0zOBKkyERRQIhAKTXVe6uSmLjewhoyv1ORCs/7YQNmHTzi22BQOARyS8t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwSkCRA9TVsSAnZWagAAd8kQAKUXhFhpEaomDpbcv2oL\nZn37I9uISAmdt9OleSk5O8fRxPLmeG/yRj/nIIxs4f51pDWo3SAE2mCly48Q\nNT66njkNyNbz6PPhK/G6d8FcrxmY7e9exCvt/QQvFRhFAuR5dM+7+hIqqENA\n8v+sogFDRdVx5Ii3Rk+Cg0UdZIgqlUSoQuKWRKle7tZ7eRwd9bTIpnWW7/5O\np225XnMynpi6JBLWryqZImxeLRe9NALZgpj9N0PU9BINxhI5TbeH8Nu6oyWB\nb2BJRPytgHcFoZ5T3hJONGzb9CuUpvwgPlwADDl2spEn52+kS3zKmstspmtI\nqroiJRnFRPtcGQJFBlCXdIp1733GuRh6hvOaTPokkHZdfBRA3mlTm7l1jvvg\n5iIZCnve2zKBoySjt1Py/HpCcs/GmmhWcZZXTlY5CXIm5DlWzIqpewjJzy2d\n/ebe2CucNNNrFgQ4uXzcUPTLgFovsxGFcOUqS8NcrqZSa+VJmT2flqf0qaVy\nrwavbaG1S6Vedv/FwZeOgw+lLqDcZ19fFs8YOJFTZFNUYwxQxqxt18+eb7TL\nx4L7PHngWA+Vfd0w+3H0jPnuEB6NrLQqS3+MEz3Ejw2IdzazpB0AFRApoyLK\nAzp1vJiPdRq0rJkXAa19q5Zol6pi1N9WbFjnRIdqfY9Q2t5LWkQEXkyd0h5A\nJQ/z\r\n=weL/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.c113fc942.0_1590101155735_0.9010894444026358","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/theme","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.912d9021d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b822b70489aea5d1949821fb3a471da5733926f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.912d9021d.0.tgz","fileCount":23,"integrity":"sha512-Q7bKaEhYu6AaMZhMCIz4/vKJjYgcQ4l4kG2AVzc/YELNqCzh0K7aT7gF+alQ6eOxcd4q5psDOn4g7h3YwLYcfw==","signatures":[{"sig":"MEUCIFmpbeyKR9WtDL/n/KHeCNr7ivdilbB+ZYim6Be5LzmtAiEA0C3ctcDW5QXwrmXy9bk6kPzHncaJ2CAJldP55TPbYos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWOiCRA9TVsSAnZWagAAVFIP/Rr6OLi/WDVtTWCrhE+O\nrHnNATqHyVkxhI9eCFV4LAfOTpp2cht+pgWVlOyDcO+LVjPI7ShG6J2GFCVL\n6TWmOke0g+bfpEpeiB0rAnNrBtYRclI3DYll577ar9qlOLHtg/UFovmX38EA\n5AMki+JwgWyHyIwmdjA37MggG2IjgHU+80jtuV2N10m3KnUyBhu8jvE2xoaP\nYFNjhMJEtDr0O3qqIXObxqYp70/0qrM/HY7HEUiFC/Gdni+ZvOIOREm1sPHO\n/+YlZTTJ50JlFBd+gDJ3QKuhlLRe0s05ut7BnO8zZwUab7IbEurquE9JtYFt\nRQPDtsd2dOWdyjEiQ5yxQYkC4AeDFYmAojzQgBLBfr/Aoa6e2FV8ysQSQ7ik\nnOU2tV0TfPwJtpQdgn0Imdrsxztozi/jWyzeRImpjq705zR4yYlVUJ0AnDe+\ncHi8SYJ1D/GpCkvz/bFzm2DhY86ouCp1LzbYJA1Ftm9hdxuBJQreRPaaiAD/\nDGKobVo7z1u4RifbQFEitk0z9bDbZ7qfc+lBacrYYsaqx9/rBNWkkk3oG3U8\nuk1sGv19Bk03k9rZ+aEh3nwwQbossZf5S52sbxcbwOa9Yg0Ls+Rfbqn1egOA\n1OodmSOuJfuZKpt6zH/XwL3e+QIyex84RiIANT69K09OaxwtjUF9d9jkbCFM\nZVpj\r\n=D5DO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.912d9021d.0_1590518689884_0.819571604781079","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/theme","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.68a2af131.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48c3a643444f7a06384091d830974f5c832c4490","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.68a2af131.0.tgz","fileCount":23,"integrity":"sha512-3prF+9BphYNNytIeqCySu023TXH9P50aGZB7g4UHWr9Po7nxoOcZAQH8N5yzxL9HCijPT4em8Ud9ODdWKJGUZg==","signatures":[{"sig":"MEUCIEHovmZlwHjzPlQo8MvJSqB2JJSEyVros7rA8tjmoTFVAiEAkNu7F+ABaELTQDCqCz5ARWkIDTkfb89BKepLWqm40s0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWjSCRA9TVsSAnZWagAA1c4P/3touWe6yg5i6Wa3RvGZ\nqQtaid5L0FOLhpizM9FsG6Xs/OjgP4auW40jOtQWKtxOz80FdADWVBfSu/8c\nZ8EU5ixb87BvrTd7IRvLOZqga8Jw96kcIUtdeZ/71GrYiSzzXkEEOZAqwTDS\nk9Si75IG+J0SPjsbIiTZpQiKZV2C4qowqHQgPOJNsFZWwyWVuvwRRoTk3mKh\nArxlb3Dt1opyigOz7jpxet3PiYmOa/XymRH8dBMCq5+RO/ZZfVJquQr/evvI\nOUZnFohP8/+g+Jp/JpE/hjNvt8buaLyTh4iIFljOv7UOiaftyX17N884f5hg\nY/LFIPhVXqZEd6Xv/7WVLRqeo5mDlb6+g0SQZeL+FvdA2j/sBrg4PXC5GIJm\n/5N5rxQFP4OkG4uzQgzQXeGEiS+MZ52ZatMqJBYtkUuIHieaIiX4dw7SeAVr\nu08/xxyPdR7le9443VL3mrb8kUvpvUB6Y/jSZgmQPdHSNEy3ICvJ14mFod5F\n5wqII+C45wTJvnujJpQX/XypVbv6BV4aGMAwfBqDpipgW61rPxDj+ukStT8a\nuYJK/kq8L8kICphelvpGmQIyoXlrbCNpnhjcYIsCO3cYUYYihfbBPiGNxia4\nH+oGcb55wbwQ/qCeKIIWE4EIJqXw8QSOrr3sKhe7wedY9mHukLw8d3wxQ7FT\nW5f6\r\n=PS6b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.68a2af131.0_1590520015411_0.15569939897930807","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/theme","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.01de07011.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aa14514bfce668936b719e45888ac85196fdcfe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.01de07011.0.tgz","fileCount":23,"integrity":"sha512-XGIIj73rG3I/k5M2KmT5uPW9PMRJe0d5Awc5IbnFaAWH8MijIqYz0tJ9fNejMQgOqa2dLCe/jb4cJzauZwhQww==","signatures":[{"sig":"MEUCIEL1mCqOT5ICjfROyudlzySbR9XVru4/F9/9u5C4zdYBAiEAunLCtKFa1Es+zjuvV0/7esPP6labTQvBxFQeoq/iBj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXNrCRA9TVsSAnZWagAAo64P/3rcyfJqiPWsEdKTy0BL\nIIhkiIteqBAUVApZHR3X3y3jU3tnk6WA3X4SayMu2DIbM8GtiAT38O9QZlnJ\n3KYIq7nkEH+RqSmwxyC35O9DSCOHtdIoORile3I+ltWAQr6i9U4DiLofRNoZ\nwlWMiRF4JVkuzJ695r9CGiGGRLJfq4qf4xFEHYu51R/39N8C0o1LevJ1tuAh\nsxL1Z3hBlHSOubFgPrqHmCiso6TtMcM4n/0O2807mrtbggSbJ1JX7HqhyNPu\nMxzJMbfmZw93xkknCpOxrD0d/gA0Ts5J3pHKt71+uFThJHOb2xjjzTwQ3JxF\n31NBXU1wxN9KWMe18uJfVFk+e/5juubWsLeNuN0WCwz1a+yexxui+5xgzi2e\nmPjy4GPfOzi/tk9RUvNeW7iJcxTQSZ5KnxkObongIsHWwZCgZCc7/iLLCYg/\noOzQKkptibqE07ROH2aT0SZ7MVopR+j2DMEAwW86peBCYc/G9yJrktCILdNJ\n4IEjg1IDPfSznBtwBBy21YmXbee+vjKMrqYVj0FhpBVa/5xTmGmBNma3Y/Qk\ncu4xQ4YARI+0CYb3QWfSMyvoKbiQd/3C80gHy/WC6Mg8C6OsUTFacSjbswiN\naalwFVkaq/I0fmQPw6tNb43c18jsZ4NHHBqatiBq/yo/O5GykGVx0aK3H3n1\nEw3G\r\n=KK1o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.01de07011.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.01de07011.0_1590522730612_0.463710272330653","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/theme","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb6b7792a2f6ba83cd30ebfc4c6355fb2a8849e3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.51d4535fe.0.tgz","fileCount":23,"integrity":"sha512-nsrbO64Q7ZdE2EsxXYLpB23gSoMX0GK6/v+ELsAXEa7HeBTUupLKGpCO3p6PHjl4jjVV3smWXODHMXY7DorGoQ==","signatures":[{"sig":"MEYCIQD9ww+ZPJvJ/E7IKszOQ34xfTiFGbWHyRlWTq6mg+rcowIhAMwN9nSS7nB0j+yS6zqBOeOwO4B9ws1ybUfp1HWZAWET","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYtcCRA9TVsSAnZWagAAyxkP/RR4c4QppyetiFwLEGl7\nQY45uwg5cBfRhPqaKjCpKBJqaezKQ6xFmDoJ1hQYDE4kSKEtRJPrJwRbwOaK\nE9xjHYU+SholH1kGclCyNxebeUqwB4RbIjCb0bkNwZ0YEmGTSOQQZn3h98FI\nmEPRVwKdYDbh3rwl8Dm2stfSiDHs1m1RPw/U2YX84hwJ0CRx5VSzhtAk5x9X\nduM3Nbi+aHXAp0aK9R1m4iv3FEIWdl1sUx8WV8/apB9eYNpI9MuV8hyXKYsJ\nB5tsowMPJlDR09XN+rPRUTg4eMc9Jl1BE6SY414Shr94QEPksFp4Yy2r9udZ\nYT7YW7PbORFH4fbN2WnsJswt+DkUdU+kPLDh3LNIpBuFQtvVs2f/RoKCHhpp\nJpcUnXzbso7TQvnYHpY6odPOJ6EnR1FkBW80LC4GU7CF1IjCwANRhCMOcWhP\nrjmkaW4Mt0TnO+sb7ddHwkgDlpZUoOTV4bRdOKYmJGgMKePymZ2wnXHEinBT\nRkiDYGBEiuJmql39sCCnJJ7UokA6YE0UTL1y7vx4VftutvXUVilhRfBFss2+\noAaIefhqN6Pmf9gclY+BkIHT4q7dA5vW1hC8ziG3LF5DVNN2rAVVRSvVMgHH\n3DEaI6ffrihikqU1c33T2ZcS0VZTpnwnLK/F91PVHEuhxM5IWd4VCthdeJsy\nods8\r\n=PmKJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.51d4535fe.0_1590528859772_0.7424460263660893","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/theme","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62ad798d093556daabc1831e41fd22de0bda36a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.b86d826b7.0.tgz","fileCount":23,"integrity":"sha512-OVuDiWq0aNusofIiUevDv+jJb3BcsIwyHvmU/UN0AEv4U8GaPjTJw1/Fg51HsvZv51hdwi+HVvFg/kPiJcl6Pw==","signatures":[{"sig":"MEQCIEhdKyYEs3fA//+UHMJ5zV2xh3VEsUlI+Rb2SbAF5M2nAiBMyB2Lsj8VqtjzA375DkVXzN849GyEnKDg4c2JAZ2lGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZR1CRA9TVsSAnZWagAAEpQP/1HHvfh0Fp8Z3rIPpBRj\nLHaFNwxbDmHrhJuNANzTXwkNwKRYJF//pQy+49bqBTf68jptfv22TMVUC45c\nR7eEDYjfOkNvl5f81PR5EIFdjn+2ggNyZCzEmdUvzLmVMVrS/Fzq6ByDqp6X\nMus175ToYLtIesrEbH4JvTA3O+Or3Cvwe/Gzu5v4bysY2BPTy7oga/78rpMc\nIhcwpAnhNOYXPlQbsq7ipLnrif6vn1DQLcqNHpCrXhs+Hla3wANH/AHotRR4\nIefWa6nJ69BVBGVLkLSbO61P5eRECNsi+iytrKXO70Rg+biymRAmRg5j0ues\ngfd7F5nvRqENV3XHthwKer3gWF8ScifhBnlBRzLr3q8V8FEaoUIgEwKL3U1/\nPS0/9XN3+Unef6Q3JTCWioHnmfYq0fwEKoxj8lcT+JyxJ9vwV2WSIj1SRdXq\nHrnUJc9EWWZqflISWB2lShmda4FOhzczIfPdds8l1WrebJ18OfIKhiSfzjCJ\nXFYFe8HlfKtz2NuG1AphrYUfE6XfuJRik+9V+26uLUi+oadv8lPw/yBxPveH\nuqRVYaFJLqBVYx+gkGM7NKrDRumciZYMs423CzufVoRQ52YgHGM9+EDzUKOL\nLJ+Wa6ANA9xmc+K41uIhNZqhwI6c78HAz07753Qnp2E7wpDCimGvOEcLyboy\nfoDc\r\n=FnjB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.b86d826b7.0_1590531189208_0.8671016010213184","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/theme","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"673656801317be84cf6fba9689874492192ff116","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.d91794c7e.0.tgz","fileCount":23,"integrity":"sha512-d6Yhc60Xh3XaO6lO483/tBRrd8yFX81aQn78MuW/DmP1JJRZ3evxv3G6b1GxoeT8XY/q98bTEpLlQTSBZephYA==","signatures":[{"sig":"MEUCIQDSau4JIj5lsumHK6kZ/b8UkGMB92hIrWFV+FfmFO47HQIgXIpAFyRLEIdZEFLSdHejglTzYApxCC6GogBP1zXbCSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaw1CRA9TVsSAnZWagAAQqoP/jBgwN+5Npfibkv7W1yQ\nwIIlYqxX64kLbnuKsjdcKESfAYvmH5CaIfCsb+5ojtjuFe3MMEvIVwPwSBIq\nUidz/JszAGbDZz8/yYVTJU4eSk24LT7u0ILrjgxz3XVb/wZyrkcySqjfwLrK\nE4DHojdpBi7WA0mN9hX5jznCR9bqd4DQUG0u6xqzC3ITzl2oCb3S7Xz3YS/u\nQCguFRQMd4LXOEb9iUxG7FcX6AnllD+VXcBV/19aOdYSrxXc0YNgDE/zqhcn\n15C23fFCwZQcs4lNwXuTq2vhHsO0czg5ebrOvRXJQjfR3rQKwEqi7B7qjKaX\nIItec9duf8zfetC9gVU+AYA20rKSbtVsGRKxWtXRh4KhrLk28Url/z9eX+PQ\n1BP4WQDt3uWJ5pF1KU3AMVce/ZJeMtcwaI61VDwVENqWCbZQ4ACFhcAJN2Nv\nLJUzyH/OLThIB5NVOg7R2BwR1mm6+LrEMVycrFv0JlhOocs+Y1LBDkW39iXF\nDUQHXLNnh1HNyFkjzv8eyKjZeD6rWL2aqHzlMeR6c/MWUctQMtyxIWvN1B43\nS0viMM7eUJCv8J+pv6eZ5YwP+mXqzIPa/fdZHtBkCP53WmDtw34THxNokbGO\nRaiRFi+3QVVcOsOyATKRl41lhepxMhbWOjtNHYEVbdUK/kLiyBST9VB4GniP\nRXsN\r\n=yDEU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.d91794c7e.0_1590537268972_0.7582012758002905","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/theme","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0af1615b85e719ef431bbe4fd259b542779c65b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.8c6d7e076.0.tgz","fileCount":23,"integrity":"sha512-+/84OSSS39CHCyAVTh0XKuQt30/blrg5rw4y0PU1d6tpdO3+Z9/SSTF0FRwwAhjUSi6Z+CeWrU3axZ8fKEZMZA==","signatures":[{"sig":"MEQCIFlqqtrRXWhxQPa/GnIj4aQY0hU2PGRX5Yfe8EmGT1OzAiAqoAddwI0ZdLzsQeKBrV6vcJZzlUqdxtiBNyv5zbcqiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrhrCRA9TVsSAnZWagAA6FEP/37OQ/9k79SU0FWjBLHB\nYi3pqOXKKUaAlBg1jy3+GgXOjjFUnMNc21fguvTHqUNmSsJEMhtc+VB1RyYU\nkq04Jldo0CJrIpxj1zj+4XPZ85V1CMubh2fbHY9Zh8haePuCMb4Lh5MasiDa\ndby0BkjlwuUYozyLAwGYQ6C/wiZ72orXUE8EJF830zJYTXXx8na+K5nTuERu\nL7wHVAyq7BRdrQg/1dEoQ2q8SY2rbz52hqcbJ2TfZRYRa8eTgD71SjA9v8As\nvCf/qSbYVNB0MENcTQ0CCwhlOYCYPyiCcn2sBfAFg2CmWRyO1NjSi47YVTU5\n2GXkKASTMoBj4tXLzQTrJ5uuVsf5HLzN4zoAWvX55/ZNeFL6p7b6JJ5RH8aI\na2hQyoILkwWFWASVrKLxdA+BrNKNOdIyfePPlIp9161nOI/hR8UXzDG+bOW5\nsQnPKfoWhboNzJRocqmuAH7jA+7atJlRoKhVt3TBZB10/oDBICJiHYTjwxXS\nZ/h9JXgVOguFfUSYO73raCnXs6cU1K9NtkI225L3OUTI2eY0O84pVYKfrx5E\nUJLg67WJWoFfGPmUUpn27otBXU/FpSOltuCOeKkY8lt9KoISK1scH6hwUqFm\nToIUoKIsVg/pvrXfuyfMkMfJYV54jG36fTQ4U8GzveopSC6lu6EgsDB5JMBJ\nbCVO\r\n=b3IY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.8c6d7e076.0_1590605931418_0.8159305039755114","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/theme","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d2a9599f8026d9c5d18bba9f868be1b07d7a004","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.5b5f62f93.0.tgz","fileCount":23,"integrity":"sha512-EIX+BGQhJ1R8h64tg82ALLU9VICYE2q/XqwLh8eAM7kbkgzL5PCJbw35dqmLxeptc78WvHeqjAwFT0jYa1mG1A==","signatures":[{"sig":"MEUCIBJmWKLOa1mm8lMV/WANz50vHZQo69DzB0NthnlEX69KAiEAza9vySh3RgWmeDrlPw2ciztp7jrc2sYMu+FHiu8uHxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrxoCRA9TVsSAnZWagAA4HEQAIlPT8ZiavbREIRF5JDu\nc42Y4PhhwENo71AIUnVa4n6/2jMZSFp/DSCFfZjELslrGKD+1lLPxhl1nBeK\n5gEE27TeQ6mmIKs3Ie+OSJ91bC6ceLCGHt0GMUilj5Ol8u05XumsmKoaa/3W\nnznLP6FamfsVJiLsnvKT7SmhRyts2sjIQIiwxW5SEZK7dN7MUsAJ/bl1jQ4y\nO80hS5eb+eulYE94cEpPnph25axmPvJchtsdkkjB9MkKglp0wmovrU92WFpT\naJbRyZzjapHOFK0XWQNSAtglzy7BqduB5ueHSOFQjJ1kQQqVgIazACFh45/z\nuiQonpef5ZLP5BbDXG8C1OmbRrgGnk/g4HwhHJW22CYdjbbWNQAJ89MJWvy9\nAV3Q38pZAJ+tpCugx+MQ+Zf6NgEWyhah2JY0b/8jw8CvP/wUMIJhe9ioUyZd\nQFzVTGmpkWN1rFiJ/Fj8MlPkxEkBU63VDWeQu5deAcVwHktNTdUKnh9uloJC\nkRg9/OivQLb6SbqWFoqiciZL97sp23CG9qkbwoozVMQh6ivRr+KF2D5ptzI5\nhgWoNicZkQJfIIdZat7U+SkwCrnBWG0qB2Ia51obIhyGb7jD2i65KRFSHEp3\n18ncyTNshqMCU/HJApx047fGPlpsVL5fORMqgvvGMbSN6a52NulY9jSGpYYE\nLG40\r\n=TfID\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.5b5f62f93.0_1590606951658_0.49170334482792555","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/theme","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f8caeeb23a05c701f9039898d7c593938b4b8af","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.d9972abb1.0.tgz","fileCount":23,"integrity":"sha512-U2xx2SAvdO4KYghAdPTTo/VhBaDE9lJkIhIR/ERxpqWInvcIZxNOXq5MuIDiSl/nI/yi4SRLr76R/uE9kfjYnA==","signatures":[{"sig":"MEUCIQCrknLU0ji3VmfksOytW0n8qpf0/tdF7PvarJTM3YFisAIgPr0XntIxEEJVUCsC4umwTkBAgOlbixW7Rj09tts2Wx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsuECRA9TVsSAnZWagAAVCMP/15yum0LieMMsNIHPu4U\ncP4n3cs1Hydm706wHqcuRImVUuQT2vZpTjWoAEfju8/KWeFF2wIhrsV5RriB\ns99qRZixDFM+k5h0evDapv8bcFq3uC1N5lYVfMu+ix5sWLr3fRt44H974e5P\nfBqjWxGIknl3vUiu9MuVsKNaKeuNuZgDhaIvwtpRUNmMUecw4aQg0velmjaD\n6dmi1xPqd9W/KtVk6Up81u4PP56udOiP+rBHafETzGPUrSmeyC+wtCvapHmE\nZHqhuDA5dhUSepvzX0hfwu8IlbZBqLF4Sl4NrUKayCxmk6MCLhy7Ll/ugTDV\ndzDUPH+rIhpMfSUxgELdMp+dhfjMoamQ+S4twSA8RUYxKDO3QszcrgmXej3b\n45RGI45yvygpb/y2kx5bG8zbXTypMXjp9zC0+ai/uw86BzWwPv7elGqgDPGf\nEFGEfMmrGG+4ghQSshvExOz9nstBVIVpN0YivGliPBh+IvC/rziGAtErPDaf\nRXI2gCeb10MPcj3v6bLQoYCi76giscWsD1j3GTpzATDssviqjMakle+6vONk\nAs1FGI4MSOiF7io4mpM/P1eY2k2vBXIeH6+rje4RM2PIS8g7PF4IWDclXqJn\nB20KuA2FSys29g0TsNEhsLHvoE2cHRMRxSHlnyFSbc9i1tfbP3aFdJBl6+ZM\nv6v3\r\n=jJHk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.d9972abb1.0_1590610819980_0.8360309420840775","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/theme","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09ee1f94698b02bab2b9c3f488f9f7bf6e682dea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.6556eda2b.0.tgz","fileCount":23,"integrity":"sha512-U6ArE2OkARiUQ9DbBgL15bO3HFf8RWJIF32OAscP+6zdfMHb8cgdQXG5v+PtYQEqBwjcRoyR2Cz2U7JZrcD7aA==","signatures":[{"sig":"MEUCIEV33/cPw/InGvROOmPch9GyEQJ3jeWQfjH2EzD5CYAtAiEAzryre/F5JxpdptgUYtNEvkYmc3hmjuo4iUpqSVOVEPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs2qCRA9TVsSAnZWagAA32sP/1EKK1+6qtzwcpFYtnWm\nwFPg3k4637VV4VQv6yKJjhDfZ58O+eb6bTjdX9kqPxGnochgJX4PvNDC+vhs\naWbsliNW8bKk/V2pw0Xa/7IXnUL33BNqz1dIHouHpEeNSkeUEJhF7dWOepby\nY32MYejaCAdxuCSWzry5g0GUU7K9nYUqyN+pFPbsWasCygd50tasxmfaGlUr\n99g2xtvHLBaNut/GaDn/lxi5vgx1XeHvX1giMw5+8ZNjNRN0WqIKxXAzNv9V\niMM5+x1CDc3qbRVJL1RLc/mIcuRw1pM4wanF8NVqDm9XSOcjbWGNB77Fo2D2\nLBH2aBnqCNxh6SRmjbyRDHf8OJNa57gxIKLqFVWcif6I2ZVqdsaleWqyIR34\n32B4Mc1Y0vuupDlReQ2HVAzbzdMDzRv36Ihsi6Oqf5/B+hIg91IHDrChsMoI\nS/Y1c70BcPyAFGqj9eJS0JulrwSqqsiS8YMRwU+AU8ESez2MmPeup/IVx1mT\n22RN0J/s+DykOshX4y13ImlYoUhhE4x6KfNSkgC9fITKCFAGwGrx4Pg6rWIi\nbqy1GcBJeVY26Bmh/Rir/fh1rv6NqvF5W+k+mST3weCEqg1fEmzYL5Xs7sv3\nZtoWLfPoN+jcWQKzcc/qJlUhSzIxI82BViOJU2+XZs+3qXHeILRqlM6zyrS/\nOQxA\r\n=kgUI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.6556eda2b.0_1590611370273_0.6993837400611602","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/theme","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.32aa23641.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca7685158295930e99d6c23619701036c19d3519","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.32aa23641.0.tgz","fileCount":23,"integrity":"sha512-Wx3fVgbveQMXGSA4ML+JXnfvenmgEY99LXDgx/k5HiNr+sOeOxzJ67W26zLSzZC5yPzHb4I7GCL9XMzGHUfXtQ==","signatures":[{"sig":"MEYCIQDlIJzRog55xDloNQixvBxFbHaAj5svK3Nni83oE7/GvAIhAOqsvxwN2syFwD5oB6m1f2ngEUEa26TSEFIqTrtoWEV9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt2oCRA9TVsSAnZWagAAJCIQAKUqwjDx7gPLqRwwRGjz\nkFWfviRK5JeMPIe8ZGbFn7b1c9avem7JJfINFDf/Gk6mhFS144ZIgZt1Wdcz\nrqAMzJE5/B00HhvE+d48JF1sF/39INFcQ1yyu8qvGsNXJHIDe1yY07Wnl8cD\n9fNewjxolVZMVqPLuJQycK+JyvUXz76y9qBgn69IUlt5E/t+ro5zLY2xa8KD\nZks92gF0UfgQyOgYKLsoEaVaWfKIMbHfeHMiSx/6fnfrC8IFE8Gdn9N3Zlj4\n0Ct2TsQMVqN1wgs9mQ/Lr+D+C46dhC6BO5yTC1DRa6TkTet7pLYmk9V9HOl7\nVO205gtb0DCmW/5Bw/sUMamR7HQXvXjGhzNGkclGQtzTTlMJ3iSPavMfz/Km\ngJh5SkWT5UqJr+Ag3yM10WCyRqtlBDAHVevB0J4zTkeL+0w1PbNkRls8fmGU\nKbHCuHcGehNs2dwMYZ4wBqDfCxnKFdeZM1u/+uWT1ALePAbrwW6z0KFvr189\ngA58y6vWtRAQBny9yA+bTOGYPhRYVxYRW0w51DuZkTXyjEUksXHJR1cSh0+d\nTyltP5EQLrKXevSo2B7BK/d0+ivOwaDjKTlf1toMx/wUYZQhgXZZ+wAIORA6\nvuwT0qx+BY0++eDVoDbbAeYDRBSpuDOxJozNqNGP0Q24fOfqIcwg/L7S8AFK\nlNR1\r\n=Z4Sv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.32aa23641.0_1590615464381_0.8256611952455755","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/theme","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.654934dfa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"206b788a1e5174ac2461981c8473d2ef60dab77a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.654934dfa.0.tgz","fileCount":23,"integrity":"sha512-jJYTKjF/JD80sXvL2d/pHHjcMqTp5xFsFGiQAlrfPU/7A1FVL+qHRnUyn/Q2yTGTK7z1SfHyCp/Rb6OuDcvfSg==","signatures":[{"sig":"MEQCIDhlEqpgb+s9mUaA/3fOwd10ZpCAjyZBNYldJ0zNgWTrAiAkJwTwuXv4Rh146HmQydD2RvfgpTgqvkrjBpHUn1vjXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezweICRA9TVsSAnZWagAAsZwP/1uZS3fofZq4U48Kue1O\nJN7DfnQ7rGxR5SrnlMKF1Re7FvM0a52VlFFT4YNlFpfPqy71Vk1VmmIWVE8x\nFVVq1UVRAwFKrST5ZFBniGTF6YqZrhtLP/cA2iJW0qbEtsdl1wZGpmHA63jp\ngEX1Is/SrYAkGy9ovN82WA6daE7+mc709BAH+1UGFMDWDLXswUktGDgYAu0U\nbMrt9ZkbFDC0acIVTgDCuJ7o+ldqWBSBQ30uW+WftKaYL83jzat/OL2ylEFG\ntiWmNKsgpzFVvCNMuNkRCi3MJmL0BDUhnNnvXGyjjCOPqfX6f47K9iTCxn2n\npxzCJgNoRkuE1HlFEkx9aMz9PA7e8OYJ44LsEAL9gXF+Ybg1UxDsSDbNc1fc\nIhxV9DknZSPLxwg7fj9cEuWiN9S+MBSNLOt7bTuvxO12d/sf6sTQFMmBIizd\n/Se3VhUbCGq7u22izae619QwBNeUkJM4K4wTdfeszBAba/7X0ZNAXe9QPBNl\nuVqA8kmjsPYCbozrjMbWCfZPxE5bwiAPENJHxD+PlupXPRAwnvFB959I6lTx\n0F3Bldl+kFsqa0TMJh/Gm7VkQkMrMwK3/aHvFbGBUsPNOxhDR6R7FzgfFnhU\nylrrFuXcsjNfipYfVHBuTI4V2mlJ9V9r7HKDidnc7M9glE4FxOiOOcmQvdCm\n0myT\r\n=aj06\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.654934dfa.0_1590626183616_0.3087087181907031","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/theme","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4ac5683513ed30ed5d78c2ba70d2b577f632cf7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.41910b8b8.0.tgz","fileCount":23,"integrity":"sha512-K/TPf8UqGuQlr4SDxBHk2kYnpU+eeC7ZneumD9ylJiyvCO7YiUTNyuZp+8l+fCKGCkBggBDLzdNCz7Qjf5SBzg==","signatures":[{"sig":"MEUCIQCeTzKAEVwTs44RFT0dNPiawR4SB6rZrQyXkIez31svRgIgZEHaxqmSQJfK0CelEMUmDlEqMwp7qN6V0uBMRplT8Uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwrrCRA9TVsSAnZWagAAKnAP/1oEsUrkriAxCfMI/ZzF\nvvnfRW3BX/Iz9UnsWnZ8wB3sRFWE6RQ1kquV4xWDFibyjoM1zCZ75TVE7nmq\nsh4FrK1vdsYjNwdTfW+ovAUqlP9UGgbEItIl4aZ2Hq1hdctOw4rkQyXRS2gj\nu1GKviiCfn3isIJR0abGqNIWxfWRdkRNahxq07i2bWBsK8Tigxcd9LXfcpnH\n3HYVKjxTJ4FKMmaNdQiDotYeN+QnvMvCUVjqzlN/kxK133tCB+YmQHHNA5ZQ\ncD0OphAP4m3UPm4UqwEch3C8dRHfDY4lhpiJx5p9s1b2rx+alXT37IgiWfEu\n6X/ygsHhyuKvr8F6GO+iISkLeBL2qiCdBR+66AcwxtUCn/5qUGpusjhNN1V5\ng2C4WWA7xQhvAqKtzAl6kjn+pZ3AyaK4uO/CtKt43KO3q61l//lu2WacvLZk\nj2mbqHNcpZZ/0h0V6tpLWna+Um544p6HKTNjzFTANStbGs/B0vz35IGVak9D\noWLnyo8jzffpKUcWh6T7FjyklzzIfWtzmW5KyQRsDDWplVe+kaReR44GtMw1\nvD6vqdtfFEL59ORovFIVcZpF9LnUeYKxJZZpQwkAwUhFdZ7151DJnoNTMf+b\nI3osm54wp+wyk9F+q9ML9og3csOV/1RVILsc2dJ499ekcQCMBTwG+6qoHMbY\noK68\r\n=io44\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.41910b8b8.0_1590627051347_0.7881629987307661","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/theme","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"353487f1b9d8fd2e2ce85c8b35e7ec3f70932c43","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.d66d22bf9.0.tgz","fileCount":23,"integrity":"sha512-bg7nco1ckfaOZvtF9L8MMd0PFYFv5A2Phh8tKanBPhK1yMPmAtktuLIiM6YIM+XrTkwtHGPdXq5Oxqn06eymFA==","signatures":[{"sig":"MEUCIC9KlWWO4MnfzROU7O1kVS9DrWeEqeCMHSIV5Kg46qFBAiEAxUA8sIYzGlwyNqJ5YrSr/tJlmv/FuCHLl+YBLJjjMCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BcGCRA9TVsSAnZWagAAXSUQAJ6efPG1c+Web6aohWJ5\nndhg6qtjOE/5/yw/e56IKRSRek4nw9sfG1aeB7w/ex6Y/fkZgpjjeEzZeexw\nWv05dyv40KNVZDFpQU8IMt8Ys9WmMDQ4vgRvbDc5jwIRS1OWmxwy4Ukz+jOi\nJ9js8T5B+B3AWa2v6gd8Bxb0hlXHzrQZRKDYmcFoFJueBr9TblOwqLTVSfgH\n0bap24KyDOLYveF7e0nU00B2D9kLSN8rxuPIxAZXdP1x9qwvKMQuLimtF+p6\nQOfgRmhr1SRZbHW7W6I767QwZh0WWTHRys1v8fzGrnSFqfgogZwQIQI++M90\n0cFrJvReCuyAOKVTEeeZXqbzTHcw+bRTaBltl4C13iWMykRewdRG+5dNmGNE\nifMTZMiDcj7nb8/Pd2e1mhmD+A6x3TwnjZ8aH91WzxYlDoW0ZX0YPKaKvG1e\nnEddmMe0Azz0J4uMC5h3yEBY6YNDpbwm35vn8O/yEyVA/IIRGVLluIIrqg+U\nIrmzf08145h6CptGIwN/uQ2LTHzwWtloWxA23RmA/MQPu33Uf+LJnDa+hOwK\nisN1Z40mXFPgJe2eu8SHC770GOf91xxZZEm8yMTony5DUZPC49xxiuSSORoH\n+ZC3F2r8mt1XzTg1+CLZ9JDhL/b7Obqj0w9HJoxtyQcosQ14qnDtHXyUWkZl\nL0zy\r\n=M9Yi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.d66d22bf9.0_1590695686023_0.029080443062693417","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/theme","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba971c495f7671d6a89cfa6b4a75571f91f34f73","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.8904f3cbe.0.tgz","fileCount":23,"integrity":"sha512-pu0YWFqKaWLOHiVd69ob/2yNcR+eUeWFBP6sPNUUlLfQxERSPYCJlw3cOjufrbKSMagLKsmadv+hwnshOAP66A==","signatures":[{"sig":"MEQCIGHwVvk3rwWUtKoyGxes20GmxL11YXCn9Oq+TY6KQ066AiAlsQF8xstoU438Jg2DB/qxMRcW9GE3MZSnvdpxiw3zTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":88193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T0vCRA9TVsSAnZWagAABDQP/ihcQYUK8P8kjY05x9kv\nA2HIUQL2vsuBXPwJuU63493gSyhsRb3sCo4UzXxz98yzZf229gUX/pLD8kVY\nnsyflx0up8jjpUVxN0xdbZg8zcYBS4kQ31rirr71zKIZY5+5lVaAEwyRe1oV\n1PPoKNkDIKOJiCQkdHAOq/PQ+tocBKVZnQwYE3Jd5fSlaFHAxBnrHqRJKmRw\nEX6z0QJnNog1mKNH+B3xZw5CkZv1ShmwTxMJVmE2x51c7FbzFDMXuzi3qlBL\nETCmrNN6hzXtlJnXYTXAO6g7CvUya4gW6Q3iZyKmCG6TD2nDNHfTVqVOowDF\n5cJhzotLD7cuhWGtLwGjv/5fWWUEuVl8bM1sUbRCnSi/ZcPh0kI1rNYiSDX7\n/HN7rOE9XBxp19zFHwtmltoi8QLdrmyqOv1FgjUNnwzYK1cGxGTH+8170F0T\nAI0l6RwQlTcaevR1okENOfIGL4fj9R6tf2QLu9MrU+UHffJY/n61Vnf3J02d\ncvL0+6F1ahgGBJyOzI+lbSVsYHjxH31MNAelaGAT78jpwUqQla9L2RgKEyC0\n/l79FGsY7sHDJkFvlCDRrLVZ5rBbwX5H5I7SUqftbzfETM6WCrN4Y+09q+Es\nEH14Ed7Tk2AYXkE0i691+b3Eyd88DqBa85sUL1eQusAKLPqOD2h1hqcudsIn\n9zcn\r\n=sbK1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `mdc-button-filled-accessible`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`.\n\n#### `mdc-theme-prop` Properties\n\nThe properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.\n\nProperty Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### `mdc-theme-prop` with CSS Custom Properties\n\n> **Note** The Sass map `$style` argument is intended *only* for use with color mixins.\n\nThe `mdc-theme-prop` mixin also accepts a Sass map for the `$style` argument. The map must contain the following fields:\n\nFields | Description\n--- | ---\n`varname` | The name of a CSS custom property\n`fallback` | A fallback value for the CSS custom property\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n\n.foo {\n  @include theme.prop(color, (\n    varname: --foo-color,\n    fallback: red,\n  ));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `mdc-theme-luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `mdc-theme-contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `mdc-theme-tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `mdc-theme-contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `mdc-theme-prop-value($style)`\n\nIf `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.\nOtherwise, `$style` is treated as a theme property name, and the corresponding value from `$property-values`\nis returned. If this also fails, an error is thrown.\n\nThis is mainly useful in situations where `prop` cannot be used directly (e.g., `box-shadow`).\n\nUnlike the `prop` mixin, this function does _not_ support CSS custom properties.\nIt only returns the raw color value of the specified theme property.\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.prop-value(primary); // #3f51b5\n@debug theme.prop-value(blue);    // blue\n```\n\n#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `mdc-theme-text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.8904f3cbe.0_1590770990671_0.1504984918169614","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/theme","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b431c978d50894863622b7770edbacfd73974766","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.51512a4ac.0.tgz","fileCount":25,"integrity":"sha512-iCtVK32VFOEs1VYV+HfzDUQ69iB3g5hGUzDqxaFwAj4NMLIS0nR3U3+e7dvgiOeaurlmh1EaalR82BwJXvB27A==","signatures":[{"sig":"MEYCIQD+tFjhACBUABH3RvjKBROFZeBjRFJev+xxvXBAQ5aomAIhAKnUSfCG7wVf4efwqAB34a2DehWhiuZ/jGBh72oaYBiA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V8dCRA9TVsSAnZWagAA8xEQAJ/sGTZyzQ5kd7YCW91N\n5/DKyWh/CC5pfgt8XkdLs244xPv3GWtWdSyfKFrskXTgnwP8ce1tath27ECJ\nUYPMpr6PHHguTperg0QoWenEm39qAeb5mGpEUXvDoLaF+fh0XNwVWTgrHsZG\nrqdnrzczM8KQ9KY8WhV6AI0OQp/RqieW6DZWjss/ApXO2w2To5WHbE9nJsI6\nw3YkhfeXyaWCAImnHLhwRILqHOPqpmHHKMuNuqKXHHF6Py7vxxJq7VyvcPrB\nwjApJrP2K7/Qmo5XLZJ+ASX53khixR2M1C3fHUg16X5fcUeLYMFHPuoU8ANb\nvuXdQZR6nAb9ZLFVlIEeTdIJomdROjfh2jqCpz9ahCdrhiwGdGAbCgF6aIuz\ndl/oZyNTMW86mkqDTSax6ZVSA0Kv1pciWexfdqJZUahu3NyVympdcdDZnKIs\nxlaQDgwW74QMdPWJNS67wBknrgiBNCAiOC1Q3sQd3N0gq/jWOyTaC+EsfPVJ\n0HyUed40z54yH7nEl6Y8leDxywZznxcosM6wIUt+jHS9ozJINcCoq7+FNH7n\nNShy7rWpJPF3t+Q5vCwwhFYOeY+xgRemay3+x2M2QxpB7CSHS/42L5/QKxF9\nbq6UDPf+5UaRB9yaYdNdc6zDuaOkMZ7fLWUmyvCC34eNvlQGUTSrgDodXXH3\nPAL7\r\n=1KhY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.51512a4ac.0_1590779677277_0.3421389332834823","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/theme","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.0743288fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7efe52458fc120e408159dbdf3798dcfffa333a3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.0743288fb.0.tgz","fileCount":25,"integrity":"sha512-3zGy39jaGf/1886f2FG1llRNBpieGdefhgLixqaDgcrpSkidKieIlpJFj29+Fk0B7J/FPPcL3DgoY3B8lEh9Bw==","signatures":[{"sig":"MEQCIBF8TY3nzKUT1iR+ftDF4OzJ7AynS9Zh95NIwasulUKeAiAn0lpMZFE1OL5XCWhx7Us+OW5EtDkwYA0KQJD52TgzOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WrSCRA9TVsSAnZWagAAboYP/i16e2WS97Qh0GmGXvjq\nkSG1XtF5kE5L/6cyNg9J/SEP2qHhKLFbOpKXYY6fahqeqzBa42MsrEiInylE\nP8HufKsQonVchBg7rvYPuvPDI5L1Thg9yltWwb8tPUmFgJ1CrlFKJ5QaGU3V\n2TDNYzqvvPWbv6qSTEGnuCSBuWyfiF0HoHtdohuG7x7CPf5/NdYaFDQwBVkX\nNRddTHfs23R27fjSBKOIC/2usY7JV9fZzs7MfzGoBC9iHdan/9aqVAgUtF7r\nbiE8bMUgBC8itgg2SKrcL48oP27oZq8Zvb1nMrfoDMAtaSmXAbssLR2WTa24\nG92eMWA/8XN+TfjTiWuuqbZVUGAcf1uLk0tAmkMNGHOX6gXHhHSD1Py8Dv89\n74Tpj1NbxEhnzJs+c1E/yvbBxfZXEI4TPPzOpxLUwo6iE/p66rlsv0/IVszY\nqW/7Y4cEPvrwTrcx+bgoAJHvXvvYJ5CqKZc9m07nnlWkKJB9YeRwhkRxthH4\nISEhbAKu/UMOYE0olP+OrIGJHkP0E7lWlwyWD0IawO6XOQfnV8h3YPKnrqlz\nAYpqlJ7bPLUOAcl3JhDED/VhZaZ2tVRrCj6F1ztmDKhO2+cpe2W8lJZnMfVb\nXXBs1GIjueskXukiZG0hoMfSMcaMt/SJLD6NLU9tOCy7jv5Gsvciil5Uc8Em\n7CCc\r\n=NFSm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.0743288fb.0_1590782673788_0.31816001524661064","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/theme","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"041640fc7b033208bb8a4b7f0d11e3d9dddf01bb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.06ef147b5.0.tgz","fileCount":25,"integrity":"sha512-pg+RadFtoSPp0XoYVdmXYm/TUP81GPM6kgOXLmeQaSHm0BvQfezw6F8fQTKPYW9n6AFeqTPjqag1aqLv2klTzg==","signatures":[{"sig":"MEQCIH8NCcujKePjjqFw6d9Ckm8hR1Ag3EuVOy9qi9QbnArFAiAfirndvPKv0KaDTDeIG0ZPGCkGan3j06b857I64h+jAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XMrCRA9TVsSAnZWagAA3TUP/ixNg2uVW1ex7m+cXhA9\n+/+lP4mCW+NCgg7M5UIovU0TtCBrYFoKD+b0bGwjtYXUTwWCTYGFIHXZyPxU\nY0JSZDEMqNkMEcpiiFf5QMlBGWE2BqUm5BTLLZxrsQG6zEMHmXmGmtA7UPVr\nNdeCHR6gnYsK1q6QUdahTSBsZ7eR7SS0ltC+IX4fJ992KVtaD6Z9pkhCJXr7\nWf8mpu852pGBI9bvdzui0r1WB+X2sd40SlHIlMZq2PHpG8ylP6A+tAGmvfFV\n3VCjy++7kYQB54LbRS2cfWnLh7FM2ywTeJpz+PRo8l8DBPMthEBCw3EvdFKR\nb7p4uk811GIdRyYdlkrEtakV8zIUJF1zkNk22UBfSRDDWznsT44zUREnCXS0\nEcuRZe0mOXnmnXI0AztQNNbUVZMRnLYNTfrdLdY3izdFeRbv8m8EGQAWjpIP\n0BWpEjqXUtbcz+ALLqrQHDg7SoKj3BHfHOWk7Ol1NUEfVWqG80RyZ/KBDJqJ\nBH+taTKzU51GpStLLrHg5RUeO7TaZ5NBRaujkwNdM2OqQfHFqaPxn/RrdCnd\nTdGjhH5s+aNIhonyYcj6wtCUvoTGe1rN/UhEfpAuvqUgK1eAxrYfEeKpGhUG\nGYQ++KeIw/L/aAuy7p/x1N0G3xdRnu8hMmXHSUyVLdGkqjSW6sLfNGqvBldN\nbJbd\r\n=6FK0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.06ef147b5.0_1590784811471_0.7326935868243918","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/theme","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"874edaa793ff42039b947ab94728020875e80b21","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.8073a20a9.0.tgz","fileCount":25,"integrity":"sha512-J2OMLhQRVMGP3LsOpmEHFdu6VsbDgKsEo9/AJOwF9NjHLI78nKBKKwlJp+OSuWtk/0nabfMOgA6oR38A/e3ZKw==","signatures":[{"sig":"MEUCIEndec5f78+F9QL0qEH/BXRCFApyYcvnQHXU+fmFfTjcAiEA4HY4PI6LXX2wIzSnfVrZvJSpxNiA5Ivp/av8L6KNkFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZnQCRA9TVsSAnZWagAAd0EP/jyZf5Y0kbKbFv1+uPan\nLc72GnXiZ94RVemzuSL9ZG3DsRfMgfYIwHX4iOQKJbZCmhpdV7sTZ1KbfQIA\ni0kVKfn6Z9hDA9T5inQAwWErUrdpYvYRxcmgNf5xmQElkVCLEQAVQ2Va1qnF\nb+Hqq5zlpVpn5QdWl4zCQg4SltUkB8gklHMuHrb3wwJsBPCv+atsNJG0pYqJ\nruLFmcjnvAdTuCKwfw+wUNvNgDinU8SptuX12+7+hu16VyhYb/MNGZxtxfoP\nwWVgGixzOGCEp50pGhDjXd4Z1u6YQQXpW5xfyw07nefzjvpPUxa1S+CFol7N\nSAO0mQObtZEZJ22XJL77jorccdMaGmt8gkqpfFCZXs8QUoYb4S/BUXbIYaAY\nZgozYQ7GYHkKUBznfacv9OYlVB91FmhKbLQ2qLUC0BSLVbkbdKRSt0uk8kms\nBXAT6Gr97E/LXCkEo9g9+4lwmI5vJiySMZ60e8/ADYR5uLa0d8iUZRYdU6yO\njLx9LgMwkh3liw/cchHCdi79Tab5pYYjjC0BTETmSSxgy1ArSI7bbR39b0iZ\nAk+e0pEibVHvuR6FvjZhDYl/APKhcSBGBHqSVNHUIPFk/iIJ4rCo0k6sym7y\n6J3cJXzK7R8AK9BVuGWSuV4GwqrShsUnZrWLCu5Y1Y3r30zZS5UzKskzCU7h\nB6Nw\r\n=jmeQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.8073a20a9.0_1590794703229_0.894973563994151","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/theme","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.72ff42330.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34b33ba21eca555676c733434356082c2d92635e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.72ff42330.0.tgz","fileCount":25,"integrity":"sha512-AOZOn/hHOR0HRxs+dlakYrfnaFiki3zbjm1zgY90q46kZyGPqkQc7ghlpwMbaWb7Od/ucRnSmWscutTCoxeirw==","signatures":[{"sig":"MEYCIQDRvBBhbAMR6X/mNLrpj7lQOX3/psQCaL56xW6htdQkwQIhAOc9Sdu8LUZx2hgdJJ1L3QHYzg9g4xsMLHQpgygOIcHJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TAqCRA9TVsSAnZWagAAKk0P/0kzTIuM9lVe8B3tZvR8\nK1g6gOkXi+AxnaHNTmWqWPGiJfAYCPBOze1pfpuW7BD0x1Pu7S5eGyVSiCXi\nlGR5T2vkjAYch2bkcNY5TlVE8gQ9yXy5JUTbfYxtT3INFBoy+A2HrpC/FtHX\nvBE251z06BWFXORN0Tv0ltOWiLsG02Iw8DYiiRDLzLPlYrfErpSijBKfmswY\n/7sAH6rqVynHya/CewxUjtRAqm8J8KcZRV695npvt7dpTl0mupw2f5MORHbH\nqfH6+7tvKnKg49MyJQ/1YgQTdBOsS4NZN+m5HVr/1YX6hxhDSp9NLtGjymXZ\nyS4WwLH+8YZDJNQ+mmEOKtHyVukmrzqPqSjEfhz5+hp/SLViSGCKXuswVNR3\nRN1qEJ1/4kystqZ+ik644zVlW1p9diJ7W1zorP6eX3E85MheYxR7FJ/IWWGd\nVHtJLRHMxKoHNJtfUyDAdYgBPkS87ZJoo/NDQn/+Lmjn6aJq3B+fajXktvrB\nZkOUSVqFfGkYN0a3qDaOxC4dQ93/ZjY9agPIurzX6/Cekw1e2LeMv4EuImn5\nVZwNS451fCD2OKJLdxYshBGyVB2hUJZ8or2jiRHLfQ2G/7z8Ym++i9kvh2Ef\nW8SOLlwL+uvk5qomf2D6cKHDZIsYoC288VaedwghY8gH6SPoxMXKfBas2lnf\n0cqU\r\n=2UmP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.72ff42330.0_1591029802301_0.12166716801590938","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/theme","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db80ba01226521a39ac30e7b5bd081e2cfacce8b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.9ea52070f.0.tgz","fileCount":25,"integrity":"sha512-mWuVV2iGiuOsj4NbSPfwg2t3ydSiqb2oq31UQNqQT2cRA1oPXlaLvjY20iV1jvrFM3xSu3ny2x3Nry0ouwDxNA==","signatures":[{"sig":"MEUCIQC/eyRG/pOs6T1O8UcNU87BJlRLa3LmMUqc6Wa5GIZfTAIgUqpj7Vz0jJdc7R/U+FMAPYbSdO94Fi62UFx7U4WWc0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TFkCRA9TVsSAnZWagAAZDkP/iXOwwqcW/bIuXVOg7M4\nUL/5slkmwWfQ5y7oc2E8ytk1zwbrDuuo1bDdbHD+g+JEwhFIdcNpbBKddXuc\nmzOWApTEfntX22qHy+oS9ECgQoluJ6GnPgVW33fE9gFKFAmPcfZ9bGxs3pL+\nVggz2CcxOsws2fb27Ckope/mvuSL+fOzTAJMN5NQtbTQLuElNCBBBqXLtygD\nMhVjv9aVK74EkYpcEayqtqfJWLLcacPAukJM2wqfko7IVlqeA9NDx2U081pc\nmTajSyCZ7XLhbBkCwi+E+rtCTroAGEeiWHll1NGI9jPRitkQ4jqkz8sWmKwh\nTFXTYsWDNqQoEVqizrtCWNgGR3cn+uod6n3gQOCNkCEHA43jj2Du38FtlRof\nmmPXvH5vDdCVwh5u6CxHtv28kevL9bb475MebL3jG0HQ4enR5wWNIN7fv/Vm\naVdjemO4k1KHc+HWKLqBK81DMORh/KttgQAhD0/5GUKYYnBAm1Kbbsy/8xMf\nHhqzPOlLXbVnue51Bzjkri7djJmrvjujGyxjj8KEpW5ueWGire1ajoCs3Vsk\nMCi8vp4KgzcvMKp/fOzh1ZcBRrB7+x2bdbEdH5GdVn52LdrZUVaU5i3QD/V/\nrHIvQfgHrvDYX5m8GRjkTOQSLCynbVwqE+1Ew6TQsXmS389M33DoqL3mOBFv\nDUnr\r\n=sb7M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.9ea52070f.0_1591030115647_0.013728759685855296","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/theme","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"316d6b11c3cf5de140cdde19b9e7667241fc65de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.d86ad3b60.0.tgz","fileCount":25,"integrity":"sha512-+9G/mnlc0a455eYkCfZmjxk3Tb6TwhDqfo76Dg4TvtVeU05Z6ahx5ixWhXScA5zoqRYh+rCTiL5qIncKUxc1iw==","signatures":[{"sig":"MEQCIBQ710oSxVG4mPsDahNwv6yFlJjkIP7Ih9EbEzf4cGfjAiAsP9/JroSxMNddDG2mK4wbU4EKtqKR9/lFoWd5hwSTKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T9nCRA9TVsSAnZWagAAhG0QAJjDR2qkty7RrMx/E28X\nbTo7KUz/RQ1h8oAE1MkyxuweNoU9K5r3AKqUBwrIz9p0J6cUoRho6Ntjt5lK\nMWfXDKvaAA3wCdKrZb3jO7OXVEs8sla0fIIGSZiRNfcRjx7Ja0w8AB1MWeUC\n/VVyjJ5c2pKfNU5pKlXC85C1Oka4zTGXV7ovF1RvJJO6zb5PWvfbZ+S34tpU\nwMMEVgL1oBg1ex2A09KjPpc4yNYIr2StvxOm4WooKl3jJXL9GXC84P5m+F5R\nU0hSTJUsSwaI5Yr1Ctyo/d70opS5W9yyLNXuf97x2Q6Cmu0Yn49rOf15S6XG\nWvW7EGwzyE1O+R2thN3jmMOw4nn1CscGXU9/Iqw6R85ZGT96l00FoJqIaYgG\nneBErhz8toPxKK0c7POCVxz1cS285jYjfBuuuiJWD/oLg/wKKnfeZZaSDPGV\nvkuSvO4W+Q+tyqiddn6l4GX8fIdhSFkUh3B5EkJdiSvDPH/2TIEKNh6zR6OL\npaHgLHgs1lGYnMRYBuPaJDNImDAYEtELX7anrnxaU7vwb+BEJGMmkDdZXZml\nXcS1mflfFu8H3mueeupncCblfJiFqgC/4toilklm4ttgAyyIXMB+ihzZXtlh\nXCv1fndcy5/rRR36tKt1owySl7Sg1vHuZEWWYJ/zP2oTc2Fb5+zYppLRMXv1\nafZv\r\n=v5z/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.d86ad3b60.0_1591033703279_0.6604201498269773","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/theme","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17f60d28c1d422195bc26930be93f44deb855ab3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.b9776b1d0.0.tgz","fileCount":25,"integrity":"sha512-Acs3NtPy0cxEI6DfmcsLTjzQiI1yqvgFHoc43LCO/oMkcQuwsRD83vLvVgJSv4ACrXGvA2QIQBH85t3OBTHIQw==","signatures":[{"sig":"MEUCIA37WtIc4B55JWPOW5AgFuDAkPzw3g+BiITU0N9fdsSdAiEAz2zSox0r9Jfcuu3FO58fkwvvd6cRiqv0DzzIz5MwCJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UgZCRA9TVsSAnZWagAA2VwP/RgM4v2r949kQ4U7Z5Y8\nYkm9oJgUJg0ErR+R7WMFZOohgroWXnJrVGPLuO/OJ4Y+9EACydXEl/9aViry\nPbPL0ybj4rLJh0v7Qe5s6HH5B48Pduy6XpXAH7ATvxP67HjZInQwEiBGnvyr\nSYHgZJa6z6CGED0AT5TyrtfWloP7/wE0q0gNY9r0kN7POtbnYXAqO/f9MI+o\nKzM5Duc9Sg0c3eWKI9EOkiCKklgBJwdLDkvenOYGPprnbvPGtgSyCsf29erG\nUMs354yhKlaeegAcf47GChxxbvOAddVU5kdfuBfQ7PqDDYBEQr5vLz3Tnsyv\nzrlP5rF5cIldoQU/GOL7ZSVwPRcWO5WKT+4yhp3ZXw9DQTnC2qCoVvYM196n\nOAau+uqopEYt74Ed7Gm7iJSQv+yci2BPgGj0fK6DOli5hK+F7kU69S+2Ze7s\nWxFvY7ZLJ1EQBPDf0CLy1H9igCQGNvOoO4WcVW9ICeSU0M1hvDPdUERhXpGz\nf0JmtWAmY+WFCyWoxGQSlspxOlG7T7hVz5gG7Q9gi/bGNSbEmF8gSUEHMXpm\nkxOhcaKdHc4hBBlj7Yuwo1n8p7I/UDdCI3a8UsmnyEV3c/oMX4PP+rDpkNTb\nHk1AoOvtEKkoYCwosXkMGKH1or3/DCP2Ff+bbJcZSXmLRJOwQM6O42GW2ZIu\nP29/\r\n=eNt2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.b9776b1d0.0_1591035928458_0.2312814932474183","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/theme","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"667ae8b11d87c9aa2aa4a8785ce26ab4193ee369","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.ba6f7c294.0.tgz","fileCount":25,"integrity":"sha512-GKNJFiSeslDRl3x3H4s2jtGS+zACLuJHJJufOxAz8c+vxrH8isIc2WFxGCgi8RSwrXa9At50+jkQMhRgKUicYQ==","signatures":[{"sig":"MEYCIQCVE1fwWVHprnVdLbr6oUfRD2V8trMOffl3uvAAXM+R1wIhAPoRCLufq8h/IH4DG5wEGut8OondnAh++1Lu3T+z+suh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oYVCRA9TVsSAnZWagAAhr4QAIzbRRxh8XpEuyN9P8mo\nFOupY6weD+JOkbrZRHNZiBTKlP5nD3uK4z2bCdg7j6dzZIyS0+mIS/VBkEtS\nPiD7urG0D1LZUzZckO1J0Y9Zl4WMHoQGiV5AFP/oS8zb034TLvd1egou8D7N\nvT/Cf908TACUKagnv/G5IdCNhoYWYMLiH+AhaN2G/dYeM1xkbT8kjYpbOdaP\nNpRQuOT/yuJcfxSqiHornq4KfHlYM/OnbZfTqlR29QlE/MCakLDDn0Cer764\nK0ccbrAdtvuefImJCK9SrjhXgd0V+7X7FceDGGU+2+0HUmB5CsFWigZy3SgT\n6YVlHrzufNmrJc/b2ePcCZVcJ+OoD/6SE6EuitXiC/9wBiXLcrTxUGIllIqw\nPtR97JL+gPdFsHH41jqoToxi57rKmhLk4JgRPjA3VjQuwamf6K7KqKe5Nb2T\nMZ3QEIe0dsfKndVXzqh9Ap0d6k0c4H7UyNIyBLM/mZJZfAr3kL4W6Ps2bjIP\n94Er+XG3gKSvjvvVMOMm7g07V8wPPPOPYlJjpTl9zY9ni5LE/7v4vDxYf1+4\nLFg3bF8+Q1rQLJLbHtHHuNQ7hHfRO7s3KLChTAwy+xxzZTKI7mZ+OwnI19ef\n6RKshbmVn16FgSerc2hHsOvz9kCpp6/PFlGHQVjqvzIV5FUHNxmeMbRsuxWe\n7c1k\r\n=8qMf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.ba6f7c294.0_1591117332899_0.4072682043211824","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/theme","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0afe88a748329c378433426b8f661e250c503763","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.cf3b664ab.0.tgz","fileCount":25,"integrity":"sha512-TEZ4qGG8Xh5mQrmN4oD2J1lwOxSxjplMgwnmOZjc6XViIdmaBd5eCqyUroHSOoi6rW5Wv2t9k8QQn1+ZAOGZvA==","signatures":[{"sig":"MEQCIBCmAIn0Gk0fyXKc5ssiPMfeDTPPfV0Ka3ADiLKXTMJGAiA5n+kaK3vBxb9pPZp1NQDDtejGheskXkS/OElgMhktDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pkHCRA9TVsSAnZWagAAo5gP/1F89DfLHkuypEZei4Y4\nPBsdAc7FwkWY6R42Xfb27qQIr8/anV2DVeIIQl5mra70BvlHR/U9WRpNwWdg\nJ+I4a9ITG87X2+KRT06rMQO7jmBuYwfVmiPBuufTI1fuUBsk5RQObz7U8vy+\npr8QTDpXdrVGOayE8IpWTBdYAnPohaI6Fg+Z83WJAQD0nkv9o/pxWzlrekx9\npOq46h8Jds1tke401J5Ej0J+2c6inYIijVuNZ8tVI0kk/DWPgdPpLrJn+5wV\n2OmDGpVkHzt3lmh/DAf5ejinBpAgldTqyqvUuxrwSCk8l/YK8ZY8+0ghbyA0\nVqtgHw11gQRVn/StuJixLiBmHFtwN4wXYTCV/FuBIIxFz3eGAnfHzYBqSaGc\nuTLYLJwfn9jd/ly028hNa7GfVnq7B+I/Vh65mr23OrPKeceysAdKsLsGQGku\nJKHHGTOUznfjGTdy/ELbxDfy7CMdRoJ99o9mvez41Zeham/BLzbF9784IFZE\n1PvPtaxh1BxsI9+AmTz6xl4ZSkqGOb4Axqu23/wHpGn6qd8YlL96xq+hGuGs\nnt/50pzFaGaH7Bp9AH5l6oKXkAj8Ar38Ha8d8UUpgioSsGIr+MTBQW6jmsYz\nspH6V+LyM/FVAI2wSAm30H6QWCGSDEaoNKcc1zFVViKXtpbmTiqZ3qXY4+d0\nQOuj\r\n=5KjR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.cf3b664ab.0_1591122182501_0.5865705377840418","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/theme","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2aebc90df54dc6ceb3775636ed8c72ae4b660896","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":25,"integrity":"sha512-0+j12UdZeyzFnPg2J3ayMGoFGtZLyBrKESSz4ZfCSF21RbqlSzp1u5zJNKS+secWuZ3HBHrBIhqEysvHMyBF8Q==","signatures":[{"sig":"MEUCIFm0fuGGwITj1JrTx747LW/NgwYuhfbAo4cgrlvTHnIoAiEAjl9NK9jHY1cZDnDFGa/z3nYpjutPKmzL1wAYVZP2ZDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uYUCRA9TVsSAnZWagAAHs8P/0tCtg+yNqORzstS6oWY\nbQfC8o+bzGldvhHPFKob2JCHLn6W8m79+ST3xhpSy7QpcjqnzdRbQogl1xXc\nOoWoBIyB7xOtKUSjQnv1ovnBl0Yr3YjzHWfC0vRKtVILX6uHmNRG2/hNU6sc\ngGCZHunXDOfz8+JsMXYrV78JT2XOp2qB4+Foij4JxIX0BCkHgls7h7Iuzy/n\nIdZ9kHtjvqaEB5J0FXuBHyONgbD71FLc1ATuVL1LWL9Lj7J0JXBCT22E2Tll\nBbi9zuAWM7kviUyVr3T4OHSDEbT4FsycXaVrTsQHevav44mgvZqBaGYVPQmf\n1WZ+DIOfKxBIX5sq+oSturN+A60ms+/oLHFoV1fAtkjMlR+7k+p35lY7srZU\nn7xoGPWma+uIrj3rvW3njYmspGPk1lLIS3ASmHdulE3zcF88IOi+CGen7nZj\ntY7Pe5xJh1scHS5mZR+v2Unyk3sbMTKSkxV8/K4anlSBDZi+4SC2VVy6yOoN\nq+PHfEvO/zc2+UniB56WlGUjN32P05zJORPKNiJOg63/oDO39ulmSn2eo3sX\n3V2qOdmE4UNs4+nMz6z1LrRmZNDpUd+FfamhmXU7Dw1XzRgCEXUEscNqRtE9\nCDItnQyRqt1zRimko+WPMJsKOMgb08sjubVGRu/WjoKPgkNOkL9D2sCXRHUx\n7D/s\r\n=IIBF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.4ba3c9a31.0_1591141908139_0.6137330090365147","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/theme","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.388b042c7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10415061dc52c3c878460ecc8b6b3785757b0f47","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.388b042c7.0.tgz","fileCount":25,"integrity":"sha512-oSjU/8OR9CGDUG/4sqOSjafszLWA+VF16WBRu0HLucoXI26r0m7A2kq+ViKGaO8a27BGmWAaGqTHPQ58pDY/jQ==","signatures":[{"sig":"MEYCIQDA+2H89ejEvkUlh5EuF+RCPHZ46znhCaN+86T1U7XY6gIhALIOsns+UvHDAKkeofBSOI6G09k/SXLA2I3VoDKbw1Du","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16mbCRA9TVsSAnZWagAARvwP/2i7KFkM3rpzKda5ppd+\n8Rc8OyK2yCF9HbUAWSkSutVZ24K4H/kE6/syOlW8pzCwCTRb2UtQfreqwzB/\nguS+nY6MJny/oH9TPKoipNAH74zY7TbuEYJDuzt7tWz5bXJL3qaBMzkQfuv6\nE+SXfboqEsdMzoMketNnw+xt4dwm4SPcBf+JhR7CwgskQy5Hd9MHWUMd/4DH\nzG+JgXjuFwHqyTJ4RCRH3GaH/Qs15vp7DXrVDbN5fWLhN8CqBO2ufwlSkShn\nYXOSY6GgnorUVc7p2cAAiPgmyDFLpryHtmp0E60Zm+So96jvkLdRcULKwoJQ\nG5f46Xy6N9rllxQjIACdqmuugSAr+XPmkq0yUCuxPJbYYEnwQ5uxvx6zC4B/\nKSmO3v0bf3fC7fzu4M2IaP1k1+qgDr3MAZNECx/UpY5FDBUm2m1ApPsZHD0t\nqmfCzrfbn1YjR/yQOmo/iUj/qZ7M0GRLXDK0BdLcKBvNDjs/j9NdQrHieDt+\nD5dLzzBpmflgcpSl8dY1V/ZvZhMfK8DE9/k0qys+2QHoWYuzKHQ2F4oGbJlD\nYiv1+F4RP3FeFzn7S5EnrmG6RUcQacYK6bIC6saXqJsCaMirKHDWSIFBtMLa\ntluggZI8NLt58HE2lpIVKWaKhg6maUZ4c2hxSBnle+n2LKoiNz5TsgZ/3Vrs\nGyEu\r\n=x3C0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.388b042c7.0_1591191962926_0.6892087295413429","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/theme","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa1ea5a71c982db939bc432b362abbe0417acb21","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.cca1ca84d.0.tgz","fileCount":25,"integrity":"sha512-xKciYbKH+l41nmNNzkAw2oisZ6+lJ2yvazq3A5PmIWbYXcVhSdBonmEmGNnQqS9MEkrun6zE42p8sjsikCFd1g==","signatures":[{"sig":"MEUCIQCiGZ4+Dv/mmmiSsCGlaLmrU4JLK9MDjgZqN1DyrfFScgIgcvzrZGf0iPUmsrm8hIIrXZJe+ZmuotGE4OCL2o9VAGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18mUCRA9TVsSAnZWagAAGfgP/1zt81lRX28+PICZqqfW\n5BVS96DlReTIJTEciRq09m9JBVVT2FM7EYoOLB2Sn05t9BEZHgCZZHR7fPFh\nt6V3YRjnp2nOugTNYFWSDdXopAXrB/RoqFr/HRK4GXFwvWgb/MSKZHWVg5vt\ne5HvtLXcKKm3FXlFs87Qqx8SAKnLf2GZzccLhHZgjDJ2s2lW8a+HXvPYTMLD\nk6WV7VursH36rn9MQ10s+jQe3OGptYRpHvtZ28d5w5NyQvvli5dG8SVCyph9\n87r4Vt447Mo14BWXs+rrOB++uxo2y3vDYadnZfnn+OKigbXobzV4NyYuJHW4\n8D5u2TIMaJPy34N5md6Wu42wCYigaeNt49XvL8ZEiiRozpbQotopA0LgVlma\nSC7T1rzb9dPGqrCWjN31X8dZn0Y9nwOokNLsV3Vp6gW5kurCXKcXB4iWz++4\n29mVLRF8wHCURAzNIiOoq8NcH5AqlG0urWDc7XN5rnFRYl1VvYhf2JSEj9IF\nki47OettnfBMENuuM98g+3VfEofW3j3krwJ83tAx/FQ1on2SZoyNTGXiTZwf\nbRAMZEpiRtRjOsDi0dyluRnk29Z/YUTXwHasUHLGyUz09TttPpP2YWZTqQFX\n27Ax5hWHavsrLZlZTL0ZkKtmlNMIYi7FcVuHhfb6+r4cNWAkZZIdj5vGzm0t\nlFMO\r\n=d28C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.cca1ca84d.0_1591200142863_0.6598743388551624","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/theme","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c87a852f8d1479b1129faaf03f1b51e5e78b94d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":25,"integrity":"sha512-zrGnMkBpUSio7ljju6g5Ir+rpKXIPcfO1y73VaGRB4ocRGmH3lZ9CVqonEjNPWP1gdJYn3dPRoFO5f6tmoxPvg==","signatures":[{"sig":"MEYCIQCSH9bG/zKyRvb8gcpAjn2R74kMxNh3k0yyd8f9xS8yEwIhAOrqMdvE9fGt61TDqIoAVHKQZqwRADSOzIuCYfs0tdF/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/J/CRA9TVsSAnZWagAAGo0QAI2k0hP4RYKoAO1xzIdN\nsGrPL5/1SdkrwwtmFuwOF+n/e4q4w8OuNKDCDzjRn33yUO6f2q3XBIZ4pQta\nUNd+mckyavYFRsRc+iujK2I++YMiSeiH/tEYCT8RdqMBSoyBRRdzUjagSfiF\n+rXAgSa7PJoDLnVRiwXDAyng2uEjFhpxQQd9MX63j7pgIN8epiTDQvSnDD+u\nkmSsB0FIi6u5FiBtdTsxDud1xkmfcquL5VUewI4NsA2Vk0k7ABYY65L/vdTV\nOyWejDE/6qIYL6XsuUKjQl+wKLypcvaY0XaHRpvxJbeLxqsTPWmB4xj+qX7W\nlFVFMLm2F0JlGCYfN/or6NC8YvHXflYDCJ5kFvWN27GMGvDJpXu5cMu9dg/g\nDr0BSOqo6M5xnnLQEfaf5YTLQcbUtDrmg+4WrvDnZcHGJo/I0ZQVxK2YJdPX\ngwjQ2p3mpEPFhe8mr94obcKLZL5iFB7TjrwPhvwPflvW41oIprLt6ZSAKxQ1\nH5QZY1X/tSmSVVjnM5UBAv/Y7IqqZ1nSJQ4s8H+XGclONUG0XEKMq8yv1T1N\n2UfkpPnZGexuEWa0doSN0O4Ho2JE33O5aVrI/TAqJbz4gI5GiQYmPoKONgtd\nWL24xlqg2C181XEM0MSnnJ8IkO63yWeXU65qzsZsyJ5hE3J80nMIscmWqdDe\nqD6y\r\n=Pbi1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.9b0b5f2e0.0_1591210623043_0.3820401892756913","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/theme","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f41e03ba7fae32481ba71a27ba0374511576f91","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.0a7895f4d.0.tgz","fileCount":25,"integrity":"sha512-2NvmogtW1z/Rf7HluSH1GQx3L5M1OKc00+yEBbifEqaKJB3NtDh1vKvl3UcmaKVaC/NNXPdxvd7q3LaPiMxJ8A==","signatures":[{"sig":"MEQCIH3W3nC7/my7P2LULBZuVHHhSiZyVY/qEChA8GP8Mx3UAiBq6jLAGJBPq9QGxJ1Jv6QBxJ3K8RizFhuskkSAQwfuRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BFRCRA9TVsSAnZWagAAnjYP/i3LeWwhdT/mToIA5JuU\nq9umyEK/itb8pq2H7t7zJFl2g4qBhfgAkHuLVJyYCCVhnsqS9oVMtzHXN1S6\nib3ly47aW4R5s9DYZkS6yq8eu/trzEIdiJQVGftERPFXs338aXmBPbRqlvIK\nRAS7VFd+RLy3N464sMVms86s9FwJQJQwOKCXcp1NKVR3Uh0ZO1vsnM23vC7l\nYQhfYG8sxlvhojm/Y++Ky0XSgea96CjmZ+dzL3luPMY5D3zw2fNcNbrQEXiM\nx9iJjWA+dVG6fNaOG+Csz4f42gOyUb8AUkSZO4tuJrosVH+1uQJYfg7rtVhN\nq6v0vMU+sdLOItVOzcddWqBRm9HdxZK3FbT5PHqVM7XuALlDQo5AWG/pW6OW\nKqBae8NsjQsZI2RR0s5t+3J0hRabKi0QObVXkVDNUiOOBzVj3xBgKLXjzKWS\nBSkC1gaKNZm0KxKWnqQTpJw3QBPPPxE8Z3KR7L0fE0GmoGx3NijiMw0U10f9\nQ+fvbhffmK36+gR2ZI5Mtj3J3kHHIjnmbpBUtFcH04Br/GmfmKNcgooXdg9h\nzuQkhxsDnoEpRqUUdqur085SXu7a5yg0KTBqayUE4JgB3B0JbmegWWiU1GoA\nUuw35ML8lWiETPec/9jZS5Kclb5hBR6oOBfWwXsB3eEmeRYmH3JzbE1cjsgw\nQCg7\r\n=5uXk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.0a7895f4d.0_1591218513002_0.3853157529667728","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/theme","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.7461aad68.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b50dd74a09b1afd76956e30e22a6165539814be2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.7461aad68.0.tgz","fileCount":25,"integrity":"sha512-IeatFACDaSJOqxtMVZd2oN5gV59S4lgAruxs5tM69ECYBV9kaV98k/s5U+ztF0gpuan4SI9cE/WeyKF91C6Log==","signatures":[{"sig":"MEUCIBbScpXlAo4st8jYhwzOtCLbAWia/HlTidsI4A3TC8mUAiEAsXvQrB4lfAl00HvSayGXGL80mExsOYDMZ6RMSoZdJm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CAlCRA9TVsSAnZWagAAEa4P/2YEW7Oh316HRFuRdlsC\nEICfSWORJso47n37WPZrUmNVnp7a+x87uhF5KGm2F4DP5nEdIN4N13Alowkj\n7Q/NZrdPnaxtezCvPmiOvzvNmju7aJr1X1en2486wSxwfNOzvjlWGQSfzUfy\nlvqc5d1NORSQW9+5LHVCo58fq/DfRbwYOjilqNO2473pJUrPSWnskUMK5x17\nfh0zoUJtp9sRRPIDIpp1kVDztSV65Lz2H8Q7UsVFh/z8dl6LAo2vSagEo8g1\ncYiIYxPTsGmUFYPZvkGF/uMVf2yHN2VjHg43iNE3wD1O7/fkyITfV4vVqlar\nWRWCvXVKNhUUSIH2eXVNEoIqkAUN5dV996RVs27R5kgOft/9Gl+3lbe+pNAd\nmvQwuBCWCTApDbVU17tlprmX5GxfX+GB+a0RlMYoZWZ64C4YDN+HHFTGPjRC\n2GyxkwAP2TZbcD4T+gwyEHukjLUsFyxx76OtdLIWALsKdXW8jXprFaLQK39v\n9+1ISg75Rymm7ME1NzsfpSqjynZ7xb8MkK9JZlc1gZ7MuOFz/JYLr0+tQfVV\nwJztm98T6Bf2fZtInohiCoMp02edu3yM7ugeVlr3QAMZTwkD8g2wFiaJ4RMC\nNndPMacoO01yj3KnLIhee0EIPMWHviatEL1SruEfQ/OzcCHb9MdXhqF+e7qf\n1fmF\r\n=nFb+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.7461aad68.0_1591222308908_0.6325772502015372","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/theme","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9584f861f54dfc89d7af7ff33dfeb02b011a0bb2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":25,"integrity":"sha512-hJolVSbM5QFNUVoHRn/IDd+d5R56/Ke7up+qeJFVXw6vnhGt/99+Twl2vj0saZPfWmoJ26mTxxo8Fwzsqteieg==","signatures":[{"sig":"MEQCIFFQykTUhxCtFOpMzxerSmbbzyiB8+QMptEHg3KOqub+AiBvqBUzsgYIe43yakp6julpzoWJd0I45217uDGAUU+RYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WP1CRA9TVsSAnZWagAAfYMP+wdas4jumnmv8vFI1gpf\ndfwRoJ9MTmPQ6V1pjPUCa24X5IqpEmf58GuRdnzVrEAbO0MeraOTWCZUea0e\nUmpKWrR2sZCAhT0sg2XMmC1f0wRySoP8sndPnW1pCpzLHnqPQ/O+Dt/dkB0h\nV914AXBA+cIEA/g/CkRGI/b4tVyPW7SjE7a/LHd4rnZ6QJDJ/ef2RJNroSrs\nMNQIiIQ+Q2UwMX/1fEXFMmc1seQNE79BnQ1PjBMGub1lIRM/0oGBZE9H/C6w\nzw9hyvHv4lhWusJ2B7iFrr43yofG9PZP2K/fnAQiXheFDJobmcTbuduBGiO2\ncqCu+TBTquNOeTZqUrfycP6wTSjOXfK6YTmWUlfdwrZaGnn9ltkqvebuv0QV\n4hDqvabHIu2LkT7tJghvGmUwSCAeVLKkEm0kxpJe1d6gHuxfJG6nJpI/Syby\n6m/A7MraZvecK2LuBEXXeq1/srAuq02zDHSXiFYk7w3qQPR/5LXeQZJ1mN8T\njGB+LGZY0WfzGEW9HEi/3N4WjK2zmuquEz26plfiWtnj7ArSrBJk9m7GCv+l\n8e8Ud4cMlMcL8uLh0bjk7GssrvddBt+yBAwowYj2MI3MoyyQffk0jwkYlwHZ\naE2tEpV9eEFiEK1cfBz5zwqy0JByMF0EOt76iFa2BDNg47mBwiOgAVkbJXdZ\nLFNn\r\n=/7wY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.a0dc2b5c4.0_1591305202612_0.5691955280781831","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/theme","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1af3438715fd777a494b79cacd535520e61a6d96","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.2b420c5b3.0.tgz","fileCount":25,"integrity":"sha512-fJIE//8xPLkKANNgjrajLuShQkVyXTQWlxPdLXfW4ifR2Nx7TTfVwd1WSD9pI3xgK8xgcOf7Fk1TslAXX0XOWA==","signatures":[{"sig":"MEYCIQCsdZax71ypr0zjpIN3h6qCy2IF7w0++gN1WLpG+/nVzwIhAK4ldJau4a22S6J6FyBOi1NVAwB7Y95aHSnaVNvsVXpd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mPACRA9TVsSAnZWagAAiPsP+gOSc1IOJCOr1FdVO4Xg\n2q6nmlXq003UhIvqGhJZuBFMkK5xpPqUUxA7WkE2PyB4vg/mTik3i2CX4X+v\nMceDLylhJqabPxWmCII0hYOP5QEKq2aIXNC75XfkNDpDid1hnGCGTYuPoFLu\nAOb+RIsZiAtXsraUhks54dkDWSULJpRZZUJORvM9fjhThiINu9+kpdPxhzzu\ntKXcUMqInEn5dG0qVg9rMu8dMO3XicjRmA92S+wGl+tMypV0UPSLCl0p9h4Z\nU7bYzGSMe9wfJv2NNL/R6Wv3CTl5My+0DNICmbjQSKj15BsJkADt8cOvimWX\nMNAAHBtJUwOw9b0qzmuFlMo4/5THqcrN0hWcu7S3Ym79jVdPgHQcbqdzoGYc\nb0OuABbjGquCV/lbmlBNqJYlYYHT/RlTKo1Y7zJiWrlHucijysC03R8E3/HF\nyAvgY0IOOTsYdm6gtjTWGbGHfUwv4VCBY5QkridL1SJxWbg1gxF1YT7Azp9A\n0efbXMoHEc/MQBM1VTClIAk1InrEFdSYfcrLIfypm2zWsiSAwzfqlLaostid\nJii+Dkv3nL9yOi33N9TGBuOYq3YXh8e5xBdHo1Dgb1tajmxJBZIl3sj5TMZ9\nzj4MgrLiDHQ/aDyJ6hIWooiBJ+AiaKFj6wpxFpbaCFCL1W3Y63xHgCDlf9mJ\n70vF\r\n=wIGT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.2b420c5b3.0_1591632832298_0.19787602051474984","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/theme","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39243a335fca82cdef4aa1c37afdda1bf32bcac3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.8fa22aacc.0.tgz","fileCount":25,"integrity":"sha512-9443EiBUoHYIC8cJYJoO40ze20rUGwZfv/C5ouBtLCGb0Qb4YracCmlXUjMX2wYnUhXpfeZrdQctaPoGGoeLHA==","signatures":[{"sig":"MEUCID9SY4REn/aakJ+OVGop6mGUUbOBZHJBw7Am2VLqghWxAiEA3fpsmSydFrpH9X2u7O83Xy5Smfp4e4cSusHEA7JhKOw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n2WCRA9TVsSAnZWagAAGBMQAJApme1DxwYsY6fRbyKr\n3XrN5vv5eNDNsw9j1NyJbJ4b1+eRI7OphT9agBVcoc2DHQVXAD+/uOiN/pZG\nmU7v0rWv8Q/spFTgVFHnmqUCyVqPnWL84mTs7mGVmk/LkcSDCAQ8JKYxtlYS\noXHwRDMXao41gkDmH3KSqXy78QiUeOfFhUQrUotHr7YISrbZ1hlpTBZQh7t0\nxC0MgfJ2nf/jpCcnQXA2ebb2m+AwxpPMcQMHrS0Lyad7NNgR9WcIpNMM/iiM\nT7GRhgCo3GSj49eHGvR4pK7+zBpNYYZDYWrfVCZksS3UVc2MHRUPbZn1FHVF\nwh8nvm873YSb0v8g7jHoHsbEUKkNg7dzFnFoGDRpQPmmjPEYrn7NnJDQvyso\nFb7C3HdJGi9d76WA4gC3Q4cZxinMGrG4cVXANFvSArjrVKa9WUVk1k7skjWX\nA3w/WuU6bPuSK/PcEPLQ2LRU2YJ3qLruQhRrMCvJKhkRV+97sLmvDW5OMmOK\nmffGqrU6LqSQrN2FV4PCGUYNgrlKcoeSp1iAm7XrqIUifW3CeLx8SeDQLu4P\n3/iS/FcDaYrEDrG08693FfzJbFTb0saICjKoUz4w4pcfZwz79njBTL8g5ZDQ\nd7Pb+tEJfr5vSkINpdzLSpA8pGMdJYfoXDwwZyIA5CdVSY5rmonlX62ps5Tm\nwzJI\r\n=RX5A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.8fa22aacc.0_1591639446186_0.5842900842890935","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/theme","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89a833c22175e100bdfcbf136090639c2fc1d4f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":25,"integrity":"sha512-UnMiBgXLzd/INudF+tdNFGkXf2pNLB5RLy9E3SZ3Ez3VvcTj+EyAGxpQytIKtYEORO9mqeV1Lv6LYoVCQYsjuQ==","signatures":[{"sig":"MEUCIQCcAyNTbUglMwxIaZ+KLnYvSRoYn1I7KR95ULhs/iHoxAIgJOpTrfYvspELaoq55n8MgJp7Kuc5KwseIt4pppuy5nw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3obkCRA9TVsSAnZWagAAPCwP/1wmO2d8m9HWQLnWczrU\nv8EZlkUO/NNejOz/3rduf0SPYAqpzeF61vzluNONe9GmDA+sdrCDwVgdFZp7\n8UgXMbGSkLN8wCm1450BKHSGngVa4Ikh+ITL/VIiNNkrRpLD0FEEJg8BXkY/\nvoJHucgaHnvGtu1V/IB8kOu3/4Od6rtcikifMu3whOqHu8fz4uzMOR+Dn9/g\n6FN0xZw2UJ0ysNpiD0KOAcQ9fzqRX6mtjCsMDHpeioq2jHrMQ35+z5wbVu9D\nOhgHgE4qTQto6l98WyDgEeUPFfsM+BL3k3tjvRmmfZAjyR3+KswOsyDUueZF\nXyM9hs8pN6xQCcPNtM8YgLrvBHw5l9H+ztA6C1QlgirbJx0cGL9CwcKESQJy\noCCCfJPTl2tw1quFIttTNwYgzT/N3NdXkQfPp1kciu5Eo3GSgzmstnY2yxCF\nGzOefizdaWmHMqefp1qU552vhyuG5Pm3GxApRqm4IQVeqyPQ2o9q1zec6j9d\nR/O1G4l5B37bT2c3AQm/3/16yvlUb8A3yrNvKJX0paoAOlDO7JPE+V3sRz62\njz2eA5OxPs0TAYV7RVb1HhlHPz6bSvQZ2gPLoseNRBQCfPy/r2M+J84DO37a\nTW/Mndnm6jIZqhmjwAROCpMKcDmDuckX9YKHRrJVjdKRjndGiFysIMmBWH8M\nhacv\r\n=G4Fv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.21c4e4ed8.0_1591641827549_0.7193067285846861","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/theme","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.dfde46516.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f6f8dd295941124a31383c33c2da034c108057f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.dfde46516.0.tgz","fileCount":25,"integrity":"sha512-AC4HPGgdp7v46gmzuUFIIpV/UwZzJOFLzxw26MobNGA8TKaP1HkN3TdBf+sQIWBvymGJWlO9AlYc3fKOKF6VCQ==","signatures":[{"sig":"MEUCIQCUCL0J4WhMV+FcwNrVPuRHTdb3Nt3W4nrh7yjuKf7nLAIgVYzB6HvKBFJ0Eg0q7oSwBuyK8eWLBNXxUrKLZWaqhto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pReCRA9TVsSAnZWagAAgcgQAIqY6eOPEWS720EatiAp\nDhml8XOUlAv82CjRvTciCtfgKYPlCZtOWWoNXGQpruzwh766sTmyKfgMCyL5\nUoUxhCBJndBDJKdLOXMzf6NTCVAZZ4QvyJTIUTvxYTM5QOPrVoECxyN36Imo\nWkEcAbcwST8xCEQEDnJB2Q16qQgDisOoNuJG20Ksu/2uaALkehla9ZtFxU3P\nBgYIrFYb6c2hxLkeA6RsxghCDkG6bVm64uqA+bfvIcV5DO9+1sEe/83fqW2/\n4e+CJpWijMfaK0OIeADXy2n6IGAt4jIA3zz7eGpUuUY8hUNn5UPEhY3OOIdS\nNaQIYPtP/6nND0Dd4lKoGc4gvTxq1p0I4odVBeMT+EjcHz++04X86MeWDF5p\nuTsJ0wYyvOc3MphH9d8rP8CLYCFE7eBYOUIZstO274yt+y8T11XXyTCPefP8\noP7KbMt+1PF1JHxbAlSPgdQqWY0VcfO6Wlz80pAGqsp9kFYwoppSbnASQHN/\nuQLru+OP5mEvX/QWYa7K/SS/qGND5T5BRNN1ec1V/+m/b5b3cxvz+E6/vGty\nr629XtL952Hd7v+NEAVcL0OLMxHzqGxZ9mxy/MPReEv0YOT8Whi7Wy164dH6\nSZf6wOBqSXMg7drDJLnx5p2ccUid8fDnd1S1NDVWX1D9+YVV5OrBem7z3ghS\ntnyx\r\n=oWDy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.dfde46516.0_1591645278029_0.963479982364587","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/theme","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db3f14ef3b0ac21f54869d16a31ca38d5b463ad3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.05cc5c206.0.tgz","fileCount":25,"integrity":"sha512-EY8bxhMqL6KJaqSpWCM7KlBglDtE4rRkpqVvRa1gNo0kjW0L0+ueckWM67XIF6U4BcvZXTRe25RPrEVj0fUYjA==","signatures":[{"sig":"MEYCIQCJl5dNsXWCnlU2hnqKagVvwx5wMPDb7m0WTYzHE8756AIhALbvLlng7roxwBb9OB/kSjy7NDMmFtoXim7qYt3totIa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qXwCRA9TVsSAnZWagAAKdgP/RaSxxQ/F3XoySLch5ub\n3eqNGKH0KRgxL9UxxBdkvM/wd5cDvNjOXEaMb+5IykV0o+acs4ENdcdiv9mo\nFOGpjUWGUlL0y15gBaMVx/HulwleTUoh+sV3G6pe5qYsfyDm6G7JpesidSIQ\ni0STmAThcL+MjJz2an3w3apOHyPYN+CXKKDblgxzqDYBgWlVXoOBAWDtviuw\n3Q74Ta2aD/HWtg4TVCfkSA3fn1ndNiBaUy0GLkxugYT5VzeDrnX7YiCCKVKV\nXEbj0RsZq6Fop4ea86WHMFS7vqeknH1fR0l9K0zUb2S5RIIpXUbAo/8twnPU\n1Jft6TL2zOQjkrpwuseRGZhXq6LaqyWzDhC3dmeo2J+YkhbxP03wyUVeEvfb\n5XR9UDaHHKdatYae9Fvr4KrcCtGcKoAORolJZarxGuXTeiMwrpW+fkWoUh87\naa+g6hWmBvgfngfMkkbSQy8njSiU2A2TQw4ConAhSR/4D57Jm8J/FB+Aihda\nGBjZxbF4QpGat+OSXOS99rdScQ35TW0+jVn+u9Xc6WfWJ67J64S7WSuEQ95D\ncT94zzCME3vbMqQbztSKIYVDmeHzSkhYRgzsL9fd82nux3wf0Yc0t8xOMJAU\nXJYEDG1DE8MtO9s1p0CT3TZ+s9vCnRbCfbFf1ndE9bOiN28kfdQ3w1nmZaJU\nhhSj\r\n=YRXv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.05cc5c206.0_1591649775962_0.04624633599811623","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/theme","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12350f3ebb6ad4370ec4a5bcca52d98153aeb83d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.3ee488f1c.0.tgz","fileCount":25,"integrity":"sha512-cI/N//xEtdy6WJGrAVUiJ8x9lfDfl3qmpIt21i8cjjeS5UWeRKzuUmYlf9N9XQmSURYh8YS9EsMknQvSItNmrw==","signatures":[{"sig":"MEYCIQDniAGaTs0zg9hxEYlKs53wnGA2D05RuOp4d05HA2VhiwIhAKd4/TG9uivXXg8rhRDAbj3eVDmlnPgedwaESksrhRW2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36JoCRA9TVsSAnZWagAAIVMP/0HEQVAtFNgZ1xZYJ91c\niELUZ07OeafgwSjnr0seqeUomdwOwg2PsLvMjStWaJxZ2rSdwzaotd39c8Vd\nXXb6XuKEO+t3vcRKpkR9C8ZNth88MokkjdFCOsz32s3Noo773TcQ3ij/UUQR\nhjEVmq72K31d9X9mxwW2T7fuWDfHMhyitLTue+94frEOu/FFRYAzVUVSUyBI\n/6azRTXfWRqOd9sJjPT3ilSmsZGC5PkmUPb+aVF9eqtwHDeUa1lnpfaFeuAh\nj+Q8dV2YR7EoXfwhJjr5TRwImjMPPh4iALzgEcIxwX7invB+7xW2vKbRxSZ6\nGABime45PPbmnCvdLYi+rqmdNIHKNhpww8CKskXDZDX3Kx9oHQB0ZGmwLEzr\nR+1iWv6oDoIzq11hWnjLp8Re2E6+UCXMDFUYo5YMmbyc2r+lz97JSmt84UMV\ndLsDBTfv2vkMmAG1wUP2wbGdnlC8dPeyylOeRFWpdyVp6iaXEYxKztaEg2ld\nslFWjoyv4fhu1N/p0u26EyyX7poJp43x9tj/+Ftyt4FFGydR31paBehEGqyO\nQGLQgi+ICox2bjD4QgO3KSyFQJ9fL5yLt6jYWPoQANXYY/nMV8YRfLbbJQHY\nD0/qa3bE6UejFlVpOoL630+grM6JFCoQBV2WgXzvBXXHySLyZAeZ1QEwI5BV\n4VDF\r\n=l6sw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.3ee488f1c.0_1591714408097_0.0015169832133254957","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/theme","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0744df28790d1b848f0ae8429e07600ffdaeb041","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.b83d720ee.0.tgz","fileCount":25,"integrity":"sha512-zHB7cuUJ7vZlcXGjVCPhCYw530qOwGGq0qtV4oBKWUqd8GA6OnCcU/KL29iVug/aew9FXLyJ0I7FCydhDhnR9A==","signatures":[{"sig":"MEYCIQCR9erEiz31p7V74M6Pz1qVDcBqTtbQjWm8gC+rQg563QIhAJFFiqQFYgienMytQyOY3/ja44kN2RUdfSYPV/Mdm9xg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38YcCRA9TVsSAnZWagAAPAsP/3KwJKGFgDybTO+jslXl\nT7vSqq36hyfiPJOWhrzKtDhJ/4SzfYWKdDEZ1AISP+hPU/IdBKdJSq4dTKkK\nmP8tSvtCRUp12pcnK9BvQhylob/1lcpmAeZL0xq1Te4DWalhytP/3W0mR9Co\nwtaPOCo9cYq9pimfZfSAc+3J80yS0G/a4Yi+LBboLt9Ifj/o3AKHVXr5ooJU\nxNM0T0wrWX45PWyBXxL2LuHNPVwjRVS7oKSYVCrrbSn9z7n8sMS07Ul+2vG8\nx+BRfwM7unq1XrTND0ilS5OFnqCvKdAZ+xFtLNK1VntXSPPx9fl9mh0w366f\niDVdbjqP9NwD2xBWjanbiQu5rqKE4A/to7bxua42JJsjeS7hpdt8N3CGxW7H\nBevn9AG7+PmGx1fiUDZ1dmLfBU4mFJJMrsL4+HoYotT7RyIVtrwMZpRP78b4\nHjzo90VcycnJBBtqrRCPdrgbjOcbSsk01Ew4yTfJBNDH6cNgcYST8owXOPZe\nKu6aoFRB0nWuMGmCviwqHw4cLFzgoEzcmjVD9J9ecsRPfejP+Dd1ZvyA2kgz\nozK0GIFOzddHlQN9aJSXeQ5cCrW+DWLF4hrNeWRb9dveLuqUaBcEMY+bfxA8\nbh5ftYTVc9AI0HqtQ9gLqgWS5a2+PUzHb8ulUD7u927AlBO4f45CmgGoqjo7\nOozc\r\n=N4Ph\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.b83d720ee.0_1591723547627_0.0306564746048561","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/theme","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87ade673ebfd21fee1273cc282d091543d5b07bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.afb1c11a9.0.tgz","fileCount":25,"integrity":"sha512-QR4ZKhymgJN5WW2CvjlkF8VN7PQLMn+ysaHxq1MBbkFFuRbvPZnMpifuk8YWY7dZjaJ5qp/jn5AuV/z4ZveXlQ==","signatures":[{"sig":"MEQCICrFsFC14s5ikrymWRFUFFeYXpmDjkp6yuZNLflenGCaAiBwBG416Mse1J0o3djdgg8wkk7N5S8WPnsM6NnOcUbIqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+3/CRA9TVsSAnZWagAA65YQAI4lJVeNDNhPh8i5Go4U\nyWYowKIpErBqxpwmLdMUJY2w5uJc0C1Lv4nq6uO169aTSVoz4hvWpdLxiIxm\nZ6YdL29iPoPROtPGVuk6zB6MR2A2fO3XDeqEmQcnObsB9jVRYBuH0T44MhhK\nBK22d6BLcSVGJrJNrezW5STh8zoB8qul/cbcvDzh/b66M2e2sYpD7fVoWbuG\n1u3X1QVlwBZpTWMNpbXkXEFHkYUTPSyE1kY862dfwWaPjvrtquAJbGExfSO/\nwPolRGZWWZKCUX0JR+oRCKvwVmii9lfuoJ0xquQviXHs4J4SV0UkzqkF7rl0\n1XqrwZbU5EDW81KlMK6hmij85U1H6SAzQ/ScXkZ6wszK973VjCBqKL7zkmR/\n/DPm7WGpNEMNCTaRdPsG4SuXTCWqMveQqt71Bcv9NX93HdXw2gBooYyCU6w7\n2bQFfNzHCvQxo3HaKDBCqbg24yMChZF9ACZbcPD7ge/D9MnMsdFVjLyoZF/M\nebzIMYd/9RxFEjhyP/5Mu98YyDRSDFw0L+w/2lnw0XmMLTmD5oCMlvGHrkbO\njtMWns5w/O7yiWiCyf7YbBKMhquSluXb4Dx0kjM+nya0Lbxx7p1f8kGFabwZ\nmADMXG+ji6pfuM47B/GcNHS1nmH4zl8eWskpnH7ILxw7D9jyl5U6Lq8vWXWI\nIK1H\r\n=LYOW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.afb1c11a9.0_1591733759087_0.02634682187526094","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/theme","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75b7a0826160ac6f0b39dc2b069063f7652cc01a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.39e6f71e2.0.tgz","fileCount":25,"integrity":"sha512-mZKgWsmv+qmlxZh+2EJ/iVT74qV9aha19kX7jvgv461bXKKsA4C4rDdRLjDEuaDZFcqGfhpnb6UObI/hvQLQCA==","signatures":[{"sig":"MEUCIFbV+chVqSnpiUY6CkKD2PFX7ui7ymdSQKrD0+LCtBGzAiEA70M8z2c3tajL6s06dWZjNmQO2gxpCF2uL4akY3D94bc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B2bCRA9TVsSAnZWagAATj4P/0K0JhSQSSOq5bCY/4n1\nasTSWreZ8KzXDS/DoWizg6CSCsCWU9KRDLYfjF+Wysjx+yyvff4MyU5Cu3jX\nFuMYOklUN2JUJ+2zliD82bjTibV9GPe/6Ln7yflwLxciwO/ohWE6XSOemd/8\nzS3Kk0NVSnUzp6ASlVoUptA27NR977fhwtogd55dObx88dUfjOnqr1cjxLo+\nz95fxaPA+8pSU+lCyfJBF7XihJpJzHe5lzVE9sSu8JHk6ywhQ84MAVK9Kaun\ne3RmXvNFJc/AESj+nSsluAIlXnangqg2BnO4bPHoiKXcGs7HL3cqjfkqDdaK\n9fD1zHFhnMwshpvjoBwoPIiqH+zAzKnBvYMiNIbRVu3Bm3eOpzxsHKveVy/3\nzf6cz1fMcca7RGlESe0HN+RYPuYJCVglLkWaQ9tDTeoDbwayug10yhnzNqTy\nmQer8X/J0PUzGBDagR22UBp7Njl655IGD9eaM75oP/t+56YTQsj0loBhMweO\naqS5f+5dMU/hl8O/VzLX5y5NQsbblWNFKEFXtOdJKFmwuS+n15udLMWHs88+\n8BY5RRSOt+hpRRu8+KVNo4qbG1/8GXiZrBVzEaRjRqSQePq2k4s1uZSABrIm\nkxUQp8rgUgfk/3yJuyGuFK1UJFpYKuJwaBMPMrw2vqUb4+tdwSoyFpZEjZLe\nEHYh\r\n=GL9h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.39e6f71e2.0_1591745947156_0.6538438059306637","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/theme","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a0395ff2cd9e9a38dcf0ac4517a5193d21dafbc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":25,"integrity":"sha512-IHkz9bYF9D8ulDC96NaH/DWT2VMD3oZiZLDgwpOlaefHiNjS7Z3LI/3aKz0xBP6Lcc/lVQeyj8AOBont4ZFiPA==","signatures":[{"sig":"MEQCIHaQPWytO+2O5DKna0XJroLWvZkA18R3jZwLFW7kviy8AiBbz77DuzsRfuqc1riJXchOWIsTkVnKa6225F1DPr6zDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m25CRA9TVsSAnZWagAAtT4P/iCek2xc3wDqw4rRVnNb\nkEvbLFTIV72QD4TBwVNAcq8YwzpcPrCitfqSd8wNCPa39cGArcdbNYxMzyNf\nNbUvYb9yNThpve3Px2SYz4Vr7II34aaumCmaZeWznLaltO7FEwqdPxdCsYdi\nXSJVYrcCcDsrIpi08/tvdBJkAiDgUH38H6LEGz7TeyWmdB4c0DAiKkRKohoY\n+PJKSZhpWH7xkL3RXUOFGqC9UhU4BlO7hetQUj6LtjfBQ9uhXNiXC/ay8wPc\nYcM0pNgqbq31JQ/sPzV4wfHxfKii8ovKZKjv4WVvzlXf8ZIMUxWhWuZEXIwG\nS9+HKjEtQ9W/dhiSTOmPC6nI7kzbZCshOxNVcQubCVXSUutgXwpeg9YCrJUy\n9SzLiQVR09ivcx888XYeTobhDlShovc/PJdpqQYwy/4ZNZJz9vByDHtGcT7O\nMso1GJf/PZErtH/ehfI42yj+ssCeI/ClPVxnRJ67UliPaiVATP9H7PvffWCa\nn0rZds+kNSd56IYw2whtviPwitbFyqkNU9vn1eRXUebbHtHge8hBIGhr23Bs\nUDBXzChVTxj25xg/xRwasoXAVk/HB5aEtsMrLacaETjbQ4trjrPQ0VUX7DZp\nNw95izGPXaxJqo0myT5ozMkTLM/KLY4Vzz9cDWgRCT38PsEVcM1qS/L0gonF\nQT3q\r\n=eRij\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.d4c66dc7d.0_1591897528759_0.6331109238584256","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/theme","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"078b3c80ba27329d34adbfbe3f6f82d73f61464c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.be4a19f9f.0.tgz","fileCount":25,"integrity":"sha512-MibFxP1BV0H+Xd0eQJVbt5Xi2KeXRServjOMEMtOXuiv+n6ZrGcWMKfaGEIFZEuhS8P3Zs0ZbjQa0rHoskjKsA==","signatures":[{"sig":"MEYCIQD1rwSwagIs3JeegOZoRqYT+d4bMC24Tz8V5cTH3BuC8gIhAO/bJJJlEFBrqces4pplJmgcW9FOIk2EBsVGjOFn3/wP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xuvCRA9TVsSAnZWagAAi3UP/i+h2OLd//zOV8D8olM9\n1kQud15C9Oa6+pxVwV6YavVynyFvFnXeQaq+oYUKGmtPHGrFtNztplmzTOAT\nflWv87dacA+L+dnKc7gOCirI/ynzdZO7uKDKoNF6DrlBh+5uG7++KSkNwFlm\n8FiOYe66GwZHiKi/SZt5JuX2Pkysh3JO6wpSdEW06w1tBB/atYCmpdR0cPKy\nj9+EDGhSnzgbAd2j/9MlLNkJblAgzIGR9kzVfwaHilvnIWgX8wjhs8NCzY1S\n1ztlWzI13etFBWSl+bTWyOo4mc36iuZlKAcFC9ar9h9zv1c6XKV4pH243joU\nBpzjJapXVl2wcNBw0XyWO/+RbyLOfy44o7NTAvDEWSWmYr84FkWFlv2v/JFZ\n9ZfTxpmiZG0X4OKEAQ027ZyoEnSvN1PnfBgGLB5ZjjNZR9RcqVG8OXYZTDap\n+S1Ddi02NhTMvHPKIV40+/8mWBjpM+t17wmOOsk930noKwat10x853Y/zVaV\nZ5+WYG6Fozejvj8aE0JUA/XkY6a7Z60dybFm5X/P/FcLbFsBmaYPK4fA9HXY\nDnvppcbZ74ZIXzTv3fpAq2XlX9Ups6twfqSi36nVvyj/Yr7AXThrarVt8G4N\npAsF9IOcru6Jf5hdiPTv3GcryifaerA6gsJiHrtQw1hUf3mHJuRs/G0xZaN6\n0nOX\r\n=e0WC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.be4a19f9f.0_1591942062895_0.6250962673410219","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/theme","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06685ebd042dc3fc254e40228796e459f82ccf0b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.a6ac8f629.0.tgz","fileCount":25,"integrity":"sha512-e9gJE6SAmiQXcmUwARvVwp6Mgh7Wc0I44R2uwLrTIkF7tx4KWD24GQmAakI41VNTYuqqBRc/PYC2WHUa3JOOfA==","signatures":[{"sig":"MEYCIQDI298+q2ulhq+wyPzX4HN1a2vlco2evz5wSsJPd64VvAIhAKvQIji+gMSeFwrQRNleNQd55q0tzZQd2LnIUzy9J7WN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+hmCRA9TVsSAnZWagAAHuMQAJ2muxzN7Rx7H+Siz5Ey\nKpdH3ZyVH4FCn3ADVN0sqrPcSl/oR7kPR+MOxRIuqmw0M7GfMtyJRe6h0ynl\nkXhAbV+itThe72IuBgfZRlIXN0dgEIqERrzoli+jvkGWR8larZPrC7gOxV67\nKKpeIkqZ3DMyAcftL++l1sJE1ZNn6tZw55oogx3w6nnGtIgphhf51nY0MLWJ\nffEoyJmqFW+qshxjA/3AEB2JFFhe6BVwTv7i3zK9tdo5+0x/mr2RNgtKKBSc\nvYEVCkO0o14uZpYjn8i5Ua0AdwicSnWleHj8lSp3RV85D58X8qs8+QvwXa+n\nZARzmv6X0PTbosXHPhTGdugeXkFlyv+E8jFAsIbIo/kIp0PcxVYuskieWYFx\nsAHOPUoSr4aEVaiMeK3lbrGeNHkqDOZwsnzNOYHUpccVmdV6gx6kZVY2aqaF\nBqAM8RpKQiRTFEZdltA8NsCoD9YSVq0aUMij0M2A0+Z259rYO0JMmhCqjdyt\n72tgUJxCmpqAfeYUQHbZIzxCEyG9Wh7sh9Pnjb6sG69Tn5wL4dC9fbUqYQYz\ntPgjLmlX8efc739PVtZdM5VpFhOeXblavCrEhaBthr9zZc38OA6EnYPcunZH\nMgLU73b/RaFJmIILfT8pLOxM+TRYgIfIQVAQ2B5eNsNQVDU1gpP+hNCQh3yz\nbLSt\r\n=9Wvo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.a6ac8f629.0_1592256614440_0.7240087161194126","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/theme","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.9833dc287.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b613a381d20acbf28aab720a692b30988d9e6af4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.9833dc287.0.tgz","fileCount":25,"integrity":"sha512-KU9tvFtVnN5YQOp/tPWyCtJ9yTDisH9SjAetc8X4fhSKCuPZr/HrgM+h2d5Tf/oBcvKXVvysbm6PKzwNbxp39w==","signatures":[{"sig":"MEQCIGIbDx9Zy2hd2F3rOtG/ZncTQEVWDiGRaDbFm+msw1kIAiBSC9tSYFVkPS/D75wNDtanMqP1aOVB9b/nZjBKdW5vQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SIiCRA9TVsSAnZWagAAwnUP/2znBqJf8KgPWU9mAAog\nlJNb0W1Zr8E8j5MraEoafOtlFBTOwssaXhGctNjuKF5TQr2BlVjzRJkEaVEA\nDWrO/MvlsQyE8Z2tGCp0SV60Xm1l4n5EK3OLIqs4LSQLlMOPRoRRhUc9Howy\nYVc//IPRGjXgsiOQtY1zeU0V/Ajvbrj8afSs8ovX8vHw81toD+JlgYzAuww8\nzzEgaqhTURyGdsYH+MORTwH0kJr14YOrEPW+LKolmQOqNydV7v0Z/gSHDq6p\n9yTt8fgJ8Fxe/KqBEKY/560hYPgnw/1mdsXsz5dc4Isn6zeoccyiaUL7SErO\n1VJUQwYZ/0Q/pKiGI9tCXAxtNx5sYeuhU5x0XGdb0o6gFuxbz7mubYXE495x\nOaAfXmgn7xesMxljJB4PN0DN3PQLUbMi/+Zxhc1ovi9te4BKcI3XDpUuDDAg\nyqRfczYyXuWF3/Sumjv/bqWEBAVMnhOw4umab/36tR7jsX0jpJYDjDK3Ydj2\nSMXlBEvwPdpfXeSfvP0d3NvidqwQ7xqbn8XWPZCRn4YcW+ThxOZlfsiUhfGV\nbBzIMArr2imRMNIEedgQWNZtpfO+FoD1REWD9p0BgMcq2qMZAIuCNqzQJ5ig\nMPmOoS9HolbBiX6wOGFKgokI4BjJrGPPyAVTLGhqsHa0aeWG8JeeHM9bKwHr\n6UUv\r\n=c+RQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.9833dc287.0_1592336929575_0.30688189719438186","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/theme","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaf6391674828bfa6b2efcff5b01876bea3e9331","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.3aa33998e.0.tgz","fileCount":25,"integrity":"sha512-NaPIXtucXp6x3vadoaW8XJhge1ZfXRZ29TStXyLfdskq9b3ErYqZWlFEzUOaTwWR/r0QNw3/YfVa82ctS8RUTQ==","signatures":[{"sig":"MEUCIHTDLD03qlEn91qVA1Bvb4iLrmIoS+9442G4r0KWm32GAiEAr4N5Gb2Hr/bXA9P/iQ/y+8bqyXWD2372yitbjV4MXME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SmTCRA9TVsSAnZWagAAyhsP/0Is52GUhfCESTDqm/np\nY+b3JJ+jS8mvufS4mXtGRaUIO71IeEw3lW7AKUEHSrPgYdlxTQ+tlokhtlqZ\ntdTHPi0z8JzW+FZaZmNHtBj5WNJw4HJ9YRq4UWQ88hZPnly1nFHha+B13ZZm\nYZxazRxl0Xf6J+k9DoVJBgKZL++BeIui/MrrLeAn57E/tFf/rb3axv7I47en\nTNU/tFbpldJGjDz+UH4Iq/Td7enCSW1QCto+/K6ZTOzjqV6zJctT+XF3Ee4A\n9c8DqEafznc+XFWVGncNLvXROEX6rPN2Bju7Umdey9P9yWBshkhxiIX/nj2i\nfq9LjlzIfttJ05GiTUtituMuCKu4QvXCnL6L1pYPPe2Ylj64RcxX1h8xfLKO\n3NKYqB5TCP38Z3EzDXl2RySYJn1ct6bROKq7ZOLcBgx4PHnnJFkHDz+fFgry\nPwzAQ9OKM40liPApsq7hJr+jxxqXExBcU+n8+Dw1sCjeCDlMuq3JF7mb6tJU\nTuJSP2yy0DhqVqmEM+HnheO4p6dypoQTrVjw2BY+HMJR3gQuZA+CX9IJOh6t\nx9p81JZeQi2NTfdx+pJaG+UGtpKhUqoB3FyJN2c7CQGuDk4YIkp7RXsyThDi\nhjT2TS5ux5MxGVlRtUllQ2YUldVwmp7hgTOJZV2kWs17drM0sJv5Y9SAbxIT\ngKfA\r\n=AW+Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.3aa33998e.0_1592338834537_0.9727700680719524","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/theme","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"112ec34077121c514d12f069bb550203c7ca566a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.d2b54d183.0.tgz","fileCount":25,"integrity":"sha512-f+T+dWzeThbMnq7L1jNxqwYG9F3EGv70cVGTm23bt80aPBVaWEJuwIERZpgOBKhEYIl7u26wAXrkGn6phKO8RA==","signatures":[{"sig":"MEUCIEKghNsVu8eagdSCMWxqIYiAr0rparXykgZ9kNHpl4MOAiEA/SseP6wARfzpX1u2vZqwH8ZMroUWG2R0IAS3k/nNa8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sAiCRA9TVsSAnZWagAAUxYP/09ESb8/T8mHgU7zK9+R\nQqSX0gKHcKYKQJUmRjsggJ5COPFE9j19EYiNiPiMkmCO4W77buqENRzy5Dsz\n/pPhI0O/sbYupNv6fd0vRr/V0zQntWPVpp4Wb+R3xMwtpB6vKaUs+lJKPccf\nQVx9t2zzsQ2DJr5d1GKyqQF6+cOv27S4BKGzTsP6j1R39VVLs7dVeLhwbXJv\nL8uAYa7Pl2iL/feegwRZEzWgqlLMtd3xEMBEz0vfwPi6RHlKbX2pfVJCNU2A\nBSBxF+b931i/TIivQDsh9kwlZ3gCpyRYTHG98jI0Y0fZtbndUaVy89Bpn4Wo\nnK+Pl2G+e8Hx4BbxQM4QV9v4UFbt/TeB2T1Ehg+EIdt2UyGJzIqtyI82YD/x\nBiUub8Ua9Ps94L8bWZqS9Q2CqbZfItYHROnGEN/awYlmCT4bOk1Hp06yBK9G\nI8zxcfNzvOaM0LcmZi+UMNP3t+4c62jGv89hMw2y/NZldoyJg2XejsJmmkN5\nXN1aaT7Z8oVSmEjWhxBSckm1jAg42K0JAO7Z8bgdocj2GAsPSNeDgM9Gkl8Y\nmfkBtBACmgvn7KT9+TibO84kUdoclGjOkVw3XgdjfJpifYGC6vxoOb1IBooZ\ne7nUtCI1pheKAyI5kQQVjv//NdlKT7wvER8TQjauIM2ZVlIu9pEdCYHLNaMN\nxfb3\r\n=+tha\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.d2b54d183.0_1592442914107_0.7732467532307676","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/theme","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"771222bbed974a0be93dee140ce8ff40d81ef1e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.f2a488e95.0.tgz","fileCount":25,"integrity":"sha512-WFwRONcSHN/iZWBtqbIeuymuE2TxmA6Bi7LAUCBvNkZhJiBZbYNeYVXdejCd6Aoxu8nMlYcIRUiGjZSRedGUHw==","signatures":[{"sig":"MEYCIQDgIMZIpo7cwzhiUZUayZh7onnbfpy8i4VPQLN+vL5NLwIhAMW12CCyAgk1D1c4rbBeLBqRLT5qWkuqF7E7JxWz56Zk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64JLCRA9TVsSAnZWagAAIVoP/2B1JnaFpooyIc3y4UVQ\ncYNgBuI4uMFJvGoPuM3tF7206HX+U2/e+RHXs536x86dMXVunLVLHbpQ6O2d\nJZ53rb8h6ugZNnRNtCOpl3ZKNKlVpeyBlpKL/PnveRLKMwqn6+pIkoimNopW\nH1nlXX/+xnRYkFUihX1cDq8wXfrDtWhDlInGSubwM/PpMZEW1pfS+Q7LS2rF\n6tsk3GTbu2/JnXJguGA0OWgetJ1CkvInbwA1wU98erMz1EIZVZFZsIFxGye/\nyqV6utVhkRWX1wJi0JZwOmwwAecfMom6vobLVvCS9MK+LLEUIOeQDgDAEzVE\nX020Gzt0GhypPgW16/HGOYJTUbJScn9gJg2Ba3UgejWDYF6dxyDyKgX4YMDc\necVTpxFE9IDcwcHhRla+kb/7hDJBBFXejATkV8a7YnWSHzCsODxRiIRtu3gi\npN+frlfuFdJv/KpGvXC5n19nW1hXfdWa5Xnhu/GjBX13zf1CGX2uIZBXAv60\n9XX4sa80cYdIuZIavAqEWry1ZbCChH5LQevbT0Di1SXcm/0VbHMks3feaSV9\numqokJE2Wpkfu+l78eu6l3rwk6V8/OjDHEJ/9MAtIKL+u/LroUeVrIZXjqf4\n56rVTMLcovzVYKYWJUWdkNyVSxh839b/u8sKIst+HMU5bAtGgnXDTxoqE3zJ\n4orA\r\n=JToJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.f2a488e95.0_1592492619134_0.36298514394851367","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/theme","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6934e74faa1b872d638c950270407ccd2fd3032c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":25,"integrity":"sha512-tSZP24wA9nMo79e6ufi4IrYmFvk0U5OSMg5FMmEyIvDPBidAxO5Dk4bX7exwW6KVazb/tyjzT6U3f4ohZ661tA==","signatures":[{"sig":"MEUCIQDEcnse2LNjEtOujel62s09JheEKsLZPOX4pV2vAC8ikAIgYR+WojpLzP8vloc/PgFpSzoe3KeIyySNM6zevWgcK4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64UmCRA9TVsSAnZWagAAFkYP/iD5YxuW//151FCOtBS9\n/Wtvb0DCXUbuiUBtUOAAtXjHGI0NRI+6DyWWvi9VrGVU9NR6LkDXXJWand+B\nZ2ox3atzz4xTt7W02JWUWfClNETq8OInysAwsmG2unYIoudiVJKRnXQLdSSn\n4oaSwbj0l/JjRMC8Uud2HLBVEG/AUrlVQ0aQaNFhGC/MU0tOk75RpQnSB1Hz\nNSrDHpSVWgBmG6YCPXrghf3NW7RNv8p8U1t5TrG0x0zojhNlD3KtEtWg31qS\n4vGC90vmCiRB9HeLEcmb1DTBVZti2NZnBY1Z47s58O9+UiRaeSAJC7USw7Rg\nzAJV1PsHd4O+rswPIeJRd32fn5+TRmUU8yxeIjN1eFzvl1aEicjhW6iN5Oz+\narpT/fxpLj3u5hyDp+ZBrSPpV/2Jg9Pjd5csWGgaPrU+vowiJXIEmMwccLfY\nWoIgBBRXm5YH4M/f4u55vKsk33oSzvWDqV42YB9f3E8vAexNe8YTIi2jLrDp\nSfVpcvTh1MiBQ/u1LmTVqW1Tt79cLcbOc92dh+GEwdU1+UlFzLD1jjv2Q1pY\ngigAAXiVizM3EYP2KZQX0HyEVMae8rUOWXiLFT3f6BPXu1+i5v01cq3RVCqU\n6gbGWNXpogO2Zy6W1FmYvYyVJU3BpkIoIPXJ2gUoC65UboTZZi4YAESfGMx5\nVxT3\r\n=FNU6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.bd8d1aafa.0_1592493349385_0.9734477782561803","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/theme","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.1321eb968.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1369628e1686257f818694af056973b6f9cd02d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.1321eb968.0.tgz","fileCount":25,"integrity":"sha512-7//LQ/jk9DwoHFUj/3ckkB8TlqQUkNiZO6WFcGgYm9QL5iR6vXCecqWraAxH6JnLOUhcGm5YxlqEBB6RIyglyg==","signatures":[{"sig":"MEUCICtJNdexv+uAe5g8U6E1e4xm4YpnIdJkpl4xbdiIveGbAiEAz1ZaeX7DNoACivJzSWOIVr4kPYLA+prBMVj5oet/Z7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RATCRA9TVsSAnZWagAAsp0P/j2C3a6LtiZi5G4pVRXx\nkzZEkI09qHfzEpDXenjnNnUIbZd+SwMdHF6zyq8uQCJJvJapNnzfHFEITzDl\nV9CYu2iEmV2q7mQT+u5HnbDhmqMrFksqiMvAVrZ0kVsi0JJLyUL/mCrx9HP/\nXRlNuU/Kl4uk53rftRztPDxq1RejZsNgJONvFTliXz7eQYs3Lac+fZdoJNhc\nI1Euns7h9TFTy+dSjC4/ibL46CXywdpI37cyrUrK1GjDBun2CXc2zRlhMCPt\nEkfvb6cltyIMSsrU6l8rnfD5KKMckceNK/sfnpjCGjz1OlzrngVtl0Ve2vg0\nwo+RSbz7kP+WdA8sRQK9lbqwOAWpRreM/4UGKIKD51N7yC8Y4a03IeRNLSrQ\n3AvRpd3B4bgWa+GKZ4U+QYJvec0zb69gG9YI+DpFPk+aBqn/J/MK85Ch+vb6\nXinuk5Gfq92lsDWCjifLMgAFI6739V72GxfJbTX9PHL4rN96WG6oh+L8ih6d\nMhgcDTSkWKbFGO7rW77dBsz+HP5RLABysser0qbIDqwObagDmkM3A+g39N/b\nsoRggrCAVp0Xl1PgTDUx1z20J5dIodwPKu0l5puIIf+VnH5j/r7QFgpnlqH1\nVInqVXH1pOvtD8hhZVC7M7QliCV/a4Yt/4UrO3SgqDk8axffjzbpVuQ0G6Q3\nb+TW\r\n=8LiX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.1321eb968.0_1592594451092_0.442242301358879","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/theme","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1d83066f7ac7af73129658de46cc87facc3460d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.db5cc0382.0.tgz","fileCount":25,"integrity":"sha512-HOVv39kkuMWZQTBFOyeJBLVHHH1lfWwgGRRgCT4gxexWb9ql4Xj3zB+JRFzZYyfEbqt0q5bJ4aem9EGuFR/STg==","signatures":[{"sig":"MEQCIDYMcN3h5wbVDx9tjm0S491v0KSw0DhBGPZHR/YxuJgGAiBG15eNQfk5fkHThVd4fPJIauDHbNtRA8T9lDoCmn003w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RGTCRA9TVsSAnZWagAAK40QAJGIbsTHsDGt9UwC3MHd\nIUmTB4o9vL6oqpe0XUZE3Lb6ciDlnO4xnwKcy3imXZKxrQjp5nVfm1VZSnHo\nl6kqZT6K3mrx93hgT+ta2sC6fnTHh1YzHEYt32JgiGgTD8PIQXD2VzdRhRHw\nLnOcbItEOqGQkfeErVKrUVbg6gq+QEi8aqGwiXrQWU7ocbqoGHrNxPdy304Q\nV63aA9H+BJEJGLQPDvpT5TaxOSrE2t/nRDlhHWCwj0fSOcofRYL+ScBMaNA4\nNUa8azAbYwbMHIwmJKoN3aZ82woMgojM5NoCfzXAZQOOv1/L+N7DAr1PVLe+\nAvQDN7gOBvDFK6ct84gdluR51D2VzEz1q4Lur+Qu0WNqhhsXTdgAEoCxX00Y\nrzr1McdiqOeYkHhJ/nxs/rDljxZSLQQqMUxJfIAkfEXbeMVf1lJAKWeD1L4G\n2HD0gPaPNRO58auupOdVZu/MkOBPHU8PAkCqRtvlb0ODK1Cy2aGez2y1Nh/i\nMJIufI2qQJSIr5uDK8Tbdmphg+dMe8jlLAI37ptJUfF7qA2IWywOyM9DiuBx\n3XSRnwIoOxNWQAiiY53/smg83TmbQEjkCZpF2qtIJuSuggyPyOcjnaG8XtrD\nrWnQXOWrERw17UGj9C7+5biqZ9UamYcVaj064PK1qt/AazS9gQVGNUgdAzFU\njz8x\r\n=KV6a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.db5cc0382.0_1592594834602_0.3436850380541554","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/theme","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6b5e4aa2640559930f1fcb1b1b89be1544736bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.6ac9bf031.0.tgz","fileCount":25,"integrity":"sha512-Sl7uXZ8l3yLt6HivzHcLz9Ozfn8eMFK+E1hFby8nby68mvt7udq4dePFd7btgnDzamKY66bFDn3Bweul2ad8Hg==","signatures":[{"sig":"MEQCIACUXpEsjGtef6aNU5p0c/SbALR50ppSJYzvMnyWznjYAiBwOg2IPp3QhDln1+ZwjNgkcQTDzhIUKPTxCZmE+771ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RZbCRA9TVsSAnZWagAAYwoP/1xd3Clrr6SimQYojuHk\nDTFiaiPFwksYUXJbeAFHv7rETRBbO3u7ojeCnVPLXOaIWS61jlW7e4dO8jbV\n/0dFMWc0R/KCvlz1bUIXg6cfl8qxZ2bzE400Hl4iAxltQ2atxkwGwi9xZUZK\nejUndH9FuRv58gkWY17mW3bOskwKwA6M612+uf9w+wa6WFrsZnL7uDGuWI4B\n3raqXyFE7G8GsHaaZic3EhQvQbRxWn5AstkIvbrJPiIJi1xSvfqORegW/NL7\nHXFt5iCZrrwvUbSYyeln6DcJs7Rtwj1BRwaOXK2CZrX7685Dtbmm+GhihjLT\nypg+B7TqYVDeiZIoH36Mk6jOLTGvi92ltpFJYsxXJPJzKfKxWhlV4MCzrJmS\ndRgGGIFqn8Nz5Ppx82uSsRDT0/y2FY28Ppc1boshnMKBLUaEbrmoJ5CrME+L\nQVF6UZLntuiWOuLm5TE+7nHh154cE17rFUqtz17HeUDqvKLfyiR5F5wRzMwr\ni3MPJi8cakutGsxIYIIJtVoogUeaOqbiVEZ91m8VJPV/lDdHHd6o4sCWz/XL\nizwpbdFssfwlqDzXzHXdjFfqkmd6ViyUdS3Dk4+Ye//j21DubEL9DCzTcVgi\nMcaMg50H26kjSvZCV0ylI3H1mkSmmAeDpqmvP4jBsEoao+Ulk8fqFA/UjeZd\n22pR\r\n=zubq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.6ac9bf031.0_1592596059149_0.7370725914617919","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/theme","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e2ce1a1e1cad8ffbff311f43642c207816c4ed8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.c21b5c367.0.tgz","fileCount":25,"integrity":"sha512-IXklIOSzXg8bRHVbHEsohF5vOrHVkcHOlmaSeyw+407u6clfa5hoFwXXwkCPTWHbedzxQD3chLQsO/3hNaZ9+Q==","signatures":[{"sig":"MEYCIQC8GVxDx2S0yEoPgAj8UzbNQvrwERszARJgPrtVvwSlNAIhAOH91yp1oTjiqYXNF9f1eR1o4CZVfc88Gm5i1fEHUeHs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RuVCRA9TVsSAnZWagAAse8P/3cPa1hP2WWs337LCOub\ntvD47s7cKtF6eS8CY/mqVKYcNdKsT4adEglGwmBFxBE7i2MZ/WbGGZVGO6am\nF1QLq+btSelCwHbdpIQMZhncgwjsQcrn993d9S1/mbdSWWJrXMoO8s3Wvz2r\nKRrJ/6GuJX2oaWAgJSQoQyItd5x11thVoGs9kbTbmojhfHCdYvALPDxqPu0E\nLvEh6Z4UFzCGx3RZqLG0un2TKTFE+PbJ/bSfCgdgjUW5bYlSKb8S7KDOwmXs\n1xmCXJVdQaEboWqfiqePmFLC4cs3jkF85l4rgXXOSOUbOsgHDER/y7Pmv42D\n9L7rbLbrmsNZMcBNFMb138IZefaVSEjPjNDbCqfydrJclBbZrPcEOvpo+MVM\nM5TykfMF48kw2wdowMOM5Jdqwy/f1xJPxs3OtWVH+WB3kloboK3j7K+5FFYL\n43KfZpNMlf5N9T1FpcwO2Cs21q5k7Bod9j51B/+0B1ZZ0rHTu8D+9E70kCGr\nWpCeqSHGAJKLK0WFQKE23rCnImHgpjKkUf2GTC8c/l6VWj4cwZIC6dTGDljk\nEH7peRofE4n7jpKyQCicwl84rgmsLAD9DyeU1O3DumohK0fZoyH+XGf2GPi+\ngEBoQ8STKAAb+6Q/P1msU7syVIGPN2pgvPYIYL/GlVx3dgBu6NPJHKftDF1w\nkuDp\r\n=+zPR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.c21b5c367.0_1592597396763_0.4312797305937479","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/theme","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd2c5ae31d2dc4f358d40c0718c728b5caf35f2c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":25,"integrity":"sha512-F2ldqLjM3tE7J8epSTQWXjcf4fcHU0uUZ7eVhk5Hxg/YZwZzxCA2qqcE3fWT1jjo+kSgfoRopS/XNt7rQpYoLw==","signatures":[{"sig":"MEUCIDYRXljRtdBxX8oHk4jqUsxu8Po5JRD+ccAyg8jVT2kpAiEAygOHd8xXcnQPEPYxLbrJ+VRlVqJZm0mAhvOALVvxHp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R3OCRA9TVsSAnZWagAAd9QP/1nwA5Y3CwaKg5h8Z35i\nl7Mv1bjNOMfd49l43G44hJVbAG3cZOOjRmAadwlWBmPYG6a9R4ie2zsiFzCl\nqf35b9b31FuLufgrHZK9ZM/6vPYOs/umthMjRFEFdKGLT75Z5u8LhKmj0oQj\nYKGhCRZNIZ0NEyXGogL+bEx7/y1IAtLEpW6ndDF8zRzMr6MTcZcBjHsKDHiH\neTY/KZIkhzuPwG27NMplh4vDo6Cp620+elX/9QtneORBqU/mmayNIuDaIOIK\ncuPivjl8I0nakv/p5TmsowyhJLSLcELiUUYi3a+aKcZ+CEDFXwxjR5ufYCT7\nzI2OYCc5a9U/5RJf1yCeZ5c9PAiFcpYzKc871mxVZNjNFtVeI9drzeTa0beD\nE0OUXup9Wp6eozKb5Phcj84CGY8/zji82pwcSh9s2d4M0fKgE15xyPs5+I9e\nCHbchMy/QA5IQBjt76KwXQZn38R+VtxUQqBvd3XGE09ro7ChMMYUFXVS9w9U\nLvzR5lNypCG/egtqvCq3SHVWD5EsMNq6Rs3pfdHgW4xMXIlvSlZajV+rTRfw\nu878gRXHuLP4e77qa11Ke0PQsb7XDPM+nfCf3+O44yXs2ttXzqmp6aSubwp1\nOkKE1ZUVs3OMVHUzMB/BIzXg6Id3dS7ITFj8ZjSTN0AYGUvQxofMgpwXvffx\n1+Nv\r\n=6t+l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.bfdd7fd39.0_1592597965556_0.9787715831844876","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/theme","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.10b505785.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c73c4c235379d802f0663af58b822d64f4a23695","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.10b505785.0.tgz","fileCount":25,"integrity":"sha512-XQss5T1DGnU8dwLO859CLMmS0TEkUbFO2UACSU2iDkWRJzgp0KIKtqdBwwLERL+F2njNMapODtsppTlngUxIfQ==","signatures":[{"sig":"MEUCIHkYUJuVI213KWfOWKKgrrKTDugweNJBsMou8Apbk4xZAiEAvcB6yF+2JigCgzH3AnfkXiG4M+9kUjA9/lgRyRHIQvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4kCRA9TVsSAnZWagAAmOIP/1b8MDOyePJjTRw37L7N\nMEFarkQTI2k+xCrThYTQ/BLhetOTAPBvDzw3D+2ZVZXqeqV9Wi5okM8wr/Wp\n4dqZ2ICqECWP9/qJqtRKlBpH+S3sBNzbPLwBghUTVHDbSILgwSrtC+ptjrvA\nIilVwDdKUATrVjlgkSMzm8ADaHqBG2HPA6YUO8g7oIqfdFkEqZyM5wcbbRzf\nR+N4o1uBWk49ZDcqAQhvcfWG3MysVGpj4iXxrzQZX2KRS6wBm1Elcb0ZkTSD\nx8+KVKfLiB+hybE+DHmXERnlvH37zdtiD5jvbfMKa2RYtDWu5ExgyP2gVEAR\nMTrgTAqJNiy/aMAm4T8/f/xd6+5e2WjLRH0KMCmJ6zZsYThGzqvoulbW6JYw\nnEU5OCvzceDwVlyCsarcOqLZNIzeyySA8KlxWZT1+T5W7Dy5r0rMMsLXBimG\niSsdIsTy8n6Tx5sW9N3hxbuMZbTiyLlbbFF4e9LDK73kjhfRA5cGW6FBdQar\nWkjM/W3dvEp7FL5cCyG2KpuPKwPoI2Xk4xe21oeFK9EvAm6K9ODyaoHP6nIR\nAGEnr9FFfCI1nkAxWqvUyG4IrfyRP04fe91Fs1qc5yEZVQoH/7dgoe9Q0vmS\n7ixZSevdDdtfdqGD85+Gnb/cCNIZ9JyRezYLtPhmBLKmJln4CpH2rWiirYdp\nbG1M\r\n=4tF5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.10b505785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.10b505785.0_1592598051810_0.9217613557792879","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/theme","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e04d8bd497f6fbc35f4a99eddebf33eb1d04d644","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.6483d3f44.0.tgz","fileCount":25,"integrity":"sha512-/pEkdIJubBAe3BBS2NNcpXvfZ/VjiW5I3EcSTO9pvGEhAxVbCokvgcWBkm931hKzrUDT4zs7p8iSCCIXql1PxQ==","signatures":[{"sig":"MEQCIGvZegIyzrFzRT++n6ncJDic0MRX0WcXUgsmUrHjkINnAiBd7nDNeJlGm4fN6BUEbXegfvGZ4Rwj/VGl59sQ7YV9Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SHxCRA9TVsSAnZWagAAWmMP/R3lZwuD9CN4WfGgeDda\nJ03OK2gi/EYDhnt5QensFvHsxoCsMHGkylaa/xGEYs3ORIikznCdtitTPWyz\nlsQIbB2eah/MXifqE7cBYqxZCKZfKgp72NKCAzJ+2wvjyVt9ob7FFKm+xL7U\nUMmkUFL+s/8zB/f/y/gmaT9OUwUH8qou1ZscnJAdJP5FSjygbKPlPyunjMV8\netRK/QuG1jOx6Agba/x0dF8aA+zbgJjMIPxCbPmoY8l9p3b9Pa8GXrI8Djmt\nd3jqkg3HZCUWD5WWKZrFhJGiLaIX8J4s5fggI+Bff281EZxWpDqYhlpLG6im\nsUguAIMBmS2mGpzIC8lhzqb+j+8q5vHgH2y1DRBI3ZETtLQMxQ+eTDAU9G01\njodUAT+LVIEdWghQQXOmxuZp9+ADszVNzE68cAagZgUO3KVmLZ3+Z8QjV2Ji\nOlKDvvT91z/KiC308EA8d/UyOpTaSL0kLJreSuXqK7t4IT24fUNGZvZQE61z\n3+Jy1iR2BY7L8ziZZvGMEuURh4Bz+jsTXxYEJJRHxnowe/TlpF5pVxMZNnrP\nH/s8PSVZfBzfb5dtQJ7TLTcsh+2pCZ/ui75fTWz3ZmnrSFc/7uUIXh+JzkS7\nOK18AxaTzXCiU8QLwl9sSZzidPuevnWRUkQdVIjIRo3Vzg7fVRTEk28sNutO\ngF+D\r\n=SnWt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.6483d3f44.0_1592599022843_0.29941297526136457","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/theme","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.30a74e921.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab852a7a3b4c44485fb86bcfc818fb32ef837449","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.30a74e921.0.tgz","fileCount":25,"integrity":"sha512-uHnALUzLSK7TU33nytGBi7Jzye3J3S8sqQOmvXroN8agSOi/em2K3l88g79qUgwPfly6G6XlZV0tvduky2FqHA==","signatures":[{"sig":"MEQCICEkyyRScdw2LF8BH96QcF1yZ15ApqqF3l1ozEPCAEZcAiAyrGug0QjHEt0BqOCX3VwZWqMHaoROCLp7P8s053GoJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SJ4CRA9TVsSAnZWagAAwE8QAJZNRxCnARJibeiz+TRv\nWp7ZznycES9t0emGFH/CeSpbG1Y7NFfFZUrk9aBEY2Ci+eZnAhPplIrzWVnK\nVvwrQck2MR+J4zHANjvOiSZa4VVHT2o+HbvQdbX51+2nTlfFmQbA1omGMyxH\nvcWk6SkPscF+kYnqtjjKl2s1KjUAjQUU+N0f2R8P/RUR8IfQMEXaHC91sJ6O\nyMvD1nLqpwB0QpToz2Pv+iAYCE+TNs60NH/tg4Ot4QqSzK3S0D+X1w8UAvl1\nkZ1fTlyut2DKg0FA0AQLr9TPbMcZ0e3+TXAfKglN9A9pfkozPLdm7BG+//06\nYfbA2u+IP5aZZZr30Kb9ofXBkbM/r+YstrKsSvkhW4/56ZlD5zzWNswyCgWG\nwicWcOXX0gg7NBasizbUkhsQrH8tRYD1w2kzO5AI2uc+eilv3TdIWEEyUb3U\nvLXxRU17abT7sMKp17X9vqfEo2Ppeuk22iqpFJ1xblTdA3mlHe7fxTgFAp00\ncsVEzR3m8v+5L++j+e7a7syhzYXJYUKc0YRLS/vX11WqFPgrpeGfcclp9I6o\nJ48PCi+5bXYPN2FDhnmXt8kwMkEiGACZZoXmpL/KjKttgTDWfUi+9nYIw9gf\nidALCVnvQyZc6kwXggWjis2DR3JrVE9Z8UcBMsw/zq5TB59VoC2Tte8GbB6i\nWSZ+\r\n=0QWo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.30a74e921.0_1592599159780_0.2301153071031743","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/theme","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.c20727498.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37e2a4bc1e624380f3511a0bcc69cf49c88a7199","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.c20727498.0.tgz","fileCount":25,"integrity":"sha512-0IlPEMpgw39VEb7AzY1kQU6aHnEkPPridO+uimVx2jYo7Y1N9I9cC8okRPp0qfNt/hs/VgpU3q8pE8j2RXIA+w==","signatures":[{"sig":"MEUCIEdgGfOGSRieGZ/dh0AAY8urPmyKSOCSnCRPacbqLoYwAiEArDL1EZNi/zjqYlyg1+eXuzvYNKJCJU13fipK3noROjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SMlCRA9TVsSAnZWagAAR6wP/1VZ3+PqfASD/YM4txg6\nORLrL5w2xQ0+VT7obT9bJa3KYiYOjGaDlgJvVVGEgrAbxJQLtQ5AdwDKZZaf\n+6IzC5oygfbEq/7hIx7gGlUBNqNiMgsxojI2KyPRHdbhJsFKayGdTOXiDjeo\nJj4XaW7DrYS+Y2CWt8PM5Q6rjAkT9o8uINMRru0XmRZyBAGiSu3hBxksZP93\nkqUC7bKEpdQ+dlu+Xr6fArLMlj24JYwo/+0M3MZJd0ey7Ov0S0VP2Dtg9j1J\n0ZoNIupW6X71w7POEEOBvD2r1lgdtPm6aFw5plCYwi+d5zJ+NG1tt8IxlnU9\nxh9i5cI6CUsnJgadp25okWJVZtPxo/3LA7lZdkehdd0nj5zVOyR8TWAXuThr\nqcPveB/eCbEPiDMItmCFd8Z/kom9j6arvaCwov4gn/m/RravKa15kM3oyl8R\nui6NxbBD087TwBPlwRw6Dzl2lmlTfqz1InvlisjPKtXxCadxOMLg7oVSBa43\nDatqI2se3G9thmHu8wFTaF/7sOVNlAut3/sVdZIhTYztDDpJf1wLc0nhuKmy\nucXFaMCQGZehTVWXX161ICWsgrdIFX+A8aOCMsM98OtW74uvFF9nPEO4uT5F\n807TYTMOOc34n2BByVSwzKipPLdDm5kNmKOCwbDyrsw/j52LOAHCdLJmh/I5\n58TK\r\n=C3t7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.c20727498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.c20727498.0_1592599333324_0.40606855171599254","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/theme","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e36c8a129192abc0746340568a8ac91aa09c526","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.4e360ae94.0.tgz","fileCount":25,"integrity":"sha512-p+74nZ6roQs3h1zfXmdCIhsrHLWZSzlL/+myiRrTxTYDiKIQ4uWcfg/H/V4wCm1gJSOhy0xNHlfNQY+TBKTeaQ==","signatures":[{"sig":"MEUCIQDp3J0BlTMgzWfiCBLNin2EdDQKSGiNJUJN5H3Xca1DdwIgHQvtA2K3im4CIUxmiPI0oqDX5VyqBdJeXomfgTXVjmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ScSCRA9TVsSAnZWagAA7NkQAIFK+d7Ftri/fXk+kMmT\n6jFJ6EyZbENBWF8LtdfizLvHNqhJ5sbGm/BJCAqqx/XMvVF90GG9rhsJXM6e\nMJEiuT4WGyzMgQILLM/wblHGZJZ51SxL2zxMqN4//P6dzyssfNsziKEZgmgg\nTfgZun/3Q5WnHvT4wDfzsWT70mamqEO1q/9p1L5KbgT3xZw7xFC2IjN4xsph\n6Xd+qRJa5/E4hyMsxCJWJsunSIjaHUyGhzevMgYUIcCFhYLk1S/qkCajfLRr\nGF032d8604iBZQ32GDoS/u3jT1JYN67qxcmmIs8FzjS+7YezzJoO8qmTyXQx\n9IYmOf6f5SSvOF4ZPIFsLb4eW5PPZMzcZmPE3mF3e3/HB4Lu+e9IO+gsEyXT\nJScR1XHltgY25ZTCZEz56EMV/HcuG+i2IAHVmexxxG/upYFOikdiApBCH3Ns\nqcxR9rAmCAJABzz7yha/PWsUwzHCGgtmbP610RsLPzJee0Haf9na9Gn2K3Vh\nvJgjZqOg/mUNBReUDkRIxuGKjuN9nfsJlYvcJUWs8xBVBp8j5tQRA50doV5P\n8CibBBbsi7xhoTFD6baiqTjh3dP05bXWRQhiQ/yKmPIhuvpdngr1lEbvShF6\n4Fv7O6gP0m14CH2xYrzS75GYHZQrnb2bgWTj4aAhuXV3AvkK4aC0RWF1oDqY\n/e+T\r\n=kD//\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.4e360ae94.0_1592600338005_0.6653251472218096","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/theme","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e69eb626d1d5026694f085140e011b7678e648e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.8550fa53b.0.tgz","fileCount":25,"integrity":"sha512-qWP+1z7iGyR7g8WIyXU+7amTy1jY7on3DkIlUjTWarav5+MweGWcqlt7GryoprBzIZIvxvPUzJlHqpNSA+IIgA==","signatures":[{"sig":"MEQCIBP4MEMPFFReJaGXkgngEP1xEkMOFYGh2OeZfRN/igZbAiAZ+fQlvQU6vyMeLF5cvw86+ym5Ln/rtK2GqmwtaaUN8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SeaCRA9TVsSAnZWagAAFFwQAJEmRAC21+xGVQzT0bdW\nVJmvQv9bTcfqqqw/i86ntaUzXtFeDlXES1RXPx8tHl3beOErj5jgRz081KAp\naP8uM4PTnoEHmhMltWGjkzxKxfsW++RfAbDDRvIW9pfZqZn7E7/R85/gMPci\n/wKBWbI4HzDAb668v4SAWSa69RCXb1SJiTi1EfPP1/Pv2q45vJKeWT3EH9cO\naAmPv38jllDN9xttQ9H+iENiWNHPkp3hqhzlAtgZtF3vFz1LmiQ66TKq2LYa\n05viEzVVG6MY2i+W5kwcSGphDM2jnoYAdF/n8YCwU8XcC+VfNwGgbkpaqgV+\nDBLFIwmlU8usoBs+F+UCUEyeSDVcYOV/TJB8cODcxHBIh95HAP3JR7XOZLrg\npVHTEpfmpTCe+Kvaafw1piysHaWZHFjMLvsOu+MuVFmibpd/h1398OgwabOa\nV6xZWLKOuNUiheYM2sVojW5DABPX39MuIOoS0FkbjoE7Um6s4iOG9yxfg8oM\ngrMz6EzL9vNJ8TRWo01Vwc/P+HB5550p3A6TjIGnnuGQbyrs/zSaVaDU09BH\nsxJb/+3EkooWpQp+w4o+1b/SVl2EfLWTqpozG1DZu0nyK+vUYGbJuInLNv7C\n5nME8m4REnc9LD4v6He03lGaKiNtmhziLhMYopgo/xEGhYw3hECTc1Vvc3G4\ndJeZ\r\n=V0BG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.8550fa53b.0_1592600471522_0.5398322252424905","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/theme","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.93ade142e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"334d88580fe46bbb6d3a75a6d23127db494018da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.93ade142e.0.tgz","fileCount":25,"integrity":"sha512-pGViMvvPeYSnOx9F4xvGhPoh41XIS4ZFIpailjRzryPlTr3DOrVNfZ2kzY82xu+dRJSxJZw6oOEWAzhSfbLzzg==","signatures":[{"sig":"MEYCIQDWTRamyP5u4N22zuvbGj9eOATpngqdOD8ku2PQbseC5wIhAKJlkiIfrumKBBSQ6PtoIr/2FNc2l3H39a2bHW38Erh0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SfeCRA9TVsSAnZWagAAS84QAJ+cs5CUGHAbR7i340sJ\nahpVkNb+jpc3fKrkNDWaUHOLNGmlTcxtpNKlMB78WeVSkifP0eDd38STfp26\nHcL89XSIP7anAvb6OZj+kQm7Z86nqV4E++7lO6K/AJOte55x238As1WrPu4o\nq5cmFJVo+Ms7CgzSF3+5WbkGgAGTOj7qpCxYKBH4mbvTFKFvhHT64PTCMzv+\nVuL2xZ9srcqvNsr9CQG5pvte/0Ezl6MOEbBULXIwQPYUp2Zm94QA/Zl7St+b\nmZQuaBSXNGZSEf1l60w2LQLo36b83ujAPdKDYY43EnBYQGb+M2v1fGA/9D7e\nCRJjn7P16ItgPbxa7eqAKPqdOwVISqsRDjEcTwoX0wZiZzbwDYCA3ko1h8o5\nfYRcXefLYnlD1Rs8OJ4wNSJ+9QCDE+odwaYgJyLqnM+kY/RtlgwdK8U2mQwV\ndRZx0usGvazXsxA5BLEtwn3OJ3VwWWtVtgu5tv3qSIMJL9ZuwbY17oCEbMax\n5I96aHP18msFsU6LHW25brkIR8jX7GaX9KQVUg2464hahcL6tl/v0b3OpJ4z\nA68m6p7JpzktBax+4tnAZ7e2epOSdnAouW0iYuMW0ZRIQ3kOB2SDfMqOkiBV\ngdYn/nYcPEOeoq5jdBvMAsY/17KOxf6V7F/J+KXml+xZWfjK1pkMJ8gxuZ93\nYsFi\r\n=NXRe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.93ade142e.0_1592600541766_0.22422271741055688","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/theme","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27417bf8098a4563d98f1d5bc3bd1b3425ba6be4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.a0032f5bb.0.tgz","fileCount":25,"integrity":"sha512-Ng3RY3vdTkACqFwFG5j+BSZNm+hGEN7n7NCeB0i3MzAAFgZOx2Mz1uuiadzY6Sk+jDDGx6hK8y4+XSX2s9lYZQ==","signatures":[{"sig":"MEUCIQCrPBnM1wflM6i3q82ub/aYaCI6Mcn11vbBFL6nyxPgnAIgYkjzi4EZkj08+qdgJRDfwshWl1c+b9g40aHDuLjLId8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S26CRA9TVsSAnZWagAAqdEP/3Ppx0Me9wbWSvQI8IJ3\nZkb2i5Srk5Wgsgx2UBXgahfFBW79N+zqJeHmMlV4msIfEMqzExQFc7Wap/Wz\nvdphot7TyCxi56c6XKbuoTYGDpnyzSqj+cnBn1oSbtb3z6WVwT1quQgkCRAl\n0Oy4gMYcVplf6vFUtcscvSf7p/zGWLIMTOyYH+0lmVW105HZxzKH2FUEDv3I\nN4ZpaqeKknGj99pScJ9zOUSlHRUfpWxcfl8Hd9dpqVr62rvA0yWRP8zQjURA\nNNeoJh6hMrbVffTRNM+zg2yUmixefQbzWMKJ5tjCGojwVNesUc/YoRPhWK0N\nzCqfcvS3fVkiGVolN4GOorKelaVDCO3nwxspkg+Yle0Stg+w+kInknEyofWg\nJSQNX5r0SHrfbMXieZ+FCJvstHILya9Lw/vdji3xWkAAQ4VU+E2ns9yGe3Sw\nS3ckkcDdqG0tHYkmrb33fPZQ9AfbFPPdfmPuEM5hFPmQJeyIGBT0Xk6HJ/Wq\ncTLMzNNwrEkrrwld3yQ0oS8L625MHkxNaSuLyUS3618ghRDlL1IZP6lc8b38\nIKTEeExe2+Kbc4Vf93Hw1RYTa0UxBkrrH0HiSNcbWZQ8DYEFz9d/jY/8qL7g\nRmpbElhS8a+DqX66BWoeeBJFsoHbat+lvfonRWJzhPvFT5dZE6LvDYdq3egZ\n+FCu\r\n=uP/9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.a0032f5bb.0_1592602041607_0.7202775260003287","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/theme","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.3f342e721.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c99381602ac85af919ddfe8e92475dd66afda6c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.3f342e721.0.tgz","fileCount":25,"integrity":"sha512-Dg1DvIbFPNhbfm29tJmtRscTQ6/YUFkJuEKAxkCHmfisXU9X0WnIAnmkd0AGm7t7Awq0gwTcE6NcLA0BPTfSYQ==","signatures":[{"sig":"MEUCIQCLz0qheoys0xZoTq0ezNe2RgfXB+iSmeEwvLdFw8CztAIgXFeuyyEJaY7rWVwbNT2LRWuGl5jwhv3KOvUiDNASj4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S42CRA9TVsSAnZWagAAq+YP/0j3p7LNJjtmIDDOwzYX\n7eTcMvFBpt67PRMjHqNcLSb0c26zygwRLyiaLuzUKSZf5G8n8BMJVaJvkwbJ\ncJOD0sFXUdvgXlC5eulhB7bxayPTaR1wn/O9me1x2mNNuUsAVlOTuKCqhOiB\n6IkpbvNvijAkd7YNXOQzOsvzog30rXppqYXBFrLEJTP4N1zcRQp6bOWnJol1\nPWENE1UY23Yq9qi7gUY7S9IQ7vEGxh2TGvLF/++OQK1D67h0MuFP0FkUw+ES\nIemB7l/xvKJ45W8ZKAk+yhZ9jkejnMZGD3EQMkQtzlDm33p1xnTNhJBQ8ah5\nY8iatG19JoJ9vcRI6Ibo/epXAjmfuF2ItDoM0w3EbOolJuXYl+L678UJEd+2\nrGTkdCUzlMCccNz5KdLfQq+0tVssOYasKeAgsw5Hp2iak2lZ0iviKAnRfe4U\nMnZJZFJ+u8UyC/ey5EK7WPGkSzsDIHsds7LuT8xRKVFlJwX6jUZnuJAV04fU\nhmj1Q/JemeYvJ86RGrbpNad680u+9ZxAKt0eswPFlASVMUPnM8NlDuliXGIe\niNQ5xMc+ZUNkhV1pB5V4L2cwJ4saSTscxXmiruRdCphkAgNMa+ke993xeAXL\nulwTedntuKaHJEijd/uSrFsQW5hqazF5rWo4TJfH5/4rgUlF7cqhxGXEe3DS\njoL8\r\n=2hv/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.3f342e721.0_1592602166126_0.3376860560460204","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/theme","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46cec837e72a4cd5244916c260568bc9bc177a41","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.ff89457cc.0.tgz","fileCount":25,"integrity":"sha512-2pvPpX/sRF1krJy8P0swPbjM6W/KdRaRtR5LlpEO/RpU2hpL7MjoGYTE+RR0Gi5Np/SmueHfbhCC7ASXZXfckg==","signatures":[{"sig":"MEQCIGB6THr9f+gCf7DJlNTHkk64qgeMcoULtJZ4qnr+gWhGAiAnhMGNJT30pwSREVWXh7Ck7CIwGPKy0EAtlqv9AdjpRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6HCRA9TVsSAnZWagAAk4oP/jdYXmkOT2B5xB3xoyBK\n/6ryNWlz+rfsCDGsYFCloZmgRnu7j3eCg7CVOCa51UfD9wHuejQxulJEiUMA\nt+7AZ6q00SlPQv17+5YZFfVoKoxSc8GvKOJo8hx/EG4Oaocr39BIsmxClhX/\nhdVC/4woyig4swpAOXOw+EQOj41HhzfjtB/z52grt2iGrL2e9zNvhMbBfQmR\noamMt+PdsEyyUI0RM1qARKcL+6cIS3iDXzuEvhtGlDiBkdNg9AWO2sHXEUzl\nu1JT5lv4Si9Sy3g2M+UIbc+TbSmVZOk/F6xACQTFNkHiViYQggifTWio//wS\nFqtPL1GvTYuqNlka3LUtfSQ31VebrCCCEaiv7jnQltpfCUp1e4AgYwOC3KW/\njgVfnV32iF8GaWnIhoBNaIbjjK4gaKM3Y9CVHkesl5u7K/Dqa924cj4fjL86\nzEUELvKs9PpWnfdPPMj2d0JYGGsfTsmAZY6Nj+kkl3nlCMndG+xMBr3IlCLk\n3xD3+iSaw0AZEXjcGFYeAKmxp5UqanWNjkbaEBQWPt/XagvCLuZIxpyfwQdo\nba1gDulud2Lw1ydns81P4GMp3oJrrysLVagGk7EGOUrlT0wKL2rBuD4z1bvB\n/OYh+SJlRDFxFKNmpFlfNgwaWBsjWPFyaGfpqHt2NLRtN3180n/NdI1o1q30\nqU26\r\n=MQsm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.ff89457cc.0_1592602246773_0.6673577296725617","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/theme","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"090152552da4b295d4a03bac238e9f4306c1dd03","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.4a1855cf8.0.tgz","fileCount":25,"integrity":"sha512-CIV9FJwGOHjVU9a/Ujdn/pAz2YccVCRhgLraElqfmF0JkvSTGhHlt1IYee1DD2uQkhlePIu32KMmrXECc3E7+Q==","signatures":[{"sig":"MEYCIQD9apSG0OzxsEk9cRa7I2sodhGtcu9JPDnkY1QlML0duwIhAIXNiLAHdV3CGda54jaVO2qbl4VgaAeqJgwdLF5S/xDY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S8qCRA9TVsSAnZWagAAz4wP/iUnWPV0XiUP8f53JfcR\noYFJPzxFuq7XT50uOr8547eipaRJZh1bszjfYXtRsSyAeDXmEfTJmcGRoucv\nMo7Pi31TB5lM5qQ01uDUF6fgdOMkr88BZQfRoS5emjuG+bB0gA93SSBnAbhb\nrONJCB94Lq7TdLRb/TNrW+RyAoZdesPtFX3dVupoMELOnrSk4GFB/4KK6yyW\nftKQUudrj2bN8YlgwfB+Hq5ktsZAFBvWONxnoVgjkOhWgEH3LvoK+VHhQu5t\nURWDUXgGW72pRQKwQNH4W1v869WmTBLvyPNT2g9ZRvuFC+oz+Wot0K467+Rh\nRzJUHQA+QokuWvREtt8K2PaiTsp/7W55uDWw6bEzwcm9V8hhgn1xd60wXfkm\n1Wbc1BGi1jcj1CCPW53FjgbWi3LXArZSR7kpJQmOTjPcE/4e4dWmjl1m2/rD\n4kpZLqlnjjjp8i3onbTYQPl0QI8k+dSAE7R/WyuoTrL7+mSEDq7kBxc4MQBD\nJL+JWrwdkyAJrSUvj45GRH2IvuFYawKvQBQjn5iZVERj+ZVqXbcVXFRg+HIc\nbAf4u1HqYpYCJCljN1wNMzFyvG+l61dOAFtu0FQJZxU+q9E9vnacjpa7k3V0\nWMQzTRLqWfca+S4VKXpwlQJtZ31MYgXkYm3zbOge/JvqFcIhMBD1Ny6SuJNi\n29NM\r\n=Ij30\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.4a1855cf8.0_1592602410511_0.8531068164846403","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/theme","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd84e58954d6f14d05f34d68d0751f4bfd6f4465","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.8602f1b4d.0.tgz","fileCount":25,"integrity":"sha512-cf1I+KIhbM1hjGEveiIFsP//Nh+/lbQKcs2itOCrvnoEHZ1FR1bpieLMd06LeMHHxA+uAG2//yynOIDu49S5gw==","signatures":[{"sig":"MEUCIDyPAJUk1jArgu2+uF+aZuBMH3aK4v2I7UZ6btNDoRM+AiEAzn/KY236xOcNJsCN4594SIEpE2lM0mTEGKgGB1oO0l4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Oj5CRA9TVsSAnZWagAA/eIP/0rlsOeP0XnNaZgGcCK/\nwAQlyhe5f50hhUHmeLZMd4lGlnWo3KUTVhtj9B7mcskjQnjAfRaguABZWbr3\nzVWLcXdT3tPoIrSLf4HPU7EKcNqOgK7vjsR9YIQVbxS3kUWujNst3zj6VUAj\nY/VdLoCU+867yiP8WIFgauBmAmqztCuYSJv7TQxg+IFfcspIkzxaS8aJCq1e\n6/xF5ViiHvGJVCkE2pJUvHmvckT0g230Y0VIKG/hxozdf6qGLDF3Nld9MHBX\n2tnkvmxDwKCZfgXmtWa4ZW/UHp+wMZXdvps/xUGw8X5TE1+T+hwp1LLjG5a0\n6qw/tIR8zWIVJ8b65pmAQEm2WBwdr9D/cA15btc0cLD5VtsH+Sk5+AMNoTyU\nw7PYOU87h7T6Tkys6UaRCdKSc9+tlUeSny0ExrxpXgmpVsHJ7iY0CtnOOHw9\nE6VNKH1b8QsJtzAw8sfr5w0yuYdLo2/5qjz71i2Q9cZo19HbwmXZDMsBI5oi\n/Nb41ZSfQ4lWCoRqANxC41dVa4p+2dfDTcf7Kg/sow9LOy5BcXXZnjMu1UK0\nx3o0au+SF7cgLjZNjFR9UdEEJqkapTPOX5SIi20babvt/mo1oyn70Nj0zoVA\nPYDgL9RTT1DS0MFOwlgy5IEWQin/RqCtI2dLMHb1hF2FmVblkwlkqBhSVNZ9\n9dok\r\n=sL9h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.8602f1b4d.0_1592846584771_0.6295488661361981","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/theme","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9142a8ca7ee6f7f6d0261f41c29e2200c96b250","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.69f9f0982.0.tgz","fileCount":25,"integrity":"sha512-LiUg15SwSPl6ObVSE2JuTYVf6FibG+4MUqaYrQHGIFGyrZ9KK6j1sw3NOed3WqARirSoZbOMTp/YdXYWBIFOqg==","signatures":[{"sig":"MEUCIQDV3svbV/qJIiAITYlVSd4HpbzwjBDP7e14Pe7hluViiAIgVud+O6qSQXK5F9j488dKqrKJPuMEzPgZ7JVa4bGNiqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R8RCRA9TVsSAnZWagAA9U4P/jWri1p8nIun6wWXwIoX\nw2BOF7pf5N/uE9Bz4+RNUKqZyE7DvVn6RWvLUWKaZqa4ZU492Ra1rlRbDFpC\njSvF5g2qkW2xUOGeRn12uRjOwRjITWNGNvjZ7EfJGRR4q+C/vQ7ZBVenuqfQ\nzBReQ4WAErgaQTj95S4U+QWxdZ2yvfeyrNdOzrVtmluJL+E/C9E0z1I5kZI+\nhIV9SLYSAndEr3GHldL/aUhp6gu4DDH0eX8AxPasksVJmMztg8zE0xfZNd1x\noR1nNDnVRuZkYhMc8VMJPUmzACQA1HQfawBb4+nXV/WgmH2Da4et5uOi3+Cv\nEqxtNm6IhdiOV/n42+ZL33djTqAqsQI3XR/0eZpc1mzmz9qz/gkN3on0fG9/\nikdn9jmjr6W1afe+mYxpPRPi+uBfgRKuYYLe+14d/KOACXhNlLBiPyaXF8i2\n9sUW5F31oSaik9VeYBrzrHFu7ssI3zb0NtnOHesZfHB3CHf9EQC6RLqcaPxR\nJD2ncR0jGRNwT0v1otsAAtN1iBHzzfU/Q3UKuEQiHUOgNmHdubTv0ehe7fqV\nU+mnPKOdLskXMdlm3ysvfpHnPM/YomRvKVEB4YYzm6fS2aPv//ifpNhvR61T\nxn2Qdxb11Yfwclb2RIeifQQRcAmcHUrB0TPEJHLMfQqn5C9EGnsoUq1AgkUV\nJ79D\r\n=842p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.69f9f0982.0_1592860433239_0.28657309598926006","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/theme","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.369a293f0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3483f31e4c141d6e3315e3d1bde58b9a55cdce5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.369a293f0.0.tgz","fileCount":25,"integrity":"sha512-EquuiUP9Y6SREd19R6/1A7qckHh5XD5kKBgloLt4hMJtDG2VQk/0CVozxQbM01kOfUafjCHSHGYBPZZFICZHkg==","signatures":[{"sig":"MEUCIQD8piRomQTY8O6u1wp7IPuFvD4pLZIeCNwlazgj6J4QwAIgGVyuwPBwFKxkRtHT+2YnE8b4kuVUw5LMOfe1BSbyY8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R+WCRA9TVsSAnZWagAAGHMQAJXebFg119OLcnuez3YX\n4q6k2DqG4syc+tWt1MF2N2ejyXunY6B2PCnia0ETuddQvRgbBxmQu3Ljn+Sp\nazTJjSVFumNpQ1IRjsw6gBovAZLqoDzSjxg+Cmi9OD8SM5T6iqSLAuLRb4lm\nIvCzub9FHpMYyBGzSWC1vPsbUhRSv+9Hv8b5amk1Pk5NZobcf6mxbPeiytzg\nf1T8+dyzniVtsT9ZM9mAKN95biygHr12FQDyxGDbOnvHMthPYaPEAh5iLeaQ\nVZA8mCYeeZDtxmq1SPIyc81NqZL0ZCT7ayNBLlvH/plC839wWeucVFnnzbT0\npGAATtK3Y4ZksTFojF7TlmCbN/w8Kt76bs0gzizD9XHjjxudFFNH8QTX0jF9\nzeU8Q0OSDwA/+0VDvdwd4XnbXiHweAk+bIIByt4nyjPDWda9wuTZGB3asCj/\nC7LsYvfKLjJeKjoPmanqvfgiEGXvpVvtK5g7p0feNUfI0JtF3+0hhTvNBn3L\n95KDtWp4rDZp6hdr9QBdIUTYJbVI2GDO9IjTk0bwXp3725axfYkOtnO5M/Rb\nsm68tl3EwrR5+WJkcCX8/bpCuZgemSc68l+xS1prziZRiN/W7nOuH9Nmarp6\nOZuP98kCdsv2GNrmMuUFyTeBBbzOLBCNst6lCku1eKYkOBS3NkO97LN7gkLD\nrID9\r\n=4Ag7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.369a293f0.0_1592860566288_0.6456580364962765","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/theme","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"410630f6622d47d9dc744129cf1f683cb5611719","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.f1432b5c6.0.tgz","fileCount":25,"integrity":"sha512-zhXDjafSJnWsQiNgeRb21QJNF2Ue5nWQEmAZ61CCCWIv3IB1Nz7Q6TRNlYKTP7swE2fOiRPa0d37qSjrY4JdqQ==","signatures":[{"sig":"MEUCIBv3EAYlhxz7WBWlhf32vHtHtt6oEsBkIyGUjisYK6IkAiEAzzHOnNrhpIS/AIh8HIKIT4NERktpaip88ALuSw5l/yY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SGdCRA9TVsSAnZWagAAuiAP/iMdOEbf6y+qff72Kx9D\n5k+Io1KkqtkYEj23WBg92up4fvHSI427iekBxts4AnB2rgzmfBytjKeXSvMI\nJpaNGWFlXtnaKtIL94dMx2x+uvWUboQeL15+kIJQFhhVETbndcSvqzhYQwDH\nu/tCdnKdAftszSXfiNGYxfJpsCFGB5I9yZqOwzGfpLEEfmLhiM6sjho38BmR\nzZBnKnHDmHK9+QxtGI7+id2HF2TTGnvVG7HD2noE0aBlbmsagGWVwRwshStx\nwebcGNluJXylZW7CSdR/j8Ogn0aBjHctTdA7t+ihqwtkMDuks3QFwMiSZ3p/\nMKRdxzM/YgVgtgD5X0Z8ruJAjCTzqPQvC+l/KA/HI/ikYXoIZ3N7jZcQ0zYB\nvLCWZvIiTDLpUvf9ZaZWMRAKIEPw78P4V0ZjwQ9Z6bunEAiFYurUzdJ221Mj\nr6iX06qXXkauLhf82aPTHFPCQtyEh2CBbGcRJtRXpQGF/gsH1WXmUUMHTiS3\n54RMg3NIWjnBBsbvP/4+h/6kfFPot/UDgLpcRr7JqUcYr3bEY0Fj+Jz5bedu\n1R2l1jSA1ybAZ7/q3AuYMnaZP8D7cg9Cilit60TS+yQizEauqGdVzwATFqnZ\nZJvaXQEjguLfxI6IKSfhq0YhaFEkt/VeuIdVo552+Lf8ockCydlKZGPUMpSg\nobsp\r\n=cQu9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.f1432b5c6.0_1592861085175_0.951366277261698","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/theme","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a3c365852f87e0656a679d3a9f5b89f154a06f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.4757a16b4.0.tgz","fileCount":25,"integrity":"sha512-s76Tqumq/jlKMg/GKXRU6pOK1n3DGhDN65mh5I+ZOyq5JXiGvNlDkYxto8JClbF0r62J5TuOsLanKWHSZRnVOQ==","signatures":[{"sig":"MEUCIBw9HtnNIV5PbwrvM8zuBVuF87MnPZyF5bg1C+7nifFZAiEAg+UIOQP7xRq2qZA0fAZKg5OvWKa3vAanhjJXUtlYAMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SguCRA9TVsSAnZWagAATDsP/2K3tC8UUloeqTfN3lbJ\nCJJvuaZnvc2xyvld0cfkEpAUKYMPj4/IbbroX2XkFwSrSvap+rMQN+wXJ3zc\nQdiXKLJKcPkMfPPHTxGucJPC6se2PVzuGAQHXuphW5Gc+Y7s/5UNcjX413vS\nvCPpTnFDtZz7LLm2WHhpmLxQt93/ZSbCgLacCrF8JQI85WT9XSMToNxNra3X\nVH+yIGRVLkMRXcpiDR4XYGsEKU8eElnS1DrTCDGV4wV3ZPYmJ0jxWno2ET7H\nvxX+1GqtFUFNsV+YTuso+Giy3RCTep/cueLS3QqeH4T66P4pWgE3Bj3CdWP1\niwezcM3xKA94cVJv1BIh8z7TWTrB0MP2JdN7GXxyekmyUDILXDpKRH1Vg2uY\nt+MTVHzRsNISsfeliHVGUlFUBOvDReBO7pSTxOkpnvfyYZdrA2bR96jVyAjN\n8HCFpJIYVsGdbao+jW/t4pTFKvciEgIeKK/496aj3vkyCepmpwuMv4PSRXgE\n1y86aK/f+j9IDWZNnxjQW1wV60LByZggw+D6+f5facwMfSDYOqyi7W/PFLPB\nl1W9+URkLkJMWRIkUh1hyDTyhWRokxsw2ZrkJn/kYxXHMO1lqf5hp7+i1Pel\nbrd6DoLEtVtEE0P1OqsnNoFIxtKms76Fy9pL8JdIkiB4IIDag4W2tGI2x4Hi\nTebP\r\n=VpUB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.4757a16b4.0_1592862766124_0.4018682258778463","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/theme","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.f8f472762.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ed6b6cc3e80b4b05c25b778df59ef952adce7fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.f8f472762.0.tgz","fileCount":25,"integrity":"sha512-VmQi0J9fvClHWQ9mLhc/bWq/6xU4QtM+eSQI33pLlUr+6DOvzD0ynZD1yVyIvDL+KE7OlUMVYnmxAHIzoJkHLw==","signatures":[{"sig":"MEQCIE77JRdghI9S9otXxSNtvz7y+JCHC+r//59m/erjGhXJAiB7O1R/RPwN84JtuvuYer48d/E79hHQlZmBIogn/EKUpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SkkCRA9TVsSAnZWagAA1HoP/RZPRCFGkFQgvkw/Hc6q\n1Kv4kEF1wO54LY0aFt4KARorLmt/9QQUy32JwiM45xrp7ez2ifFoITFXVy9b\n+96ggHqg9GznutGe5XQsvCRX+ljGkUwyurXfBpUGni1DkKCNXj3PKz6qItBD\nkQ68K0XAgLOBtuIUxkct/Y4x8PFJ9DfR8NNtVBfArMIbAmZ5LZqhFzhI85NY\nbVevESwGAGuXssnI04ThR5t6nbN+aGzI2DB7k8MvpqKIbd9rmaEzBrPyz+9A\nIcKOK0vzAx00xHol9mzU2afZZZNImVZai+QHGd2wDUCW1BtgPZia0gksHzey\n25l2dCDhYF4Skb1297D/w0SmQCZIOdVgq3BD1FcmGfYQVVdXfdTwfFZBLPj8\nWAu+cQ/l/wiZmWcBv7G/dTchMVsuHU35cMDdHdLXU/1u2f0nGj9Mgzjc+pCT\n6zpdH41uxHvgg12IOgvBZw1to3lj/uzvb2BLqm3uzxltGF7LKn5VrHqFXoIu\n1rI/9nyq1nO1l6mY8Up/fPZY9VewDQI16muZFfOUqiL4BTLCYjlRIrjVkGHu\nr7kryhwltdlgG7UvfcFa43ahmY07PY6qL5NOG412hIW6hgtNiGC9bFBtdlju\ncvjn2c6sHgpvPsgl4w8hwxI+8TolgG8QIdLcgPHP44PhJug2pg5PmiGUakYL\n48Kh\r\n=s3O9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.f8f472762.0_1592863011607_0.1646299220367009","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/theme","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dea5ce51a21da0c02d8019b69279d34f5015310","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.7e4d55c34.0.tgz","fileCount":25,"integrity":"sha512-Bo/24wt2+I529NtwdO5lq6V372gSOJvMaoO3PipVZezNPB/kNMFuCjHClORxOp8bxOYT1KVj2kbCi5AIeCHDZA==","signatures":[{"sig":"MEYCIQDw8IBh0FHWRORbmNI3nMfnEybqcafWAN+Iukpi7a1VwAIhAJJKwG2iVfep+uYjmZ7iVPZBn6nqSvkr2WnHvSq/0YKC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TChCRA9TVsSAnZWagAAs2wP/jjp7A3b5xzsilj1255T\nZdsYBDWLTDrTphKWKxFsXu5EpUqUsbGxDvc/AezbPZwpNif7TyvwHaCj2nXR\nwdbZpy6DBwMItcdUNro+oGN62RgnHUT3Nxo3fXsZX23SxT45ScKSdOtq09k2\n7XXfTSYANLYM96EhRaTkXVEV6cRjx9ypDhnzQ0nPxuyc8qgVK+KZCLVXiqNd\nyl3ghS1nRu98lnlCp1p6P8ykvLp1z0ldPhie4OriLkFs44sbiGHXM/ozHMJt\nOuoKCN1wg5YGz7Fxb6Fsk/kySdRgWSTm+oKtqrjs1++5QA7t5lJyo2LdGLiX\nX/pOVqT5i09Tv/xq2rHDcsWw5K7w3Emg4W4EcA575JMip5yTPzRxKtLiF3+v\nsyvxAj049IXUxTMejVkOqOOOBog+durEITAO0LvyhVrzplGDKVqwKpusaKmU\nVA5Wsl8rJjBweoun1+DDZXkBr8Y1x8++8RQVjRUYhK5SYyj4lxrangl67wNc\nLKrKZ+BvTFscQ9Q7Vc7PRph6MNWCDbuabJ7UAR4bk69Z2udn63rwfnFLTr4+\ntwxzQZJ7/Zt9BiCQOtXC7btvNe+gr3Fj8QRn0KFCzcBM9fEBfLamS8yDueFB\np+TGbOjFWXYVCd4NNidIl94r0ln9p2h5hzeEd2BAGKBMGYQsrUy7otg7hIEk\nx72T\r\n=9vGL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.7e4d55c34.0_1592864929408_0.7911785306496717","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/theme","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ddba6bb14f4df54cf9ec6c6580b3661d8403db7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":25,"integrity":"sha512-KwsnNgX4Xz26A/ntFO216X8qiXdd/wIswlYTD3T/TP/+LQLaYBKG3njGG2Lul2N/Iv4rAGECnGtCfTwLt5wSgQ==","signatures":[{"sig":"MEYCIQDW/CvJmY+tJ8z1ofBXmaEUwxGowbEFz6yvTgcQLrZ19QIhALVNRArdvpXGRHB3mHfRoyo/buZO35E1BXOi2Y/2l8ID","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hFOCRA9TVsSAnZWagAA63IQAJ67nfNk6OAakq9G6liV\nLW7iYuah23i3dhsb9tHrtBpySMHc95VcsoroxJ02BRpPvmKqWdZUqPfIATd1\nIa9JLCdotxlieYFt5h6e4HiNTtr+84jhZ/fP75uQFt6rzx+fBHVobD28CUJ7\nwtWvhfnXz91XQbj2A0y6IEmgBgjWDOHBU61ouSXzT/81mDg2Z940Xb8oc0fa\n15SnsjkTrqSL29mIkc9HqeIQbKXu/AfSjAXO88yIQ3bZgkwpugd8i6UsSkUP\nnYlTj+pIDc4xHDxVqLaDBVa/ayAwYivZ0WuTggHqXoH6bOc60kkBSDFzMocQ\nw+arGjzq1m2wEZix+sdp5J6y59m3oAALhTHuqT8FA7KxPZbtFms27nTBJKco\nyxlU+e5PhJh7jhHC7xCCsiCmcbTzdAW2/MkkmFLWz6vrDXVnq5bnVF6ZWvMT\nMJTeVgG60N2HevMnsk4utcsDtZvTcadQXFWxmd8dXbs9z2XpDxi6PNGJ3BZv\n4ml6z4yJERGbklaKZK2s5xBofrJuchlE1jewRF1o8pl6lq8/tSD/Z+aZx+cZ\n11cGMraGiKU5lLj8PNqNBiZEGD1cX1sei+qrVxT6cJ8UYzNexpLqn/Xiijh3\nxTOXN3s98fdgY3vFIYG0GeeSIaGU9swG7frO+QKQjwPvC52FClnRJfD3kC/f\nFpJ4\r\n=eRwA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.bd1dbc91f.0_1592922446531_0.542616375847013","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/theme","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.31523bc62.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4bbbcdb9e88a2f00232fd084a3dcaad28e7444a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.31523bc62.0.tgz","fileCount":25,"integrity":"sha512-hNND2r/BSEbJYtzWsjkKkSqIpO0DUc+J+nxP/Hf+7f+PFctc7NGdzABPhqQ0zlkUsflsFTZdFXvu9p92l/l5Ow==","signatures":[{"sig":"MEYCIQC8pC9sPqG3yMQ9HvZ4B3Af+c+7bqfUXbaMLUjE5RckQwIhAMhaoUEOvwM2Tcl3Mlg9+FneS9C+cXKAXo3I0X1+RHFK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":99067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hKQCRA9TVsSAnZWagAAcIAP+QHSds+YzFEqp5ots8We\ntmgEOmyHi3rmorqCj0Yl0Yte+8vKOjpc6l6pVnOnVInWnpZLrC2HeXt511r+\nAzjJ7LSmnl/Ujh6aX1fckiVt9tB7Y1ZJ+n039RyTdQLfLMhNA7Vxov9PyXp5\niOaKIaqB8vEizaVt5EmNGWMVykUjigtfkpPL7utdkHrx+xdryFxAFESvsC4w\nly8Z1UwkmjC2BXtZzfDGDMlOb5/Ve20Mvbd+xdxlIGVC2sJ/mwsG4YKICt59\nrqi9KC1znovwX54ElFZggZtdJcsfDtYM3gCHtYUthZq3+FI9qLMhrr7j4Ge8\nAqSMzIlg0DM0oW8cpvaj9dP1mbZ3aK8+hJNvunC57EFqLBBai4m5yNufSFZa\nVhyt652bnldbeMbPSFXyKjYvx4IEORCVD/7ueE8tJacieaE6W2zKav4RNWKD\nvb8Vd3C67TAywZmJ8RS8YS8CCDy1+Ke0vuOYXgaC9EkcZSXRv5drHOAcK2yB\n71UMfWbGglq+O72r5lvf8UPxhwKczZEU+aUUY7yygXuLRpv7IGwj4seqgjSq\ntVMTdWfj7SrVqyuPVZEFSD4/rt4ANbflWESaB4MKh9KA6CTtil6HNEoukmED\nbiZN9Mj33WG3C53Y67QyCoSwcPVdzTJBXZZz+PLHphy45POfTIxksPuZNqOy\nqw2H\r\n=fDxA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.31523bc62.0_1592922768352_0.14691769729121185","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/theme","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ee37dbbfff405dffa52b8ef0a230df23249ff05","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":25,"integrity":"sha512-P/npqBFEQm6/jmLqEzeE/pWqYnkb6FrWs7pp8ObmmzYH8KJUHHoLmfAXIsyo6JjOicqfIbSL8h6gf9NrnzX4BA==","signatures":[{"sig":"MEQCIBmZOYZdFVD7gywb746vqKVoNaDZuJUg2agZWwQ0qIcjAiAp5jS+4Vq3RcY4AOaiRvg+mIX4pXZECPNUl3J9ml2HvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hQbCRA9TVsSAnZWagAAXNUP/Rhh+eL3H+3dIYSMPqqm\nRbmmJMIjbcUdAkEiIudLS6zC6gXkpdEOkANFkNF1d5YaaVgNAmPUeJS8vDhS\npc250pVrfkdc6AwypArCmpaK/LCavapmMAn1te2z3XGBZjJdSj508JoXDpgH\n6CBXlfOpYLez8bmkgrLcqCxjjDX78FrkuucPBE2TxEsyvsox89j/N1gWvd8u\n6FbI7t5vC08rdMf6mFJOVhYOsGsL/5tSSkLjos1Vpsmh0+BVWx+wCwM270h7\nNIPbuR1d6NcDzmKs02MaK3toplpuqPO8dZDEixwU4C5B+AyDLWZn9YxF1csL\n0aZLGHC1cgLLQTtKXBae8qYK9EXclrqCe9aysxfCtU9ef/nrIeS42Wuj+F19\n3XiaZ2PaIouGG5FvFzn9HxwaPycJGCj5XCO5YoNS0oHaW6mxJn8LGy8R7ili\nOJV/CzLJQZIsuBT2kKyEfnjmsLpooh+17pDAG3jrwYlr5sJEYGMKxUeBAVn6\nVJc2vy6HQ3Dw8iJ6sGVO03Fwi6KynaK9A9pnzLWAsoxpAh1XapDDsTSMkaO8\nBCbEZp0CvDYuHehYP8sA2WTSfzkNEY7QDo6jqDazjMDxDHvDL8L+YyyE7zTM\naUmNy1ra4C1L0fvbBxZdDFclgHrtRU/ponXIEs4nOS0HXlGWPVx1JJ9vlxQy\ngdLP\r\n=RfAy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ddfc88933cd9a6210bdfc449fd3fbed391abf4c1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.a96b6d4d6.0_1592923162686_0.5674652593601734","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/theme","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0002c1dc5126684337a5d11666d3994e45b9caec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.ef3a09533.0.tgz","fileCount":25,"integrity":"sha512-xSnevpw0Fgnqjh5izMXtG0ygFe+yOyJQF0gjOcbFxTjtNl9BywmRmIb+QCk0wPHE/v6Em8s/JgR8R3THRtZpUg==","signatures":[{"sig":"MEYCIQCROM0HIQqWQnoh+N66et9YxwvyP7dPVoGNR2D26fYFRQIhAPz1xES4Gl50BdUEGyG7DqaqeUA16HTH/DfU5ZVGK+V7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hYBCRA9TVsSAnZWagAA21gP/24IcptlnndPh3CK8mVm\nxzkSrIpLI4Dq7n4r7WXAaN3/p5ARj2NXgbwdD+WhNUr8hpjPDe9PED18h71V\nSC0aryvYAFTZsRP6rqKSyt4Wmxxj4tQUyIg6dvoV+XTTqA3yGCqU1Nc75ZK7\nMe3t254DwVr5PW4plGoXFcz+1kDQLn2RzJ7eUKVGh3ftY0+G54eybo27mvwV\n8dQfL5VxQUAJn+5UJML2X4XM7trGrccKA35mYRRL7Dd1MEmJEp/cg8sjN0wF\nJBLoc56taE4a1uhQmV9OxDziYJNm5zRI1whjt6zLIL6uBkxWYBzTo72RDHKo\nOAY6E/9/tVj3YDsEbI/vxlMZ9+eSob8vGInNv5GV4EmC1clRV2M1A4LyiEsi\nxC8BoefTr7Is4VaWJRjIwEmPtduR5k0ohV8V7gKx6PtJ+YuOQVyS4B66A4qA\n6QWJFQh9eFc9nLHj31V6QsyhAH/xaw50YAbQtJo9vuuMCgpNUCqEKeCFKNj7\nWrgDsKAdBc/1J0V9w5Gq1GZcrSc2tKA5qvKsSLeWLykqGEC5F9Qn3dCq0c0Z\nAYD/9ITwmNPlQNJOiM2j//Tq543zpvt+VPnIN2CLT/vzwy42RsZlDTXdhKa0\n4rqZUr++QdekxZOJXW+P0NjM0zfOxIvGYMmw6p8I1RaNZQffnRgQ8FMdhfOi\nppZy\r\n=0B0a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.ef3a09533.0_1592923649053_0.8162612069604851","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/theme","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.080965f39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1b00ff799c1f18ec91b3201d34f1419a4b8167a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.080965f39.0.tgz","fileCount":25,"integrity":"sha512-Rw7EiJ7TFuB6H8OBJAShgfHZiM1k43eOfscBf8cXDuI45BdhQOw/2GGchqSv4jtI6Yj3B4yuw5NVUrQ+JUAKgQ==","signatures":[{"sig":"MEUCIBGXykNac+E6GYULbHst22APgsePjRdFIsQKYLwZfHK7AiEAxGYKF7/pmAwhL/JRu/GT41lWUxSUmDyMEiAZeSD+GCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hzsCRA9TVsSAnZWagAAmzEQAJ8RRuhRS+RmeL6jcDFh\nThJsz41o1k5xGbzmAJZAZZzqnPbD2ZJXH5kxwR4KGMVQN6Xs3Bmq3yZHRxhF\nQ0e0YfWwA3vISPM78FRCRX1CgWDV37Y9oWdU5RVX6HZqhjhsmf9dFpzDLTs7\nmJ4gEbOEhNUllQvVMh61kVzhqSrE/jdFwhBSXTuQTUtm9e69LxizcHixc4xt\nDnhktj3OmMARj/GSXzit3hxXJZic2q/0hrxD15g8D76GqyJXIN8wLlACF8o+\nAxV0sIRdSNUdlXTaokkxRg9mONw7zlWVYIX0XEwtnX4aEv0qBZN+wtZqZU4X\nIPr10ccQHbijOtWfwlo2L4qFc9I0lhqXWNx/SVcLrDjAoJ7UBllcYYfovaa7\nj5wYMyTm8Ov7QRoKXnmqrWLfXajsaJljWkRDokhC4eF7f/VkiZvP6dX9g2je\n3GE9NaSKL25Mqy4cJvpPmJGkxcUifV+otrAFMbsnlecys4MOxWzkETwsOzOf\n1VzZQEFzKD5n4oX4dyCsyGWERpBscwe18HdvXg5FpmWwR6qfgW4h4mmJC7F8\nhpX1+iHhKHfKOyeilD7AHQatV9bE6Fo771CJ+Jv/REwPilMezto2cAc4ptOV\nJyn8dGECDsXpY9CLcZcEtdLx/e0cs44ErMLzTxhUiJLUDMEXUYxTH2hp/XSv\n5ZhT\r\n=qj7p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.080965f39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.080965f39.0_1592925420449_0.9014863867998018","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/theme","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b14a99760c0be1a7f924ce10b13d9d92fdb0a0d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.1bd67b65d.0.tgz","fileCount":25,"integrity":"sha512-kdC7wu6xc2HMXZs50DfwQL1BzD9VYw3+qyYe9/cWIlKdS1/Yb4C+GjQpX4xkut4Zh228K8Tev0FYSIRaMoDWig==","signatures":[{"sig":"MEQCIBAM2pttLnNiLye0yiEk+e30mY2DDrxTCx2n1Izn6WoKAiB5xyhDK0VCartsSuXtFEH3y+nRp6gTk8M+FIqrfax1Fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ibdCRA9TVsSAnZWagAAzmgQAJKSCLDb4nppOUyYqnny\nh9Pq0S9ZMy3UvgA4m7Q9HXQ760zyVczCWCKpLoMMr6qIZPQYacSILkrBIhlR\nNGC4LAG7dlkNgXZE9NCidmHIjWL8MaGFMakvIljt30sP+0s/Q3UZrPMIQuTF\nvw+5U2NsRMuzQttNytXie7JMNM729wZ+Ng4D9w1iRmL4e9z9fDXqX0Yz2Py4\n2vhCcKsjTdyim8/yCN7C/7o4NRhppKOMp6W0S4BPqVleOl3c9NW9/gbQ8EE5\nWGwIBipjUn2DnGd1lwca4vNLXFs9pe16cFhB0Xcp5r3uRPCSp9uhEeiyCb3L\n7hKQ6Cps1atqc7jV6EOMBHtaE26xQY6RhzaWmJq3g9R0B37xUPf90y0FdBdC\nuYLX45p8ywa2TSs7nZzUjLwn2Lp60Bs9CsC+7hNTQhcGuduntdhiVPBu3eLa\ncsLKXfS/MjwvLMTtkCOAICUWJOIsFPhbxNIpE112llM0LVDP5oEFhthOmiom\nTkJfDS3QmbcQfcls3vGe+w/B/wIU0fMQFG+2dAMWtjMWF1rMA6sQwk1+Yvzn\nY3YX1ViGMkvanUOA1AyBrkqR04IlKov+QYNAJrkV/6wzYSkPDv1RgWt5KSJ+\nvLsauQgVkdtyU7+eqNHfBB1C4+vLkEdhKQiFza9ZMyB85JH21oL+5ZNsOOtV\n+3FS\r\n=A7L7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.1bd67b65d.0_1592927964791_0.31992345558530433","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/theme","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.18ca31248.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76738a4718fe715ba312dfaa7013b9f59dc70f85","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.18ca31248.0.tgz","fileCount":25,"integrity":"sha512-wycVN+lAmrKiud1JAG3f4PXWhbHBDDoydFPUgb8gKCWG0ls1x9rXEzT5bBe2Foc5TaR02z9TJrJHiHA6/3AsVQ==","signatures":[{"sig":"MEQCIFy1E9pEvAiys+yNneXvmfiOfFokB8OTjGsIT9QNIbgXAiBZhWn2Spe3Webtw7MT4Yrto463tQt8nWlFJowlZ9PrKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kjMCRA9TVsSAnZWagAAC/MP/25a1gLlr55kcCpTqGIH\nJznnHWajuPIMDb7ygXu07b473LzYKDO6kZ3fzh6jxfebS3WpEDZp5cErqv9x\nut9QXYfqp5UOsKyWCEdV8UXvybif03rpYLMNjfAQnxz5aL/JH8PyF4w4fnGn\nfPCz5RlnFGW+rDbxKkeyjY9pEw5kcEeaPHZSUUmqmF6kg47RSAHE82Xj+8a2\nfASusHIZBW1x5uwqPUVZg9hS5Jw8+QCS5XtJ4kJUjzd222BDY4bFSahqNO0F\nyRezvgqQvXeTyS1/+P7H9YMS2Tul3511+E/te9QTRVCtWuGDW8N3u3EC6WOO\nzIQSI6zMG85GyM9k2nRVCToccbkxk67LcQyZB1tOXOEx+ryxGlvkfF4OqwaD\nx3J4+grlRWfSXcVmzXWYgmFk8zgepFmiMzjzgD1jZ+7UNzMfVgpg4MmeqB1s\nu2z32UeB3DwX7VSC+9i1LcSUof97V0GBW95GJbDVJRZsa4p9EgnGzNAy6hvm\nbkqCVPkaTgQvHhkcV88yxYmTlpeYaJ0LWrOI74H/eHO8yIhR5VoQY+9O7+d1\nsMFWN9mGUXIyL7kFjyupvXk7i54MPoeye4v+djrEsSUsLQjPRV7isPWUBRES\naWOMVahHe3uLoOUmrFljYjX0hUbCutYz6q94FqYm2paHz/GEv7UUS5cG4b+I\nm/Jz\r\n=l3Hv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.18ca31248.0_1592936652289_0.8919311425082452","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/theme","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.39cf00836.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"646e49d0d9eac9fbbbc802331019d7e0dc5e9c68","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.39cf00836.0.tgz","fileCount":25,"integrity":"sha512-Yf11Rq0DAihnV/9n6Ks1e+nxwi6/LedyDuceDCGLt+yOrdYMhMCjj/X8TF4ellqJ3n4tW0tRyxFg7DMUEKClcg==","signatures":[{"sig":"MEUCIQDvkJsLJb241nWXNCQKyyer68vbfzxCG60gauZsJHjpsQIgd8ZXaJzMA3CIxw02fjIUC+eUwtdaAAEM6NhdW9U1aYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k47CRA9TVsSAnZWagAA3/0P/2RWYCQ5cmRlC+Jn9tnp\nekViApbg/AeFokf7qpLwYyO4yzmfT+7OIi1KFOH8uZ41jMoe+GqOpzk7F7WX\npI+goAvF9/+3MxDIBjby6JeLH0ng0SuU7IYN2W5znp/m2WozLa1ORJe8mrin\nd5syPmNK9AHTi5WweL9tg7KwMNvnfYxViq7fIkveWVEOfHVLb5Snsu9WbH0p\nx/S4h9nbIxPFwCucXCcaJrb08kpNN44BXvhp01zjksv8UK3ee6T/nLDDJa1i\nt7ZvXZM/AEzlRsTG2AmX7R3ShegF6lPST3muu+96GfYgGTc+6Ku2uQjWjnF7\nIfPA4kGdv6hzNxjdp4bSkq17r1/ZZ0n+HjNzFcPbn0QY4BYNGtmK2iy4/tzm\nOPPIpMefIAGCUq985ioJt+Jl3q2NROQ1Gbxd5xhddcR3cAzGpn/F87dzsQB2\nEz2EnxU7BzWk5fO8+WioB/dqp836iUMD1r3moxeatm1FTHQSw/YDmNjufmXL\nhiy8S8Q6xyeMzegvbLznKNYC6aNJNxEi15+YUIoo5IucPEVV3iAaT9ZhU3Ej\nuPP9Q+h3j8mvHGBadh4jbT8QaunB2VRl6aJJaLmTZD/4wm65iQghZ58XT0/F\nByYZn9FM+fNU9esRgntcVGp2nB67LscerCmR9f9gMUfpR1wXuYq1FX3jmI3l\nKW1z\r\n=duz8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.39cf00836.0_1592938042741_0.7325376019942937","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/theme","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4753494a66898f0a071b6c20e5a0bd6f4ec8652e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.1bfda9e05.0.tgz","fileCount":25,"integrity":"sha512-6aceGS1KrEczqgaQFqFmm+Adue85iIU5foUyrXfAwbcJdGpudt8fJtOPLYlC1/t8FFMfgE5oPjgY/ae8bgjv2Q==","signatures":[{"sig":"MEQCIDHLNjigGePARISEV4g/gdlm04EQEuuP+B/5f3+3uq03AiAUr1/9fiJHx/0Qqe6qY8Spo07wBkrh7uicKACuoQpP/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lEmCRA9TVsSAnZWagAAJgMP/02n037TyBouYB8ER1Se\nXqlmabQY3YLvbfSubTLcIge8Ci126IBrM2jemW8Wqejh0EgbFosKt3tN6E8I\nkesroUjjMcIIkg6IAVlOEnG63Srqsmpyka4JfSoEvNxf9gEmVmR/KiAhGZGW\nY0cjOeqrg1oaqVzQCTt3VO8f1GsfH9MqG/IDv99koo7ROmJMFuKvLUQu2hY9\np83GumlHgO7yeIHY85APem66kml8Od3Yf7cbiD0/cTC9VV7BS73dMwxdhpPi\nBgw+yIJc/6L0jCYPujdhm96cpXkzMp/x9MWFPfT8LeAjcF1cKoxBY2A80L3q\nPkrjXV2AfNoO4JMhwgXKGwdJuBq+e7Xq1JBjmWFth1zygzyjlY4C3c2HCu3u\nzUk20TBZOfCJ/mmPagn02g6cBCpjs/6IywqpjmMidCHIZkIW/mL4tqf2HnO+\ng6pHZQDiZlRx/9m4yzRCLeP61qhmQViXAWKXOjqsmo8pmgcCvQhoqHL/GVjz\ns33eM0Bd+oVUBD8W9ewKkmk81zm2p2glV0Uu95Yd5HC3Ua1cVb5NABRq+/wy\nFhYNcySv7humacBmQwvKskx0Q0rN5VCV9DsctXyBBhT7KHg4pIjV/jK+1HvE\nxhPXAQUVlHGKW9NnwuGMc0AfibBXCUQc2U7pJvIAD3scrnlTA8Og8yMWd3TV\nvxX8\r\n=7CrI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.1bfda9e05.0_1592938790054_0.20254283866531142","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/theme","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0-canary.08731bd95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a750fc41eb2aae0a0a079489a83b744be652d1e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0-canary.08731bd95.0.tgz","fileCount":25,"integrity":"sha512-fpv5dZA+EL+Uj+Iwzb6TX5E16TRRENYFGQ9A/YSSXmXi2sffwcuA69QVSKcw218bpTg8Tze+yOtSw1zYPPawSA==","signatures":[{"sig":"MEUCIQC7G2SHOYnq0z5T6H8nBUj6E8FE46KqyjZ6MZev5wwiCAIgabC6XtCM+C+krxsNW54WzG5B0ETUnjTgQUTuuVo9Fb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lHECRA9TVsSAnZWagAAh6sP/jPHVnDwI8rNTawUzvIc\nRg7o0x8nbC7WgIup8QcxiRNU1uiCss5GD3s9HZ/u7ePyZMMWsYbbvu26oOwv\n3+AnIK7xJLzXfxUk86qA3ESDkcQ70x+mgBqEkaiftzhPM2yP+ZV0JPSILaH7\ndXypLSdGxSlrO6NgEiQRiY3zkA+E6UHhjK1PcSsAWekqF3sMjcxlSrG166jy\nTOl17I9QzVhjwMty+E4CB0N5gmDzlp9r+pdESqnRe2+KKcxaVXF5AmkjVlmh\nXzj375s2fkFdKx/myxP36CgI4lrebvGM1UEEBTFA6yfL4KP73SeF7mt/kN7i\nK5NFM8L00ROwRhKyU7hroPLrw0kXCW7XUfHoGjHI3vpPBwSHtAMdCkbgyUHr\nTDiisZ686XKqV4Ofq6KbJgbCxc/TbwcxXBzZJ6SuZ635s+urX+LVBeUveqNJ\nH+124e/hAjbNq7KWyksD/pMIb1iiac5DxJbw/yUL1Z34BDxCtkekZ3R9y4sA\n5vT2dGF9QqV/8kNBknfgeVBlaj0cPfvbT5woUZDepeb27ybWEse/hEURWUfi\nR0qFPhmtLHkxd7Sf9W5Zywedf0NDYID+yY0M3ZaJBU3NIBH1ldo6h2C+qXYE\nQZKfHUim1Wp9KUAp2+NMyqq6xGiZzECa5sMiec8daKd7aGThSRVlap7Savp2\nxPV3\r\n=uQ4z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0-canary.08731bd95.0_1592938947514_0.9804042793601457","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/theme","version":"7.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@7.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0a91134fb9a5685f3c36d6a8c66b95e762d15a8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-7.0.0.tgz","fileCount":24,"integrity":"sha512-tuwsTG5b1SdkQHnGOCsr/2Vl/smeIWuKtr9YdeHjqiLphEAzamd9tDCzSEXaO18wLvc7xour/cbWdD6LW+q2cw==","signatures":[{"sig":"MEUCIQCGv63FzgoBbqKcx5Hy5Im3N8XS13Bzv3oHiuZOXcL81QIgJTCaf4C5lthpE9LFHtJwyXtukFLWOha0Juj7Ss9fVhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lORCRA9TVsSAnZWagAAoZkP/j4I/SXG5EQqZ6X5tgAK\nW9AsnAWXqmfFLnQmpFQdM5tWHKk56W+q+4K+xGOa5CAEpKDHgAB0y+e+A+TA\nkkFsVhnUOcfVYVmNVgZxZgqsxhBLGY64ZLyQ6uA5TtnRxW5cYNCqYrDRQUje\nBJ2WBCNs05tYVHzMB0TPWYe+Kng8A8MP48kM3jfHdWAyW/Nx3i68ddFaYnN4\nZMVOL6Ajb+h4aGpIG0uwp+9RphPhMlRqHsYGR1f6aWbpzXKD0+JX3pWS31am\nlA5VfQRzsUQbV01CrXCqgG9YZpChY+ckCRcCEGP7qv71wrtlqLcqpiwZuLXO\n4l4D8dKtcfgtXLlX3X5ZJLOrY8tdJyV5BIQbGMmuKNj+N1KyzFi4o8W8BvSS\nK4qAKyvQ26e2lpXTCkIt3avDORA9IfUJSnRaFu14FUPgWl45Y04zKCxxJKP8\nnQi0gSEKk8cdkTAA0t4yA8AeUD/WW/06Y659A3yd0wO1SB4tG8p6sHEo8ScY\n+sRqyr0bUgvukRL0a0C8B0MwvP/f8nVSIIKOcQV+9WxHRgQBDWjGf4wJOUkD\njW5JKAmtBkykMIIof+gH2Fa69MKlBPrEoc0bDvfMOaKwV0K4aDuARKWlIAD3\nl1KMvikXVA1yL2A/GFKCQ2NQS8UMFKnXqMwVye1lFAStM5NPnj3sqlEMJmZy\n9rvq\r\n=9UCS\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"^7.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_7.0.0_1592939409200_0.39788723108006807","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/theme","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.a3212b209.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c718ef1642e29517eb5112a3065de8090ce90528","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.a3212b209.0.tgz","fileCount":25,"integrity":"sha512-0IVZJApBzaLyePjjp7ScFRda5PzQxsYHyP3YzmEzREaSrsaAHzL2IhevUssYFc7NTO1VUmufONMk5b5fymlqAw==","signatures":[{"sig":"MEUCIQCj+ffEvhdRGTauQxMKK1Idp373Y4kWlJmbH4FDt474bgIgORZC92G1d8/G+sYU1pHJ+BK3THUsFYct0b7/OVSIq1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPFCRA9TVsSAnZWagAA0qIP/3TEnUpmlgmVQABFASgX\nijJ4lVi1Iic7As6vMvTed+xuMunV8Y/ZxYyEL2t2Eqsk+G7pvWRaPxZ1jnIq\nKqh9kG/+DKolo/5E3DVATYP8sQhvCMW28tFbYf78DsTHZX71KkBhejorygIX\nvvenufZ4TBOyCiMaUf5jmKNC3W3WIvEcKyrPDVYCzY3+lUx+FuSmx0m+zqg0\nv+NtDymUkrR5Q0n/c16FtbUXXFBa1ldpzR14FmVqRLSWxs3hTvSEQ1VFfSN0\nHGg8NAiiXihBy4AzzVcKKHSj1dqdoXzfviIhQR6OFp7uLryURM2Gey6xChi2\niQBhUiZfDSB+AYKoZJ89ewP1A68mbPaWyj36xe6Swp/dhxyZiRrQXcQXYN30\njH5OqBydaJCPVApM+IlqKIpL940+4qHYwAJHP9fosqII4A4N9vNUmxZQgFc2\nMUhqDoEsxS4S3QUa8TcsSOKYFWRCJzYVrqXnpUG/VK0Vmlbz3Wt3MYxxAL3R\nPKDJSUP5ZEYmjOP7XV+Wk62FOmMpq7jOBJXkbvCyMkcY/EhUYStlIGlTrK9o\nSAHN270s+/rpIx+GmjqTKWoOhu+FPnFQR0JUMrhCGJnps6YtUZhoyEdKYzcd\nFgqTVHUqIkIQzoH4+P3BS+5wL/MMSh5jv43wdIt1G1GX+9pjiGm0RNsvPmPA\nMR96\r\n=EitE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.a3212b209.0_1592939461412_0.906833691065553","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/theme","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b0e31d270d68ff0bb5ac1a98924d052c886bd8e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.15e81fe98.0.tgz","fileCount":25,"integrity":"sha512-OeIQlxiuxaEyUCaImYZetT2VgQOba/huqrtsYOl6GztU+vuUFuoauLw1fJub2VbyDZYt0RZfukzF0aysaXf9bw==","signatures":[{"sig":"MEQCIHSWgWkXu5nbMCegcJfdOkYRkypn0IXr14/1549MERfCAiAgC1Uncp1xnCv96sBcLfyzsIqgfhXtBxyUAt55/mJBFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lqaCRA9TVsSAnZWagAAN8EP/0L6aQ5IKpq71h4uLEBn\nw0U5WJyQ6akEUAREiCyfm/t4glujaGzL3c50V+Bfbpr0z1rtkRu8w2HNSDoC\neoaRSxWJej2t0q0dH/cCIsqzq3v63ePZBcb82UjXFEKJg2l4wHvntnm+6Tkm\nF581qTxopmHOmG2VQ4NTWArVlQxwCHbQY90vYTj+b5yH8czHBFPJS4WiyvjL\nDjS5RF54XRpVMMCJI1kqSOQuLHTMQWd9IXTOOCgvY/uQ+7NsYNErvzkBrJIG\nTnWKArms/JqdEnLSkHjm7o4ZHrmDGw8OIdN2bcbgxC4QtAwzxe4LUXc660Jg\nU/6+yc0YOxBDa84+8gWQrB2jDRSLZ8bJnupGxS+33oap8YerAZ5ecs+K3nk1\nSVS+tl9ZlrSyn/L8mk5IUHatW6EwF0mCNuNzlKwlifssX/Fpi+aWJquMg4rQ\njGn0xQAkl6Yx+duIHSfRdG6CGv457JWS0oic/d/9Lqjbyk4V2vwH5TxzaRuQ\nV7AAeqclCVRZDjwUXa0EcXqi9eagR3kULEFCCNp13D6+nI/oUqJP3nsdk73b\nkzC75kGn9lOOue448YHaIYwIzLwEdMQXiSa6jvu+0p9C1+eoVCcuXjZUdlNp\nTsUcLbdv03eQmYEK+clW/Kc83PYiORJSGKExqN0kPZps2GZt1X9efZpyeo76\nG0GB\r\n=pYgd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.15e81fe98.0_1592941209340_0.1031303175631304","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/theme","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.004c9d392.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc9aad7dcf66467c472378404c73537bbe7801d8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.004c9d392.0.tgz","fileCount":25,"integrity":"sha512-FcM/OeFNR5Zyrzs80q+GDGmtxs/LY5i1fohEUP7iO/Z/UqJFyADrTmjHpoHgKMYMCi4r3g7BU1py0cyn9LP4Mg==","signatures":[{"sig":"MEYCIQDP0eYLXefjLGcU0lqF3eSohdNkL9H3zijArlYAUXgAYAIhAJpdXFAhCTx/M9vPN6GwjHul6DbvPAwVOUG62VxS79EV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oheCRA9TVsSAnZWagAA2rcP/Rxl7b4juhA4z99YftQB\nSE9VSPqwqawqjER1ouJmmbFHHiBV3iCuNDb+L+5KO0NbmLEtpxabsBOtxu/S\nbRFSA/iHKBHUvQVy+7WcOHFMxGgU7/yKfH3VBhjBmNfGoKKQ3NMt1E81BS6Y\nPQN3c8REGhc5JbzdjNzLNi1KLVOLe5pdVDdbZZDaDs9HDkrYfsTbormPIV9P\niNLpwZdJz+bu6lThBpC76hEqhG1lRXmQDFuL9DWBUagPNAIG0nHA1Aw+lrQk\nIHIZRvWPatvS1jjC4fMlCr8IEaVwPl3O1zj50CvRkC8EVrHSQSiPdJaGYnBv\n/2MRicujRgC+YU9o19EE1CYX7QjFjviKtKtcLbcdeXBNSPsWTO85BAEfwBvl\nMrxXaN8mOYPctcl/fgWQHWHNSUF9gwHOKk/ayP5QFWttvTJGgi47EuB1/wwQ\nkTOCSxv3Q560E/d3UIOOtDUvVmBwT/8ZsK93OEaskRRqpQZWhg+/HJ6dlQWF\npeUE4vC/rAAik6iBfsrIJKde7i6cHzVCafXFyHC00xpAKCCNQ+xNWmZe29KW\nj5PomR3RbDKsznERhtjNhBVK59ecdoVVjl9deKuDtEjo1W0T7AmKUz2EGuLH\nS7N9E0oY2ixp5Fasq6+IOYNdkafYnGbNxDskJiXVVcCAKjSAm6uuYpKmgJxM\ne1D9\r\n=Q+aV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.004c9d392.0_1592952926347_0.5709590467911232","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/theme","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"567bdcb9fc77f5161a5c3429832c38c1aea11732","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.03bde00f5.0.tgz","fileCount":25,"integrity":"sha512-po8FqqE1ar02t9waz33WVTEB/iSLIOSm1oYUxwKY5XYhbBE8A8/mwno1efnGRGeeARH234/qWBr4garNVrsuvw==","signatures":[{"sig":"MEUCIDl/ex0BIT5sojqLga31rWBCMx3sm+Ik3YCWkkVOxYpcAiEAgqNZDQsjTR9viI9OZBgXf1PL5T7CavtNzlgKy2DuiUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p7KCRA9TVsSAnZWagAA1KUP/Rdu7R2T/bnXOuDRrmtE\ny+F/dWx0gSlp9l06h96IupSZ+3gPP9koZvxQwOcc4HjEYAqslE8LhCvy9Vuc\naHI0lwJ1MlfgOktzhtLRS2OT/NZijVp/CclMwWPt4mZuziU1KmFFoE0DAK6T\n7ES3DoonQ7eXAESlYsXmsdwEwdUE5hL79l/P/q8tdW+ZBSRuSeA7hBtNqzwd\nC+tPSyWyd+KjydGsBMdJgR3ICzCm4ic4x5ql7rqZ86Ys0MM3V2g7eDPGUNPj\nikyulgWXISUyf+sIQm7S68//3xwG/ZhuLdVS9wUSxUFPjYaYL3kJhO07XpRq\nDa1SNbOdVmJQwOnGoFyIFRPjpPiHhxIfbw81MNLTr2OygJa42lk+nj7r4bkv\n1pBc9Za7elJZ8pRNYc5IMLhokfyhkkPb18AZ0KGrPzZ1xSG6Hjre7aHzn6WN\nOah4cD7uNGRsndjVsI/Tptbrarf+V7o7oLc25TEddpQ5j7T+Gc+9+fGEAnv+\n/pXurEllx/DemD/P5dHO0K4wDVCWUwQQijFPAViw+Z9ngxMSRsuuL7haytK8\nCROC5MFhq6VKY1lTl9lC0nEWxBaDul+VnjSgZFywMqfUVqwTx/E9xhQVqBnq\nBv8ZSHRfy1ZYC9Fbwc7FCKYtG7Yu2IEZtTZx1X+dNbunCJfW+NtxxNkTl8aD\nb0Cz\r\n=wsR6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.03bde00f5.0_1592958665903_0.28756928179616614","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/theme","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.599b8c319.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c7dd2afedfe60c8a928f86de7b37a03d421ae7e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.599b8c319.0.tgz","fileCount":25,"integrity":"sha512-SEtOCOxYAaxl1O5X2tXxMW1EW//UG9L7p0iLDUaMqSnU20y/myg96q63rAWRgQAu8/Za2GVfbNILM8KLMuAbOQ==","signatures":[{"sig":"MEQCIC9HQIb34Y2TqVmI/gcxMeEBHSgLDDU1C16hrgRfMzy3AiA0amChnJDD+aZ9cpjUbjrEp8Vip1ISGTBSn5P6UnG6qA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82lvCRA9TVsSAnZWagAAtTgP/0/JPDSrdyUQWg7doxFO\nQFPtO9B1EdJzk/YNi6opN4EoCnEaGFkA5mCgTilyX2RwyN9oY0gfxPeDaReI\n2c5XwsEvDa7trVaDJMVTuHR05vcCVKP6sP8pCwgmzeCzmMGIBFgTm1RpRQCm\nv3hJhie3c1Yaqen9DzCbmyUVB2tNmhe3Q3k82uDyK86X4sCTov+7EIgYov8M\nNm86ArgooKlv269l2Qn7XKvv/tb+rAhg6pxWCqaeLZeDDT83tY9RqSk/SXqX\n3l3M3l9o2S43XmLmr8QE/s1rF7T93f/2vYS7n7BTvkDVencfulqIN1wD/YtU\nhX3hIDAsPM4MrznY9pHLMJktSUrc1BNcv5ELQ/7M8yfCw9VvtJJNDyyljlVF\nH5NewjpcgaCLOjboAH2aJhrFaceVPkfizu41Ga1McBz5VNGI+VgEUg0k2RKQ\nU2ILxnDmob0pyeMrr651i5MeTyFtZTvS6nWZDnJxJemR+NqlTV/dNixRVuF+\n8VnfuXEr+LQaTI679W0hnpn4lYsJJhNgkvHX6DGgH2gzEXx/T36Un4zW7K9Z\n5P6qT1TTFqFQZvo824ushsfLR3K5XfrZFFJ3P36vsozYqE2BsGN/ecfZJvG+\nksm7ZOQPOH/fxYdAxh07TU/GSKAvctOIf7larebeC1tLFkVpwBMQOP/Eqahm\naDbQ\r\n=SFNN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.599b8c319.0_1593010543165_0.6098865428274369","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/theme","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.87e3be418.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb06c7e074716fe7c00c811b558444976636134e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.87e3be418.0.tgz","fileCount":25,"integrity":"sha512-AqYVcDd594oegy3dOc8Sgq682OP9/kzzHkniwfHRjZK91IGWZEOC1cMp7AB2q2rf96SgR5MFRwfH0OM5WHYH+g==","signatures":[{"sig":"MEYCIQD0rX/NsXXVfIKNdrhp2LbDRP9yU0DEGRlXuHKDngYLyAIhAKcI/a5NvojcfMRkdK3ADR4KWjSc0svtx7bzvBqg61Sh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85LrCRA9TVsSAnZWagAAhXoP/11FcysO0bN8x4DVOnib\nUE3zQFve1oMFOeLVMYA+NKE7uGqyWIY50sZI+zCZFMoZwWVNxzTj0qiFZZM/\n3PdsX57gR8nFJyIt4kvmh+jbayTLNkwV+vdSzAYEmMzpBYrHsOIZYCZugqUM\n7krPjaNlsM2HudirLL5pe0cOalO9k8OQXl3PyQmJsqt6hEonImrVLFYwXg6t\n+gwUH0ZICKfvXaRKvrMbWPnGWjM+Ug1mw1wmyvMKCULDs300mV7tYQW/arr9\nGyL7JfHTOcQ3mksW4aIOl3FUT1BX9PgA5w+iEdzw6pUh5TGFUEz5e+E8ijbm\nRsbHtS0zY+vtUmVQsxwHpocwJSndNu91HhDOD77Cn2Pz7dGi80TZcVQd3s/y\nxwy2dS9HoM07im9UtwiCV5pcBofsQ58mfWhM67xrW0wXVisw5Fs/ZXId5gH2\nEsNoGgbU8aAgfjf9kOSDP1Q92JG7R0PLOrYpuEri+CsA3Z8RYpKER5gQve/f\n4wWEErnR17boXqvbpoEW0kq5mK/PjC3SGXxMosNQnYgkX6J3y6iWU3G+UuvT\nLzgeBlfc99ODCLp2ibMiRhedWOARtMdstn70/RkSLOwUarOHStlbR4W7XUuR\nnWj3NAgd7TpezIMGwHku1wz6zry49jo73u3yOErKixXib8ZXxV/LCn82stNh\nA2Mw\r\n=iqoe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.87e3be418.0_1593021163229_0.09687806588136083","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/theme","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53712227adca5fcb4b606b80278ad8723b9ec120","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.035cf2a6f.0.tgz","fileCount":25,"integrity":"sha512-qu1NNbjG+lSNNRQQwl19xGOWTAyo8ypp/zGh8PVIaztH3XA2xSpuG5T3idTA2REBA8SJck8JRgq0WBCpWnpmlg==","signatures":[{"sig":"MEQCIH87wsfYqf4I0vjOoxHdOkNr6DCTiQYmRdQc8ePDIVtLAiAJM5q8djhuUOAKY0eyHzLeuqwaFHacBGjvbhMKx4c61w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe852RCRA9TVsSAnZWagAA2gwQAJGU5QUnBSDUrPge2Gtw\nfGU6ucnpWZ86usHRIpxAO9vH0uD45AFnxfgbRzdelEV7MrcQ41KJhp/J6nt8\nZ7nqbafPmlbEWI6hyPpMHU9SXL18iZjxB+wRhE8oNoEPZo8MDb+Sr9nCucbE\nkRAy73oYqi6ebfl0yL281XI+usat6UtsUeSEX7pwR7iYY3k0oXXyrO5wJ2gq\nTtVlca4A4dTeieGca5jRQ0aYaxOGhkkGV8h/s09EOWQcATAq5BvwF1kIX/mh\n84MlOqVW0LIFw+fu8BELfZQyXUDuVks4F8KpvPOP2SlQ8BHpIVksJ5K2f+C5\nvbw0goblyycQo5E61cFQgt3h2RGf1wmT1OTTJUKQ6OUDEDpMjq0B2UFYTd1d\ntJK9Ur9Br89tHn5GYB5iYqsO1wlYgawVK0GLZPTF8NdetezNr6T9k1W8DbcO\nIUdMB3VX1USDU1FEMITozRjcV0w3fJWOgxEvh8696jYL25Nnw2sFLxADUBdJ\ni4YLfE01uxBs1Ato3sbW6iu57aX+kNI3nwMK0+Y1lEHCSmRXB/wbUlA8yYEq\neCqGMEsvbZZTRepCnKrxVUFdj9sHqCDG5M57iNY2Pso+6ELf4mV29gDofK8B\nQwTQxZz5usyk5bBhdBCnFG9K/Axl4fH0EsaLj3Dz+AS2zjkg5kOEa/0jxW42\nHSq3\r\n=Ce0I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.035cf2a6f.0_1593023889086_0.9275118428876274","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/theme","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31787fcf31790ef22c60ad06f18cd84388aa629d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.2fed2c12f.0.tgz","fileCount":25,"integrity":"sha512-ella65VU+ihWCMcViIK3hjlFw7GsHm3ZNVBa0xl+jzsqTClGhQXNDR9ZIUkNjtplorz6Ynmpx5k0pSPgl10Y+g==","signatures":[{"sig":"MEUCIQC4ZZ/xQX5QgHx9QERVM2brQAVRiJzTfmOQSVmOMHix6QIgIMXioAwNL0pD99RO0EqOD5SWsIclSsfyv1/fXmV12kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QJgCRA9TVsSAnZWagAAMfcQAIpVxK0iNgjnyqZivoZc\nwk0laljwbKXz5GxKb88LkWiXCMVhRmswfmz5lStAW0uzejpAIpcklRp2pxVK\nu/tD3YyUgKGPKy8ojFWLJYP8HHhqsIJiqFyryWGOvyZZgzMqm3YeTc37S3QM\nzNiZzJ34jJdhnBFb0hYxkwQ3UiN/wAYqXs7fD+qvyMICofihAw0o+CJb9jO/\nLx+h13b7GrlmNzoEs8cxPdSRQu1JJ/CHa/1bxQSSppDRkMbRrxhJx5of9bpW\nvsQ7ccfAjN2m2dxo3SrzZl8i/bLW+Iwsy3Y1IUeaDztAvuFmu9WbS0nJF6sG\n/fyVFUw8ZUpJCHOJgnUtXGrP7ouLvsfhgTLrIi4k7wivYGtt+IDQA693CM5s\nxU2+IHmUHSC79e1W4TMHT2u226YnIrmSQxhAxXrOOFDtcsKm+PtPD2qLAI6J\nQFbRkQ81FfuvyDewt6pgLb71XkdlVhhIJpdc8c/w20R8CEqy5jpeH+b7nLAx\ni9/dYB/4V6Gakkj0Wd3tG29gQE8jQHmcCIeCHHRKbW70FI1wvRHO5Fa9jOzF\nXPCxdi6ySghKIh0pX5rJCX56cdCDh3hiWulduwhuZrF5D8avmm6+rKmI1eA3\nMRRdVaSplgP1YALh7vFpuIPV7D6DVmwSjAzNc3cmHR/xpT785gjBAQvy+GcI\na6tY\r\n=cWhC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.2fed2c12f.0_1593115232092_0.09768304323418553","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/theme","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.38197b443.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"790c66eb85b2dab6ca21ee36d05fec74153ab394","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.38197b443.0.tgz","fileCount":25,"integrity":"sha512-wNSqVH+/7Dm16l/hkr9HkKzSPFWuFC2AdKDfOqVYEpXoeRwpvD1tfYhVnFAdDqd3DitNnhu57fr9OGgC5XBMFQ==","signatures":[{"sig":"MEYCIQD4ZZ7uxCAuy2CTnSYjp0GPtBcOfgjCk8r/TKDIbXxvXAIhAIOZ2RUgQ2RAB5ug6a06p6E7LZKc1BQnS73fiqbV6Vm/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RV3CRA9TVsSAnZWagAAPoYP/jHyvdIn9Cp41ls1B8cb\nSC7q8iCjxoxgb2kCT/tonOz0Aggla3lsBI7yfvi393ZnVA73H4/e51Rm2GYX\nD04I3LvKu+nndl2UBA12q0dGZDEoILqWI0MhM559NEU2oiE3Rb1V7W/ED3rQ\n9AlxRbm6L3TrEZyszUBuWKo2rk8fo67QpW/0TlBHOHxZcNvkOZvw4KcY+9SD\nh9P/Ez/AuMfTeYcNFKeNqiCwMzxwFh+WMRb9rtt6HfDVPOE8jCq9KXdCg4IU\naDr2AI+Uznca1LpA1VRKwvH5WNYfJcxqFBNehIF0GE4lN/nOzGA0cwJyh9a0\nmKrCd7B3Coo1opJ8NDBLPaN53e9Ked73kg8GvcdGyAKBO2pCqKSqBwrYYP4Q\nE4zuNurR4ZIrqZ9O22DiS8mZW6PmfDvEVZvTZD4alsd+gtwraNc/YS6f6vvW\n09TDY/KBEydnA0OU1lmrgaORc/QlxCSbeWcy8vqshT6/fmpV2pzELMwWl5My\nvDiy+t6TOhrPq7KitSnXNLf1ubyhfE/QRsC2CDUBu8OAlJmKdiZebxTWMyH+\nWaCHjUmU2hD132jWrEJOUJ8OwlkuF+R1EUpG/E+VrReaQuGs5SjG+fmcGh6s\ncvNIA/mLEq6VphkwnGz11wwSlBgnlnicFKhPCPKsfhL21wTZCA04fe28LwLJ\n7i3Q\r\n=PY4m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.38197b443.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.38197b443.0_1593120119107_0.5508764463562106","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/theme","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4b458f330bab4593533c1acd215c363a8d7d0a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.69a35e80c.0.tgz","fileCount":25,"integrity":"sha512-2gV1vFehFNccW1kv6JpgCDoLOf1lvHQWVXI9Q1uqc5Si/vp5v18yV6aeR0110kGaZ2MFN1ngc5Yshkrer2pKww==","signatures":[{"sig":"MEQCIG8WnTciA56unwn+6YD5yM4ywxMutvZMDLNRp0gPEhA7AiAy+EsauQ3T7fPkUI+r9609aA/R74zs+GvaMUSe43ckXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jKDCRA9TVsSAnZWagAAhz8P/iZ7FRjqjMKArP2zSpuV\nAj9D3Q/cMeKSRYDHKSwECYkSKcvOtsXMHRH1ROwW15sYqmrcprZmyIoI+NSM\n+/t9AqPHYizUrhFYZ4Xle3pt57jKKA2u4OKpLyHZ99um91EumltArfnug9o/\nT7TKvKPLGLHHbYjLyaacKLNIQC1SPKd9D+xwaNgrH493sWmMJ0moMORaxMYZ\nir9pVeMT5vaIHV76L+BdRyXNuPp7tju3zkbTm9a14NKSYNuqwOhh6e7FOwYp\nE8mTKHcRdLl/ee0I8OQnWLwX1YsY1X2AfDycFEaZLnhJm0AHH83JP+MLabAW\nOB+UqwtTo7f6dXPO3byjyns0TOfDqKxrXMgTVFtE4Iu8GqcwRXQ+5qqg/bnW\nexeAtHB3LIsB0AEwQOGdtOUaGjNLtn/fK1eYMDRtxaGOU9bYOM28BIny4IYi\n7/ZwHVmrKyjs/e5N1dfBoqsJAGOnrCXYQ34exYNMA9NyNGi8Xg9l2fDroFxt\nwRts3kOoTFTCRHMBkqePg+d59bHCDiir8J0EF4EgDyDI2AniFIVh3vzy768u\nIAjjs3+2WDB1a0W3gNfMXdh657qbbaM3mPdJaBCF6s6p//R+K15dauuqe6/X\nymXxNpkswGvU4PXWHbFcHA7rgjp2cN/GghQhdAyiqwcRLC7Dw4kW09ZdmMz1\n9uYY\r\n=Zn64\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.69a35e80c.0_1593193090567_0.651107017837673","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/theme","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21d4818667ccee929a7d15699ad51ad7d89dc7cd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.df7154fb3.0.tgz","fileCount":25,"integrity":"sha512-EdD4nrYntF8j4MxdRpduejpdya6t2YzH93QBBiLyS0mJackKJM/5fBZiL9UaWlPxwjVEgmORj+U4lsYST3nP1w==","signatures":[{"sig":"MEUCIDhdolaiXZVnrmo1TdAx7/Izr4uQKFZ2uaig9darQc94AiEA+2AYFLc+7p3h2GkX6IHWEs5+1eiI8/wc+SulHZ9sWJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jtrCRA9TVsSAnZWagAAZP8QAJoHpCzonr7ieWFxavRf\nVchz4mrLLJ21gEjY7ILabj2odyll1LY8lF1RPr9E5PqXpKXIDXw1Ic0yahb6\nBFgRYMKIWjMLn47Ec6r/tkGKGJUUog4lLKBHg+5QWZqH7zruWWIBtOEZjWrO\nt0c/dETdg8wGuMPGweqb0TBY/oN5MONg4IwiWCDoYSxowfz1O2D4VnwOLhOD\nGtSOdR0KJPbAeJXl0SabfUygevn+c6Do5X0SCX4y2Qn2TGO7imls6tgrfL/C\n+ivolWbc53ymO3u+wq2f52AejskP158JLLm+5RvBBVdVvsEV9EMSRj6k8r7j\n2+z1KSiaMECMHnik4sWae6bRngChWB7tJwXKte5W/QtnYZ4DnNVdt81lcwVx\nyutBaoF50vrHOlCRh95J2zpDL+fbYepOvMSN/ectq2hC+dVV+GjBaY1EpFtJ\nxTZ4qxpRoJVMJ44KzO6rRey9DFOnVrN868Ue6qfwb/R98WzH3k7l6zSqqJYa\n88B2Hjm2FsNftMprrDWpuIdsS2m50rbecqdqsJRME3wMGUXngY40MfozFD6Q\nLVowckoq59KEb/7V79rRcVuseNJjYSXS7I4XbAcfTVGdHG3HHCxMQvOKHSZ0\nH4ll2QbQdtJcjqAYSslYc4uPXkm//81pUhygmyw3xRZ7Xcc5AgHrBwaiqYug\nbmmb\r\n=WB+b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.df7154fb3.0_1593195370838_0.38833913498185013","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/theme","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.d5618602a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0121e4816ad514ea8056ba6950c3d929c75ead8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.d5618602a.0.tgz","fileCount":25,"integrity":"sha512-G95CMBfaakJDdK/Tw0QIPEkftNhJCzXvaQ+0SeVJoc81H/F4pj8xFiBP4b8novCVq0fnNBDcVGHA51d67NxQRQ==","signatures":[{"sig":"MEQCICaddxcQcdQlCLxuUp98vM6PgWG+S18Y7yLv9X7npTv8AiA9pQKxVJNdq2b1351DZym+D+5kAXph9YfRs9H4xIK8WA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9mz+CRA9TVsSAnZWagAAQMgP/38oiaXsNLCpUfEehiMX\nSqFWzlrLWIxfyxwXblDFDGglsqqO1SNduN7x7kPRML+JrDu9ihFtuqx+PnK2\n3Aabg3gb61gteInmJchbZdcXgoDawisK9DTiBRUJq2CHvFCAmoavNioHF5kJ\n9LrMAer6otKXTGexqlKMqfIO5yH7nn5dvKdKXuAa9M3s1UIwPF07neNKtubv\niW+LhmHPAwOv1H3Nz+sDgC/+07cWQ4BFc7UYrleh/vJs/HZf2LCm5QE/JsDk\nIo+a/G45qRfmNxw4aCuoY013+hz1JT2Hyprxdffml6jPM9wSyBZGnrTf1jqu\nyqVrMAnAKULDMp0xU9KN/E2IryfK3kzOkc93lpPMzuUGSDzCp90lwOwTb0+R\n+l5/7QpHuXQNuuvQCU7smjlZThYkcOWS7SJcpYl9fXE+uffIwZopSgvsHMkc\nt8qC/WdBLJxeByx0QDCjBUCXl+GfV49TDJFav0fZ+dWUK6Qv6Qf/rrcPuAfa\njjqZZHeBwnVjMPypEM7WE6Q40Hwu5vcCI9SWH5QTmmHpzQzGOAe42zHsaVGZ\nzKjBG7QA2IdXxGg9oej01hZGa1EB3bcU/lpDYl7A95U4wI4AWWsfQ3Hqfd3G\nZw6sazx+d2XeaA1+Lk0cOBBF95fD94PKgjpIkgrPsEL4o4MB7qm24VFG1pNF\nBvtv\r\n=040/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.d5618602a.0_1593208062069_0.7681536825216224","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/theme","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e590b376b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ac02e2bf3d1f8a65d095f7816d868d112dbc62c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e590b376b.0.tgz","fileCount":25,"integrity":"sha512-wIxH9PTJLEnAvvhe4E9lB8B834vVBGt2gb8gpd/P11fh0Y3d+wi9Uryop/7nmtYIgZUZnwF5NM5g58tA8HEHvg==","signatures":[{"sig":"MEUCIFDBNBzSe/ilKZNGCtL+uBzLzlxkbbpo0C+UNcrP7P0pAiEA8VvU8W/WOBSYqwytTKY5n6ap0QNHHGfv8fXUXOtY110=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oNWCRA9TVsSAnZWagAAyVcQAJtH+rX9mcDcVjAwwbKr\n3WxoYfEfsb1bmMp9XMSIvMTL1ePFVNBYngycVYsPjwTJLPA741RV2vpOmVU9\noeuR1fNbX1fapOPSYo6e49IPCs/51usgqAt0fu/hmXMPCUIUqMrHtUZg/w5H\nxVW7SQqtfJsm8ut0zLK89SZtDE4YQGWeiDOdzebP1gyDOuHRY/12eqnVWJrr\nWL2brvOxhq3El25XVMLgXN4UKvMGVRiI23DmhskT8GOx3kFfDJJsq7xPzsJW\nYtzR0vpt/o5OU/PV3ratHu0dzELGa2vf7f+tFKZRXkcDudR/u+NhS2Ncl3jE\ndmhujgL73Uwh7HXBDnp39TG+JJe4QB1kzj3BegPb93FIFJgjPu4ID9jwhQ9P\nBclNTQmJ5mWAUOt0k9BSFJoHJCd+8We8QQNaEiJ9geVsWAiS9RUC3u2OMaSw\n0SkNDU/+llcXxpYLkRsKukehG0quZy/CULdaEWmQT/KLOIGSBSOgiTxgTBKo\nd4dAx+Aw14/I77Nivy9onrJhsM9K9JB2CqWBmkhnXc8Hgoq838KW+P3HuD1X\nQJINV/U6K1ICsTH94zhVMJ0MpA5jB0L0EpCLanBjkyvS8vlb+7qMeKHs3fjS\n5iKcETyGBr65pokEaNuEKxjtF5+D0M54YOt75gUMhsy2DZuldfOF3vTVH4jv\na0vm\r\n=H6s/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e590b376b.0_1593213781647_0.523358801017167","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/theme","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ca4343c88a03b88ec1b01bd97f2a3cfe21639a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":25,"integrity":"sha512-Bq2n+xRZTL0COrmQQt0/VIy4r2Cub9F55suMhW/Ode/cPqPhawlqdD4/oMt5qk59QHlLlK4aT5Eg+w/t5M6jQw==","signatures":[{"sig":"MEQCIDkaARz6GtqeE7g8wFHWZzNwMfiKo372VR+NgX8O+tmlAiA6o6vRqSCT2gmT4KaWJyIa9IcHcTcvlvIcXty/bS5uSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":98191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iGGCRA9TVsSAnZWagAA8zwP/iv96qK0DcYTr/4bw1uc\nVgm2Lwg1vwrgcaXE2OUGF5i2QSt2teD3/xVX5NE9FvqlBdHo06D3ly+81G6L\n69JePnLpYoHcrMmlCYTnKdFgc7/VNpGpJvxHYRLh41kqQwP2CdVRNHEyhiFx\nucCeIueC0loGEyEr0EouZCUhc7bfKviRZJjEVxSEmpUFNQt4BUySeQX+POXo\nrBs7bHdjVQMBtJ8z+vN4iYzG4H8xwtu97vPqCr62C9X8EcGI4FYCVEYHzD9R\nahIpKabpAamlX+1q2+6Z0Ym3BLQ7vHtQ9Auy6I2sfq3S0QagcCvFo/ztc/DU\n2il/l/OkGbQ0+YJiQcjqNrc3nU73wSxo5Us4c+1DFP3ldXGeysrqWivmOF04\nSPZRyFIPMVkI1DAEJeQDy1aeupVRXMK+YxGsX2Bx0TBhWqiVe29dFnlD0U4i\ntWLyYpSoiwRwotxU1FNKmAyUfEH/drp7cFumAkY8xfq8Mmuu9g62nTCgTqUI\nWyUIRyahSGqTKpmOtRlXIJDzXJRFivn7j+GMcgkxVnGomLInsqtXxWHF2nhU\neu9K16nKptD0hRc1kKPu2DWTT5UWBR5E/xBvxyhqTNSmkqEwr1xz68TWR8Po\nKv9YVjb4NFvtmZhQhwn7C7LwnxkpM6q053Jwg/3t21h2cfCusFd75arrm8QU\n1wsK\r\n=ft+O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.0c9d6bd2d.0_1593450886436_0.18015444922948154","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/theme","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60c0f4adf341d6f6bae48547094771cc46a1153d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.c1fec4246.0.tgz","fileCount":27,"integrity":"sha512-VdLk1egyBKxQo1myw65Wu5SBh9T/IPyo5ZPDE8TxVGj5+brfFpH4jfTFT0soY9c73I9HMttOfc2Epo2EZwGXTw==","signatures":[{"sig":"MEUCIQC8xTUCME+jnh0Vvgq1RXzOKOMVe1Lzv/rRJ/x2T//w2wIgDS3QgYLDI2NSlJBfg6HooWDdBtmMWgqyju678+2weaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iUSCRA9TVsSAnZWagAAdvAP/1yj5AF5SnU6vXzx62rX\nsSXAkPncoLJxN0xCLgx6wQ3OM3INkw8RV/3llQvB9fpD+MthN2NTa99bSI3f\ne3xasa35bPWWxsPmexAf9c9jln0qUktcVr+6YhK0eQwTJFo6mZyUAcMltKo4\nPZNsFd8ZtDuUie4IQPdAd8XgH7dA96xfIZkrJoXeAKEeAY6Rhp9U8HGh56LR\n9fCmj5kJnSNs0Kdc5YbIFUZpFs7psUCBJCwYERJzPwexL/49K0JVLrZ9+S+H\nD2weucqU0zu4bb86ZzWf/Mtk8iJUc7pSAO1oKtEYmzQ34Pb+7OY4hJ3MTNL4\nvVrQUAvZ5Ub1taRRCXlvfDWdEpt1lgLy7/xm79qnk2P57I5mJV5GktsQcQVW\n6wfbLkBLEFzv/4advpN0Vfzjmn9z/yF4QFaD3LaLyRvKSY2vk8SresKZcesE\npoKAwAFLCD3iwkq4CsFqql4JhMGylJOTwHd73O4QM+19LGSCoTo0cz9JSGjt\n6mUvujChVyXN6gCkD6Bjk6e7YFezaHbAPwUbWREQNEfzkoLDwB4ziQ1H9U2w\nAlnoKhDg46iLh3WIvWkqMdeEWrNvwpUiJIsdYetjsvYMT6m2bwkcv/nzOae4\noM4Ts1zuPOWG/HmaCVj+1d6Mqd1GmChpFYgi3yxMlmSM/UfwcHJLTndEBNQw\nBLgG\r\n=iZdI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.c1fec4246.0_1593451793766_0.12716119447560348","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/theme","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e1939d62429fa9a189009870d54a7ad58bc3c22","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.c678a9d34.0.tgz","fileCount":27,"integrity":"sha512-WkdPpuBoTXGGmVgMbiSyERj3v1Bti4uBmn6lVdra280hnEsAZcsTGuKIpwlkXxfouSLxMaEvbVut+PKIjwUw5w==","signatures":[{"sig":"MEUCIEIjjXLNMk/x3aKqLDDivlc8yCjaXXSijWKmg0FWKJyPAiEA+0mw9tf7hA/eQ6kIwfflQq3SsKljcNuwI/RpyL38+Zw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+ioPCRA9TVsSAnZWagAAatYP/RdJsjfuvQ9IxOO+iXI6\nTBrOZ3Pl/gVVu18nPXJ9UY8iPm8t6tqPngGD8RbnlQi1E4M2Xcgyt32PmGna\n3gAvB8gWuvFyBCYfEFjhSaDNgUsFXEP7Abjwqd1HRsGQ5ytIj7V/7OuAC+1D\ntWHSQlWav5mFnfmqVsV6ze1Ocq+yR4RzY6st0wIVQXfUR34KXfY61RWyXhV5\nvlsNMou5xm9edYuQZ7Il3hnAFwLLphdNUXCWaRrL+9vqEmEr389h+7FuNBi4\nLMUOudj1SnwGo8WjdxNoh4EURFtzZVfPvHT9IZBTg5G0LCUgRuOvlcNZDscX\nkW8+J2TJT0Z5FDFWlFOoXkuifVLbKHvXMe3J646CJnVVaZg5CFH0EnJQBuqd\n4fZe5SuyehWzaVx6C3so3pzxR4IdpiLw5m6pIQ3bPbb7gPkYJ9pwXexo8J9W\npIqmQKKSCDorZJ+v8/jsqMLBqwqwZfm3Is2FjntblkJ7KhpjZa0SOqiPdZTe\n3/6prJj8B8y2BNGi3guIdT7278+DPjmA0n3TDSnF00ibWnHpBjZ5gF8QHmNt\nISWOP/SzvDIanhJslr0VtAStvpD+WWmH1TRB3KYpt32FUZ1KS0nRdZL6S2xu\nv4LzihnNnCK89bGVdInbE+mAIUBTOaeaFQpC4irLlta+KN978ykiVoBNBXxN\nyjNV\r\n=A4B+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.c678a9d34.0_1593453070582_0.594094916103691","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/theme","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b47cf8d7bf86ddc38aaf8cbb371891e455be4b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.521afaf6e.0.tgz","fileCount":27,"integrity":"sha512-sHJJX3C3AjQXjkzKso46uCj0X90HaojBi1lLzSpbDMr8At8o922CxcUsrBpO2vgIhctdopgtELeuDbQ2EPrGSQ==","signatures":[{"sig":"MEYCIQCV4xSimT34DE0VYUEnLEpjJt7wqrm7+orhSdQvgDNUHgIhALXe/NVliYJ1RGLUHn3D+hEqrD1OK25wq/k6uAORVJdF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1SSCRA9TVsSAnZWagAADpAP/jP+8OKt8cSqe/yew/2J\nEl6STRzflrgZ41msq0Lt92Z5duWWFZo3iJjtTyVE+cbPDTyqzcO72VYwtS6f\n/v4deJu9yXO++pLZBcZBbIV76BtL4tL/Ma4fPjXUMPUBsCIhPY4xh59Gtat5\nS2VatW4CZJxncouYnBMExMbXPLG0gAsqiB73+xCviV2vsWsqXISypGYIrCKg\nvNfGV2yHheMKYMCLkoavgQvsRjb6nnUYc05vYL6rilJNekut93zSpnHR7irV\npwMP+1OKMPuxkeJ93VtCa9wuq31SbKj9RkjDuxg7gEpCLIKpMZjppZt4HFS3\ncTQDfjXTy/aJ+3BAo21fWeRewczTZk3YSQ0O/zwpRsJ0r6MqOHxNnKaemDE/\n2O7RfQdG3xD1G0KYpeFrVlCCMsqZZBL0+Oi8SBVY5SwdoAt5a+yaPC1bbD/T\n8pXOOQOgZhq3/wNJRUVAt0mr+t13m3oFyhlsRPRHiFuIiWEeMTRQeWNMUiLa\n909rQK3aFhFklJMdz6Nm6CqKuhohYGT+wlGpSIuuIqW1X0r8vOA1QpM/UaT5\n/iuFViODfJZBqd25Xe48ceDxn0MHRCdqmgklgSSwoNDANYbbHh2Rlen/fbvJ\ngx0hUH0wyCdl2tCjjwfY2gMfeMEVrJd8TCuO86l4cjieT1rmz7r1JQMNgKfF\nlcSs\r\n=MVb4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.521afaf6e.0_1593529490151_0.02606480069189976","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/theme","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"025e34b0da63fc9fc53ec8a9b23d65aef99c7801","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.a2ad48839.0.tgz","fileCount":27,"integrity":"sha512-R0eN4JF6fhOaUluw3eSucTpCZFuq8FYdzfyq6RVwdb9+3yXqCg4Ogw9FPTrU+DHQuZDVRMPnz+CI6Vey7ciRZA==","signatures":[{"sig":"MEYCIQD8xwir0yNgUbC4Uu5xruoigUNNTHAo1L0NQcsygDnu8gIhAMNJkZwREddtoKKzuDsqCk0j0mbF2VqoJ5Eqqf/Ix90Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+47qCRA9TVsSAnZWagAA4tgQAI2Un97cL6gUAjgCIrJt\nASjq7qsmoicyPPNbqoCJaIskFuCLtFxCxnYOOm1iv1tEn74mPCgoi35iKYsj\nPKZhvx35YMCWDRQPAbMeIr1udVxdMjTSYRZJI5Pdkqf0xGxgYq3g18fVg7t3\ny2iVtNLuB4B4qNzdE8Kxbf47Ze0un7rJtc/nKvI5wnWYbReKzEh5zc/dRFFE\nrCBUEHMaTlyZlRS+0DnqRQoS4PW8uHXTHmb0D8iJr7qxz6CX2mhUpJDaTWAz\nYwbyxT+U6ZyoXNSxXidWdKWg13qbxnQmLgr2Uhyf/h2lmEg7IGVqkQ7nvCPt\n3wGqWDYWWqkFJ1TDQvdDPl+AQkqzAz+uRe5UcverMhjAg8Dne3ZyGIe52V7x\naswHrI/k9KWfTUC7quGuZOjocwBWnLYh2bvxSkdtCq1ZOZHGZOWMswg18tg2\n8YijKKZS+Rd1ApmS6/09TlsblNLk44RkFfT2hPskMqlSsEvRRoGqn3B6Q5mx\nCgEHHTsIf60GxD4NTQXGW8voutrQQzix2FlQGg35N99xA4fDb0K4kd3xhwG6\nVYOfTMPB+MgWnUaJ39obY+tenCrWEisvWrqoa7VZKpT0PrC6Ug7uc9nqFI6a\n4ilN4qI7Bdcq9aERsIxl8/o/q0WsxvWiJl19z/fWR/SQnasnErsxiL0oiZ10\nCpDS\r\n=L38/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.a2ad48839.0_1593544426197_0.06936185038764409","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/theme","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.ec2385881.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ed940398e1f9d906f50d74ae2c100a19a05bc56","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.ec2385881.0.tgz","fileCount":27,"integrity":"sha512-U3PK1cA+g+760KF9yXc1wMqnTM/u5CH3zkPWFCeSkRs9pKuzDOQrzKIBYKrQVhfSfqeKh7IlJmeeR7cxbC9h/w==","signatures":[{"sig":"MEYCIQDsMjLVdlWDAnEhN6JFaQokw5B6zT+ethCLzHX7KjUlnwIhAIeyZHPxyp9gvugURw9+m015E8RTDp6TpdlzGzeqo6Mo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7KvCRA9TVsSAnZWagAAmhUP/3/6MxvUe7JKiUyNB9I3\nUrcr8ByZwBQzjK214rrBqGmq7LUATI2+8l4weVfEfBTbDqvU3YsMVcWw4me9\nHywny5WDJJaaG1zlTGl8/lFeIJrAhJJVngVlNDhlHjamd7fVS8TnKJEMsd10\nbFU7iIw6jscENv/ExY0EY3ZG2/rZBViibBSrCqBpAU7prskytaez+PBmLe64\nZndeuToy+SRlSc+82GMOUyZXwyavwr13qFtOC7Z7i8WoEbveofDVq5OhCLq9\nKw9qFtvX6f53MRWp6fOn2xflxaFzVhGa+y3xZeN3E5C5Glx4icVhuuXBUWpx\nPDKmP2Rm+O3R6pm2027lpfznRowdXj/oyQHH0IMu9r/uiQ276WkgAyRhrhA/\nS5pj9i7O8RiSnE/dLlcqAxXpKr1c3S2r73KDxYez2+zvI/67Qi4TGQBunjnT\naEoftGXTGpKXpzEDNTttd6K1cliKRYo+kCvVhrqNrlT4JPnj1i+ZSgPcCNLX\nldaBXL9XaN92N9gxjBh0mN2G0rFI2xrEx875HunX28LiCO2YLgO8rdSp9b/T\nvBsYzdDFhkFHxla1qGYq3tM4SdtPq+zaUmzyE59AyWDJpmL/wWZkfwRGO6yG\n4X3HGNO3dlGe8KasmcJppW/jJIDPZUjQt9KjPMfQ6ujPUxjGCZ+qA2tCRuty\nnlXO\r\n=Z2AC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.ec2385881.0_1593553582439_0.5351628200961407","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/theme","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc55fc734f1cd1f02bf0c1625fabdc231677116f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.610c26c4a.0.tgz","fileCount":27,"integrity":"sha512-7mbN16yMwBoTSdU+f8sXCj9FLZKS9E/caRvSrVsMqsezjWGcir2pd61AQ0Ll6GbdwXsBoluYnr3/oeJTrj3gjA==","signatures":[{"sig":"MEQCIEjAJ/abWZ+d/cgD3bZfDrYDRAsu8+mvJbx/3BsjSkjLAiAywS7gdywUnbmJzqJBWh1TlxyGpFDMyl0VFkkyQ4+Wiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KPkCRA9TVsSAnZWagAADx4P/jgxBOTTdu8iSukoaRy6\nf9sg5XTlxInF4MiZP+kiz6qnnzPBQfhTpI/zRghy6Sctz58+YuG5A6PT5/PZ\nKyHbh/tbvmdRHTyb2L6Ut8htGfAOFllmcKGy+wsdWfHu3Z3K3UYBY6D3XyqZ\nUQCgd9Jvp1MeR2k0nD6d5J/4SkIszzCUZCB0KdHery02ElcudQ667id2eDLN\nYmvRxogio+cFd3RbrUW4RwGKugajtKOnuGwlV+gWIZEjjshmfW4JlHCy8nDX\nZnL0md/JCsCduqrJOHX2lZWk/od5r1vCZe3/RNKe+VvF9hpYZRbeAgdPhbdX\njXQwyq+gaUuSonNEMBkY55Dr82ruD5xvTEIPxjn/tFokb2t3jNuLFqtTUmYM\nAhl+PeCJ5VaLHXupEh/Arysm1GWTSIhc8g9L77pVvgv8/IizYDP0cXVjPq0R\nPbv62xgFWM6jmxBqQOdeP4B+8UFvkdOdDmo3NtUVGvJCILS4PDk5UwbR9KxV\nIy8/neJfDqrsrsXbINIJD4sVhiN+qorPMNh4EPpM/scEAYzY9RP++JFzO3Yc\nnnn8InPE5rTArLwQwEXMC+BVAGZD8XroXy9mHEG6eJwzgL3ZJoWJTZvT3h7i\nel02NQXJGLia/KZv5WP1o9simu1LMtDif65j10fHy3/vUnsJWXnXiEpuuu2Z\nerw9\r\n=g40X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.610c26c4a.0_1593615332146_0.03510792912277694","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/theme","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b06dc5b4ef12fb2ec9bfe60c64628f0a55bd25b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":27,"integrity":"sha512-od8/sSA4m0+zWuJ9VNqFTHvcCdlhbY5tQFBIWrcdaaXpc3QGv2ARckWS+fwi8AqlD6k738I3vw315OLDEMCYbA==","signatures":[{"sig":"MEUCIELhPZ5b35imq3OOxG8J+HjZok2WNsYvHnogt37hRWnkAiEAkDpea3Dm5aT/mDu3vAGOUXf35Gg30GrNIlXSwdi3KrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/ONsCRA9TVsSAnZWagAAoZgQAIXREvaqeu/nISht4Vz4\no085OytHz2+k0J5q8v19+sKjR7i5nuzQ8+UCHiO9poxyg5YMHI5QMg/AtNQT\nYpMSNncuSHOp//XIeS4DQomkZn3ccsuSC6tEPt+DECrIoQZA0P2Lp0cyByyP\nVnqRcGNWEiVrc9YBryc6+ozKMJSbrRS0EcZCCPu31QGakneFNhiVG3XhoByY\nCyk9KC+a3O2gZ1/DnVxCdYnhHi+TJdV+nK5Rzmwa43w/wr6csnXfQv/Xu5TA\nW3fVgNr11zsk/Lb4BZ6grLd9PLv+E7niGrIlAkBc6JvimyE+xNNukixduXrJ\nGKIcKMVv5IVNGQBLrzJ0YnJupFjOn4ykm+ILAgbUdqo/Y1Ykh2AmsXJTlb51\nzJLGQLCeR4EcpwQyTMlaWIv/9zVkQzWVW4QLAboxoodEOC/spM8tKgPXIuD3\nPuZPrlrWfqTfztICoSOjgoJW9MBAP3UArz6jtUvSoBM1/fyGmg6r92MR3rZq\nj1WGjpWYCgduBB6INCmk9lMj1VULdkOy1qVaY4lesrMH5jViw3MDhY86s0yv\ni5HAM6krlYEkdxPfd4N/s422qvFb6o0OA8pAQG6n2AKYcNE1Zu/8DjhsmE90\ngmeh9r0FUgO8SK8nBZ40dLSWGHtVdkziF7wSqu8x8PJG0pYt4iMGUXoJiIZI\n9i+U\r\n=7POL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e2ea4a99e.0_1593631596483_0.3417225236095629","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/theme","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a32294d806f16ebfab42025d35056a6954863a0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.a78ceb112.0.tgz","fileCount":27,"integrity":"sha512-/hBvqcXYDuCG0nWEJ8uYsM/XxrCE4EHcel7N6WYwZDRHlPfKQis3qPEJCJicdHckVFdOUvGr9KO2h5BWUNA90Q==","signatures":[{"sig":"MEUCIQDzIWfmd1DxgtJmyjhLQADMqTvoVU+cYADEKvqWvR7ChQIgXbKrwViytfDLwfRwGI8oMl5u+l7Wkkb0W7p3LF5Y8/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OYtCRA9TVsSAnZWagAA+poQAJme0sU8mBc/uqnTBfab\nSpS+Anv1Hddjd4bjebosZzcl2WhP+8Gg1nvWnjdDUVwoRqlAUO6w5hVRGQAZ\nwI9MQ4NJ2IGFrDzXCVHlarbgmNMZqCJYAibYHZAHJc2SYmaRN1Cqr9tWzThD\ngIqaprtTWwN7qiWl9jfWmGirlrD3I9CZhvKR7oWJIbi4HSSopH7rdhjs3gkC\n1KqEhm0z5su8N2NQ1ivWsbGbvuRpWxXzIV81Qo+2WFXH4lE6/TPd+8Wb9C1h\nQXjbf6pLIaFRQvQbRCNCuydYo2vEOKLRWL49aTGk9eTIeslYNxt16QVHoDfm\nXSUTRKqOHgo44SkOQy8DRNjkw1AmTB11JIjv38fjq2typXi+TGMucT4Y4m/f\ntDROVn6FebLZrYRthUyNAJLSLzr6z1W4g43C6Fq/zU6/ojrdj3Q0X8cXCy0m\nmkckVtLOOSQQds2Qu9NoLT+VnL2ZvhBui8crVGT65o9lU3YaGJ+ipzmy36Oq\nQEVD0UnK1eEdwao2qSUAuGzt8jlC7bu0h1Oa9bNX2gF2RCVgALwjJFgwjKgl\nDcof+BMsst/DcxMLfey+Jj7SNzb2EZKLbYh6QUcli3dgr7NXmkeANpv14NvX\ncUUDhfWpDQxcYv9doSy5vLCBz2zOMP63fsNwiuz3OBE/tvz9utN8Q3sZCMmL\nWr2s\r\n=gV5U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.a78ceb112.0_1593632300898_0.37175360444754446","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/theme","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e01d35976ec936ddc83b3333897490beb6d9acbd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.b0c456d33.0.tgz","fileCount":27,"integrity":"sha512-Gn8YgDNYL4H9RakIjKGAoSisVuuy8sXyjDS0cuFTNuqqSyMKDCODAky+jmtQ0CW+bqbqlGC41NyePS6u7JHTiQ==","signatures":[{"sig":"MEUCIFEXK5gnounht5yxVMonuCwEZ3WgSKhXfth6pxuVGcTpAiEA7mvJABHjjYAwcof7oGpPHKhLDYX9hMNFzTwq7sfxOsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6hlCRA9TVsSAnZWagAAv4wP/1xIPYwgHZvo7Cc0DBS8\nirKAJzV15wnO8/j+Js2+izUQY5mqpBH0fR3RptLAnyS1huAL2LUT2zuoxDxr\nK3vW7nzx9RaCNyLeWnih87esuXeTM0yYWqjeaKNURRd5MO/+YXH8400DZpg3\n+SRqRsm7KjPvHxwIXH7seTu75y/7h04APETCwayERg1PFuviUeMX5zp24yXR\nb3Y4qPeQ711hqXQ/GH7Ksvfe+1M/6z0Wo6DVXtJLzKeIE4t/CBmSj5Hjhcef\nO5EoayZn7RViZfil4otcR+ACicbuWDm8pNFpzMLK3AHk1e+ea3Shrilc/RUv\nFdRmMtiHaPe2STil8BOIfH7FLWesAaIHedc6+gvmsgQx+CFlkTbB0mmfwmjW\nWYhul3cRWmQhZiO2VgSfGAcjUVxKp6RxQNGgKd0hHfgDeyZHRrS/ggXPQOQj\nNj6F0L6789HFSr8cY/GfyOdy10KGbIjlkR7WUFAYfI0sZ4W1FRBDDosZ35lc\nPaHxL9nUb2be0y/6CEj/rOAQTcNy5uZT3QuN4qvmazuSxvgwIAFXvdZ2L5C8\nZdReDdENnNmJkLOHAJF8yASgjvZFbT5NeK1KbTrArgr0OCikNliJxZ+/C91c\nOfKd3A3pzoqb4UA7B/EFil91Znb3LPu10csqyIgVsW6tmDkFQwuLQCXbLiVg\n90Tj\r\n=2nuV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.b0c456d33.0_1594075236872_0.13050644418514112","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/theme","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1392be02d837f3e799c4a2ba50772c6a6eb6022","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.2e5711e04.0.tgz","fileCount":27,"integrity":"sha512-LR1nSssEL+Wkfa1o2zPXcK3XyK3B6+CPgXz+CSAsHNHnUDRVqUndR69tpzNBmPJCcWOJ63DyeVcydVfgAt5YoA==","signatures":[{"sig":"MEUCIQCn919ewpxGYWCeZ50atks0dyACR0lDxrJ3eH3Pdu+4xwIgY+Y+EB7sFZJ/pqFuQd/1vGgBebOXL7utmQTsJUzG2N8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfiaCRA9TVsSAnZWagAANYkQAI6RYTNsbGweEygMEUIg\nScm/txBZeBYKHu8Bx+a0R1E6TBNxrQW9kCbRP5T6wnBKImmfT82pG5sJSf2h\n5RToRhAIDCc3AFLjLyMQ64e3e1PG/tu7vBURaEvJh7Jr67glpZGkOqZn5nib\nzoj58qTEtPRfVr4z51KD38uMlXmA96SkIaAMLvsKTcQPDj7+otNUe4dzYIxi\nkM8TUaVmr1YA7tPGiGgLEM1mLxKUI1EpKI0fDI1I8yWSz6KgK7kOcCPaYvAx\nPtmJ9PyUPXjHLOqElVRR3sGd9/ps3ODtxuJzvf6XqEtKAvgL/niisYzVG55N\nIw6nIdaGipuUiq/V7wKzfyNpIWvkmA9Xm4ogslC5CUHTd/nTl6iftsqhxMnZ\n8sHwYMpdALDPh8X6wB8LrHzg4eWz8PrqC6W7Geys1J39VNsYc2AmZ7i/BNPV\nXqPExL7y6OZbgEDFoXiuFxcRXR2XpoV68QXffJ7/CAXdQNhxBVIBuYL+iwab\nD39jOOAQhqcT8TbfGeCna26v3m/7I938vSWSMcfoRI+f+VH9S5fMP8gTKUYO\n4ix3PHJ1NG1ewXRWndvFHTKB0XiDfAkO3koiTLeFJGDtyhSQ7oyA7nToU9j/\nDx3PuYJOfN2R8hlXLMQ95d4rAR1rhSc2gqO9G/t+u0pGl4veAdJQmJnWZle9\nMK9P\r\n=3Q8U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.2e5711e04.0_1594226841542_0.4190240697631282","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/theme","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec3bd1baaefdab2c7c0f48ce4335860939f2c3f9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.811fc5d24.0.tgz","fileCount":27,"integrity":"sha512-02x6p9E/ql1CYoGcvC2CIn4Tc3diryjSwqfXVI9DqJo3gglGzZ1nQv/BsxQdgwudY9DLW3XnmEalmppCai9HRw==","signatures":[{"sig":"MEQCIDwnOwKTzAlTOr3YqBbFlf/ovRtbd9N7xQXSPzkB6bMvAiBRgFzHbsJT2UDMBlFCHgzhuiUvIO/2pIO9Bh+40+LHag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf8jCRA9TVsSAnZWagAAr3UP/RwCyV2ZAZeWSftvRfsV\n0+xGYsTI4l3EQMmbUQjo/06p8rpuInW62O6skemAQAI5mE8QUTTQNAnQfbjJ\nw78X96VYqSro00RzJqHNpHJZzX5pGFLJ9qwyG4FsUsfH+K9wikP4csZXy6yJ\nkz9FAPwgZzmTInIeT8WMZQSETLo1ezpCZ5Q5fAUfgQUXIuNAIBCI5F9UcQ+O\nHygd5B+dGqXmBq8UJu0KSAjP13V0CCpXrbmNQW9jRq36PqUHBr0oOb1sGAny\nV/nhU2tZXUQcrxMGoaRgk0Rgbx3k9LyJtoHV06MZq2XLUnfsrhMhL7I0ilJX\n+4aRfxGUnOT6QIiI0XOsHVIDvUaq/Z65gl6U2Tp9QPfHt17yfOxrfqBo5zWD\n+jUzNzdPRzirjS+i4BuVNpfngPYSXy6EIa2cvhiLqmb7o/wMG9RHkWhkHc1r\nYHSwNr3EZDMTgu3Bp6qhfuhtnuNXUCRhEaJaa8T5PKQQUDfR2KuSQdElBKqU\nkTKB+hon271R18VI8HfV/7sT9xy4tkhZEb0XG6FQL2Aco32uUwyTk0toWIqx\njUIxFX8QVHLsxWpZmocvuP7ZbA+rw24jBbxF+M1lBvBj1jIhxA/D+tfsc2yP\n1zkXUwsoULpR7tJYSo20/1n3KSlzg/HnOS1uww02EIFv2AS7feKdX+AsZo+R\nJ2lD\r\n=okez\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.811fc5d24.0_1594228514893_0.5052857199038052","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/theme","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5ab92248789be761101f9bec5ce6e76d3f0f2b3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.6ed717ddd.0.tgz","fileCount":27,"integrity":"sha512-4atu1quandcuRE0SOtHcO4jAMvBtogN/hJuv8dqdml1Lmqhs/A2KKIv94PXm94AZiZsiT/eFqLHLih+/VfRtQg==","signatures":[{"sig":"MEUCIQCxMlV47sYDItMnwbU3Gyn9xzyeOZB1bHK6E5tmNp90zgIgHTWqvCiI0nDq4+u/WugWijSnfx/6hadc2ST2xYw8RAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiHiCRA9TVsSAnZWagAAIh0P+wXkuDJ7SpK03BmhT5YP\nORoYq++oBdINR/FwW8hk2g7yBFNDLxJw3mCKUfmAYEADtIduRdCYFgwWBcsT\nJN73opRvJZmo8sMpOkOzcKn+r1Si80OmlsPoxCtrrG3Y5hf3YdZZHbPPcQAB\nWdpUxfYUJ9hj3KLBhEQ3Hz21xQKR2S/4mYVbnGtJRQoZKhZQ85iyR5P1A8z3\nV51xzgyRfOiNqNx6FnP0XV1cnkSCmkFm0cDxN6Jt7V/MkmJvW2BWGrsLkd8B\nz7obqWdvABMSA9wNjTQQg0qV5k9OpzUmW+Z+HneGKA4y6wN2lSBy7++CNK/G\nD0SZoH0Dt/pdNgxyqZxItCzgWp6/qsaln7r5OOfsJxY+m05Wt5xpPLu67+sO\nXyNxIfrR8CfIBfuRViJXMJ7GR3xsC0O+pFkKOns8uozCpTs9pe0tcMzQaXbu\nwg99DxH+zqvV84mzfbfJ70Q1bZB/TUjTHI06isTSiMbsNXFYxod8Vuw8yDHl\nTrDok1XfshbMT6FOKd2WC4LRIMowROfQYoHlmlioRth5SMqE7pVyjEjM7gNA\na6DYZTC7GjY3FLZ08ICeYxefuCkTU7EQQEHBprtoqbJhNJrg0hEEcabXAIOE\n3AN4d2VQrVGMX9Ly9oW1ybDmG2NYYT3d8zdFMP3ials0tPj4rszyLDCWOJjC\n5ZAj\r\n=fvWQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.6ed717ddd.0_1594237409937_0.0931683680397879","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/theme","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.d850de590.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"494576f197cf3c47dba06c1d3eb7554d83e8b740","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.d850de590.0.tgz","fileCount":27,"integrity":"sha512-tdfmxZjrAm6X8IxoD/I3+UR6lb27eTreLc4rPjYliHg/Yl8HGbgHv458pO1TpgZLUJ2QHM7fIh4Fl0GtrUAVpA==","signatures":[{"sig":"MEUCIQC1Xvq6g3FDKs1YEACPAER4a5UI3KDVISJ1nrpOlXy3GAIgVZLnKi9HtJV56XzQqaV4VSja/1y3D0NaLe7t6HjCXr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1xGCRA9TVsSAnZWagAAvX8P/ifV7rKXIBVvVAe/dZLt\nUVbyQgmrpjvZcM5pVUi4Vuqla9FqHJZCB8rramWrCPaePb7qqJNapVhvQeoM\nJcyA50EinX3IAk3wsQ5mG1j2AWYvnTW3Ht6Xsmu+WkQOb9v4RmkLHgIF/wsC\nYn5D1amSndAQljAow7ZeLsq0JcijqTphWZrwyemJvhq94D3aH11zGV6xLt+g\nXBQeVvuEZXscc59XMHyC38A9hUNwRWkpIfoFjdz328WPLPNSzwJ48cJdCQY2\nEWn4s/TezBO5dIPG5kHG24IeMpX9c+1Qa4eRfMPCpvYIzNTsvqBItraSWFml\nKhzuvJSi6qvL8H4ncLjjHzIAV04ql6wcb1xiWX96BiLIGRJ4uGUOzgxZyE3W\nCOnPZ79pviMs/axZETM9MPmd2iqtntHHEEnxkXkyft1XobufYfzIyU9cn5bd\n4QbJWbXUDnsdRy0CHCFWfq4wsr00PLsBCulvq6dx3COzCc+nXy4du049Ns2w\nprrjt9gMHHrFoUTsmFZgWjN1kZGH3tqQwWlStpxoJFPrCxpQxH/Caw84DzOE\nFK6vMHSELWqL2UOU7tZZ9D6nyGHw3Blg4klEk4Pl8fLaAvTcmuEJnOuXwR1t\nuDtSpIHeEwfIAeRQNV9P5sEpkcM3JtJ4qDqNkOVgbcphtr2HFAOXaijEUfsF\nPgbr\r\n=SVNU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.d850de590.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.d850de590.0_1594317893844_0.4234410382113769","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/theme","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e07a70841.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"790492f7b78bf26b8e187a3ac8e8d7816c51c446","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e07a70841.0.tgz","fileCount":27,"integrity":"sha512-w+ZYRX0HRo74l19I26NUW32kUhLMnPZ/0IsUv13EIinaKDRO4noWySg11dms6Y6aJhdQ39uTfdV+aGitPup77g==","signatures":[{"sig":"MEYCIQCqmUSFmh3M9dds0mIRqzBlUWf0tTA9uXEqaNcT1seBmAIhAM8G3cMieHRYYsEayDctV44qG4QlhSxpGr9rxFPZXPRW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2NECRA9TVsSAnZWagAA5MwP/1ZcGbvEn8jxQtQ5twcu\nmxEXD+K6X3Y0Eyck94Mty1VLwdS8Kc8OdoaPoMTRfL3YHEYcR8IhjYPAm5Ke\ncuQq2LY4nxBIByPtM0kwR1DhtBMxSShmbf4wIny8+dIz5uqFtPlsOSXrxTYs\nDK7HCNuVa3mq08sF5YK5uriyiV3tXgMSBBTXKMl2/YOQmk2PSECTOwvN4b3M\njlyjZ374YBDvt/iI8+9hqOadtXDQv5EwRXC1knO4kJcBaTEa7E5KnGbRVT+J\nWXArgi62XWythpFNuTvFbWhMYf9r13EGYwfMGbYxd2PfTEFO6P9izmCYvwLN\nIDm3uXe5GWJuIsMptH7HgQM2yVwC3ROZ10bMwhbIrFLO6+1EPTG6NzM8woZE\nxYkaSJvZKaJKEmYxEEsvFYWXtfDm1wit3pSWNQfXpo4Ugw1sbGf2uxSMv9D5\nPWO4T3oyyuyNE/AjNYz0AvAFau0DxnTj+Zwd4BvgQSIQZIQGZosW/9LgRcPC\nrcXNGlYYpJcIxBOsri1JwP3BpWUH7CW0ktcjdGrHQkt1bIECogR+FNbbr0cI\nnAG4xDCIDoYTx0U60owlROVjIvhsawtxhimQb/NrlqLOKiFXsp4eC/HqAdqj\nvQrZHROcVCqpwXWhHWfyDAhafQgZOgeosBG2m8RTyxnKvM6Y2zrl6dFjSDqp\nfd4w\r\n=z78C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e07a70841.0_1594319684055_0.234249595891993","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/theme","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ded8e7b43694e84403a7a892b3703cfb84fa8fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.37947ed6c.0.tgz","fileCount":27,"integrity":"sha512-TqT2VSwaGNj+VBpeyLoK5ATQ/HZXO4mdWdU4DbBtauABqHad1CRsOU/Ft9eSJhMsjRYt1qZabdjg46a7TYG94A==","signatures":[{"sig":"MEUCIQCIoSp5NK+f1i/ob3TuCBw9LUBs1Y0DlBTu3FSJw93ZwgIgDNWgH9JafXnlhUT3SzsZdtt76w/T2FYlortVNpgR3PI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3+LCRA9TVsSAnZWagAAP9EP+wR7Tasjwzc+xRE+NQpU\n2RhYuZ3wWGJ6TQEaqeEdj6zqodeNuDV9QWnQwaHpfLgW5sVE11+vKV3kqfWi\nCbwWG+phObxoWMcn/wGTpaCxsj0krDA756h5WnLdozGloIZf36RMnSg6fJB/\nL7gIVr4/FJkJlA64d2IGGMVQYyxJHlypEROUCM69nowvTmhJYZrSzNGTS7Q1\niLhUU7rJepp3JxQDsERUzQ+qQFeN1iBS2S56rMD4PYQiViMTFjG+TMjdFycY\nuX4b/5XE5VsBayRcN+qxDv+cdNI1Ik66TuQLjko4GvWcEI3+tGdjSw93C997\nycrqJTaYKaDh1UNN28UAVkw85umbeVC30AO0iiQsPoIv39AjjFlD2E7FbO/p\nq/dDynalpgVbWq+m5WEL+b7bHgWfG8gZwiXnC2MZ/x+BgeHHFBExUVN8Gtkn\nkRioUioIwquauDJTunatY2T2tTurpBRvJzkdDYgNzQHPzc3pNbe+oVAxOkbv\njVi+GLiXmUQmvXgfpM2cYazN4tbyYXRJLNKKfFz56XvdqQBVTMVQpP7NfmuJ\nPVjFBF/UKrI8W96sC1uvK+nMbamXxXsyFptGRB+Lm8uhAkPhkuJLsBYHU+wi\niY8RfdJxatsC5rJYo0JQWtUjPmxjNCZujKT7tIssBfDO4+jbri6LbXf47iNL\n5JQK\r\n=Ncx2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.37947ed6c.0_1594326923106_0.30150505118108506","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/theme","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.5d443afec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31aa460467287b9be28d8bd432c7ff22af60ee01","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.5d443afec.0.tgz","fileCount":27,"integrity":"sha512-+IoXp3KLaXauSRBg5lwGxCTQKBbKqxne3Hy2/GgbXLX/M2tQAp4+UQKN+B3bXDAkEvZ812+OgAQ8YLp2+mUOoQ==","signatures":[{"sig":"MEUCIQCqM7f7ocmHmk6aqVXbY7h3etneC/F4a0AI1GK1TYYGDQIgdKgEe9mX56pQ3tJSr3/Kkf31sQBhtppEtu4L+2auHa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4NBCRA9TVsSAnZWagAAHxEP/1a5BjA/OonTbSv6nhcV\nJVYnqSgNV2QpBg9vxqN8uS8YQ1344Q5S1yz3iYs8oj9JCgkMQT4DRmyWWSbv\nm8QUSCmTw7NxVUDVumJbucegE9N4oGJx+gxj8ioS8n8DCIFng3q0uiKSUviI\nyi7QKU7gYCI23Jl5xtGi5FL+5qBZ9fpib/iVIXeB5XNjImHl9QoiGEThzgeg\nbRAz2oolrx7P0zzMirJ9a6KlKUOZ30sYiSSxMxXCrs/N8BEwy9KzKaqZF87P\nbnwmDCiIbNwIyFEkN7vEDeeYYxzLH/KwOW5v1FsQlxSfVnhD8HjE6UJ2LFnv\nI838lfjh29VkwfeLmquvPY0g7kuXp2EDFs/hJaIoTPgZ5FkjqtSSuqVe2h58\nV/4AcDyfEe0WBeJFXMn3IPcun2UcSBz+WbcMeNjBCoNe+exYQx7gQ/Rn7bQE\nORb0juY0hXNrRyySXqAzoKqEaodywMUhKCeFbAUfLIoeBc0qXGC8fdcwKhQs\nEBC6uFE2R+z4hAkBUXy+6XkRd4vd0fCqgCxuJ9kNq+oykqtb1IwNGG7FZqP/\n3w3xCpwLeMcS+zwYcUL0Plr9ImiEBrvVwX2p137dR9lXCeJdW2medENoUL74\nK119GWY3f/UGRgBwyHt2XrE85ddIjCqs9oSZeO1ZfOpThsTUkAdWfzqD4T+M\nunVS\r\n=tAla\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.5d443afec.0_1594327872731_0.022666469953387614","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/theme","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1afd735889fcc53c700f4c1c91059ff70b27ccee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.9ac1ed914.0.tgz","fileCount":27,"integrity":"sha512-w7PR7qF7y2z6vsQ413mMAcdCG09Mq1Tfz3zN1wrsPSVdNIdYmLXfqAz640t0JEiXuRwIH5vW0AjulB+47qOWaQ==","signatures":[{"sig":"MEUCIQCAEawdM09msXiVOQ9yUfej03GRinqeCBctVX56shRZ/wIgKPzlpEn9Qc/JFIKKd6ZBhzSqDrX9mHMHtTbyeIIYXJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4oHCRA9TVsSAnZWagAAsnsP/37PVZTuzoyOvRVyPk5w\nHQL3uVfCyAidDd7Ib1b2NLvjlCoPpLHyVhgtZXYcK6vtLLgqhfQ5fWqjx356\nruk6aqgpBqwMQGFMLDEgPgt6eDbDFbdammW1p5L2kFoj67MmkfDn2O+O1TFU\nmdBv2EoDGg2a3viwkYYUcEFHYpppDL8JcmqGQZsRMEwgAtHAJh37D9AK1BYg\nfwQSewDF23C1QIoNYC5Jjpn/+jNNhK+LsbJJ2XuaYwMiIg6wElo5kypbDdhB\nl8Lf0jGRQZONVfwIepDrr4HdoHT1MeaGXzWMa4b+FHsRXd5ssgBRNQy6eGbl\nJRuE4qb+vgXmJ6PV9qmgO665K4nyTMzZ4XUzICr5GnXe7rQRwT2zUQhebZM/\nRtszYXxcHJ8BdMzXoLlBnIhzjfn7vcZ2u33BTA1KsUHuF+xfjZqPfIX/g1WK\nKEXCG/RfSum4dgPlSO1zlUPbySJ8Ij/tF4L1ld54IydhH0+oAsDEHK85WyoP\n3NLTfB8kNIhyXRZcdrOvZoeUnjXoiugneYmpiaOKZAoTKuP+9BpEqNvxHi8l\nHG2h6kmkQthK7y0IjwjI0X5CSAVDtWUY5f7awR0HX5y4+jvralY+k1gk8xBt\nD3r/oYhPafwV2gQ4OvsKtxUobw4qhW/KTvsxwmLXUWjRYuiG1V9WyGIap1kW\nfi1p\r\n=VDDJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.9ac1ed914.0_1594329607241_0.9495262069999193","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/theme","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2000f70e110fd4c8027472ba970208e9870c9aa3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.1e7cb6198.0.tgz","fileCount":27,"integrity":"sha512-auOyx+4JYZLx6fXBEhNU3/0NsPYm8fhoKLNc1tDn64wLIz9CQ4IwdKubJdft9BHMhRBsbeSNDQl5H54VazT8fQ==","signatures":[{"sig":"MEUCIGc67scvz6nR0WoVlsu37BAfMyiW1rAkomU+kksY6BtwAiEA7u08iDQ71d7fhnsUzrSXI6TGoOyWFNEYMj7F7q/F3ZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5YfCRA9TVsSAnZWagAAJwkQAIx8UbbFcUruw3LoEkO9\n2/TDC73irhBEOk2yLOdlGrP6rg94kNwQJciZ5j21LdD9N7IgufjCRUx4OCcj\nQR92sH7aLfYcLIySye0inQ7uc+nTfZV3oiFyN88nmPoLwaWrbW3thUT8IGRK\n0YtVBWLVvx50CrES+ve1NwTYevIqXPUpvxT1sksNFUjDHlLbn5lhp3inQT1m\n0/Ffn2zqYnaQKDjuLjuwqFllt0n/cEi7IOoIhF9fQsTU8/Z5y3LWM6oZUVDL\nBNkDgxofXzT8HnNx6BfH5aAcjsRmLJtrw0gw24pcLURo1PxJs7njmo5frVqz\nY9qQvQ7xfuR7mEF23knT1YP/HEfvXL1J6UHwlOrFUl2LbMqzFKl8wxHRKI0/\nZIwnQ9mlBD+G81L8I3Psaa2j71IKfjDbGo7Cp7uMNgfaXEUNOkNq71/2lmhU\nNkqhrmVmKVM1/P31++QsxzjNgIaX4o2FsUafIWE0d81K4qzQvUAx9oXt5z2Q\nmH4tzRXYc1ciwI6QrnMky5IX7HeuaE/vwaDBT8bcINFQsvBFN0SXuxMPqx62\njFiVPjBk0wBn+YuKZPtLBraChDpcAVx1TsH6V17jDORHXGqEHLal4gl2v/4l\nzEorr3eBPEqVOPaHXpG6Oj8xZqdDL5+RaJtgjBWe+Cj92fQW1UPC68ZpKQ52\nZzaj\r\n=Yh16\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.1e7cb6198.0_1594332702775_0.11184097558934414","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/theme","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.843f636c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64b86b4c6f710783f79348544d17e5e131ec7687","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.843f636c0.0.tgz","fileCount":27,"integrity":"sha512-Fsgt7nqgwOZmu5ZFUle6cwfttFWEKZHxTqg12druGv0V7u/y1Tiov9but0dSjWxKn5IcHyOpJckiFc3ciyN6Jw==","signatures":[{"sig":"MEYCIQCzCJ+gnJSA4gct74Sy0cHGtcdXfoMY7sxiiuuJoagQqQIhALtG2DfojuKREC1tEzATuyCn8XPLDGZzxd+TjFtmB+de","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKhxCRA9TVsSAnZWagAAbXQP/2eGZy1tuixW1hU6GblG\nQyjPWbBQAxUbdR+SpEhR1c0JTb6dF6ZOiMcTiU62apu1SbLoajAplbUcVU/s\nQL0KQH6pFAINA/Q8Pe56sh4XbufUq/GB0+JmdMxoqoocKUjUnbWzCEVPdZHG\nY3cnrgemneMkpug3uoQ2IEEH4pHhcyT60N8TKF6G4VfNM415TRTPqBoLUjro\n7QaoP1z0tTRIZD9ds2rU3ZkJokPRHJqposW+CI9/NHBMDh5tqv2Kldjgo2my\nqyUJHVZINQ1rU3CkZ87mR7kWhSNM4pFZvKFNKlN1pp3+4JIksj0mwqfJqfsc\nMg58W4WI6RQCfjGgxu/F8AR77rQ83UkKyVIfrMK+Ngo+zDnMXNWZUnK+iKNk\nxOXX54IENCvSJoAtWgMTQ7dvEVTbPVeJKmRU0bQwT5AlhKhZjqo2MAzl2uo5\nGy4U/m/gTnU5+Om3tx/wWvK8oyVJO1Az1L+WabIK7KMoc6o6IXRAd4EeXPH3\n8hHz/56+F5ajKY9DZofC5p75/9axtBt5CE59fJJ2Jh/2wGFy3UPO1Udy9dTM\nYbNtHiRC9QDdz7xvw1to4zlhG4s/lB8osAbSTrXGgzJviHukL9EuXr+Wwcbz\nwcq3m74d1zV56jmcc3V7o+rAH4aUDlcSIw96ycZNyQ55tVTkAA3Ct6UZfHNd\nF/Y/\r\n=eg/h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.843f636c0.0_1594402928693_0.28572870519903093","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/theme","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90e5813976b16c0ee30a3c1663dfddca694a231c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.b2edaeead.0.tgz","fileCount":27,"integrity":"sha512-ZguxON8BJvLFhKZ1R3V/+50JuteJ+9pZDDapSsFHmucYXL1Ly+a7QyNAmo11vimY0pPzHHSANo5tVc/3eoTHKw==","signatures":[{"sig":"MEUCIQCG7dbZu9bvwLh+JevD5DWxjbp0ILeatR8IyhbSK4AvIwIgcuDdp9O1HN4lRwbzPSY+AgIPv8jdRgAcRjtJBRwUtz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK4tCRA9TVsSAnZWagAAe6cP/3aLZQWB8NV2RjYupXsi\nDE+CSOz/I92rd26CKPUyQxB7ov+WygBUGDYmhHWT7fPmYbvTHPH7jRHEMB9l\n7NENf7EOtR6FC4tpBw8s2Dok77QTtH3qY5HH3pFjWcPdKLQT4fGeVSIyE7T1\neSP/1ZJi9xXot5yDE3fPwsj9HgZIfIXqU+QLIqgymK/Co4xlfBc7SBZpO9uP\nvBUrMVj3piXmI7C2gyejdg1uUtIICSUMAuGC3z9n2shDjWotFdaMX8yEbWhq\nsWQ9mahYZpzbrX+ZgmY05kxVDxMAiih/CdYEb0rLH1Yb0NIvqhEtB2hAnzNd\nQRajKodX9hedHxeYduJdj9wa9e4fTvcNpPD2kmHcF6m/MJ/7bx3jNSOdofWK\nHxbkbHJLFb4keT5tJfSksehKRoF1e8XSgv6o9XPo+u4ptVm4hdglD/EVqSRt\n0a7l6Y7efkPWDeiphtUWZZGN8dCXCbIeMadDlqfvyomV1+4PbbJVuGjPvQWO\nUzOLiwnBdAQdQ29eA2uOmPfyW0n2pcHyTvNfWnTq1yvRjrCxXPe9xGId3Y8D\nQ7OhiVfoe6Lt9jsQcX3EZzRLnsktv3E5Bapr1aGA9WNy6pK8z+Iq/F4WRHoG\nExCta4Ci/ERhXe0Mwc4jnKsbdi5PNL4ooj/NgoUHWv8cvPPzFgbkEdcSlNAY\nhK/x\r\n=EMvn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.b2edaeead.0_1594404397445_0.969851958530161","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/theme","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b588bc0bfdcc80622cee6bcc610ced56dd5743f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.5dac1f624.0.tgz","fileCount":27,"integrity":"sha512-pkhyS5rt8RrYMl6RA/NvUbtBzvKQWZhK5nSlw6PbQQy8fOkLEdC+1v+lZMO036EqfJj0wXBllpdHZkzU4ULHgQ==","signatures":[{"sig":"MEUCIGSNjJ/dGunN+yjcFRXhQ8XZwLLTNIKOoa3mQI5K3PiAAiEAvFMx0NiX2ZV7bozvyZc+ylsWnnIgKCmXryoahl3MoMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDIznCRA9TVsSAnZWagAAOT0P/2dslyt9tYDT9lqV2s1A\n8Tz/XYOVZjSt17UjPbc+glToqqAyqalX5taixEI/Oefk+xTZl5IUUbQKEuCy\ncmuTpNiCVenP18w3q4zg4nMCqzrjetfZLoUuh78clNKA7Z0x6WxLjxln/UhR\newRBwVxOim0V+flTeg7cSozBkMaziA1FydJNVv82cDcDxEzQ+ij6t+XCOQSb\n/D6GWdDdMsKMwWCweIncqfkcZ8zuMUEryxJJHbEjlDJgIbG/bzxsdYjQvO9j\ni9JqksAcL9Wop3XMMiciXtQWuryLUd867B2pamqjoC8O5isfX6fv/hy4Yu2y\n9DEdYhQeyS8urIWpAGGq/vsYvKvZFF3EhyGwshCsPpCtb/6Hntego4tRZrA4\nUN07NtYHPgcxuDv18LIaKFweDzTRRqB3qo3PvOfod2V8ojHG8Nm6JMojfAe6\nMRI4E5P1SkMUg7SjvECn/m7FR95kBxF2b6/xJrENobX4VcXqKJ7vSamj8i+C\n9+M0fEseqUeBEYovRtFVn2YW+sjuX7dCeIc1cArVpO1ppSpCRFYi5HQK6DTI\nA1O2TDn2Ao4siIx+wB9QjOqRrsxqRFQH5dxXtOUeMIImR4Sgo76AswPWZiHy\nlnZ7bFKpl9zb57sBGDqERf2PRwuqIGjeT5oF/wMIdS7TiJFQeXTt0gQ55JSO\nGPpj\r\n=hHfn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.5dac1f624.0_1594658023353_0.5376966391864098","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/theme","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.4497acef8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8c33897eeb896c018c247a7de5540af7d6224b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.4497acef8.0.tgz","fileCount":27,"integrity":"sha512-zROzwuoMEkMUFzWBtJ7PpVBAtSG14mNVWfW5hPAKoRQEk4NWV2EEhACIYvykdNpLgLRYiZsqXoD9kn0w4GTBAw==","signatures":[{"sig":"MEUCIQCuyAZFdtWXGKxa5gcvjz0U+qb2dtqfSVzyOpIk9Xo75AIgOKwctKNZkn+98jvj+at9gLTa5O03mr8Nr0fZO0lGa1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb7sCRA9TVsSAnZWagAAF9MP/3Q5Tz7lV/eioXgm67Y/\nEra5KZvTCJBIEsKvBrupIm/1MKsAiv6JOgGC5fEhc1WnyEDrI2eTh5NOLmmN\nN43exEQ1lU2FE6N7mdksXxRH6vAfMU/hX2xrGJWqr5wPtjOxfU3na8jlmNAl\ngNYM0b1mF4+/51nGulzphgNYScL/+XlUEP6CfANqDYwEVxW3NA2iuEttPhYJ\nKpAwsVu+Ut+efJDVQRFu3Nmw1l5UccFU9KeyJ1Jiga5lnYn1S92SIluSgfma\nTbW6bwQZnVwkHuUTnVXt0kXKNGFS/Dr2axyrNTjb1FWEYjQS09XMhuki+diq\n6DPdEk+ohmXeVZ1UxzbHxZ7cmoAbkZy8T8V7gyvZz2VxFBwJZa0WMXEzUErw\nx58sl+e64Ymzdx7Hpw/kFGa30as4V9h2A4HPxe953IddAZ+WRCHNMjbe9KCq\n23/VOYJeSI9UwcX2L0iCpP2O7NmFe5IZ+F+digJFhGi2oVXADqguntU/bbsb\n+JkHpCZjGPN65RegK3g0Fic7vTOoS0+4HPjrQsVAbfNMKNlgPeD9n6ixAVYc\nCORCjT0a3TBtJjqZnB62kaHwP0StovnlsoBRwKyEDC/frYoprDaiSB7OmmiG\n+SEIaIybeG32b/NXRFzXn6CZoxrMOGS8AUP67piToyY11gJ5q6+NDDsXHntq\noO9K\r\n=QbnZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.4497acef8.0_1594736364073_0.1137356756492045","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/theme","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e85339ae109865bdaf47c26014dbdf71a9329acc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e6e23019d.0.tgz","fileCount":27,"integrity":"sha512-IdjNQzlkTQSW14zRD+zXS4yVvzknw1g6CN+oDSBlFVbxgGDLdhbE8beTwluuwQepNUuCCWhEfADO1gMbC14KWg==","signatures":[{"sig":"MEYCIQCj3wNshWKBKyQN7cl7fv3htCJKiOIY8kKg8xPRJxwLLAIhAJrqbcMcurbOmC86twDSoHNwyprMnjaafNFwyZJvXEkr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhEQCRA9TVsSAnZWagAAXaUP/iZitsxWidPsr4J9Tq8A\nYIiaTLVQNgm0JFZQCHcc4S2y42pufIjt6qQ+kmDlKh29ctoX2YMi2lWTR1BJ\nidW5+L2OUUG0FEa94ouK2n9oqejvc8MRlu31DhNNHbX5DKA3s1t7mDEJMKjC\nqttV0bkeWH8wlHJvturM6RfDsw7I2g+OVka4CWOWnoFvw6Ylav2kZsbMvcx3\na3wE98E+TjDpZWw7O83nxs0KiGv/YQzlQ2LoOilvntVRgKDILkuYMUXrwXJ8\nbUHN1Da343EFCWLcFQAscT/ZnN5yd13RDZZkODCGToLhV+MZUBEaTaRmr6RI\nxgkaOi1dfmEkpMQ+XG/iakQbOPs6U2Y2CNdRzeMAiR2PCQtC9qBSCYTR5Ioq\n1pcH3r5XUkMKHulFGM+gcYJxued2Id9R5pESueh/fQWj2+xyYgLAN6PhZeN+\neNOzblGrdKGCBSJ6C7zecdtcwQTkCJk9EUy7Hkl6TPgdzZJkqfpRoh6OcoPG\nKNZYckmd4qzUJ+ajSG0b1t/0zuDJhP2FhmqEzGKmK4MuNRDYGgSPXv9l2+9B\nMKsVcd43/x4B5mNz8m84E3ezIU+NdjKnkOkC19WUWdyQqYWTVHIo1dLLuLF6\nLkmCQ91EdLOrXFmz1eMWXpadTu8aQ3tSq99p16FC/h1vm/ShXWOSzm4kWyvZ\nd835\r\n=uKAS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e6e23019d.0_1594757391899_0.3852634559594925","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/theme","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce25b3f52c3c3ac76a4c326122c8573c0b5786a4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.d548d7a92.0.tgz","fileCount":27,"integrity":"sha512-VGl3XpcZtq1G/JV+ylQY+ycVD2kr5Q6npJFdxqN6HHTxxS9bl5MJov9J4ejqcTQoncmU3A8gCbPFe+gL5ySXJQ==","signatures":[{"sig":"MEUCIHkNU9BaD25o/BulXxQIBuCGxc9sCFv6n54KbfkDAht8AiEAut6gUYMhVQt82ccf2H6Hjo15c9v8bWV0k9qMfnfeIhU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh+/CRA9TVsSAnZWagAACD0P/jdCd0F5udL/QM75lBq7\nQomuq8P+4wVtfeCBcPor3i3bJl0QQXbR+U5j8dPcEtE2iQ0Od2GO2WKkQLeo\ndguANPFlbbYGqJHvYDNWwjIVwqFgylRn+yzmIiCm6raLTVVYFOSKyR4w8JyC\niv91MP5vlIVAyUGkD/jcJaY3LwKzoY40ehYhTqCQqo8R5xY1X+ZIQLjzuZHg\nLXb/eQ2SeKrjFebXWQTguGzxeHpkLag56XoVd2sNViB1QRNPk66tib59bnWk\nsYfFziwr/qeGWaNmyceFDJgWduEJmeH9JavoZK0MbuZeYQFpEKNBZP2eARNQ\naq48GF5YqeVYtDuC88Rr3/E9BUHw0XLFEqxXQTaEmm2l8Dng9fchuezpdUbx\nGq4JT4yyg/dsqKoNVh6VDH4Z6zDtqI1+Oo0f5xIp1gTPlkNUcgDEGT5yyrit\naX524TWiuIBmFW92YFzQ3JNNs+TpC/xaW0STxJlU1vv23WFeU67FXvwH4oCq\npaWt+pt0+73OuB2P0fp8E/fNfrRl8K+Dzv758spvI5OQetyrOsdrIgvCfitg\nSrdH1JP/jObKvsmL3BLOpizrIa0QyFskye7yImVak2rM4weQHcxzbARwM9+A\nORxQb8uzaqskgvIeBksEl/oJc1revyL7OEo66gIbOZvuB9R0KpjShYCpo5ak\n+HH7\r\n=bvHz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.d548d7a92.0_1594761151045_0.14067986563347668","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/theme","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23892ec1361b96e06f08a2b62f3b1642c5614cea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.58ce529cc.0.tgz","fileCount":27,"integrity":"sha512-i28GMJnfq2qS9tsYh3FurrY3EIF0V2YCbsGyNhuRv55Sqml/CNyb1zDukPAFdE/7MeuRZKzT4OVNyIi4wI3+6Q==","signatures":[{"sig":"MEYCIQCqEe/D8oAfpPm6lIxgdpfZIpqX9dNtK61gUb/KF/HhogIhAOBkAVRUl4X7tHXRGw2j8yLS91YzWorDVCkjqwnouI7w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiAzCRA9TVsSAnZWagAAhkoP/05g5ViOTf+UtHVTItF6\ndAEpkU//IcVCRKxXtVVzhKa5dGR7qj3xv6UBos96xx0voPQIilsuXsBoqCwY\nD5jrgl1nZktQkRJM0iF/J0jrXrmGpyxLP0LO9iwROzwrBghuRAuhWVOwa0hd\n07uDHPJRR8pSpUctdyn4nKmCHJmwbDezFHpW+pBvHs10Ni1Psu010N/vsqoP\n34nPlJqS4hhiOam02xnObbkKOpi1/sPuk5X/xofx0qQ6YxPHm3lE7xH754Ux\nboVBnfZdz1o2puYLBpL/9iqVuKhFF+jRFwiiSZBUMKbCCyaMBPSeIqf6Fxnv\nxZfekWR2PctSG0KsDKHnDKi1XGKreYvBhC1wPWFQWEP0uaBC0/uKcp90n+Uv\ntsdwpPRxosrVDF/ASYKe/qBWX5uw1IOotJToe14haHvWLes2we2kaZ9TgQp7\nZSLQReJ5+werlwsV4ZOLM3K165WNlq8GlLqJ8XwdVSBUlNeSes8WRrgrX8Oe\nUfcsoektwxJvdjC0usKMPcfGTodNF2ZETpJXUYL7OjrGRukrSQnj4gsrJQbV\nD0XrxshC+matsGSSrLZYlQWk2JP2EyVVfFlVUgsqyJxgfrwKgzzfWwWuh+ls\nijEYdsH+A7J4MbTsIiglJPssa1tpZiXY8ef+br80ZJWi7igJd3kobrQXk4OK\ntGPP\r\n=OdwS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.58ce529cc.0_1594761267316_0.535658520397883","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/theme","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7baccab0d6f5b953e2878885c4ffa68598647f44","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.a0f1202dc.0.tgz","fileCount":27,"integrity":"sha512-hcIlS9FUtlMAzD7aoaoltkpv2SPT5xLjzqI1Zo1B5gEYv5gnQc+5UJQXPIOfXPOPrafeUnXfObxjkx9znfgHSw==","signatures":[{"sig":"MEQCIA00z2JXoCFEMF2JnGpM1mHOZbd2Exs2hFhrxspOCd6oAiAHWhDTuaiW8YLApqZOwUgSf1S7WOnD15t7GG64imPCoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiSxCRA9TVsSAnZWagAARZ4P/0H7/vRjmtEPACrSUYhi\nnajUJlTq9Yat81nir/GfX7eYKdH+u7pxi32VlX/CXYwxZVYcGPpAk0kc2e1S\nszm90u1Mt8bCWhETz7hoJ5BnK2t2bCcUR+QwxM8vDJ/CEUt0FeWx/oG6uXBo\n7koIK6X5CtqslqYb5EQ6/W3EJ82ZxjACy5SS7PvtHQFtdHQT0xzti+Ti5pO+\n9seC+HozvK1kidFGyxWGW5EuZtzcGcbPiM6wiL5FASAYzNwx3LloZEI1CHAQ\nEqiqT5EQCBPjdX//87I6ZrEsQ9Uzamo64CrCVrdd3sUjCe/TIk4SPdguW5Bx\nqYOHFmTAuotCBfaRPSLQ9bbeAHOt+lAEH2d4qW1nsf47Xae3T2e8w9Muno6v\nckwRWheiXOSHESrzWhrFQlYyddKIQkV7iRe20t5zJ5bWazQv9G60j6NzG+Lq\n+NjfDoCQCTi4OiPTgsJ4Q+BayQ19S9xEuw2+gtsRURmCUqoFbiyvk/YpLbrm\nBE27BvCIX+x/0QPH4QPQwcfinjqwOh+t0B5PkSGoAhLrTi6NcjzGLpR3R22r\nskWVs6MZupC4MxduzG2UZ8th1gYl2HpMtpW0sFEdSkDs7Xtok85Znyt6EQxP\nEINFNSkOKln9kicmRNkfDBpKLxsXLhefoQZLoSdrcPkHuQtsjX6OEUHFqJ3j\nX3Ly\r\n=taTy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.a0f1202dc.0_1594762416743_0.4898595935776784","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/theme","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c32172dc1945c4e9e9a5592091322376d89a178","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.ad4df58c1.0.tgz","fileCount":27,"integrity":"sha512-D91v6yrYm4eTsfNA8ZQlLC1WveKeH5SZ46Nq3cjILo4RvrNpEetPkbK2NiD7VsVukFb6gGb/KnAhkGBHMNxWmw==","signatures":[{"sig":"MEUCIQCCkFYafjebjXm2yANTiIL5aqxs8foViGxk56k6G5nBjQIga/tNTPnqtYz2C65vzs7pOXTMXEn4U2dbjzEq5YMo9bE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkkQCRA9TVsSAnZWagAAdMsP/RnRO+xGKhjuBWT85cAG\nBGXaZrwJ/xn/a9FltkI0QmddfF96CuGFDwJ6oTvjWz75Y6Mqqt3ZbjwdUagc\nvKC4uD0y/qAM69oe7Vmd/GEzKr1TubxnlBfFGSECxF7O1fiyrQRMgMhqc6DV\nBMH6wvhyuXIlOA8pJ/vWdZwSitS3qpXP+/8wBSm7DQtmdYuZxH6MtAcxYk7t\nflikcnqYS4lAFoaE5uAHdUkfNGWLkXz6P0IbOQE+N7wDh8MGacZTfPWtm5M0\nzwJN3xdpuihgv07Jr7y+TIGPGfGoIrxA/ZQbSjl0W+7jpe66IvrYPz5jSYLd\nQpCkRvTAnEEP1EIozsvg0AC7Cy58cmr/kdCOinpw6uaSRS4JqxUwX5Xbwizl\nE4/qY6i3NPmMmGoqfqujhj8joZYXM+SmLvKsXWM7ItMxUS5SxAPTU33dDpZN\ncveB2BMKNysxcwqW+/gJ+XHh8LnkFZNHpUl8k9f+V5jx6O/jyk1dbw32wFsR\nOqOjdfReOzOzEg1fFB1jtltToe3oUk/CRqC84CJ+BLhCPII5bxFdsl7Wyte5\nzGl0tXNaQIddaWt7KZLquYpTh/H6NgEQkjqinXOiIDdDI9DDu3QV/rV7pete\nqhFMxvmUqBNu0LE62kv58SXK0CnljUdFeYSVPe/FuBuSmylqFFUkSkD3VLQe\nbdgt\r\n=eoaX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.ad4df58c1.0_1594771728475_0.6307959972827415","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/theme","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.01db89053.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eac8b1fb87834cb314420480e1e65af4a84a6d6b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.01db89053.0.tgz","fileCount":27,"integrity":"sha512-XKk188GWzllx/UfnabIFZa273tYuDjmcHD9oqrsHN1gPKV8cC1n6ynGxPNJkVJI+6CO/5ke9Xqe6MmUCoFoivg==","signatures":[{"sig":"MEUCIFUfX5cPEnCghuyL2/hw8XotyF1gVvR1KSzYnMxil4AtAiEA2sJT/2+xeXwljlAZBK2ez4IbJuys0/4YWpWfpfdJmZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIKFCRA9TVsSAnZWagAAkCYP/jbDf8zHGTy5K7AiZTmu\nNHQrr2l/+yGehAdAIkKmTAsKsQBSz8+1MmB3UtiXK2ZPXdZoGBaI1GWIf6jb\nwtDQc9RGRHgM+NMtQAjR2SIOdaoL8gHMSK0zU5oSLvkSTvbourCin4S9gE4r\nUFbIUGVjs920J7UKT05Q/WN2Ld54VpBkf+LknV9A4p5JhgdX+TKOdHfGtqq/\nGjr+yShVgo5l8CBgoZ07fRp7zZxLF7D44a9XVKNfN2YBYNtFarXanRIKB0c9\nDvqauqzsYCGeG7KZPEH8NGRZETsuIu+VnnZbSH+NLTyDQaQMUtUxDWchFP+g\nMxn7TejJh5fVtsNvYrFin2qti94+RkHYK89N8ypR3G6+n75waezt6BtR8dns\nXW+IsHeT/9XYOV+e930QWcJybszXlbLxVcJgRitqBRUWPqWZ7vyouk8ONBm1\nYwKH6CYb7Q02O0Kio4PVON3iApnGmAKbSSPUZE0pow1sdiQ0VD40i+vFQNCy\nIiNUxa8cq9XpB+qYwbBehIyeWu3hWoN9EYNmNU+ntfesSROotN4HKBs62YgN\nW9dSmjI95EhDBcDKvkjiiWol1dJgv148RHgTJMqGVu3LF2gQRg0Q2xh3f9LI\naEz2u6CDh5gektQYhzrgf/hzTRL9147eLbpf5myR8wPWWw4FnY+b6fixtJVM\nknQp\r\n=7kew\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.01db89053.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.01db89053.0_1594917509160_0.5130747179131301","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/theme","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"805ee30e066b5355ff48bc7d62820a4dba17bfc8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":27,"integrity":"sha512-SUySOucP0tfxuKvV8EdMN4EH+voCdzK8MPwYZ0vk+OIsM5XtE9gdqXphlZiHDV/gsiTDkvhOK8w+HEoMaGHedg==","signatures":[{"sig":"MEUCIQCvlc222XI+wekcDyHDrbN9WuMq2LUXCQB9efmFGiZecgIgNxDYuyD6eN9etYzRomRDPujkm77Sd/GTu5a2STn71cI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe4/CRA9TVsSAnZWagAASBIQAKJEA8FADH+zAJpbrMs3\nEoZ9xCoSSsfyviRy95XpdpC1TIKxyaeTgm9ptVcoHYpo/2eDvS5KuwJReiJv\nWwoMUVgwO/LtnMhk8oZJ7Xa24voE2wg2HKW8+IEpkLnLuJlYZzqzAspCLk29\ngChykgTCCK7vQEff48qaLt0xfm3txGECTMi7Zh1TZzY+p4Y/MGS3FHLlm+hH\nHrBox9NaJi26gIu9ng16dLoHKtGgkapXi8tkT7gjiwhizRXA2ko7xuhUktFp\nJD4/4a1eG7pEWelTJTsG8NTscFM5iZmtHV0GFB/nJBL3q+QIcGwEwPVCyxcf\nUSHTCIX59p6n19muWcVtbrmpOGsj/R+UWvTdXQoE3Q8Z5N1+I1SZO0JtWt6g\naRCHS5N7x1vj1JFFQ6P4+GiTjSS06Hq8QSYYTm4JTslRx/uGsKmhDGdGPo5r\n8c1U0aU/OOGNQLu4WpRQR8gIbXcvitNGnzzKPfIg61FKe71bC0SgRcTxIRQ9\ni0cbuD258zEOaGztYluBMwolLcPDVLB9xSvYqlbORBHlqLFDbZ3S77Zfr+gW\nNAexZOljjjqUL8zH9q2qLc8s1tkP9mlTsk7UaLm3EKoPVm+G8E03rlvvDRw9\nSDEcHfGIes3GkbwbpHt4gSa5s8dHFMu91TcrRI4sm0sgnV2yA4kIJOSn6y52\ncx2N\r\n=ch6y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.fb5a4cdeb.0_1595272767123_0.466247853639427","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/theme","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0be17c47f5e08f3e06287300ce5028321bd7c7fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.8df0f517c.0.tgz","fileCount":27,"integrity":"sha512-eioL/+YnvodAPpD3PB3zwKO6oEn8nEEajlli/zZxXzKzbh5VJHCqP4mpgmynJfOmBTGQYAAuwkHMUCZ3AYyMgw==","signatures":[{"sig":"MEUCIQC1UuKaxaRjbtwVQabqnvWpRrfgeC3YDNg19Te69D5EYwIgUYRD0jdnQWvrWtuElF/MlYD5cVU9IrnNKBqCo63uL1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi7ZCRA9TVsSAnZWagAAYhAP/1i5sR8AcrRN4cBNL0GG\nvsE3O/mr4NW6wX7qGJr/PPWMNe9wnDZ79hJk+3G4BHzxsyDqHgOO0J2o7qAK\nMbU5+T9PhO2f1sc+2eg3afon5clBv3p+SLK9AIPGTpZOBMyrLv7Qk0JLFFPF\nQKQzx4OXiIyIwN8/wBr4Y1a7wTWbXc3bzC9/WL6DN20Qk8bNqvArH6uTigtW\nkcv716Je1TMrm+xWRpGIvsEex/w4QUh/RirLq7dvMUg59gKSIY9cMGFTj918\n/UM9eib0esTE0RPiXoOulwmKznht7cLbZugkznQAqjLsDqYyhml1kwWAI6gX\nIpI3LtLmKwL4yETnY4uP5n0N/6rSN2KXRXMdlltAO/f0QYoWBdK1KcxeIfYU\nlF0H8o7cibTkWj9PvUlcTUS3fhle0k4eSs4mDql/KY58GT/XNmArRpYRybuK\nP4HHj2z+9gCOCgdfgGA53uJ3t+IQCxc52a6X2dtzaua2Ale9U/lkRoaOFPX4\nDh9Hi7teHIUDT8i2l0ue4GhUy/Yx2nKdSuvQEtVBlvIhwQXC0UBPeNe7U9fL\n4u56GulGtr0gWvdPsVr0MqikaF+JARrVJ0WIorteMEpbuM1MGBtACaOQV2/b\nnkYvoCo35D3vLgpUJgz0Fz0O+H3aHAVMnasT2DqqvdySCN1EI3TtnU1r8EjA\nB7FC\r\n=Jkyt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.8df0f517c.0_1595289305060_0.34069897950494","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/theme","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc7a3119a5db8dad30e4105c8b0a2ec40954c32c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":27,"integrity":"sha512-B87lIUPXxPjswoucHbRgwB0iJCi1lBBSWVwgn5kbW1cvQv7np0mN1ZN/gW9sHLXRW9x+KBX2u367Z49RAuqpuA==","signatures":[{"sig":"MEUCIQCsK/sY29Mh/unVUOXjRfRAe7J1DxagRL0rDBygmX5K2wIgRiqIqfd2IP0/p6s+xUHB3JXL+uWn6/JZr+sqQpeZavM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjueCRA9TVsSAnZWagAAMiEP/RDwZ0PGyW82cHR0tbCy\n7J+Ovkasb49/PzqChv9TaMqtyR47SDhFohb9iadgCe5jhecUGRwKmC4vo6oM\nIYeMqYNgn+Lv1pTm8MRBMu7K3BrCiwaoKuBuCiZSjfOj+v5NmexR8hygnZ3I\njMFL8U3+KSUxNV6b/yYMSukDmGmSv88cMSmu7L4iHoe9bqO8HZbxVplZbm0Q\n5f9/ziMIWgiMaKFTOxYySiezJ5dMQzJcBf+dgi/UivJRtFMLFN4Aip7TjkF6\n3CRxRFvQcxcto5MApk0DP5/+9iX31cMvCAh2sKXZiVpgeO9G9mjCR6kIE3PK\nvn88QFICoRRVsHAPnLzarHiPE036OwS7jGekPKq70M4Bx7aOKf1EBkdshx7q\nWw+wK6Qsu6FsI0jMDKOoioCoX9KqLQ7MXzT2RO5uShFwyqFeyBri89ks6phW\n5pQ9DESn5xmZz087wbApLC/fYuUyS7S+YFzluO4kDBGl7brDNnkSgx3aaw9J\nFuuJgB+rV2BOHrGXwCwvTp6JvN11ku6zfdU2+nypVE7hy2rHWJV9jV6Vgjmu\n0I11YqJabjMoSP15tkwtAuL0leMldkzVdc/GFEmTr6hvTPb2SeDUqyQf0Aed\nCbQ908Gancu+oWKvwCvhwZ+GECuZ9KWjzR1EdeHRWt72augF5yCxY4SCfgbo\ntI+7\r\n=SjcM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.abcdbcfeb.0_1595292574477_0.9381900008968191","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/theme","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d22b13b6284cef948e5290e01f532ec4284fab6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.7bd5075de.0.tgz","fileCount":27,"integrity":"sha512-NWjKby8eIf3VpZnZ548Y5ZnDh77Np8hj7PCFPE5PUuQM1/qwpa1zKFJtwCMz5EQKzSOYCCIYz16JaBhRCoa0Mw==","signatures":[{"sig":"MEYCIQDeMm7dfD7KmnEEoXMk4WTnijb+DxC9JWXpytc3igzfIQIhANQrFlDDiRSV8cOlvAlBaGQ7xez8BzIHjAx9UOINtslR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzgLCRA9TVsSAnZWagAAtlQP/RjxdIjEVfaH+KR5HEH6\n0wmjahzb8pmS7xUPwCQuZT6uSQvzJWoWr1dsK0YodFjJA+5UESI4nz8sAVUz\nGQV0Pwy44WAHw4ihNMBTdCluHXsUg49gJe1kptGt+o6D+L3LUfES+AD7M6JO\nkys4EuXu5RrUnOOymXEVU3HUELd6oprXGEcd1bBThrrnzWw4th7b4I+gTL1d\nUmQGb60BDM6Bw5bLJ86R+32GJFzvqkkDyU5FGSMKGQhQZHYm9FInTXf3ay/+\n91X7OdX9csaJLhlSSwwRfOTesS7TlJKxdQ7YHDoRQI910vXO/7dfZBykUiMe\nFzeVAOeC3ra93/3mJPTmu6MStj21FZqcPbANx3m4gRRC/Em+umaJBV+sxi7i\nCQK1MtT6nKo8+7dWcqxotnA8iNBnrhSXTtKUTiCCw7VccQNDeabizM4RYuE1\ngVJQz2NenFCbvg9yoew7LfNTIyB3AQrVrme55Ku0ZH6xH6Y0cXY4ZHC7eR9W\n36AkiwJgaBoXABiiqSb+yF60S4JNRQC0x1r8Q+dKaPMZ2dLc238t0sMVX0Nk\n+NflPW/mfMTZULA1MsQCiGJFXy+rsNJQvrVIMPmFfkX6WwPefZB5tapR/ipE\nClEVjsYA2afJq1tLlVwX4YfT9jRfBuaVk7EwGvV3Y0lXEG7ubrOfpopbmO0u\n8AKK\r\n=ZB1F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.7bd5075de.0_1595357195292_0.19772462946336744","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/theme","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.405a29a20.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fad8247f6a6863be6a6b828bc017ca5ba06165c5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.405a29a20.0.tgz","fileCount":29,"integrity":"sha512-zt3qtfCo19OSqkv3ql8BzRmD0h3c6ZUqGsbNcGzcOE6TNQJeFawuobE2gSXmbPkEwGVHX3pFw8CM0aCT+qfDOQ==","signatures":[{"sig":"MEQCICSMaB9aHpdeprjCoeECNNVYXWpW0muLhid8F1b0aVF+AiBxLQelX6xZcrhvxXisDUsdEIprOdRPv6c6QHlqgPu0Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLwxCRA9TVsSAnZWagAApWMQAI2oyrEepLA0P1CFqm9W\nfw0ksVpC7rIuangdlBtyFxing9anCqK7y0bTbat9wfefu8Lv+gIXWmApROPp\nFh7m3KDLlEO7cydnCifwJQWFZO/4BqRSzGxdUhkPH7dCjXbEPUXqB9yxRLRR\n8sSygoxTcvzNUsLY8BBJXaS+d/FjebePCiZjz8orHwkOrUSfHGRRLtETqUC+\nQAFleFjl+MdNnqwXvmWL5C583OomvTU/twLyM9qVkHRDfAhsAgKfXlHXkWiW\nH8Eo9KbDZOZiJgHROEZOEWxw2xa3UxPmYMxjc2XNWfFLU34p/U6maZNjCR+Q\nlKyYr7KmmAmWxEjA1TSOFxrblkGGeuBDlL2hLgZdcLUOrpOyL61Enhvf4UhK\nAaK/LVDmsdhOpXXKZRmf80zir6IW8CJQTcjxtDAAEZ2yqERhJ1y2Y4CWisRd\ndVSeMQ7xR58pMoy5QAsWCCR0Lkh1rpCozTBQgUpDjpPmuk2VN6Xd3a4i78Cj\n+mi4oLUGM7VYt6v3k4No0xgucRQXgBdV4UuWNegL+UuUQUWLcecRBH7U8h8K\n2ZRJhYP61M2uXWykzX9Vi4LPhL2C9BPtQ3z2mwGuCl6Y1URZHbVNvfcuHu5W\nmhoRbIZWDmzNPQXWMHvbD4Swiju0tSQeS9NuCwCsQj/smVjb0KFGk6bTHIE7\nOc5w\r\n=f/8S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.405a29a20.0_1595456561299_0.5983702945361529","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/theme","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53be04c457e1a1a52e306f27499d1c0381b69b14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.f3693ac4c.0.tgz","fileCount":30,"integrity":"sha512-uRW8k8Cv3qe23+wtMePj1DDeQkzVa5QqQYY38FD6xOBOOLgtrs6G4imUfO1l9NZNAUmABlrE65OdN1u8XNSgXQ==","signatures":[{"sig":"MEUCIQDm3kUTe1mnBm1YOrw63buTb8yhf+Km07YL/EgmRPn3GgIgCKdHQ0vz/AioIOId0i5FpBlgl8hfjqFwzqBfOUrQ90I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL6gCRA9TVsSAnZWagAA/sQQAJegbNUPPaMqUsGS7dy4\nPiv1G7Pg6CC9xX8j66mSrMwEfX4bJSIfh3Dc5KdIU4EbADZ4tFefTeYl56r9\nOLO624v1763sFQIs8rK+Jf9mWKu2GyoPm78SyCbuHeXVQX/7Y0WJ2CFoS4FO\nzIg4CvnKMROIxPdVNps6HpNfrEALxnc0KAIqLmxERI7fPkMgcnZmAolSiZsf\nj5DZkv4Nz7mKhAdmFQIyPRj5eMSna2YjCfvwfYjrgSSusa4Ju1T/hhlbmDC0\nPDS7H2wVh5cA1nxBrJRsKeQesFmJpXbVRHz82CzS7BXZp2bWMPQtTnl8zOOj\n31FHq2Cbj6tG84RJYYhX54GOVre6CoMIqvOrRvJ8Cks1vsFW2VfG+rckvA5A\nGRUVM1IN9qwaFpUXwmaBeqZl9W32nNOzgJIrKyZvOnIlMifm6JPWx4pp4MRA\nAINKKrWwfwnXNOqvUfoafYrZI65c3sCYAopFOeFiYFcP3w3dtXl2sxo6m05M\nsgfnd8ap9m6y0a2/rtdaUzfs7G3KkSbQFAP12hNo+TtgwPNyYQ3Pf/uJW38b\nsQ9N+rmQK3SM0uWXz2j3XY0msdy1YZoI803IBxk3GGfG4JiQ0mm0UgMeLz2S\nB9+q8krIy53GRbyWsHuCMhi25fVoAVvdOLCdnH5elKUo6K0J328pgOWnW8gN\nmcdc\r\n=GUGZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.f3693ac4c.0_1595457184239_0.5890823305772686","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/theme","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.12a109680.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49332da8022f6ea09db8b27317d411a2b2cf23ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.12a109680.0.tgz","fileCount":30,"integrity":"sha512-UTMH0s9+kYD0uD7+QNR8VZu1oTza8ogsK3aipt0aXwI6JhlBk7MH+gY111CYMjBz+Q4QINVTSEXYMuugq7hOzw==","signatures":[{"sig":"MEUCIAtqXLFioQJJNfYBpX3UMmJGoVTH0e+mcm+5ZQMmzQ8cAiEAgDHw1Denm2mVOBFzMvSsdNA8tJf8ntgkmWSt3WrFrjA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMWfCRA9TVsSAnZWagAAnBQP/RWU7aYyHSNkNm3WC1RS\nJ8CdrlbGWKgHIQ+I9plInxmvnKOSVT9xDUmy3gdd3Ojy+plqzgWc5hthRZ79\n7e6wxRif8pc4BcGYJNTsHnzOVlX2rB+WJs6swh56wwAJXGmv+Tcs6FWM67f1\nd2cRJBxCymaCJ8KTSh5p/20cGM/AhgwteBkFZ3xepJJCR5K/XswaQiCtRK+9\nWDfryPtSHDO+VtPCBtXcA+IC2Q80qzyhYbcenHDQtRtDrNDmOYX3FuwH+n4F\nHeBPz8JxYAayb4MfU2g1MUiBO94uiCGTrIi4BAQeyee6xpCOgzdme5uCoU5J\nmr6UPO2rq3vxgIwBC5//TbwNu2zzovzeVRL5loNonhDDFRXX/Zh1lhHI44E1\nNCkcm8a1NLLdmKdl6Cv/sGFV1u24/V+weXZt/4GmZTvSa4b3/rGSV5IwrIJg\npUt48r7MpU7XaYT5NjI7cJRJf6NBccdEBtxqUVkNjCUlNlL7yyI0XJzHnGwH\ncw+t5bOBdcG8y5drcuXZj/j/6Aq0oScjC8Kljl4AJbsONgLb1Ewx15X82ZnR\n3JxW4HzEcbPr8hAWT+TXlEOKohnjoWU4a/40fDXrNPCHIfJ/laTnwRmztblZ\nyKybAQ2ekk03u7go/36Q6itEUywq2d/y14Ew/KI8jTnDlqDnRp1ww4aWeYha\nZ6wC\r\n=xwp/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.12a109680.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.12a109680.0_1595458975376_0.514077734978871","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/theme","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4702c98f089b37c7f3e307e120dab9f086622392","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.bbd06696e.0.tgz","fileCount":30,"integrity":"sha512-xXXsgBBr84a5nvNUpSwTVArXttDhJ/TQZPzW0M/5ZKjIVgieRtXMCRHRjNdZk85JMgko6Ex+BKH3l4YD6s+ztw==","signatures":[{"sig":"MEUCIGB4eYTUb5s16UdDcFXD1X9qpQ7G8BVun7S1HorkPsJ2AiEAr+n7A685ZM/RIf3bEhunjtsy3vHw4JnGAClSfuLt34Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNE0CRA9TVsSAnZWagAA1Z8P/3WykazLnSu26cQIJPav\nJD8ZhULrBlj/VxyR1ui286XwOgT5SDLKXcUNcME1EJ+2/duKTpgcYH0489qt\nz2xnP92c3kEcCOZMud+hfOiMW/WpJCm0OXuverPbxtTELFq54f51BbGQfuma\nZof22txH9TJJhceVvCmXx9+5EZrrpMv+Ye9LvHYbYWCCJDP+e42lulcjK09K\nGLA2aspmoY2Y8X7AMBhfE6SlVn9M8CZXTfmCwFpHjmL9OSXT8Of8tXXjpAb3\nij4OgE9NAXMtkix46cmbFCjLTqIIFkAtSsGmvsCDpRixWiOKfy8s3/FoPjMm\nme1FtCRGLTra0878FRDIoKO8/26ObbxA5qpTsQySjMOlWtJPFgjyRGXVRGBQ\nZe7VGQvUpidRoTptumksMOYNxBSpj4QQzfOaRb3TLf+ZRwIis8bkGax7BXYr\nDh/JLBUQ+ZVq/F61Z1ShS3JT9pxhCitW0WAwL2SZ2M4a1McYAzeyBKl+wmw3\nqBtuqAcL8Cu2/eYyZ+xBHi/zBGUR33FbnEk6p2rwhPx6v3kxKFtJZszeymaG\nL0NgLWZgvcygzMy+sR4VnKiTVrL5G4R/aOOuiYvpW90t1P0SVNs+ld4Aarhj\nlXXcOaySvLaAghpNaeDhDJ7mahGDwf5PqyX9SIQvG7sOXy8TxVfjzqVPeF3m\nvtWD\r\n=xare\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.bbd06696e.0_1595461940169_0.8364958833001206","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/theme","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.4951e7651.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbc48c32be782464c8daad92ffbad89f7ea0df1f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.4951e7651.0.tgz","fileCount":30,"integrity":"sha512-sQH3yzoCSzy2xXCyKxj0mHml9J7YBxVAz5SGsHLEH8aubYVzbwc04Jl408aT0t1GYZhivbPo27YdYWNT0CPuwQ==","signatures":[{"sig":"MEYCIQC5Po5auOIApIYBx09JX4D+XaRhilYioZKrTbui13/RYgIhAIihd31iziAsO4dXBp2M48Q4NyCSejn4t0yoGAZmrs3y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOyJCRA9TVsSAnZWagAABGMP/3cl3831cECrfqP7B+Fd\n6SdMt5J2HJFqjboExJyvdOhNiHw6MLz4hLsY/f4w4X7lXLqBfy/qaBxRGln1\nZ/DDENo943+Lu8vrJjhHzmEnh5dGekfjjA77JZecm101XUV8Jm5F8JPcobrr\nN5sy1Socor62DvtXEMLeKS6wew5nQZBEexXG43mf5NpVbQXc/SXwG5toPlnG\nNnMXKDRgGO+rXt3i7GE8GIkNP4iU5xHEtsze9zONYUiyCjU16tXWR1NgBiNZ\njYxu35lhfbLNHPia3cn3I3wLJpD6VCX6P3McSpqHofgoDkhky296wJ+eUtG1\nZsGHneFJOvjKGpOetGJDdosmUrwjg8OksDSIrsn6mzrw9imBqzlhvRHviB9x\nZ6e0RgsYwbY7aLxwfE0cQiKLVrlEbfZEBOJoesOHQy3xNFTJ2v+6ZkI9V31g\nSzKUaaBAM7kP+1JMNDXe/1Zx8nNR/FaMoNCtVmwtfXV2Jgc4CGtT875J/Z9Z\n1Frq5iMoqotP0jdbWSkk/XUFXgVCZFEsvD+QjV1y3/pYz0mBi7kV1zDG8TfD\nJcCqp530tBvDqaZGuseeMh2zdgGXchFnhQ1dYQjYQUakIO9CdpKhYUanuony\nwg2Xkz3p+VlC4VkL65yuAs+vz6XVDOEepu35/gKGt3nZd5TwSzR7XeQISHID\nf9ro\r\n=f7zO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.4951e7651.0_1595468937447_0.4277985533782416","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/theme","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.75deebbef.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"442d5bc443e61036acc6e9b197ed042caaff4ca6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.75deebbef.0.tgz","fileCount":30,"integrity":"sha512-HggftISmra5HzSxDAOZMDKDo97PxedpjLlQ/m7tUntZCobNlRRSHWKG9gFyCXiR9D2tJEU8+kwknkRdBvEODVw==","signatures":[{"sig":"MEUCIG37VYMWxn7fYv6rLhIjdVt81ei535zKV4ZOd5ZW2lcMAiEAgFrp+cfwaiy9tlkuZuRLeuxmlxDV/Yrsf1NZrSwoncI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGcyqCRA9TVsSAnZWagAA5SoP/2TXZK9QJQtekaBYkTb5\nvs5R/J2dC1vQYEbl4gWAptAEHyIfOKqiyfNlQYaDcq1/SPPBOfPHkSKyjTHk\n52pub3f7BbOXvpOY5V7905uRBMD4uL+xhungjyZinHBBlonVLkDf5DfQcm1a\nabULLmwNMAr9lKo9uT6qtkYHe4ZxNJXfg/Pfgy+RpsAFUBwYsJH0UTJa6DdF\nwqcAL20SDqq9YVUJxnjlfbsMgn27yhG7QqdsjKnO0mKPOB4vVw/PyMuYTeE/\n6nBpDO0wX52dScQuw6kQTB79poi543i3EOQNsPg6sxKTZyIzoPi15M34TAz7\n8PY1H7CAMwMlF4Rm4LyGe30k3Q86qvI8IYtWpnDMaUlVsFyPEYK8Aea14ywd\n94+IfY1FdMjuGPJHYmsRPGmCJx/qsEVeSTbNushIH4xm4/IS5eKAGwsnnIHi\nepPORrJS70MfA8T0pPjLpL9qFHJDe2hkuvLrrdb/ysxU2RW4Tgq2EUuTLlSL\nTb5y3pMtkDOPmx722aCXkSoac5KakXWOhUPuq8lAI2Lt/DAleyusAIIR6OgQ\nd2YM3OA0JqGZSpSR569vpJxedb/HfLqu++ezk+PzRA09aEc70phhoA9Fel3p\nf23fXVbD8ZJi4rw2keViQqX3Kjapj8H5AyVXARTTP+RLXTpgRVFnp58NqEaI\nQsMZ\r\n=9Wlo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.75deebbef.0_1595526314398_0.12344938813406037","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/theme","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bdba1e1940eb70d04cdc671b739567bfb8c44d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.95aff33ee.0.tgz","fileCount":30,"integrity":"sha512-uVZSTmAzWxrUVtWxjAVW3vdHQHhM0NSteObZ7Aa4rv7yBJ1Ru+Gl3Y5ShLt+IEtLwg3oq85ylk6Pd2a7K7TXeQ==","signatures":[{"sig":"MEYCIQDPws6CKP27ocjFm+0tDpPMfQ/Z96CCEZ4f1QtO8+0r4gIhAOh6GA3qSVY9P8Vjrs+2fW1OqOHnyZdPqsEkdfoquemL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdscCRA9TVsSAnZWagAAeNkP/2l4a2tCEiARk8miLBA/\nLCFV+wVX28WWWjJU6pR8x07LIi/ffa03pN5FkP/QgXs9Le+tymPjDU7TLp7y\n1sK8dllS+zsW/t0K/SYpMTnJ7PlvBUAQ+mdfddTgxIm8sUBbBgczPRoMOQ6n\n36WShOmcBOuZwnLejEzTwQY3bS3VhZWP9/G4r2F/ornRHe5xKrBgJHbP8HyU\nDSF2Uacg9F3V8y4BoHkZDpt51At8/Qi05UDUgV54caRTpGbYv05J8j52iz6o\nIBsm0ADdgYyMKNBPNLWyQsqBX21HGqhYs8ovv1jJshrteqiRC+AKNrLADwA2\nOSDQbUIhhWiKM5UqbV18yzZF80/4AaEIoYHu5qnz8NcItS0Rnt49loyBhb3+\nn0dUI764nKIdRFJOE27WyitATzbJv6NcKDXHB3AsMY+vD/GD6enXdySIeUbN\nQ897cD1dw9Aq3+MANGg38ytlgFpjmd13+TKhsxFjfQq7VbmA1GcMH9MQ6fyk\n3rdXMPjJm9codgLySpWBkxeC0am1FdYJWoeg2O1felFizs9vIqA5yJ8N1iQU\nnMgZtMENvpbBBUJIhH+sPPvM72xJaK8isCxF5a6L8Purzri/0Ko2E0iGH0/w\n/sGN5LydglH+5pTQ6E74T73XBbU5nuYp4HzcAFpo9mOz1n5H/xfqoR6YjJJe\nzMuV\r\n=lajR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.95aff33ee.0_1595530012355_0.5845018738587264","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/theme","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23cc17918f09bc125130ff6039b61c7f306aed66","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.9d9f47473.0.tgz","fileCount":30,"integrity":"sha512-kp9E+6SdKrmlyAsIXfnoEtiwgMROvCAXRyKXCj46+vEsmxuFflNp4BhTW24Sz+gLEboM8tCZhlKCFNE1DvFawg==","signatures":[{"sig":"MEYCIQDYRtUR9aLl4R5JbayLtBfVL5rUNfeV1X7apEFab4GBrgIhAMg9BAb+4CxoF1m8tuLN3qMc1geCjJ14882dW6ABahoh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGevNCRA9TVsSAnZWagAAQPEP/1hPyJHqseewjAtMQX/H\nXFTYGfHAeo8Gj7Uz7hfSkJeRhiPZASYpdbYKY/5SKoBJIfQvRXxQJbxJNfsR\nbOzhEnt/PfGL+mXt5UB9jS6FLU/WY9lwn/jmtsrBRmfF1/S4ToCwjuZBxxth\nOsL6eIVNTXv1qxurUBRWckKeMY8JRn2PB4RhOl245Lu7nJulBoBOB2yfQp5J\ns8l7WmJkxww9c7umFbfE+3PqqR4wAVHLbSd9kc/Ay7729BF4CLCsUHlGnJUU\ng1xnnbUVWOxFvZS8Lh635fh5Zn1yXxh0DHygjKDUwTF8NNpHGXyQPmxHXbGX\nK70ZRL2JEGFlcNkFVZr73l71R55EjLFTBwUhnM10N+rh9PmjHLSTBnOLhEdR\nK8bNkFtdisjsoVqPGk2OZ3HP9DXY4yxID+SC7nWAHvqLnBVIj/ch5z4Ltfe6\n+9nY2qTEFJXKyNXJRrH77E6q2sqQoxRM8ekmlMmOsimoq/9pgJynkpBKtj9J\nSbDyMDKBqLvqYqnrClTMZt0eiZHrKRk5a6WSY2+c9kFFKrc//LWpQm59bOLX\nkp9JI7haCgvbLUehKVjamcJH+sv3uOFnf+fxxQqKxanrkrG2xEKRRd4aTMX7\n+dRycFXMYgbmWhBKG6C8yHNYfNpKezXEDx7F0SoFl2nu5t7LYaqn1M+zCsLC\nJ2db\r\n=tCvt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.9d9f47473.0_1595534285022_0.918315332058032","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/theme","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2ca35b71424cab8c8b7943028aeb368b939a2a4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.00dfbf6be.0.tgz","fileCount":30,"integrity":"sha512-OolINifnDDOniKCp6LjG/cp3HAd7FdTXNLoQ6A54ejZg+AAk8//aFwMexn3dqPAcM/CIeGsGvKJD+llyImf7Og==","signatures":[{"sig":"MEUCIQD6qG3gZSZu55SmM98llYhdq/84S3zMty8Rc3PFcYsTdQIgH28Myft293+bWn8QgbYJp+sRCg3VsMVK5h3fNpkaY28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfoTCRA9TVsSAnZWagAAgLwP/2f2BOzZZuJHCTvV1oEQ\nEC4c1cGbF3DRx4mIqgWwGQF39tGK5dMgMNVcf9lxlK1/mADZtxF88TCcWt+Z\ntwSqI+Jg/+bzaCY2dCPf//nPwLtTu69W3tx+YzOjXWpwkz5ApGGOfD9Jx00k\nHo8C6x7Ts1513tWHF3hLbOkV7FOZyO1SgeBDYlEOxMRQE9zGWHVOcgu7Tzli\n2u19S0MCzVfjzy4IE/Wgpnd+EEcEu64vOmPKpZN5OMv3HuBubZsFy0JgM1BS\nh4C2pUNnEzCfYpJpKRht5urJvrR6K69rqsr1szTR0E+pCIo2lBUO1a+dnK+p\nYyzLw6LoUcYVB+8m3SYkMcDugRHvC7MA35olU6LuBwVjCAxOO4R20AG/JLlz\nHLB6sZlEc1YwWkxAoyzPhsuCHEaiFgWl8wPP2CYIhybhv+3MBxfezkqVfBTa\nzlb7/9n+ANoevIoyI3U6leOoZImc3FaVJYHMGs5XSdVbi+ZkR9RsGIIoZ5z4\nRREmZOhq1QWS/L0LimobElGF+7Jmmy9q787fsF4tmorUasSxUcFteQokqi4K\nbm0p0ziM3cCA+fKwscfI9FZc1NwyfyfoJGCXgVoujPvMtsOwoDHODoTlfcWt\na4dDIK6uvrGwcV45DKVgq6//cyOBMwSAxPCUMpUahfZPXU15W5/a5B6odNz6\ncqb0\r\n=qBbS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.00dfbf6be.0_1595537938588_0.8749581791399215","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/theme","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fcb1a9b150ae6b23d14db0ae127cb09b9041b07","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.b87e522d2.0.tgz","fileCount":30,"integrity":"sha512-86es8BjcW2zeVcxItspX+rmRQfHjYIA+oZ0HOU5LAgyXo65oAf95pP6zPK2ZjdXTCdcnW5pDjFtGnzR/Ez/Pyg==","signatures":[{"sig":"MEYCIQCyBbLGJdxTzRRbIliDOjSovYdjRBsiQAAqyzHtLTzS+AIhALY+YqWH7X3tmx1c+WHZoEL80cNou5O4Kj8PYDktvKEG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf+8CRA9TVsSAnZWagAAuDoP/23pFwlzku6pczCubAZu\nY4e2rWO7ABOLckKRaOiGLoCvOJYZIfiUEUzMq/OLC6KOLA8glP5QdQnv+mHA\n3pFtiw5X1jJ7qxea+krxuyciqMr1vCfSOU2W2A6QidgS3pty3O/QVflWnij8\nj+Zfn2BJ5YWE0jI8C+yslf2D/LBXqt2QcjKBiQ/eAHVHigj1JBC3kU0SIWXS\nRE1KHj7sGlbwg0ZvWrVN3RGpiLl7c/Vneq1ZIZfAkQFGESdhlpModg93mdjW\nIRBLFNXEhsDDaIjQq2jssx4lPWAsTp/jmhnq19gXU8XAI7NZUOrK483sKlAc\nCExa443r8Gf44wfiV7WnMx9ab1daCr/aYnQPO6X+dZibxnGalOdK/1q5ObjR\nHewXw+FpE/aX81zMcbfx8y2AwA8smhrCcw2hMQQ5bW0/o+35CWnUsp/uTrX5\nYKYyg6cpDFvEwcJbg0z8FcbXlWEZ0PTCRxeWfyFayG8RjbPxH7SwaUBlMVhA\n5ZL2CpibUp93rWwrfYm8g30GovwJaLjgXEMrWY80B/prU9rjpoiprtdjgMTp\n3YnUpKIbL0FyxbfquqeduG7adPQRre4i/mporxw167409OaG7LsB/fAEwU6A\n8CVnszP06FyfMjEzqzNQRQaODp0IeYxtlSPYsLH4K6mPFI7Mfop4ycLL5shx\nFilL\r\n=2Fnc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.b87e522d2.0_1595539387959_0.6954624855729215","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/theme","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d83f7ce72a22bbacedfbf55b784c7fae993369e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.5b3e150e5.0.tgz","fileCount":30,"integrity":"sha512-CaSy0rPwW6/+cZZWvwT52SjhFlm4OwxSq3JcQoyc91ZYXGa+8dKl0Kq7IiOvU858mNkv9hx0mPJKp1ZqYUk9yQ==","signatures":[{"sig":"MEYCIQDdVALlgw8arAwktDHvEwGdjPlNfSvycry92efpWQuM0AIhANe2PuyBaMzZOxNwMSFOiw2KmYAkd1R/ZLIs2+EiQ3kn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjgJCRA9TVsSAnZWagAAHtYP/j239i3mMuakpmlUgble\nt9eU/Vad9cYbNAe0Ecpy0EAVYsND10GRXGfyAAofR2evFpehfFBaNYvjZwlu\n5a2A3TSW7w6U4ZLQeI2RTpggEVxj3pAyc6SIVdju1hQAEjxB2TUbSNpVPFkq\nln/UbGBSvvud13ExzMezdmFQ827EtKkQXR4s0mUST+yvMcytyzH3JdhuzAQR\n1WVpfAS+wOwYzuWWxdwhQP4Jh++KfJNyM8W+3gi92CLBl9nRIUD4pEmVPJ83\nrK/pYioGAqWQ+KUH3+6JK95bf6D6fhURkztqO2SZ5S8dKEjnfM4cKfBWbd5X\nDO5AQQe7lvnPNRlzMfY1OKwPcvXe4lIvC1nETl5z/c7bUvUwCqWsqT76E6L8\n2xMPMU9KIvMgEOMWTXturCfVXfQAV6yhcGy0h2gDS8wnqbBEcRT54YWtlne3\n1jnbbLVEe1vdijR9gfOAXsGIQr4lh+msTB+Jfl+fSbkdKJ1qQriJY8exp7u+\n4mizjRE+Fup+cw+zEFXaKveNnoCAht22ABV6bXsenEYKfg/gqxb1S9wJCvU3\nFm5VkP9Q2lD9NnX9MxIWnS6gmLgAKWULLSoQlEUftngd/FZLEab5dmtK41k8\ngeIWt5tuTzO1pg+XsaqhMBb4PeTk6DE5TXWLu48I+G01gq4daKVf3iDkUqzI\n2P0W\r\n=f4oh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.5b3e150e5.0_1595553800960_0.6563448061933936","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/theme","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56b0ac7472c8b3c31ddc9607c81a581c79fcb82c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.f0ae11786.0.tgz","fileCount":30,"integrity":"sha512-EBiGbV3JBjxagL8Sljp2ULZb5v5SyBw8r5Rx2l3infT3n+xd1Gy5dFXTByrNFuYlrAvou4d37vT3M0s4ddmEFg==","signatures":[{"sig":"MEQCICHNsm1EQNqjFyVIjGdcgdnuCVYf0jn7VHk7u2PbLSYNAiBAryXm0ijeHm7QW70CnW5bHAjHhEEpyHJmdYJZTPszaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjyqCRA9TVsSAnZWagAAqyAP/iQnJ7JEnK5N4FbI+4st\nNKMhKYG6IQiuOpxyFQlo7biCih2tCjPTUVSHdt01rCSKiQTBXfSESGtKeT62\nzdpI+pL5eV8n5Rzi36SNG191x2IhuCLrvIB5VwzZDw0WI0RrtnvaQN6kyqiO\n+lUn2b7LXZlEmNuwGFefuVHsTh78OPW8PXQ4zOadbZYStK9rep0hR9NzA6MP\nRNDYwkY5FtEQ1BgeS8u9uE4LyNXJp0827YvMBWifLRd+XsWBcrYrkC6eZEos\nq6Wjwldiq7Tye4zqqDnZDoTUJsJ6VDwADN6Rb4ZhXmL05wTL5nfeVLP1548q\nT7p7bA1UuW2ejg3vGZYMHOkwy3R3uf40RDYmDtJ01e7HTC4/ue660bbvxkQY\nQjPeEziiVzDdOOkEu2vtyAeZxQ57Bos6+U5D9YlvnW/nEJlBdYCjdg7xBBa+\n3ONqMKHjUjanDaQ7tKUyfbzvH4H9nu9BljFYIA5Vt1AOlQOVaWvETix9aoMX\nFOUW4gQcx+U0wwm02o7u+BuOgF+XGzljq3JYZ1XxHY8wZHtv5KNubdxlZCwr\n5aFxq4RfR7I29gmAjfpPJf1GvSQMhqWVvI51YhYwgrnJz3TKuhmrQ+ldVSuo\nqGKPfi16NzOxxyJ5YCgaF5AeJOPmrTCwdVgVdWze/QMKasyuC7RYrDcMOp+2\n3fhA\r\n=DUuY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.f0ae11786.0_1595554986166_0.3496946833381622","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/theme","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4004cf3963266906314273f375a478bf9fada358","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":30,"integrity":"sha512-JQkN8IzOZZOsROq9fJw/VbxwbCQ+Sj11oFK5Yv8a0SdDZLGh14qvwYIr3aQJGGXmrNZNIJ4HR5ZK0MRFnVASVA==","signatures":[{"sig":"MEUCIESI7F2mBzQLCSx3CWAVKDqLAA4qTFDfj0vqeAZqcelnAiEA89bgHs/XuFtsX7v5fBTeukCvUEEFwmq3b/xU8kHJWVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkMFCRA9TVsSAnZWagAAX0oQAI1TWMuqWQLgYpGi+1zt\nDBlZh2V+gi+CB82Bm7Z6olvVoFwAh7R87e+oxVmo03FpVCRwTHRMe4FWDVml\nyNRGBPlplADNmadrLVGre/cr1dC6upBOVb9yVlTgm3thVbowzerFnt5tcL2J\nwMdz3LFquTntJBdC+hZK3kJRx9TorEAVxkb9yErwrukJfMpmxMea7Hgtr6xr\nvuIWuVw0B7r8AC9/gfmGjL4SvP00QQLpcKeHvcytYd2XpI3AYqbpd4vqIjYn\nyxpiyVGMI162fS59aUgIU1ktPTva4PIsXCkR0yU8D4u681dyXlkDDxXexaPJ\nkJ8vfNDCi6a/5+IiQbYaqPGLt/512nZjN1p9eG6gEONAWO/0d4ycMHinvsQO\nejp44RbUyHS5OQzeyjZoEABYRRo6iQvWHD5PdNcP4NJeMwV09qPDldfSIMsX\nMjy95iGV55ioCbkEJLZcXnK46isC8yCfmRfh+V1MJayqD+Gislct0OWimG+C\nD202hmdR+lZsuQx7dSobQtspG3PiQN4a4qBtO9MKPKF5rbXgwbx9xw3HQvTd\n0M9/8fm4hLmw3otkfaxNl9iOpY2J+Ao1ZFk36VupJ4liTrrZdNL2Q1OzPSR3\n+qu8uX7Bi7NfUBjItnxDkfdjYSaBMJ8soWSKu311BYGG9ZOPGbPu7XTxeHmp\n9SPX\r\n=yFuU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.fb4ee66c0.0_1595556612834_0.8734884577208157","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/theme","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ce87467d20cb22b64d0544171333b9d07cf04a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.5511e0aeb.0.tgz","fileCount":30,"integrity":"sha512-v+Q8YBAGELhvScUVO7WmUBVDX9KJp/2qXP+FjRFivv7YX03i/ypTKOm3xVCxTkvlxltEkXao+RnSZo5XoZot4A==","signatures":[{"sig":"MEUCIQDd2ze4+YteXMDV7yaWKgyLy3UkHGM8/IoGmS5DvkJWjAIgRjgdn2DoXu7pJM4EgxTyu2HeoMRTvmIZ80TLvODek+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxK1CRA9TVsSAnZWagAAwUsP/0yGwWy6efi26NeTPZud\ncoXjtRTUMNXXJLLHy2rZdvSETVdIjp5aENS71gOyetkfEizdNMCkQiDZ9xvV\nmJ+QRLrkEQuqyCAZJQtWi5/vG/sYvEid8EPxv/9z53PZtfMnJR85uqW8ubIB\nfyO9zA8N5EF3Tl4Jfqiu/NZ9+1WG0g14fMhSuSgrOWcfRltAASczg9RMqxVB\n3oSAHGuzSinFOU67+o+CpIlEcC3qcHkAEp07H6SjC0yDs4MOmUrRHBPJ9QIm\n43l7/7Xln27IKYMCqA/6bJh3zi24KjtbGoxFC9DQb8jFs88DxA1Gqe4oDu8g\npkuvg7E7FW5NjWIc3pFTuo0pdnymg6OzBOSqCxvM7G64cP4w8avQWFcDSEDQ\nOg1LDcfhhWfmMwyCbjZdfVyAm1fjzhJG32FzaJ229ISo3lx6q0oB+nMu6qd6\n9RK39vhAfasdz8j97mdTTfCnxCzQWwtJzia+jPx3gbmMus03zLETdvxi9MSw\n5xiadQEyAQur4dXQsDRqOlaN+IeN63rg34WHWA9natVAwfxDxj5s7NSIzINA\nZMGbhPn36cAMadM1auUGon79nE6+rK8vGxcOgayuX1LJA2BlsgnzYUU8jO7f\nV6sf0CUyO7uHM1OswQvsd0WaOEJMTJXReaTHYyAFktATOmqg2L7ffnbiqSv2\nFqiG\r\n=N1lQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.5511e0aeb.0_1595609780586_0.6753000648426337","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/theme","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cb600730c2d22786f9abb3538cfc4da85cea811","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.8388a9bf6.0.tgz","fileCount":30,"integrity":"sha512-/mY/pR8V7gRqjLEpIo3IXgKdwfSn1tqufmwc6Bub8ZtfEsirXzfm+kq+O61jzPFpJTNuBRrugCE3srDsy3C9CQ==","signatures":[{"sig":"MEQCIDVdJJp9M/7f/XAJQ4Kbb6RZQwmuPEpvh63//Rbtx52gAiA2nskYL+m/WmAtWrQLV2tFAig838giEyWArVU65tmTqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0CvCRA9TVsSAnZWagAAQoEQAJ2RCL957lnEnbwBlDx5\nmT4BEOqd8UMJH8xwdOSJuin/68fCCxnIwvHTYiTO8rKInWrFMJydEyq0RhfX\njmUKR4QcJLW7w16bfb5lEYWKOaXFsVXY3IuBOVjFmO23HPC+oG7vsXEMRTu/\nvXMIDxoYk0D+BcYxS5PmNYi0R0P9RtsnY/+VzLHt5Hdw/CMTnI4st0R8B2Bl\ncenDry6PqoZRuSRQQ/PATsrwo+1hGXJEgBA2Xm/Zhwzj6p1yrA2J/+j+3Vpq\nvdaE7Syddq/PU7J0b7nIg6BGli62Qy+uH8ELAfgsXL+M2XSma3PaHqttg8j0\nNQlYoCRlWC8ZnlXHgyE8iSnikFMpBh7CVq95HGtmHwieBIvQ5FsjUlsyJWRy\ni+BaR0B9eQvxiednPNf2xa8j0zY+eQraH8rJeQM2Y6LWrCzyBLV0cQ5zJtOx\nRb9/zNSFYE9Yxahpp5EcGFERigb1yct2azPApz7Ul4fbIadgX4bCMA1Aa5Tb\nLrfnIM0bDgYjcBIY/UkSFcbK1W5nM4JmbZFF7DxWd19YD/t5dTfcIhZmTHu7\niFLMPmNHFqIqjjC90DDeWm6yKtRVQZtu6tnGlc5kTH/v/XaYeID2vXIj0PzC\n++04WBIRHmd1FmZOpLIxiaIQPCEPfrvdeXMX5EZdKBJ0eNl2Gip0I6pODIOS\nHDwQ\r\n=N+hJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.8388a9bf6.0_1595621551273_0.6358442636530284","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/theme","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"418c0f1b45efef801809f3a4750ea7d18e79caa0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.ac405eae1.0.tgz","fileCount":30,"integrity":"sha512-CLw6lpI9WJxWQ91Xq1MYqwlAVqsW0RrpUfb0ttXsinXH3ipIOF7loarNnoo2UrZCKFBc9leD5HENXi30fjBBWA==","signatures":[{"sig":"MEQCIFJiusyUPwiDubZjE8bkhWeTkimx3q4slPettCX4jRNHAiB+AomWlUp0A84PrIzSWnNNOXxA72xFVt1AbJwzCBnqiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu1OCRA9TVsSAnZWagAAiaMP/1HB233GIUBr373SmGzo\nauygCafK9vhqes2geIDqPwQpqh0z/l8EplYATk+UPugyXVaMCDIWRG3jvJxl\nH5UMWIv5v8mehhr3J84Tz4L3ZXGRMRR2eto5aQdeSVsc5ISQE1nkSgj+dZie\nCU72gQvQ90C+iDerNztz+RmvmndzD0FndMSspshS/2iRDZt3mf7f04QiGyW7\nvJwc9u7d8mbTsIroIEYnidYAEMsSxidnLYbZYTrX9nEM2DN62B1LhZfrksQy\naO6OPWUPqgFg4Xq3Y3Ms4a+4v4WsVzNb4Ln93yGvNdGbD5EoZnfGF5wz98kO\nY5YLU6tZZdNOlxjdUb1yX0Mzb7k8N4U2rMHPfL43i6sw8YForhpmfCY52q+c\nj+YaC0zY4Zx0nuWqVR/u3ANM2pUF4QR5aujWeAgY4YtgHCmQJQbftna60vJK\nSk3pNj6BJFfHULWeZy90qFDWed7IE9NEmmyzFqNtCuzcZetKV0IA7DL7n+HB\nFng4jk6VQf+2w208W/TAneOk8lz8Ovhgqii2CR+GoHkVveTP5//b238XFezR\nKUN5h+ABCiN4ZotvArXYGe9mPFutiBAj8zeHKYIQbWM0BHNre1XkciQhfzaP\nTBOA15cbBEaMYhzpB9/nacIhGRMT5+u4nMAnhysCWrwVvk6hfYNFaqdEU0BA\nB3GF\r\n=Serx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.ac405eae1.0_1595862350070_0.26596256335774826","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/theme","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.75553837c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c05295a80891f28e6f12a24969648d9b8fd3d335","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.75553837c.0.tgz","fileCount":30,"integrity":"sha512-ShTRz5Eo7Uwt8qQPyyogCYGY7Qw7N5bEU+9mURPegr0dqmeVHFYMnJ/F0EeBr87QtBPC1+kX6Mfkmtp6qZaEiA==","signatures":[{"sig":"MEYCIQCuLhKQq5HLUxiHTTwbM7zHLEXlLAmSeKAdzf8dfuNDzgIhAMBhHQvd+aPeBdfwASkDs3mo6lfMXKuviFBCkBaee/Ff","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu6yCRA9TVsSAnZWagAA1ooP/R2hMq/D6Sf2/RaMCW1p\nIk1mZSBRFaO7AqiZpLrlDhFn9OHwdFMHEISp53FRx4tOOjtSQpiZJFejQacv\nR17+WuQxygp9KlX4ChsoUagfnJ5hw65o+4Zamz8LVuB0CqFQexTF2Aii/xUA\nSboHdsxw35ezZfw8vumAqYoTOlprwnAsK1pEGnCmvk0IPGW/K0AYLslTcrlG\nOnGxVOK5y8y9NkVYGEbfrCOZISiVaBqU1yUay/ALmkqbfJt4o7/BoNWZJ5zL\nGCukgzxH9zVr6snIabjmVR7n/+cUKMDY3u8kUxpKM82Msrd1gAHCOFIVHOxq\nVoMYEp81qxf25rcCbuV+giYC+AFO6DcKNu0IGHQgNyEC+LV59vTaNXNeV/sQ\n144nIBGT2C/lTBdcbYiiFFI3pfGmh8DsCEyOsL25QoAXG8xUbLlegPKQWKdD\nQ6xE/Pry9RsJ3H0BmMnQGg8mDi2bDQdP+kh+i/wDS+uwXUOwM4lFYQHb7x7y\ncctMrZ04hPGQl98LIhwsaYQ2i0J4Aib3IJxLU1Dfd35FrhwfdSGoRCppi2WE\n3ktg2trJVIwnVN+TD0Z8zOtKEFq5+jqKhaz1JIsFkL7+dnCfvVhvp/HSy8Ht\nRIuHsoX++zmKCCLNJtDN+E3phwaL/uUVE189lb6+1nWzQWFwlvhP224yzED5\nnvDX\r\n=LAq/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.75553837c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.75553837c.0_1595862705734_0.7770702187836303","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/theme","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86738176c5ae1bc256b4624990383d1d45cd215d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":30,"integrity":"sha512-t5cxGp75QogrZxDD+eZ+IuQNRSSr8K1kqQwCPnIYhPv0qLgwYN1qPDR+tkKd652t0o/McJG2jV/pkdr9L3B8hQ==","signatures":[{"sig":"MEUCIQD5yowN6Pk84U0qbxCsKXNfAO7DMbdC/szT/4CalzPLDAIgV6nKPKqU5iHcquGhgYmYxR8evUQ7D8OesnnrUJSCsyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvSwCRA9TVsSAnZWagAARqkP/15CaBEXa2rqHvqKz1EJ\n7kEr3Fl+ADxGoEb3Iff7+6Sb8/v6a0VV2pgrP4sPbe6F4TqMZoApQvfdMiU7\nYXVBsB4YlMcWdhW0kU+6HxUP+POyMudaTyOF+Nc2vH64zjQAXJloUSNnnb8S\n/QKLPIQaLg8w1vhtSKGXlIrHFZuxr8xnkubQ12eb7bFCza20LDPH0ckyaJqd\n4eaF/gGoW04QP/ohaW2BZGnZM/BrnoBIu2Y8zKgfq9/XcmVMRajwJF5i0XDO\nzAk1kr8u/wSfXaX+Dm+yIdIKmqQzyxOoIQFOA/aiYZmyxhRDZE9dezMDJLbv\nbvILT1nE19OU31gxPSiYD7429Pctuw7X8pe+0/jLIE7zr47m3YocVUNv7MNP\nmg6t3E1/YVcbEd3uYO5kr+vVqEQT59IncierslNTWaoTdFPBIlhAWiwNyAdP\nXWsaWY7tSEPcNMBQC63dGwdADplIrk8zFxNnSS1/y0q+VrRw67sfggo2wIZ+\n5UISaDC9o+SS0caQ2A1BDIfwf5Qlgim9o0VA9VwcIivKh65T3w8PSVifFq3f\nWkNxsrPk4zewMXWasjLZsZN4vkxOOvN0tNZRN69oIKvXGyhHbs36Rf84Nz9M\nRU/R1fNCPVW4dBtCAlYtWNIgU2EBzaPW8xxV7nI5PE9Mx21Qc+isSpZlns/+\na2Fq\r\n=ZHm5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.b96fbfc7a.0_1595864239551_0.1648299434035536","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/theme","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"678dab124b6b1a3cc79c98823978e2e96e733624","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.61f1a8d85.0.tgz","fileCount":30,"integrity":"sha512-CzRXxVmwthWtjT0cUnxMaKQD7bYcwrbvvjgkIKNeF+VryV2aPltxoNvKvSw6yIkoArY4gbxv0YsZOyPcunMbdg==","signatures":[{"sig":"MEQCIH76zq7Tj5QSyrXUQ8R7/QZr+m25T01q+1nyC7GKvWa1AiBW1Rkk/QLpKp8PbdxI7E6sf98EEKTA5m6wNonWpkni2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvbVCRA9TVsSAnZWagAAcLoP/A8sT+nSDUfVC+shi7/t\nHtPgOCT5m1k37RrJF78oY7K2UmBEyP5aDAHrVUb9XhcleiUzKmqL2OtSc+J+\ntAnxUznfmurij4WNozP4WFLiusmTVdg5luA8sFAPfBG+dVZDqoy8XLuBBC3A\n0am+yheFh3luSQV+e/o1F4tVV8F4kklyti3u89iwkfWf0IaQwQo8LGGZJoOQ\nxqPZJYdONtueYoV9J//PnwrmfjESNyWKThWcu/EtvncL/s1Am0KLRhe3nxy0\n5Fx/r6rAGyNMla4ZZXNrZDjxuMxYo96sA/QHN+GH3z4DLJaKkYHj//x4+XFT\nvB9eJdvwq4Nj9h5WG6+OkqpghWqRqAm+DlkXH1fLzl4r2BGam8QAh8qTmedA\nAA/1n2oKPci5loF03Rg9VMvgdfkvfhmAkbFBF5IxvGrY/gAE6laGMyMWRLb2\nL8D7Ce2AFa/HqELAVjnpk0jLNhB3RbP0chaLzIgpNyrIet+vhEfRpTUtijLw\nnU1SOKL1vssuhBPiCXYzjuxlKS8OixsoVU2p578W13Ah9K8ZYYY6scS0Jqp2\neL7yqiJSfa/ltsM2JbAfHQrk7OQY6t7F0WnG7mR2RG9Eyz7txsnz5jvV3DQL\n41OZiRKKQ1H+U3DRUOffMoLXYuM39nZBKyw+6kV5xPENU8D4ELRwLI6McY2o\nJ3hf\r\n=84xQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.61f1a8d85.0_1595864788917_0.8347362270962315","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/theme","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.81dc33377.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fc0c8640546282788c20bb00171d5f37f84a298","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.81dc33377.0.tgz","fileCount":30,"integrity":"sha512-dfGxVuUgTgKhHl7eABDk+SC4xgxy3DiYern2TC/TPxneoP6c2GznKVv1p7dfLbE5LPue1LHBgNmo1rzM+KcmeA==","signatures":[{"sig":"MEQCIHcgmolJxKWjZ8wByzWNrZURbdUnXnZEMCM6c/VP2K49AiAwbgREH+Wg6NeepRNzZze76iuQWO+yK6/Iu/OB94K32Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvmsCRA9TVsSAnZWagAAV40P/jQmWJKv5ortl/OA2uli\nVJILv8kMGgEL6UwKjf13QTa9xMAYJ2eT4B+20J+7aeFAL4aemdhUgAlNNwLu\njaTd4kr3e4ibl+uQzWFee96Gk75LQBbJJziO/uqyjYfA2SwxOg/Kw4V8qM2B\nbtkWYskd7mLhRSZm3wyaFWNFCWcVD5kaWIUjxy4jGTPu5f3kmgNhgCsCYJrU\nvlSJYnlc90M391gYJnMEqzzot0hn9+/tdAwN365e27HHyloigWOo3YuAAK9V\n6oxjFa5O45+16RUCazpKVD5hH3YkckXgnx1jdlF6zTDNAT0/kG740PhKA1Vu\nRCu/Bq4m+kYAPcK8sIK3wBhioGSu23roS4j56y34NuXbjU0CybwVuX9zqBSA\n6L9miuJJrwjr3xiBN5p5B+FVxEVifTtwHyb0vmjVsTwtu25cFYfaYMrt0oZb\n6Wt/Yf2Zksfb9KHIg9lYrI1WBSc5WJsGt1HPRUqhVbVwlW3x+zuM1BBA7A7K\nXWMl4mt73DlP9rQXF+J/dMEyqAMYgDhzajn3MKUgJ9FfJ/iNZo9WKrIStTtA\nIuQlxolcpsAXVRc0YFEGjwrHa5i6UY/paSRY8CeHiD6Xrep3Aw9pRFTItp3G\nGwNlHXGPPMicRLYVrTcSCkU2bg7oih4wAQ+dfHHUeoiPNXoYTzLloIJdSFjQ\nkVZ2\r\n=PFV2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.81dc33377.0_1595865515621_0.23397511733918308","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/theme","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8342b12a039765ccb2f7d2c1a25e3e3183f850ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.ffd9ede58.0.tgz","fileCount":30,"integrity":"sha512-lrHFJkFhhBd1XYTIeBuN4drR9xYTHrl/ezaocxLz9Z8vUaoBnuFCYZxx6Pgx/VO2WSs+0q+eaaPPidZprU6WrA==","signatures":[{"sig":"MEUCIQCSo9VY5Ukt1QqMaxzyeWbTcdDaopYuHmOD1AowmUsB7QIgWq46mJuY4zyngDU4Os5ClNacfg9u5aB7j9vJDUHiO7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwFwCRA9TVsSAnZWagAAtHcQAJ9WnzWSqZtTpus3RztQ\nOBPfhzAuhwiVDDXl5GVnuyaOnHRq4X9BzBdHAmkO5/6o1on5kHwP8AVAk9Xe\nHqy9X4SYR046jXuTkf+ZtBbcjfjxsOjFDw1XImusMmFJUZqXBKhir/qp6Idn\nMtYM6+kOPlolmU765HWnAhFT2KOfDBmCRKIcvSGjM9TCWo7C4/w1jog1XuYI\nO0I2LWB4ZTNo0opBxMJoO5nRmGqX4xXkm5l8/6VuYrG59hBOaGaF58R/qfqI\nhzm8x6OLdnv8t7085t54OLVjyILFEbIIWzI4KhzBZRp/gMunXIFDVTl9gg3B\nnct7qG4CppwGAnQ1ycHferWsOYCAtP4rK1b5wWmC52mwcPs3CPhljIpyqDZt\nq1DmFvda88tKdjdavdQu6VE/tbZw9vQ7dBMXkbiUpcBAZVpVIDK5FAoJENTD\nQV9FAJK64SqYOAjfi955oqT+eAdEkuMcMuDlu8zqHAlM+fY87z90o7e7kcMp\n7IhlQMFq1klo31EzrwCY2ZQujI7TbfP6T9ZlhEEMs80/Am7BmD2Bazcc+yZo\n/nRPXD6Kdha/Ks2x3hJb0PjcMXAt2Agb+kEcsc9Wq5IdphtNTMtmqXA2BQz3\nrR5GomJ8/GdM9nMY1lPZtbpkdYX4ouc+HfNDAOSWMFZ/b4Yzs6LxXtfNs7aM\nVd1I\r\n=S+yB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.ffd9ede58.0_1595867504430_0.2856628409279953","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/theme","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb442e13db3d21a544844fc1786f3ef41ee53d8f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.52dc55acf.0.tgz","fileCount":30,"integrity":"sha512-Q5PQugx8CrxlbpPahrZS0wmMGk6ixxCkc1zwlnYZ3juKneULsyM6cZ5aiPFIS7iRU/Olj31dFo2Vl+pH2US4LQ==","signatures":[{"sig":"MEUCIDiy6oarq5ANpkg5e0Cq9T9v1jvfz1aHyIybXGsgcri3AiEAoJP/KGD5ICqaK8YNP3E+gEVg4VApmxSnjoQZcoGpzNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwntCRA9TVsSAnZWagAAzsAQAKTFRxm0q50jihk3wkBo\nXGRy6W4QskBF8LVFA4LCHXA2pNKbWWJlzuNsd4w7dm6vSg9DyN1+nCMtwMP+\nMm69xgkNiyur7AIGBlzFKApDmigEZTIqb5KqkoSESo10xprh9k0jx0SfBLUx\nkXEgileHQl7fBLQqeucmtPxym9gifYh9vNG2acYOv89bzGIHHEudSHpL77le\n31NCGEwmKmycTeHOnqD+ZHrMdyAlxRi3jpGCciCEEL9EpZX9GGNrInr9w0t5\nuaHB+Id9JTuDwq5it6eGOJMtBFiO4aeyu3F1+zzVj1Ncdx8xjQRMkkAUooMi\nvlxTZfgB+qh7Vvnd51UOjJh3LUaCvNWaf++ceaCK5QoXTBnPZjoV0AICj0Gi\nMGV3XRtZkWmMJPAjLOyac/ESraHqAngsYDVkCltT9X8xU/s+6SzV+4ZfRB7i\n3lm61tA7RQjTd37RFSqAj1UAKpU9YvCzonPAKkyuqCoU/C9vDgQm2z6uTDB3\nzOdostOMTtgVZkNXw/knFhTCAyiwsB+tLWI0ehg7ixqcUBEYMMEah26eTcjr\nd+m/KEE03bssqckGgy33sGZ7kx3rvKI+ErU0twITQ16u6VmaSNCRuUWrKPNa\nFSmDHCq6BW5e863RH4y4a2kuiXWEhTEpLbxYhLQfUUoeVS03tVH+4FQXqXLV\n+eVr\r\n=vIfm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.52dc55acf.0_1595869676875_0.9281686621141265","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/theme","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81148d518bf75ed67a010f2dd0e639480e1ccc3d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.d4274ff05.0.tgz","fileCount":30,"integrity":"sha512-VzCQO1E67fJA3v+1+dIRzrO1JLgkOiYJIss16hWq2l/iH47gHbI2iFsnTm2q3iCBYl9Pvhsj2bbS2+nVtYy7yw==","signatures":[{"sig":"MEYCIQDupPDSUAOJTyNmNftQfrEfvpdkzvmvuXPE5LDxSBGSKQIhAOm9t30yG8T84mCmTRjkfoG82VEsrcBhL58kMUnwBdt3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzAGCRA9TVsSAnZWagAAbDsP/0GeliJQZVpdlRQ7HtiJ\ncJBVQslrmwwNZwX9hHCOtAjzE0/j/PI00FMLTTYP8PsYG7XWIcNXJGLI8Lr3\nZ3rFEmxKCVSVmm4WmCInioqigaxN0ftwX1V/KE7iwhgelKdf4adrmFmTYBku\nCqO5F8KJavIsfy3o1vnde0ji0HACHus6TKuemA7TPhdNN2fmFsjG6kuVsRay\n0Cs1ToxmPX/46fsy2AG4bviBgXJtmx0b2Iiby/ClzmiOynHEAhbaY5zvJtp+\ngj8UBacoBtxEF3/SrRrbHClWCbOrNs3OseqpTWS66qVbfRtEPllVyWrHoz3s\nlbLxisxT3z58c7uRF9KrHaTVaxsPBokNAQyzQOrGrblKrPn44N4aDzj1zbGs\nJwcnKjLl7vYRXukKSV1lJV1qvI4a2KmCQ29chu+kCByNdR6gIwycgPSHW+j/\n64wmv4kf5YYhhVKsBY19IRvWxNJiUYllE6Gt/fAWt6AeqO+lPiYlX9DgRq5o\n5Qgz64fDohITPCVcn7kVOyc93i+KlLG/9xTEro7Fj882f1BrgVblzKFF35dV\neulJWu0JVIzFiAedtdy9JtwT/q8Fqm96ioC2Kzw1ZQcooV/nhP0n7AqgHMXw\nMZAmyKkWqSjKYT/zTOWOclR2X6Wm0iAgYfy3hOg40Rjn7EvepikSymslmW0N\npQeu\r\n=n2m4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.d4274ff05.0_1595879429601_0.3189386803756329","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/theme","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87b61e1a51ca956675c84ca4f9e129464db34c2a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.b82d0696d.0.tgz","fileCount":30,"integrity":"sha512-ke0/wFVR3RDiKL8qnrAXwkuSS7km6l/wFUiW0jC0RhDceOgZPK8SNrLYAbA/0sLJJzKCyDewL50QYtoXLHI70g==","signatures":[{"sig":"MEUCIQCok5GEY8HQtnrag0M+6hVZze9LpUTXX8TUf/HkwTSsYwIgQbX9+TVAC1cIfh33ozBolU4HJ1dZ6k66pMBjPsKi7no=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzGoCRA9TVsSAnZWagAAOvoP/jqJNves6qSJn8Or2Xte\nQifPcjmYJAozhNTVNR2BwYGVijontbPA+U+lB8IcexNZiNcnym5/mlI5+On1\n9owarADn9OVOq8qf+GmUitJSMO7yG30NeUMJ83knAHB4rZI2alEwUTzpPIKF\nJzYbp+jQe2n7Vg5ETlVNza5H2GmzFk/p6HsU4nbY2TNTnnBviIqHThT4Tehl\nXsAPaCwxW0QDVdWKCsO77fRya46cPPjYyvLdMhXbByhO6knnq2zXQVZfODn3\ncU6dAjVYMjf55JOoj9BFLA6ho32jqM9Lk1Hv455gX/bowIwMgm1sXUOKYNlY\niRdXf4I4x9hfl5VaCsFuNAbu+ScYIZa8zZMBYSjjpWI1uImQuR8Mw4FuEtJu\nCEN+JOPJneR41EQw0YE7mGuaW/tVVI0B41nwcdUQH63ZxHPFewPTBftWR8FU\naC2vwxkgkxwNDzVBeLKLHf7kP9a6llmKIjDn3oiKykUJIhGrL3welOjI7GLw\nSWfO2G6bUt1xmx8FkRNXDz49dfFkeAB4sLSmu4si5p7ieewoglIffKmKFtJr\nBRruQZIR/tIT9K2JTBa54kRzTMe/oBNJ1CxOjP0G0bBI5CnYRJa+n4zJz7mi\nWI1a9VpLs5Ajv3GjRYROFfMKqxToYSyYRr6wMZ6rt9hrmbEUPCBS9mP/C5CY\nULuZ\r\n=p9cr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.b82d0696d.0_1595879848053_0.6627909657339235","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/theme","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.c2852000d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed5c770bd08b9dfa49b56b5f15e6b8592f8692cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.c2852000d.0.tgz","fileCount":30,"integrity":"sha512-8ws+YxnIKYGj9f8Ru5wSo/vmtRoOf5kYM8YkN3abqDSlagxDjlogud5sMOozTaaksJZqfneat70dKL/IgHJ3bQ==","signatures":[{"sig":"MEUCIBtzXp6drxSpf4LXjnZg6RXEFpswrx/Te4qQOWbkHPb6AiEA1EeewPOEUjqAzLLDc2/ac6naQD50OU455OF4M/+RU+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":105846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/FCRA9TVsSAnZWagAAq4oP/3SVbGYVzP0h9FZjB+N3\np5+w4Au1yPQqRyPT2rji6EDgd3kyezAgw4x6sotgt8nN8PHMCYyHC4PeWiaJ\nStgJ+xuk7MiUZFSZg41MmIxMSgzwbWzTYq3qUC3zqM1sEhlkH4RNDNcDPOrQ\noW/LkySKJWg9jUNKEqDXpeXau9jOhFg3yMmHRsR5TCeqA+RomLksFLns/bUO\nh5bpH2DEV+Jr4Dqm/XuYp/g+2Z6l6c3v97az5p6nzJaFh0TB/kBaB78WeOPj\nSs8RvHH6pLHkrrMr7dRwqwMQMX6ql/pB3iFzu7q9i3+egv5aIOmJakDr6CXQ\nvz/B6K2vKC7E7/NOtIRXTyxGE8XCeeW64y37hnCv0b701rF3/0y92LD30qwI\nu7m/TJTMOtOTWezIFJ2kKAhR0w2nCrtjAYKxYlsnYjFVIo6OJaoFlSPyWmQ2\n5NSPG1C17l2iIkKF8/aVzctzgtOmI5f/bAG/wFcEfz4fO7uY6XRMYqxALK6t\nqziWjeKnTvJSwMHTdRA1xylpT3kdjy57EBH5FR9O3IjM4oKKGmDwgVxNuADQ\n9N8r5X6hCW8RrJGrNh/fsktvd9FUpXTxbeptR92oiyqhtXpdQmvCwt4z23PZ\nNfI7hUA7SLhlq7cxGKnNs4JlQVCAfOnvAWkaFLTVexkBzAnhj0kX4JOjaMpe\numPD\r\n=Vxzn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.c2852000d.0_1595883460477_0.914339339005096","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/theme","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f70aef0dd64bf30493bd2d6c22df5318d4190cb1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.f86f83f54.0.tgz","fileCount":30,"integrity":"sha512-zV7gzOH7FlrGL/5IALdVpVZmio1sXQ6rBr1h21BfI5vTH+TmoqTgBN5rZpE7Lue6ajU1ZweBIjICR2BNk/bY+w==","signatures":[{"sig":"MEUCIQDwMN9X2ijaaqoQKZPBQdrQs4GaPahqRjSsE30ui3qp8QIgHTDAVYZ27Mrr+DFjHYnaFBy/zIecx0LVy+Hh8lo48Ik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0zbCRA9TVsSAnZWagAAPrwQAICbRRAgQIY1txrXslSM\nJOyVHLJsztaE4/E1gzSovpt/Xql/Mku661j6HY9GLsNAO9EJzCStmY0nCXWs\nHN9tPB6FGaVrfHipzET2alcAHmAD1wTYC/FTWXkHENP6DVu8Uaz8ixeVrFq7\nEHlImUAOaFM2dGZxUjiM4qGh5sDkP9jRTXWtu2k4zaPEz6LWb8Hcg8wrQP3y\n1r+XZEhid5RbLIKGT/bo/5Gao85D8kf8rfAFHpH0QJ5sFYx/J4LYorHrVjCU\nUWgk5ucAzM24qvL/CXg4esrDCKQ9w8AgXpGgXFh7Y+q0S+6ry3RORAhojNcR\nia7V+e46cJWSrhfNWUQ0xh6FlEa7qEyHMLbIiDupI7glpn6Emch0C4xMocIW\n6XcpdTqQZvRipOazK6wOpk6ddCFtODYKj4IgE+ydz4ErH+cWIvhIBX0P95M/\n0uv8/QBAHvswZMsU30R0UhpCVRf+bMi64B5+w/A+ekq4UP2aQT9sjJP0/MWn\nhTnV3JkpIJiLAHxboKZUxEjrevg0vIahw1LTPXRZujzPAMcLmHb5Vw/6nigv\nT+yA+rUvs9iJlEMGO78ru0OSjfrbNNPZ4ejntH3LJgNi+GLtl01FtM85Wcng\nQWypR1GbcjyGRVHOwfpuJe/0e4FcBN/Ero9nfgTxVwQNvbtJ0odFcHLkAr2a\nqh59\r\n=uNZ9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.f86f83f54.0_1595886811065_0.57465144318096","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/theme","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c36552973417a3f9292a67a68300dc77f0e17e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.41eb1684c.0.tgz","fileCount":30,"integrity":"sha512-myJ2GD9eFCK/QfdD57Ewyt19PtGyKohDeMxG/DUOAmLatZmu3/8zCW6xnJ+13xxaP/wFNc4SS0d/Gsk+BkE5pw==","signatures":[{"sig":"MEYCIQDRwkkNi54p7D7sh3ZeHhoTiy9U3HdsBf/rKBHsHgc3jgIhAN6U0DsnA41niB9YtH9NYNU2y9abTINo3wVM5vaGqYy/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGU3CRA9TVsSAnZWagAACtQP/2Rn/450Y3kh9tpbrxBY\nycF+Nj6i8fLqgvwJdff6LU6mknzuPN9H9X+gRryy5vhVGBqhmBNJRNyqFgaA\nOz2oE+jz8DG06EcaCfD/cfO2mqIDXjc9m1kHpKyL3pBBH13SUoNtJdlciBdp\nhxpSz19hXEi+9T7J9vUqBjxlHtNv/zVw9fU1knQ2sYl5BP6aIavxXP8CH9K0\n/Ag8FCBg0/D3BhRdB895pXbsboXLCYFbwDIA65zwB4LMNqqrui4+05PU9g2X\n6icqYM8HTl/XhC36N6yQwEbYqrb6rJr5q5801HAdP1RtN+JvlP+HKk9liQmL\nFTzn+67C+cN3/3u+ixyJtZ5iofJvDPdLWu/D+GBmvrGsdEP652yHvc63+9Qy\nOTqoAyJxfdd1iusL1+GPbRval0lNDV+BnF+2FC0+Q4JYG8dZzdKcPnkBkm2H\nUzA8CM7z/zaDN0sUns1nkdf8D3pD7HLufsIVUCvz3C7fVEfmTBYkaYQjmXoE\nHYQQkogKguwSwq7ZLkQalEkJ2/MNnxUctetPWqrH1g1MwP+k9Of+0zuA/8Y+\nNO9q5GsPPStR9x3IsXmSasyKcOTcwD5hlusDgUGLfsOycohk4vrhmkwAOE//\n3TFDE6pzHr0O4E7LsFot51+ayMB65+LyBGRLfTR6PcFXohX/Nenk1RG8C27S\nBEPG\r\n=eyqm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.41eb1684c.0_1595958582653_0.6490422356220711","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/theme","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cbcd32a3a36b31a96c3723c81aec0b331be1eab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.9e2f6c450.0.tgz","fileCount":30,"integrity":"sha512-TeTB6Hj+rQp4/bIHjpK1uX/IX/wzZfJopQSB2+YULH084Tc709MTHVKPDu6r0hsSrQgvGR2uCEah8QINA8cmvQ==","signatures":[{"sig":"MEUCIGnwmb6TCpdIZW2Nhn5g0UK9ZtgjgAFIBw7P7kkKlxhFAiEAlq0sw1NCuDtMVYbgtPT9SaH3RpZ+N4MoKWmfY3jxWME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKjuCRA9TVsSAnZWagAA5l4P/1bFJsoZV3bfUc2QWVWE\nxn0vDi6kUL1YQ9vVk0HS32qYCaE94mWEf3yAcfANe6lht9ODykrEbp2mWMJB\nvvRorjcoYzH0uExooC+dty1QYlfTwxXPerDS+EWFTS9W3WOEoy+5J1ht9Fa4\nBIijK6ITZc9/u5EEnr6rwkCyDgqC8glRtMTO3JGjDRrQHfCs2YMS5k6dCJsH\nyRizUVlVT28QL09cdyuDNmJbuHPYn0h2Zix+rN6Rlk4dATfUfEU/yK7KAHAy\nbgeh4u4VZyedtHlsoV2p+3Ol/unCzxhdG8LahrQIXt9VinBB0sWmZHOyHaWM\njFb5Jgd8/x4YDDOK4ru/sQO/TThnLBR6D0PrVdyrYz7QgPOUgVIVzuCx3FiK\nbcbR1v9DXdWNlV/5pwRjCGynQ73uKpdbRnkElFAwVPejCQkUMI50PlNnFNgi\nyn8EE8q1yVGmEiITZPjTWtwCzW5/jrvqFZFp05H3fi8CtQZMiMruVlDOGPiT\nA6Nv9b8jHvp3YmJKQk1Agpe8q/da3eoWJqNDeH4KJJtt2iQj2FXNUwahnCDr\nkK5d8J8uTb6lfOyuPIh3NjfPWwrkgdgPdcZTCvYGtlZWEe/brVhYu8u9RkQe\nLybT9eqdtMLYp1GCSLHrVjtiSgt2NzDXgVU2a2JzsP9zAtVshBZRX8h+hrk0\naBbD\r\n=rG48\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.9e2f6c450.0_1595975918037_0.93278067705698","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/theme","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8807cf2274f8dc2aa27d50a91d8b0759b0b99014","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e6950b55a.0.tgz","fileCount":30,"integrity":"sha512-sclyfqRFgfvVqEv+ESzU7z6n2teX559fmHBmDmdk5YbZsOA0cQYSyvjB4ok7Eg0Jw8axcUKlsVPtLy0Fi5wFHg==","signatures":[{"sig":"MEYCIQCl/NTTYlHzkHV8W30NvliYq3oqmHAqBwixDBZ/Cyy4TgIhAMcsbHL9JnPoOD6Hx2Gl7ZyJKJbOgg85zSpKjTTPyNVu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKv5CRA9TVsSAnZWagAASiMP/089DhMGf52gTImr428Z\n54DiE/UxYG/ypoDEO4bnUo/oOnncVhtkz8APMPiAzmtq+sgmdZVk0BVvHSV9\nlbHjcjJdreR7PcLov76azVtp/i41SC1ZxW6G40G4/4ikiBREcqlnePTOHBMc\nrhXWG/0FdVTBfE2BjwhGsYCs2AT2IqXyZvmPSGqNUnYLKj9RHrLmpMkRQkcT\nZb9b13+P8BuyI2ttbnTZQylbGY8MHEJL3DCEFXHZlYVJLUevmc3nXfoU4mhB\nurecXqVi4tMEDMs34SmXgN/9CvkDTRb+Y08xxamefwsDnbNc2lZ8Pn++S3yM\nEu22iZNKYaP8lWGIa7MaqzG/ShexADeD7IJHyAeg+jnbxPIrvoSt3KWj2a2P\nRMJXqvA1RWw3N5qHJo9XYG3y7NGad5NFGevFfJW5UjIXRLDPanpaEZ7IxNhz\n3uZchfbhPUqt4VixkqTq9LPYkXggPIkYHiIrGoW66f7dkWqAJxQWbq1jOrla\nWxTu296dHSYE1KA+rojB7jhMEs1RyIf4mJYWPCQzdQGYymehgbPLIorp7p0Z\nXVyUi91aZofyJla3FX+iK35LZrNMGO5XKfMROYXJFYAra6RTQtCtDbK91i5F\n6Ev5Oq2cpMyLCPAhuKNLLJ1IxdCPXDGlLjCYLL68YTVAZ7U0CDdOSSLoCfrZ\nAwG4\r\n=XUup\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e6950b55a.0_1595976696796_0.4379908157444017","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/theme","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14d0e256eb487df5f2ccfe88117300481f0fc000","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.5e51ee38e.0.tgz","fileCount":30,"integrity":"sha512-1uuCrvxDcQ4nQOZfcs8KepRPi8o9AZ6AV4YRZ4a8Zxi8hSuAIgvFXLPtMgNczBsJHIC96mm61kTikXgpccPk/w==","signatures":[{"sig":"MEQCIFXmwlNXy1qnfgYXCm4t6y5RaEYAU5CMq97plLE5nKf1AiB6VVdIaSo87K3BDmW/0FZbJmYmW/K4C2tfJzd/jY3Tug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILGKCRA9TVsSAnZWagAAchQP/RZmSArAi16FxHcKKI8U\numsi/uXqsclvp3bNqcEDy9KzeyD7SfHnO7fudNPqHsx0EfSTysc+f5wt3qCn\n78I6OAy/RTN6G6lBId32+1lekShoaB3cmnOXYXSud+3UQVbJDiX0ID67UGFK\ntj1mitbrQP2mj+WQErlMOVYtQu1+cdRqZGCDk2Fbt0CaUUO8KiC/RA2HxZ68\nulRRB02dK0wbnCW0pYlRNd9bXmAJPwxvgYFZ34TbAnKwpCvr98FwFZGJYkn1\nVp8rTNzqmxny94I/l43jfVz39RtZBHamHNnBdmvUSEpToFzvUqgh2Bfn5CzL\nyIvwqlT+mFbfOGEUyOpGgSRB4AScODmDS8chuA6X9L7jib6kfCC+Ip6LuyVU\nzrg4xQltIpkHPAFhvuWqdhBvI8OeGCJJdRQhJKvX8eQQcd3NrT190cPYHS/V\nq95bCApa8c9HyaqJvWbn+d3q+I1PZW0LQZncv0hZp4NgkWDSDh+c3GwP8NSD\nmXD6HpF9z393QI4o0JQAH/25BfydwKZSGnHDXmmtlCq5TCZdvyuscTfRlv+e\n+GsqxyI87Ss9TWFOCd/R5P4NhlpjP2XvcMi1eXGWB+mFl2Wq3+KoeVJ6k9qU\nD4ehNdYjuJkgsrEfOekx6Uabt3Y0LVZl1m/F2lGXqQeZskUxPvdKtXPn//0a\nq4gK\r\n=wfoa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.5e51ee38e.0_1595978121713_0.04148159995388356","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/theme","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0db57942429a885af3366c5db35e1bce90113b78","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.a3898ffcf.0.tgz","fileCount":30,"integrity":"sha512-7LASs/hAlgwzgqOjNEvRnpy7ZX5Jgxq6riGEytjYqRkCxM2Ab4ZLXF3IUns8VWSTMW/m3GegwLUHdqzrP/hJJA==","signatures":[{"sig":"MEQCH2WK5RMOCJ7dZ1zw+t4/h6F90XPwIEirw0I8XxET3akCIQDQYcekAwusiT5eom2ptLfBgBpb/aqVa5AwNrXPWZDZ/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMRkCRA9TVsSAnZWagAAUXcQAKBPprb7oqagREFiEJUr\noHoc5KsaA+ZH72qG2uKfKKA2fgEJueb+SE/oGfqI2AddudPHPufJGzFPRcgu\n0ecWQooLcoB8W3sSac2cLWr4NFi+hY1bdMexOT9hv/icFZKylQaOrhttXMFB\npd107TRbYlU9VD2yyoyxgJEp6VeMFLnaFF6g3yoSbZc5PWMDTG/1zBImZBx9\nBSurmr4GXdAn0GnCPRbdzjMyLGYb4qHLqRUff6twO6p6Btdm/wApRbHy+e9B\nKkXdAsKTs3ZKYPiTzyYaq1jWmvR23T89cuIpe6SE1YMtd0G0r+X8Ug+x9I1u\nlubgomt3iM1cOChLmBjS6taSVucf3D6mYetTcuvwu9ChUAuVNcKUA8IXOw5c\n4BIMY/ZAO4jrLR0TIwQAktj1yeVnSHNtQS3lEhzy054wWQJ/xL4Yq06JMUoI\nePzJPMitD2PIOZ/n8SE4JOagK+4bxj8NQoBPDFwQnajlBvugECcQW6ESYFkA\nnbXWRBnsqbq8LXqMZadRjywoHPmEOu3tubc5tir9+66B/C6qO8t9K2i1imkR\noqlllhdaMznAG73k8Nxb8Q4ItdwBnbA8fTxmXNFoqjjF6Uqetiz0X19Q6n7g\nsSIaRr5GGAFx//vYtei4Db/U3q0uo9RRtCHL5hcntKhqV8BhsOBV42Ib2yY5\n+uaw\r\n=OkNN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.a3898ffcf.0_1595982948368_0.9105134174325924","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/theme","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ddf3f6f6c8e6541103dacbe9abd287242ba3050","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":30,"integrity":"sha512-gFfb/4cf9akSFz6447Z83rfxiMmNA1Qy+Wth0xMuiicd4s6QqBgUzuyA9LaDFzBeeEL8Iy/SZ4AdmoMQ4opmCQ==","signatures":[{"sig":"MEUCIQDAxGldUlK/AUhRwxnqoYigN4oOMilrUTvzplbphe54tgIgBDVHtlJ7XOCrWhEUhACzaKACh1oIXBLstQjDAanmoKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMdmCRA9TVsSAnZWagAAvbUP/2JpwU3GAy7obzJR3cOF\nDqS8aK6+3ksiowmYPpO1jFA/7ntXffhDHCUkkT0GGk27AVbWUywKhOmz8tlj\nb7YWYqjSufjsCxr9kstjiNsahJyZX/qGTLn4URpzEo+rrttSQvX/qpDDdMbk\nMyRGVK1JjkMDbCEae4vmwRXOmMaCJ95s+GRfvaSSCsUcjlNYxAh8pREy4WLl\nwzzJUaBtH+lnJ2ddb8uvZgkU9aDt/yVcxyGwgfu27509lqz5UCq75eYTwZTb\ngakrUFs5TkzVQIdZVwN3jNO/xboAH365m/qLNHCSFqe8v2fkrG1iDXDh1zdC\nNkVDvkjj9upOEhITpYyKTItqwfqL7kn1KhLb29PfxRmWDIzT7HE6MWoKxrAU\n2PKTVQfxYFlDXoNUAwNDuLGenUuiS2fOCmaUZj865PiZLlTgSYt6Y/1sQ1dl\nGGx+FGy7snpiRx0fIIQXS/jJz7X0QbO1JrRbDqlVzXqHvCNi8kD2gi/+NElI\n9rdQcTEL4QVrISqnY1MMBu7ybQceHDjFgmgvtnXsOn84wOVj2sol8IXtyA8X\noBdnOnaNFq5p689uV0h7mbGlhikS7Q9Jm850Ac4krSB/XemTxOcfFtann9lk\nk6eRbcnwkmlFxEWhJYUXbTMCyFvIPoLmCu4+WGVG8QxvWakjLOA4C+yMK44C\n7HeS\r\n=rvI3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.bc5cc6c96.0_1595983718152_0.4170697555004528","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/theme","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1504e90ac66a2a92cd8ab2d7d07f4a2b3e4f1248","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.9bdeaf928.0.tgz","fileCount":30,"integrity":"sha512-1OhZ+KTNL5Db/FiE/h10ADXsTcM36TG7WYgFTBDuFaf/otZqihsvHU1u/p1cDm3P5RxunPjwT2hZaXXtQax18w==","signatures":[{"sig":"MEUCIHMrO3kVrdx4m+fZAZbifcqK2qg7OZqNRC1wbuPaZoaOAiEAg2qyp4VBpT1XOxfl9DeCVkZsfCAfFKG8udN/Hmr3Kw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM7BCRA9TVsSAnZWagAAJlgP/Rd2TpUK07GdOzjhXbNw\n9kW5++VpndiqopYqD1JUJhR0CnliFmIspSbM0pVvvmNOjkqcbLyUmV/jEnV0\nWmjLwFag/Sxjt4Gxt2yDJX4hIqOV4BBlCMIk8Xa4BS9CNq+oh0pnhIQTv1vq\nLolxc1Dk1iDBtO7zVG9yCsRxASK8CIT+C84gf5AYlGIzZf/wfHy0sLMhKN6M\neBjlwSyKZyJlshaa0uqmgZGU7iGgatvV8Td4VmuSd54J1dW5XwHnzEGB2/Yq\nbxWGWoK3ze1upoGuyXd69VeE0okXObl7NlEoU9A9/9//0OdyCh2q0gk5GMDh\nAU2oDAsuSpVB5McHAP2BQHOXwn+zIN/ryDRNuuu2njiz3SqwtDkI+ohxNH4K\nfad8aHQClUiTg3Z/kRZmfFQMnJQruXK5cMkq6tlpJUrHDdsp9Ck9taa2hZMw\nkdl09wGAli3lb8S9/Rfcb3mmy9t+h2e/XiD2lsPR68s0qHhalPdpF1JNcuE2\nzaP8T7NswqnDnQUSvoLbOXdsNPB28OP+X40vExgib5p4B4wHTWvKeWh6TtC9\n6SuNWxb3Vg1ASjXt8hrZi41Ac0JfeEwupGLa2tZjIN3B3bTtYMxWgRXZq/+S\n89MGlzEiGd2c3HxJsFbjRXVnzLjMRolE9zH9jl/iQFjQ2sm/Px/QpL1DbRbf\n2ciu\r\n=eLik\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.9bdeaf928.0_1595985600873_0.6038540314101035","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/theme","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7e14566783261c4ef96ce8a7d219cbea9ac3db1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":30,"integrity":"sha512-HqC8XxTXdSxq8GWFudcuLRTkTRoHUVgUzLfBJC1XliA0Zr7m0tWg3X4R7BsPbIEl1eCKBb0zDYrnRDE2M0+F9Q==","signatures":[{"sig":"MEUCIQDH5Ub5ArLBGTAkCVB6YgpznItXsKeDpF1sCkteRPS8ZwIgOTtL0zzJlj2JkgB4ApJMBliB2ItJrZX6ub/0N7u40+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINIhCRA9TVsSAnZWagAAHIsQAIzl76Wt+Ya4zepPWssm\nyjyyaC+xlu7NO0co8/sTv2FuhHLa3StcLOEUb2GtrZ9X9HAm7K7xgdaTn8ho\nJNxoT9PHsHHnU9sJYCr4OYMRC8tPN9XljyQe9fJn8Orj/mLAx5256jhmBD7U\nQs+YSUAfY1KefwUx82QNpfAG0IJqsVV/WIugs/H8Ci3yCfpLBSf2eZHKSCvY\ntlkq5X7eFH/R4O8/c2agA2dXgswcaKDmsi0WdlOz+017L8kdU+xgQg18Q503\naImut8V234vtOTWHMSEel8Y3YMstdf5iKihPwF2ui11mxYhWWwQugUFBTSSP\nBrX2dTNUHIdm3sdkgjN+sWBQIsSI2Umonba8aBny6ncmSH55gfSbJfhabl6b\nDZvlPh05XXFNDDtXAOtlHCcNHBSi7wvsWi0OaP+CkYxyzTO8N4taP+Xpt+h0\nZA1vdRimDwUDr44H8P7Z+RkbB63Ag9gy5M+TwdRVR1KUVszVR118wA7kRAwQ\nXsbMceLRqpr4FmyxICw54VkInj+nvUERBTEAvW8u0seBrQWyA4d5vB7VrwUc\nGf4WxskkDRV2EljjXuw+dO1p9jfRbu/6mwZZetamnpCknSzC0XlxUJxd4ib0\nKNOsjvb9nOoJmcxPVMia7z60wY+Zzk+W5t8BgrIq7cvaY/3YsMjAc85qgets\nhK/d\r\n=p0hD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.fde2c1f9d.0_1595986464670_0.7023769826788262","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/theme","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97811df722e9b5c6c506855f0650fb5be6785aec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.6b3876d5d.0.tgz","fileCount":30,"integrity":"sha512-wNBCT9uTOgf35SPUIeDVgTwuz++tSWLahTuyvBaHJukEL51AX05Z3IWB1ToIsur+mjtr3rxr1DZuc5fQdr4G/A==","signatures":[{"sig":"MEUCIQCTj8jUQ8aDUizEdpe99nD7BHrFFOFsWGGskwge3/Ae6QIgXsVppzbVyB0wAVyBHgVTAmlas4ihcvxwVk0fGKxC5LI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINMCCRA9TVsSAnZWagAAZkMP/1rFsUospa2ln36Ve8Ov\npVVoCpLq1snHV3yLARFNbKdnXfUUkOMgUjl8fCQGLDhYHXtvfmuZNRR5Y0gg\nJ1/npDheg19Dy06GyyjxtXQi5tqo0w6mfG8Q5h8s3ZZJHFJ+Y71J8R95jBLy\ng7AU2OJS8FFAfd0qqOZZUXBb/MLa8x7MuHrT7AtQ4739N+OymOkrVQx9aVhv\nb5mzLyhidOzhkE1DvzRDu2yLB3sQcg/w/mXZkN7g5kzWv0VRXGv/L6xZJKiJ\nwRvz403oWdqSbcQgtZIp+ey6FIolyVJYz1fWSVrCMucz6hGlhscL1/5owffj\nZOzxykBZoX+bQhtVb6Dt12V02e9UpWL4bC3jgCEYTDHg8HnrAo0z3Ll2deRo\n/asFjvdSI2B2oUgPEexd3w8uBv1O+X4nEGeNSw5+1+/giun8+5cDmLEKXUtn\n8rEM5tPdAjUy5GBS7ENwi9T1q8qLFj/V2v5ulqXwbM91zObY71+8P7icBYgW\n+UFMSVxMCj8vr4Rd5wCgS9u1RdvOrQXAW1P2VeZMl5jau12MxUZ8kCAABRwp\n85nmyZmm6Ow7lLqpbnqAhi2ZhTK2+Pn5hjWCoU3lD/+RWpSGyAg0qNagIj8T\n6ZIKeJAiMaTj51w4nPibPYfL+G7bSK2Qwvahjd3DYCfTojFvVCFMFPobXNqV\nGLBq\r\n=UIJs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.6b3876d5d.0_1595986690068_0.45205877088065893","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/theme","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.30ce17873.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"835c58835913377307cda04b83df14372b89adf0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.30ce17873.0.tgz","fileCount":30,"integrity":"sha512-0i1tJxEbYgcBjcoAgmXd8EBxroD90DtLK7hbnkAM+El+mCTVX685bbzNzaSD9lY16o9/vd8hpm2SzXqgjCaP+w==","signatures":[{"sig":"MEQCIEcrZdkIedNLRROsqPnVJcBbdX/SER9QorvNyQbTCwKFAiB54PVhXvNfz2igHFlFEOs5ZqkUX97jjIBGdKOCh0Rt1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa5gCRA9TVsSAnZWagAASykP/jvzQ/r0hWR46F7bJxl+\nDybA0OagNaFZ660JY7IxDgaquUkiTiFJ/H0x6kB+vZvsThNN2uKPHJl+85v4\no74hA54jpcQl0v2xOnBsMJK/cIEm/SDD3oXfP8oV6wPCrtCveOqw2NzeVECS\nY7sT2G7jlZ7JbFSHZTKD8RCs1UxgehehSG9KJxBbHAbs8+VfVtr0hs4ke4T9\nhPnpr0kT5RHq6PG3StaSGtsNOgCZIFc3/97iQs9RClZNLIP/YMwdd/GUr4Ud\n1rVCCMCnhMjLtyUmQpNqMXTdLLZBjafDlSuNkbgO1AsqdOn+zOcbF+xvWdhm\np9Pu6WnYtElnHSFItwBqfT4Pb+Y+tIQPSCn3tbRvFjnmOef12eJmorumsWzW\nYurw7D93xYeoTa7NT4a66gz4+zwV6WaK5D2VvUbztzfLXC7QYCRxYXMM6T4U\nNK8FXMJnlBqu89pXAZocPffO0kKCoTXqSacNC1xOPip+OQSJxpE/xX9vMBie\n+r0MsO9u8ppHd/DsurjJ+5BMB2pzilHbx1kyUX96TPbNIIBlvmmExvmoTJ5t\nWhnVHX21nsTEg+hmhaTs5+V7CJ7Vl4VIi1jkA3jw3vl1J5zgMkAVkcWZS0cP\nqku0Hi2oCW3jTd+QJvT6XzK/7feo8N2iP+65EF68IaKMXgu4EMGbc4seniXF\nCGyU\r\n=IMUE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.30ce17873.0_1596042848040_0.656995244441017","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/theme","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f4a87497a822bd4d45ef88bf16c533806e99002","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":30,"integrity":"sha512-h0+vwhUM7BDgetMWwYvE8UGgGTHrCiwJ6mU4qAHiEa31LL9GcdTP072zYs5bszjYjaqNZx4G7y/ndgYm45eEkw==","signatures":[{"sig":"MEYCIQDio9XX/zYUqoVZbiOb/6stA4eskxNeZoWO/YNDIAumOgIhAPH+fejSG8SojDjYQ3xYJJgQWZ/nnkDUFNpEBJRxLpRq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb7nCRA9TVsSAnZWagAAkmMP/0ewHhlPzwgPzN16yvlk\nlIIqRGnX8diDgC4AjuiM4Pik00Vle7BiS3xtNRA4dv85Hx25MMl1admAPN5q\nGASiXIa98v6Jtp8Qo99kYw7rVkP+pPXbbCdJpWY/YO8dnfOn3tmv+aNpVPFD\nLjUb1pnpdvoBkqunkp8hIbs80LT/b2la5qGB+S4iB6VFoI3u2uAC3X06rR1D\n1Pj1Q8LOhUH1s3gDCW/PGxTi/fhAVgVlOIBjfROyFBzsEduarnuR93m2Hjdk\nR+3Yes2mW2+YKPdlCBh334gyvDg/8KZ5y5UhECOdugB67dCbONTVObhqZX0D\nDrMEQSruX2Sc1NzutVqReWTFtCxWnQCsf/9gl/bTCCpNb+uyBVLTGLECRjp8\nQR6TbFy+0eGLAA7qucaXJsOzt2NLKyN5K2fFX4UuGzggPZSRr6VnKkjOCiaj\nMW5iyBPD8WfgqBM+hf+aYgvPTSDycHGdp87GNdvFk1fkrZhlwTdoS3eBef+6\nDJ0s8pcocjSngk6ucvG0bZdCrh+9AbCNCT943m0LqfdNoq97uH+xLUnRn1Gc\nb234EhTn+9V+RqjX7CEh6ItHU+01+VPjzSHSQ5K1LqRmLMX14Qq1izitwkuk\nZ7GTIkG8DFeyznb6vdA7ESwSmnrYS3n6gS9ppZly6TVeaZVNzwm/lpTYOklC\nB6UM\r\n=pX0v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.f6bb43bf0.0_1596047079406_0.22820577764925964","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/theme","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c5447e9da1168f9d4eacb82d77c4ed7aa611fcd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.6af75f6ab.0.tgz","fileCount":30,"integrity":"sha512-bVCFbfTbsjpjo4ls918hlg+WE1+1JyBdcSUjNgq4kW9v3zBpOyq0aM9KMWetMfPXJrGaAWY0T296BJpE75dsvQ==","signatures":[{"sig":"MEYCIQDzat8N4Q4OseX0ilnDnUsDhRkQ0L6+zzm+QU/zzNc1gQIhAMhakaeZvhT/kKn+Ua2ps3u/Vam6tSMfJDLgWYyQwxS+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg2wCRA9TVsSAnZWagAArAgP/ijve9kCatPG6pwIRZV+\neFyysdaHAW78uq8zRsJQniTXOw+58utYY+RpbJ4fnIsW1N1DY44JTnro8fxZ\nRYp5iKwcU8FomkN2jrZnFdi5JhD0yd+u7ime5fCcSowSuEiju7Z2giM+3gpt\nQ1Rir5ijWQ8hgMBRy+ktxCU4kS4Pwwo/CiTkjDdI66wkcgaa4ItuE8/yaGFL\nMGmRpM/9ydcI1qblZ0ABUb2cEWPhWAfcxl2e1FKa7t9n4N80Q94xGReFsLTA\nN74MKgpopCvMSHl9HutwoXqlaRSk0tG40wFJk3Fbapst1VWp54Pc2LyZfydC\nsDU4lTqrrn2DfaCRJhO5OpukGvI2sNRqm3wG3gTyNHIyxdbj9YzSrxqHzz69\nK2ESHxp20esJpzQMh0eRg/zJWIvM7C4MEIwl932ql2FVe+dMD0Krqx4nDKzX\nX76P+jwvJy37HK2O3qjtZlHsxzuvfQ5DkyC3qDWpa7aibhGide2X07eDrsON\nej4RDKo5M5TEw72NPQU68AafoLBi3lpPEktvPpPlj9QMxTZ/ylLAKaav1jFk\nBUJmNv72Gk+pRqx/i6nLNgcrbr5oXChJR5HTJe1Nr92exPg0jGfUy5ejz2mL\nqMyS46YqBpet/PNh/qKnnJM1+VLNOmr4dOCQGUtP3/PT76Ng65kDh2oEYAmN\nEqbn\r\n=gRfv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.6af75f6ab.0_1596067248481_0.47861821986561504","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/theme","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a69227b8db72eac9b3fa7f7123bc2dd1b321aab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.42d7a65aa.0.tgz","fileCount":30,"integrity":"sha512-9L9eDO9MnhcKqiHR94Xi73sDZgEWTv3IDcWtD/QZhE6jrzW8zdIsPHS9wiK+iE4wzV6mHRrn5yPG+yQUVF6goQ==","signatures":[{"sig":"MEUCIQD7wmn+5WE8Co4fN5uY+6upysvaVWNyAcuFFchzO5g76wIgexvlERqvH0C9EibSsmO8Ze5vb33d3b/dTYNU8Mhj/0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg/GCRA9TVsSAnZWagAAGloQAI3j6pxmZKu3wpOt/tPN\nkmNcfUtiaF1Lou1QxfQjQvYcS/WhQo0m2FEIVMh0WVW2a1NW8u8suCn/coOW\nGl4DUk46ol9miDL5V4EFdphaOSGDwYW7uV7dTGpKPG86HhwE/08bN4VS6uA/\n3lUGUV2WqOK7fJjnlxQUyOyXF68Zb0ACfjT1rQxL52c3iaW5RnJsfBIDsKmu\ndcmAncvVgRzV55ZarJnDGjpQbatwdStwne6j/uYCbhOlmCrxBZajvphR5e1T\n4c4MawAgloq9EYiMqQD3lQ+PZD80A2DQmzUr74eZ4imG0rDV2sRILPRrCwfh\nSga4ZIgh8JSbciE+rUzabROFkzigWH7118tXrUSJ47F7ueduIYSNZQdPUWzY\nJcpA214kQP375pXpvQQV6zcmPK3tSjyqj4mgKTNE4q/Kld6Yw0MhZfQapoUC\n0OtWXAoPQql5/LEiPL3UlENCOEIi6NQaQYMWvcQiqNdaAT/Xwtt7lYtlcX0+\nnbKGmprSX7r2OelXN4Si7zOaMSZ/QkQeYyNBqpNSJLbyem4gUo+QgoSiMsrL\np+GMgN7ZQoa0CKTv4TlBye/SPtvl5c8XsmrEag/3BTqMNe7P593EDDhuent+\ncV3SjuyLMDVEUebKg8XgCZfUcPYnkU2AAYsLDuGGK5ryGxIKbLUyxOqgkDS8\nTZUh\r\n=8oUz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.42d7a65aa.0_1596067781901_0.31669700359523234","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/theme","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f21051db12b50bf8b6a7b506ab1df359e01eef4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.85abdabb7.0.tgz","fileCount":30,"integrity":"sha512-c5WKWWyHfbg7Q3Gx0GKTVxKGYGMpKoUMUs2Z5PVqXQnXdTIMZchRZZNNVTKzhE0unGEdPMzA+sCo1AL8fAn4hg==","signatures":[{"sig":"MEQCIBuM9zMQCHBa5Gg/5AuV+G26GyDEKxI95RZBOWU6/DNmAiAwZWYOvgxyd0HXAtSPwBxgr0ims6Mt0lAX1gUL/oV3zA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhD1CRA9TVsSAnZWagAASlEP/jiGzEWHW3BU611FkRL7\nXKsNmNFKxevffb2rF8DxHpfDtOmdPI55+PzGiIP6uxFxfQ5QlMcftprIc7Lu\nkgCA+lGlPyTOmoCqOGV9NUsSEgLnHDR/q7ktroI06VmYeoUdJzmOMVlsE/Ka\nwJqpplbM7YxDAXbtmnsZ+L7mOfObsPtMFHh/MwR+URmiqOgatL2Tp8K8LCIC\nBf4cDt92BU+tMIiQU2LnIRqCRZJg9ItqIIm0UiWWdCMj6gIFPSobSxeJyFnT\nYUDBJrX89C79AN/b9kz3x51ZDT8nCe+fhqjfTuJJCx5o2onIaM3E2DlFWjz+\nbitp/7+q38cLZ3pctiEcS3xtHAzQCE3PoWrdtbSCgXX/7IlfEBOySsJAOGlv\nbTDqwxVRE4w3UoIyzIhBBF/4G0/j8aRpSQVys2uiax62Gh0Ppg53fgByrUkb\nR81/gA3lbn0Tl9S2KedKonAhJpBxsGwvrM6Wgi9BRq553qVtNy9qNESdcUY4\nE2JNsbLfJYQD2tDol7oDb888yrTjzOAhm8clL4+9ZZ8js9HkJVUx+ouIghTx\nOasjpBC6mBsKUG8PUjTs5VvHIUcRw1HpXkENkj6Tb7Kc2kUrZIZXuViUQGt+\n3E03K4tJJmjIUc20ZbcY7tv2hnDu7c9jv/+AWwVGXRe1FPOKYdTSDl+Qneto\nL7RP\r\n=FIFe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.85abdabb7.0_1596068084751_0.9576088020228093","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/theme","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf7a1e4a53a55114314c42984b50333f534b2e39","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.49fb20ca3.0.tgz","fileCount":30,"integrity":"sha512-AWcirqT9HGaaU1G8TnZFA4aTDmNOxAXeg3K/yqm2WBJmgzAb8PS+IdCqzkN0gZTMX/ARk7EkCU192cIdj7/MFg==","signatures":[{"sig":"MEUCIASw06zuiAZGCZLOnqifxs2OVkqp0fUHehFeIXbuUpYjAiEA1cK6rSyG8t7lrGSATjB9DhhBIal/CG5gvLWhi1BZGZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiHlCRA9TVsSAnZWagAAU6YP/RkK6XCazvohPLFr6TOt\nJn+KKzKZhwO2gfnUAa+BYMC0d9OdLGwXEiX4hKyhtdOPfvYDS8fh0uI3cV3u\npyc08c6TQH9M0DFwzGjZXcRrdbrmdZ7w8rTb7f9FsT8rGJHavnaWHoiy5gLW\n/MZyPwV5dRBqx37/rOGjjA5x91THyjdzRAwZgVFMlL0aCaHQ5cZwldfV2wHl\n0pX+OJ7EyRD+ri+Ukhr8lNwhW9PBEzdC+iad4KW4RUZMmXABKot8pn+dsD/1\nth7wqNcCnMGrOAeJPY/BAZJeQgTl8AXkFVhnxzJ+JHtDnqaPMVHhN5+uyXE9\nw8VDAk7oo9QUkmqMwQGpspfRu2khwhbSah17KYbg8cmhRZzB51OBw9C7MW7n\nB1mvRqY+b0NcRi+hUc5+g7nvWtoDLkBmpTE0MmTa41Cz0FJ+lTKs+pjqxk6L\nVYaOQQo3MPCowaP6JyOR5+aqZ0w1/ALrl5g2O7lgNmBt96OV5cJcxZcOAl0p\nA9OBGu7KeJ03oSH28vIu8axhC59h5TMDfesI05lOxK9+I6rr8MMXiziDmM5c\na20d0+XuDE/86BZq+yoMPtmoNJketTY1UqVAEhugyQHkoIP3eIS2OAWtBBZ3\n1W5rhy/C17a02ShDkfhOkDiDoZGWCEE3ICGLCJCV1B19QBR9O7nKhzp12T+f\noqgh\r\n=IJvv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.49fb20ca3.0_1596072420957_0.9764698798483942","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/theme","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a622cb6f8e6c76ce932757f6a9c46ec77ba2fd3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.962d4abbb.0.tgz","fileCount":30,"integrity":"sha512-5ET1AfVfZzkFBV3K6ZTKTPGjM/ABu2OIM6MMz2mdWo5wZWXt8DXIFfvBCsLeTQ+/MjU5fp/GZByCFdHNxZ0c8g==","signatures":[{"sig":"MEUCIQDUOvd8QPit9gfegfmpNSImdwLr/Wq9d+5sVj34W2ERzgIgazNcpF35ZQGroPpASV0YV4E6b2x4FtCR2v0AkUAkzFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvDFCRA9TVsSAnZWagAABasP/jxN6w44lJb1n5rgP5YG\nvywwTdRTRWv/IHKZc4hzv4ituc1S7RIJJvbTrQ6M/7GNrOrOwygN0LdAlAD8\nkYB/cSW8xHQd521nH1PaVMW9CY47Dzw2ogH9SnFEH9nYoZvCBNn2WQRUrM04\n8DbNUmR7OY3pXY482uzFAx50Dl5pLcRS7wsabtbX2mc+TLmbXSR4mj/RJ8vk\nxj20/iPYzQPsvoTjOuA7asujRFoKgBqjFNR4cF6bZm8BF4UhZRiIXzJzzdd2\nxSXgeDhL1d3DM0utPdBsmwZsgPTa8MAM1teItaN+3E7lWVLvyl+/NZ+Q4vsU\n24MzA1eyMx8kNUqGKG2leHjvdyrec2Z5e7iZi7jFCVj0rk2mUX9O4CbVPKbS\nlhgcud79P+80dmJsWMAxO4xfMF2HYn4NDYtT8X5zAMrv/D6sR3d5XlB3Z0nv\nT/u3N32PKgNIRsdq8xIcZXAysVf08P8EOR5qUEqC++/Qx7BXa8/+i8OPcoZ5\nBSu0YqupKO+hoKXFOgYKiUNaZr0aziyekyTk5UzI2oT9ScJq+WOo+DtKd8P3\nBfQePgJTBF9zYc5r6kOwI0wN+JK1iZAvpd4fmYkpWBPrqhHWcc38FxWwIJoN\n61vdR8ftOIzKlRN/z5S4KRNOJaxHZ68BBV0LThXglqJ7ejKh6emr3ZkmTpUF\nQI75\r\n=yzSW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.962d4abbb.0_1596125380607_0.5299412208513563","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/theme","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5cec2747d8213497bdf17ba7724909c0e99e43f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.2fcee40cb.0.tgz","fileCount":30,"integrity":"sha512-6nWF6fugpFCk4X3xeoYSlspZiy+eLpethjVKye20bHGdW4ODnshcAfIYYWLTWMCo0jNF8qe8C/7FV/ilXOFzew==","signatures":[{"sig":"MEUCIQDnQJ9T83m0UwfyzvRbme2hR5xpjgELrypoJ3/e8stckwIgL2aVpHMouvIXGoWY8HOdrs/wEZjfNNdIPHvF6jedc8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwF5CRA9TVsSAnZWagAA7GcQAIeq1acRH/SFBNTF0nSU\nXTTdWt6kv6EfGgKS6gyeGW2BUxUWnTh55eI2T9VTKiB0HlaFOyJ4UFdQ7age\nOVsjVkjnCRuhsz6PjU3nA9+SFnFIW+Bx66o0TqXugHqpsWtHZzI3cseRLMNq\n/WFzqzm9z5XjnMHnG5JQFZKj6t7KzfASV9KSuBBih1PQ8ehCogUJa/N7ll1m\nkHYuVsqll+pJAT0vM/mjfB0kwAuukaHr8ohf2w6qI/upHFGbOuY7aAiPN7QN\nsNi2WFuX7BcXdzTdZ2ecn8S1JzXOvEX5ineNFjBmjDXOuMeiYMlny92DIMPg\nz85tyjyW1CCH2KhAvdOVI0AW1kpO4Nd/46EsccAsUZONcoXreYmhVQawU1SH\nuzhQb1avHXSoNTKygjdpCJciEMVh0b9YnUqZ4Hg/5sAn5GjDxqDhW7QiaT3L\nCtnB5gME31fit0E8LTDL11mBjOtke+G/SzZg/qw4gFrA6sVubG7u4CiYMLHY\naw9FWcdxzMy1jbwSlDvmCd4MZEemKS7TCz8l78P6QrjBhiE5aXQKoDs9THBA\nwYos/EjN25jBH7aw++T2QfUGnx1X7MBokFaCf84Wdraa56BmfUB3yTqmR6zE\nJYbO49/bP3mlzCcaC6avFV651zDvoRl+OExpsd1Fa//6NKPjm9q1rPnpnljt\nOel1\r\n=gt9Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.2fcee40cb.0_1596129657477_0.23176985519224935","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/theme","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6b5b0a6b7c0e13ce149c3a73b4bb23c41064820","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.bd5987f5a.0.tgz","fileCount":30,"integrity":"sha512-GPjVZ9oDbg9/0kjP2PaKPqqIhWgzgxc47d9520ITLKeCMcOBQ07CnePBFAmrUhCY+zauw6ospclIMAogOxxgaw==","signatures":[{"sig":"MEUCIQDjvmFBKF8uW6aK16aMhmeLLp8/svLtgvGrV8VVpyFl3gIgdahWUtsQAYHvgehzrICorYwdpGQoXG6JEzf9GMz0qrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwdACRA9TVsSAnZWagAAxCIP/2WZoFRvYyDxjIHaJcTJ\noxDb8E2Lmz6lsa1a3dKwuE7wj3k4QnB8LxIAtLIe01pIY7oRhq+rrA53wgn8\nWS8lH12vet1QtWolAArojn8HAyQSDfoRQOU7k0d3hK0p0ZEqzT5W+V/IRqFr\nRi13YZZJpxhUIiXh4aP+sh05ElnHn6gDQI1jfDHsHs3mdlYVtRiABUCZY75y\naFJrh6GAXAWW0Dr4DKPo66p56ReVUSjPzCVjEAKFs3oGCaTwojR1EUbGgkjI\nUA9M34MeXybuWb77NSVifx2uTu5JILdLxdQbnhnTzqF05OTLVFBRU62XQ3VV\nQExZrjMNlz8mIN6dIi4o1UawFH8lJg2/iis17alOdhQTFqGLbzAST2lB5Ojr\ngOLbw/AwUfje8oodM28ZlRjYVr56LlQjLg2RZahNCaGfaSuNq3eMpqTXzYUL\nqj/DoVUI5V7D/f4Z/SLtIznt+vZzxb8hfnTjrkHGDY4stAVFy8GijVuHwsJo\neB0IQG0pEFz6/ko1AHWZL7DvswBXZ/g1P3aB+nknEjdqMugW4r13dqKV1Q5Y\nNLy3n8Vu6ZGtQx/Wc2vTh0rJ6SSwHJKsuJ7XMrN/0GlDOyHqApmU+BS8el9u\n7pNMdQ0UBUo6y4udN3jtWvp9CniMfbmQX5sBbWkj+/3i5SeBinqpMcw8CObG\nQr+X\r\n=LrUH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.bd5987f5a.0_1596131135887_0.1283341492849981","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/theme","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5a2ff341c4fcecbf9dbaeb174396e0ef99f45a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.005e86a9b.0.tgz","fileCount":30,"integrity":"sha512-cPJzWjmgy/ioJr8T9yope9qJzOqHYtlz3eRL3JktoebiZit65luDVH4V90YyUIYOUvmymcOT+XC/mWWyXUOqBQ==","signatures":[{"sig":"MEUCIQDnZn1XtzGPgnJoQ2bf4bYUZRaB2Izodg9+5K2n2X0HNAIgBOt/vlRWq95RUNS4ptTgi50rMfunzEImOa+6W2YBP+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwpyCRA9TVsSAnZWagAArPsP/RRW+6MK2m8s/azjOXNN\nN0U9fDe/sxHHzH/iD8gAM0NiZyowU/KQ7TybhqqSlbow1Z2Og9C4WP+xqZfY\nmQ22HtOiMJHFRgYdKRqyB53m1KyIryah9qwa+l4SPhHRM43IGGicUDm8txDD\nEMAHJ7eCp1Jv0Tfj9wsZeyxyOhI+ToVeU+o3XkEGpqW1vsLT3N+CFjeNBPwY\nGbzR8eUBvGUGn6oKNiP3+r5yIOSjnaPZ+dHKqGnRXJblwqyiyTALgR+FXPJZ\nmK4yeUR3rngQwmGfEOkATxQ240rgiABJ9QJ+VCNPKXJ1abXR5g4xoBvqIfe7\nkop00m1dzL5kpNCKDHJR7VMTX8VlRgKDh5XbGjlng00jqC4MXe0O3cUW/iUB\nthA/YmrXDlbKrAMG9q8U8KDMmXMaj4hAVSQLxQj+UTRvK0PKWY+8ypOLNiMD\ns72DWQAQ3S3fdNi5zTXdt8ldF+x/1ZedOcM6+4QEsSOl6FuLGD4HB8n1z9eF\nGVNdYAd8I3K/kolAVw9F8mDiQcYfETOxqmOGu1GUZ7ENXqavFfQ1rU+s3ZlF\nrzPUJygwVhQbPQjrYCNlbSJM4L0c7KMT13JerIeEtHhzefbdKerUUWzUUtMt\n7i9+oDrGyWEVWEM46Nu51wvtbedydYt6IvvlzXz4xltmocwkm21xsLcg7Ig2\nggI0\r\n=wbF8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.005e86a9b.0_1596131953637_0.762830638540263","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/theme","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c573472154cb5b281023699c345c181765f0e698","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e309c7c68.0.tgz","fileCount":30,"integrity":"sha512-674OtNsWlPhQcYhE+/gj+pnqDS9dYL3uW6T1Hws+eC6s7bHWEsTRk8kL5jFLJAFzDEJYlyAbKegZUOZ/a1NCQw==","signatures":[{"sig":"MEYCIQCBlPw6PqdgPbR1btSN2Z0ggktPGp5kuqCVJLXebmczZgIhAJc6iYsT9OYR2+ZeyF7WTHSNFLW9bDqOdExEn6LOLKil","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwx/CRA9TVsSAnZWagAA8J4P/0js6kD6z9L7W0npLKC+\nNWe7bbL+3wCftukNQQmhotp22KJ2bwkP35O5n0AVT7Q8FhYiaLCGfFzW+SqU\n4l31DZkVY8KKoyKPiFa9Ycn0480Y8XD38YjE0z/RSC67g3tnYt0ga35HzAqI\nJX/p8QTR9JB0cPoVvNgbBQu8OQvfcBVJMW40KWnnb3XjiU1OoiptPkG+4zSm\nlLiGiVTRxG84CBGr4stn/597HXGfyDPWtOKOwr6elfEVYdyMDO3yzn8nL5xi\ntLLWZ83NMMqKmREQEh1riXav5EaaBLIV2kn34eYp7MLr6mBNRYLlo3W2MY22\n2EXZnU5gxxK0IVOqMMhkXibiu4LtfuWja4MC7Cp2DStFxY5kvMb2giaWlM53\nOYZE7QJElo5ldCd0AnLM7qwoBU+XeUpLhBzhv4wJTWwrDYKnpUfy3k0Ob75F\nueu2+XPOds9lkeUovfvzkwZxFODK3fnF3DHH7iN6uEvlQbae15hEPFJOJZFS\nTAUt/576KXzRahe0aRVcirgHRSXoowdCUtG1Bl0rB/xbjj4yyGCYjOhM8oDC\n1Zl1Y7XsRxOs7IJpy+aK7WnwksiRz4HFHYfyFpzOwXeD59/Z4K5TqZw9IoHM\nlHYbC7lwvBhDkpM2gWQwOLXl0B9T8RWfjzxtV8Muv94G9KNcSI7mX8UX1D28\nUmLL\r\n=tHyq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e309c7c68.0_1596132479097_0.914713687040186","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/theme","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cb0a59d180c8c08c9a695eef64656c3d3c3a91c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.935a51cc0.0.tgz","fileCount":30,"integrity":"sha512-FH+7kLgIAMDQNH9vQTJTC5BRG5PGguAbDNFbzZ9CMhdFSW1ONN6ylwx78UZ2Xwck/zRoHVZxjlsYWjnMT4FoFA==","signatures":[{"sig":"MEUCIQDmfyKv2z/3U/bC3ix3zLcZ6wBZz0R6y+ijV2Hp7AvUVAIgF9Ynw4+Fz4UFktZY4TQ/wbuaH2cLRWnqQS6CwBNfOKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw9BCRA9TVsSAnZWagAAqmkQAJcYbaf+bm9EqMlStQ5X\nYUPia64oSYB5/4XEcOy26P2DRCDK/zeWE7hJlis0p3vjHjvIyGyxbxfZNj0M\nu5ufzlfPPOEBERCF3XzlWysL2scBiKA5nZ7a9X8Ac4wOZi130mNQBOWf5ZrC\nIPbrcWVVRhO9hD7C1TKfRxY38VNcShD4RDUc7cM1SVEfSjCgXsitiBXZlfP6\nYPF8hEP4+TT6WflGtsUzCq9LZKVqmRY2PKcQ84xzhI9D6efaQab7ZlTyZGdx\nEKteocKCmg/oq3O/GqGtiWc2uO4Cjyg8DudampAyay+CYxXDjJDDoVzgRbFo\nSTi/USUQV/Nr+JYB9/+cU4vc2UKle1hOXXCWWTcl0AV6me8cx7nVNkjnW7IE\nHeSy5hiX7ImN4GWVi4Gs/SRNExGmwXpqM1NzPXJUmfknDAsEDU3OIOz18+x0\nzvJf0gWGzKZ6fAo24ww0ChmEaN8Qw/KYqJJUZ4+rmYeBZy+d7T2F8XgVdLdn\nXC9AwJK8A+4gKFFIA073fZ7BfEFvegL25t/2x7ikCuyxnskFKPG44zTUy2O+\npHJEiWT6SW+Po9XnCUU6Yn59PvvsrLWtV5SZAsXWerriFuWW8rJ4O8zvI5oc\nsgqjGyvB8H8/oyeiElkdw6oxTFqIAC8vM3Ugno4wLi6f0dDaC+c6GqaG80XS\nsZjy\r\n=8Zyo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.935a51cc0.0_1596133184840_0.8326534966449921","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/theme","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.74839da7b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ac2254a842e3cc1eb024395a8c0c69efa00ecbd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.74839da7b.0.tgz","fileCount":30,"integrity":"sha512-gZ6dAkUZqeGt4FmeedseMZU3zAvlyli9wvMhQIa6DCu0O0f4bvPOgh1wla87CtCZStspgSMRgT4gKu0RHttL8Q==","signatures":[{"sig":"MEUCIQCO+N6bccD1ROhPpPdUjNIrslzbYOtWYLXVR5mXWlsmCQIgLyjb1Pk3VEr/txyTml3yHg3yR4irRK4Wowz3esTpZik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxHSCRA9TVsSAnZWagAASSEQAJ7UOp0GUtxMmr0jBY8d\nb0Xfw728QCcAmgAuJ5sBVBBcfz78ZeMcu6PdEk2Ws7rpRWEnlWvBSiJEqxXo\nrF7A6LtnND8AAU+J4ylKP6VmiNqSuelrjcGtP75XOV+V9FIvVTZXgFYW7xg/\nbwKlD8pejgBekHLHQLmsM4Al82clQUw8oPhQ62v8pvogu6NcT36KYk+2Y/SY\nFHD1dYVdxkmpt1+A+MFqXmg5HHbsaqh9blXr7bc53RvOtFhSWhYfhzf/TVhw\nSPcsOEm9hEVJ4Cdkkj5jGvluiI2CGppmgpXhe6XtNQgjQ9OWA9WdsKh/DhPY\nEiJbtI09TD9oeyQbE9OT+hMF9+yLYae+oItNyrwGmsk0o5tiLl9hDsfrP45k\nc4z4bSktPKnu3S5EYDnJ9GntJT9m465xkSLF3RAC9s9ngjhF/zrKLCk8d8yY\n5V1ByUkIGGgr0rt0/uzfwvVtCW/8zbT82ZBv0+juLit5T/6LSTtz8m1i9ulx\n9SMDvjFaczfw0stW6x+TVdC6mtpGChUJMqUOD5h3cgnyP7C1kqKF42dy4AkL\nEaSNpBb28rdU/0GszRZntIC6YDx18IGhalJSfGrfAu9IvV3npcpRHv/uiIb0\nQF9FTu0uDv2jY7dryTLS5nPngN+qlkWAuTKd0C57GDVRsdRdaZKmmPvrPNDN\nphST\r\n=hbcy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.74839da7b.0_1596133841756_0.7233800839361182","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/theme","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48ec3cbcfe7affb0db36c2a960f7c1efc9e39df0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.f041a48c9.0.tgz","fileCount":30,"integrity":"sha512-h9Y7lN4ujBKVfj9LfywfsCq86GQ3d9hfFfFVCDb3pKnQAoPMq25BCI3MqjI7emSVMrwPmK1tPT/SfokMfkagLg==","signatures":[{"sig":"MEYCIQCwgCmRZ21bJe22cGBJjNMI4MgXEE5+ribVyzUwu7AsEQIhAPk3oAtAmwo7/HT5Oc/LmAKg1fOa1Qv28cf+R140VMJi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1CoCRA9TVsSAnZWagAA0lUP/0AVNiVeLvm49TDA6kUU\nwH+UfwFnB+7uMQEXPmnnlresHiTrwkYqAwKjFxPnPLcQdweLd8QzCtwsx7kI\n6z+7LuFc9CLcm+o/IPz2PKaHdtvn56BYpnUASWZaUJpJuChbzIN0TAN4iGDM\nW5SBH6MwiyWk/q3sdhWR0xes/b/iUA91BXw2+qOdqL9gHjsfBBoeSenUqt1i\nMMCjBHiMAa2IQu/Zl4LkhnbdXj9bnyooi+3QJntNVfmL6yaNil3DKO7WKp9V\nQqTd7hDSHMwnKQ6PZBNP73Vw8C0chrzuW4xFJbxW21qBVBHhF45rPGD8yTZI\nPMh3A7Cz2Xmv5U3IskYg4xYBe1xOXVL61q+BZ3gxe9Pdg1njg9nwwTscz+qD\nowMgEitBZRfnF89h/UQw+hX5iMuLyo/tI1igIOKjMg8TFYVYoFmYGSxoqA1S\nH/uKttCsMPgMECYVOvx573Uid0MVxr71TPH7RiQ5xtY07ZqHnjcDPMEpscsf\nemPPHcHocTZCS06bIDkhQfbb4JjDdIAyf248p5uhD471bFARjzHouDQRmEpY\ntNtCfqIi91vY+xnhOibsAvr4lyjrUz10nZoGRcLbLbz8rY8CYxdyaT/vTVyC\nmeV5JXohXmn3Sc1YOzAXZ3gbA0DZ2dpIU7QrKFYGy1Vv8V6VJA57ecmHxbRF\nPvjF\r\n=SY7s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.f041a48c9.0_1596149928021_0.4240472151119321","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/theme","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1482eedae27f3107d0b01812bdf69b3c0cfbe962","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.fbb1381e1.0.tgz","fileCount":30,"integrity":"sha512-68hLab3Uwfol2HicrBIQKD4j8HtspWUDjzSeGhALvZmpyZHW/hugfkbn4Er/sI2DxSiDQRoM8L/jIFKqLQu97A==","signatures":[{"sig":"MEYCIQCt3fQgEKP10As4I0bSpgvUmHN+zLiNg7n1vc/xtOKpngIhAMO6HlNsh4n0hGhHnWHSymwN9TnU8mEiT89Y4LJyVMP7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD2eCRA9TVsSAnZWagAATicP/0mVRAlBtXWIY7Gx8h21\nMgMzYYqPnZZbqNO6YL1V5LNKU/ANDkrEJMyXlN9KnWnAM3xa1l8ZNgC9GzGw\nn9ZBpyCJuo/2iYW0ugN56pXWSlFHeztTWqagOjEMaOdGN0qbVuCebvyAI/QK\n0dzF2+L+cERhpg+jeh0wVvH6J7LLjUssLsiOiFIrgCabqdGkuAUoArGrlMEB\ny7p/aLiroW+XJnDt3AY1Qs3nmUlCqf4STy1PjpwC9gBOoftC1l0Tpdm2lwsP\nu8EpvtcmR4orevU//f/9aqawAAYtP++oHxdqQIPJdhLumw4BlgQj7b0CD0Am\nkRcghodtjm4CpH2coT/hkivyWIcNzJnNps5Xm1eBoBf8DhJXHZd5n5nUIbQP\ndB4kWGN49U119Z5T54X4MXNr3vGFupHjAAhC0raOYwBzRBOfW3b2S25TfWAZ\nhad7u5hndHZ2RE2GUMAygpW2V37ERVKlPKjBPvl8p0n/m2Zc2zPC/ghpnq88\nJoDX9rkurmLl4LGRZimqamYko/NxVIcB/6VPCtiDwJbfBTxduZHRCW0T2dFE\n6FG6fyaIAV47QH8JfYdjePVYUFVfhJml/YcW20Lq7iP/nRXwoohktUKn8zUs\naSh6icUXJA2TVH1xusNmm8exzcmuNkdzINb6SWe/nroMYH+vee/5UyM1nnF9\nPwzU\r\n=aQ3n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.fbb1381e1.0_1596210589768_0.22036350586393771","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/theme","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baf504814f2f69fc8af12a8df3c97dd403d1b23d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.7f61d5785.0.tgz","fileCount":30,"integrity":"sha512-OnclDGLWz1rc2w9lvm6gpn42cDW03rIJuGsY3ectEBPf0zDs8F8AgW3WJvrI/E6HZkdIX3oFzeDJ4OXSyV5vIw==","signatures":[{"sig":"MEUCIG4Ra48M0+8NDUxAQkGpLCGMxLtyucV7nQOEbZk7lmsVAiEAhPMsWvbOn/jAPwzG/wsF3CGOEVM08qNDCxIt6vrXKtE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFNSCRA9TVsSAnZWagAAQCEP/1/xZvUPbuyL6EyMLMdZ\ngzjRlrqrq0Eg9A8o/vl7hEMpIxxip8ORCplKO8jd9TWOeIaHEDUwaOYOpDrI\n5T+tTNou8bZZ5bjS7sun8K4iFiEkMg5mAiM18+kuT/+Yi1ehRgfZQ9r2XiKL\n3LwadAiLGoIfpJGGEcVtUHoEhAChcNDRSJUw8Fh+furf9IBwuPS28ppmhJOV\nDar3H1c4ZcSkFyCom39NRwOdNAmHsIAkJALvr4c+e07fB9ViKJnIggvWZpqR\najqEilBSOIyydqQQonhdNJffIF+ndKPdUn/9QIrWnoWDv4aPozZPcPyKwc4T\nVY/hbVq2k+kSNK6XFEkQ0Ql3xBhbG//eqQ1deTIyiTqNm8qysb+rkM2ori+i\njJQOQEn2aNA4hbeWYN4dzkiV9FytPDA+bFTSOYTL6KUhc5Ydtatjk9Yekv+J\nHWeGecK+Ky/Z+HlABZ2/xVtwL6YOKdr/imZTstwQ8/mz3O0aBD/9ltIy6IXd\n1/UBrjdG2I08pvxV4ig6xnuS9GzreEuu7i3khptedDNQ4LczaSGaSz3u6fJy\nbdTieucfLuFukQXPs3t9/Plo++pqu7d2re8ewpXyb3nCo3ntL7CCLeHRCZMn\ng7BZg4rOrnIq9Hvg5EcPs0HwJv5mGFEsp+j5GgAUKDWNvq+b5NQx1T66OLKq\nKfJv\r\n=YpBH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.7f61d5785.0_1596216146341_0.8150862876213296","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/theme","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55d40b10bb88c5930d74dacbc47864ae571bbcaf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e1bc84d10.0.tgz","fileCount":30,"integrity":"sha512-3J7XFOmujxxi9oB8ZPlv/x8DksWmSRvDJyB7Zr0LWNjhCmFnfSMzxUiVRTNdQsU+TvBqfAdtvhwgpZxDZCY7ag==","signatures":[{"sig":"MEUCIF5mlu1MEYBKo6wgeWZexGwhQ7opDxeCNk/eF69TPh4WAiEA6VU6TFRe05py97vO8pgzud9r5Di5xU2FqOBLZcHun4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE5TCRA9TVsSAnZWagAA0g8P/361HexeKauGnC9gUpqm\nxOfjuPCMVDEhyVqTD4Bvq8lBIQc/UG/ur3/CFt3SPuF2qx6omH1viPkrPPoM\nEcudRM6+SGiqgMfq8thDz+v/r0m7zh30y3DCV++L84YIzr7U2USy68UxrvkT\naI5/fHtDkz6IiAz8S4PEhFWdMGR9ZJXDrq4ZSHEm8kKbDwFcLz+n0hyUzmv7\nvPjQFvNbb1pRceE/q0EmQxGJpUhK928xxNNSLtYL5J/M29hj5ulR7bJ+u2jW\na+4uPkxTvBABAtwj/AnSG/L0isrp+20VWJeQ0UzKJEBYZjrgdbPEjontT/uF\nmXQSGR0C1x8p19O+62AK8cVp/ZyoWZ2rPXSznmaUq+8qiLQteoukhr2j89nS\nnWoJSTFN3yaBGZxfAI041IEczaj2coOVebmMwxyQo+XuMtLxgO3+KuYGSDp7\nFYBu5anxwl9kvcz3RygfFWTs/xwDEO10cWNVHbS/ANZL3bU5vAhGrO427FL2\nI3+K/NIAC44Qu0SsA7fAOSpZ3iLm9E8BHOhqLxF0FoJXlFxE8bEvwKMiwAdI\nMF6jzGSq5mr0tbyqhShfMXQdQ9r+Z57U2sZnMbJUmRY05nPYznlV0PfdOSfv\nlKS9CyAtJMWlFV3S9pVV7fsIIoXBQMXP0EKPZr1dg+5iC94fPJspLO6Gu+vm\nkZPW\r\n=LiYX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e1bc84d10.0_1596477010872_0.2282706009329234","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/theme","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.096a7a066.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f657eaa545797ee3e6a2d96e4a61f844ad3dc425","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.096a7a066.0.tgz","fileCount":32,"integrity":"sha512-FdAUEjq7KJ835sobJQL0w0XWD5PabXl77HmBuy5F3bEYbYterWOutvuHbTkAEN6sTzgHCKhdoMubRxMKidqafA==","signatures":[{"sig":"MEUCIC3uJ7TxtFN5aW2To8OPPoo2b89IR4zxgj0DJLfaYZKSAiEA8wRlDF3mgoM7VtJE0myshqRPjolc/VUu3DdD8DiIS9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE74CRA9TVsSAnZWagAAPWIP/i5B3Id/2FRd3lBUly0x\nLyOc55mt9G85Su3jZDb4EfRo5wmg0IOptHQH9Ghh4nYRNok/s1Dabw3POcQa\n2EpywjP/OIgWDh2Ip/QifgOUusnD8OQMVl8lDSaX0uzxYC+2WTb+dLO5mGNf\nQ4lcXsz3/V131MdIFg9lphQsT8VKU5tVxrfY7Nk2ae+u5KWWjI5QYyjRCwKb\nVrK/Vcq3uHopWYU7Koz4XsA6kZyJwueEWEXob+P5a2RTMkIqW7v5LSzFV6ak\n6RMvvX8V+urgE5RIX3yS95bpHB2f40Qh+UnAuJnLzuaz8JycnBxgiVLD4Ekm\no+E+KUb8Nbx13mlmsOyzpETQncqZKY0oXeCmm+rx2u1zV30PIgeuhv4YxYlw\nMPPodrdbxuc4xe8QdRePGI98E6rC5+vlHOTQsen5FRxD+iJnGTWdOmLGkesN\nwgTa2XzGU+lWP/zPhSiaUX4GveleH5ICiflvD7WPJWfsIG/RWJODWiSbqVLl\nObE6h4gZTRFSwXQOXLrxH1/zQQ12iXrWGmKZc6TumxmsxZztumbNNvLeO9vq\nRaRhKe6rYF2JBzgD3oSNfzjn4RHDXTFP0FJ/D9Wn29/fHmF/Cw/J+1cjKD8/\nJ0le1a/9pO4yIL7y04w3hNl3QqpJnjHuNdU13Rt3WmLAXKNs3ZYdMDgGoPl1\n+pb1\r\n=UTg9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.096a7a066.0_1596477176204_0.5988069566251515","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/theme","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2a4f559a5847f6f238cac20ace6771fbcc202e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":30,"integrity":"sha512-nLubevIOb9i93im95b4aMOFTlunh9f4kuPnOE2UyQLy1k/8cNjFxZUqIVSrnoefslT1KlBb9EQrrV/dbW3r8hg==","signatures":[{"sig":"MEUCIQDwnN8ULjRRTOWm7xWTLBc/urJM0Ng+f1EqZIcR3UADmgIgU1A1nBmqWoXyn9l96lVvutKKfDqR9abuvW1s6+6V0RI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8ECRA9TVsSAnZWagAAPdQP/0Tw3oiPM5k9ny7/vYK8\nzHAlh7kAfqq/7mXZRByLLckdHVP2Z7UUs5GbpdO3a3cXewIs1pGwsKheDd6a\n6dq6Z7w8tw91VqBOpLO38tHrERfDZlSKlK0I/ewQ5JS8BFIPc7imme46TsYD\nyot3T/PXZ0d6bvFb9OjJj0HWyH3kflHsfo23TTbE1VQ9K+GbZo2srNaMvFj6\nHPp1gHsrAmPrK1fFQvgt0xKB8RavCFme31/XFOSJpY1zt36aUKhEO484WlQS\nsP/G8jQUGjmR7JHWsglQ8ME9tiASSGVMdzZdMisLOS+P4UyidFFXmk62/bUL\nAmH4ZDEq1bif9Lox23s8PAm5M4siVruXNpi1FpPx8eiq6I2lJWrpGlprYR0B\n+zeaQZ4jJCS9xnRA5KxFrWtBmIchU7V9yLAYnEUJLWEckp/FRdRxnxb9FNGR\nsQIgVJs7rSHB4/9ZYLLtqcQNnjiF+mrNIvdsA1B8xZWlJj9Q0GY3XXVw62e3\nuCTlMmRfTi0z+60cTDedJWVGx7g5HDD1uv4bZRG6CtQJdW6f3iYHIl/Y2+q8\nVPRiDgcAeqqStvJr87TAtxaFJ5UoJuP9IgBs7LLDObs//DZoyVgT4NZsbO4Y\nzKUMZsSpYIrm4mc4RWSVsCFDEsx+d5wVA1yJJkMqw1HoWeTO3pKhx6FD8XnI\nMpRC\r\n=tEjG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.aa3a3e5a4.0_1596477187614_0.784022149074276","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/theme","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.5903d39af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef60b45dd3ef2a67f653105380cbd8e5f23f11f1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.5903d39af.0.tgz","fileCount":30,"integrity":"sha512-iMOpJKAjBpZNAWagT+VEhFnq/pGKn5myIPdBZ5qLtf0Cos5e2D0Sur/e7FSxYDHb63qVQA71tECmHPRvdUeATg==","signatures":[{"sig":"MEYCIQDuI1bUHQKsZJvmqV4KHUWe88FpuholJ38TSYTHt5FPvAIhAPLYLmjosxmRMng4hU3j07X1+mQ/yeyMTcnkqT9PZAzd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":106161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8dCRA9TVsSAnZWagAAoCUP/ibqsmMK99pVYTOi7xrX\nzouCrgqOrgl31RHeA7rxIODvheN8I8xrEY77yBm+pIwywZeUK6yzqv7GdB4a\nHCTG3DvkUoIn90yWl/WzmKq22GFMkrTO45DPSq+NTFZ0o0qIVu4lO8Hd2jJ9\n7a5N2rEdp2zVmvGEzs2zPwRMc0/Zto9rrQ9cJumFf52VDyg/xKLQW+58sRpu\nFgQkcz7+8Q7zLL5nmGhJ+84IxGqhYp8GEaZFBuNOhUjoWKMoXfX5sivKn4LQ\nWQw5SU4j8ReZEHdg9g3ygRTxipYC0ptl3QHoAG76HRNCjL03kjpaafGaM1JV\n/WS2/Qk9f+t8m+2fUEtx6Tm8wh38/vU6RqJzbxpXmGT3WtPH19D/Bqt6AGfc\nQkuDEdBbae90DkhyRV5TgT5B4Lmq3j4yjx4eQI9FWJmnZVNGuoLQ7w6/9zul\ngrHVcbizuSdcWv3ltX+jPbQSpWZuuAtGICaE2DqjyH2T/Wg+IJahnPyTyLhW\nV5JAVOWq/VqT/EvNewnfOW/7M/sWh64+Vbfk1KoosvSe4c25P4BUi0yFxjBX\nbf04DAq3BHJTqjiqsCEpyKlZL8alIMJpVwzNOBiFJXHa6EmlQHIllsvN48r9\nDaUl8c+llqUJO8shcZrhyOIxxictPlGBatd8HX68OVGabPI6QFhRsk01orcD\nb6QT\r\n=ThEz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.5903d39af.0_1596477213137_0.23989649902813337","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/theme","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.72258f898.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3680d3a1b4d2ac4c061e6bfaf3bdd9182046fd12","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.72258f898.0.tgz","fileCount":32,"integrity":"sha512-TOo5RXxxo1zEZVkVRu1iE75f1ydfSMmFt34DWGLFhiwJN0tQbUrw9Jz1szGN4MIXPe7SgrMeZzQjM93fUy2Eow==","signatures":[{"sig":"MEUCIFHQSEiVEMkOga1iUY3jInVOFcscS8JyoFcXcoKRcP8DAiEAoDokarEuEOQ0yRZw/N2djh04rn+jA07y6nWWiyhXvKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLb+CRA9TVsSAnZWagAAPOQP/jzRc7YK7REH5LCzUTxO\nnK/6UY5rXa+XKxoPZtHZ4+CEZlwHjubKUsbj6TEGScKClv40njx+8JpYX3cG\nu84Souee+i8meoHppTMHJAD7wc9ZmwcscU85UEm/R8TGzEziVoEJocESi3Qy\nvQLBd3uhPccwhABPsRjQ67PeMiaBiExZ3q+W7d9jh5Iy3U1sSS2KBC2zpZA1\nlxkLfkwfN1pnXQpR017xtlKQrwzXYmlmUFkQz1vFlMzBAu3XzVrs9QutLNOw\nN4oqY0t+3J965F16TB9cqKWkfkaAGlVM9X5W/EtVbMMUFSQHRWO022Wsqtfx\nbIZCbPwuIPeuu4oKH3pttNIN4Owsg6SqrsU+x2e9oC32h7/Kesb0mkVlkWzc\nTsqGO6H8btOq2geBjIIxeymaMZzuhJd7LBjCI95FFidqiaYBU/JGcNImjTmK\nNecAQdP7EpVtqZ+2kFmA+IhapBVkComLlNg00teN1pRXtEBsfYpgCoI3rwxc\nDvI1lu7CIt3ikTD6WCKvK+UDGyA31E1PLd4iq9k8UMKxbtce9BT4SuqCTWxY\nev2xF45lhBQd/2HA+6pmHb/cCEFynmOBjSk/wxsRGVuSj5AYBzjWPdMTwPCD\nb3pKPkbcTIksiTeVhR9ZGHVxlROpE5mAbPgHHU347qS7ejCCZ2Y0wk4EIo52\nZ2Ih\r\n=FlHx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.72258f898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.72258f898.0_1596503805724_0.8689733166576992","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/theme","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fc74c9507683c4ef36cc01269c4fbc0d4e6e46a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.1b44b43c8.0.tgz","fileCount":32,"integrity":"sha512-sDb4EnJ1UFia7Lp06SCeEzKRaePrbo8uXvjpclIEzAlSpKr+YTdXQPsstn1UZVPaMUiu2lIipWhStjKbS2COWA==","signatures":[{"sig":"MEUCIQCYBmtbVj/RD16E+8cQc56tFn4M11vHDDN0+22JnIbGdgIgVIMxNdoB7OsBeTinvo9TiFEdJkUBDcc0AJOYz4bTkAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZEmCRA9TVsSAnZWagAA4mMP/ArOmELA/3Ls7Gr8eXF+\nc+PnEhtRuXWRR/3sloOr6ILijNrZB/yKhATLz9feUDKqZZfcDiPoQ0dax9W3\nnP3k7oxf/ytDhpKYf1Fj0QkBzdrRNWhX5j1wkogWr195OYpGWr5nuL0O/Nj2\neFecREPlypofNxp0fYtSWiWp1n/Lxdq+aoESxedPwXajMKDqt7JZxZriVuGY\ntlTpX6LgNFq96w51uaw5XqkKiIt/8sGUdVj9bn1Sx+3MtYftGpXz0IBY+QSs\nCTRh428VNQn+j1xKfE2GjJxD5yVvEkCV5oo8PE2MpOceK6GISkVfsTbgLX0F\nxe9JHI76RmK4AcY1ExeXv3eDbfBbPXYm9ZZ3JDjwFvrN6zJEPPx4mLH/VkCb\nGLPbExulSIJZuIlo+0f/iVZTz99JWhRzzmzpfxvBYH86LyIgpUtgDAPmEBfj\neXUDVwtp59CvIQLpykdE+2wEDHYbIior3xZMZtFgMjuzeB3U+nY8XQ6tsBoz\nBIe0lUJmG6NX/o6fPWvgPPi4SiHF8DMiasIJFV9ZP9qlmWedwH14crBgxn+f\nzngvCqoLoFLHfaXwHYLjcyhWMqBYC1UaPGLx1Myw23tMwz8TUYHpmXCuR3pT\nVP94AOu2EmcDPVRe4j2ESdBUkW4N9Cak6Qdk7/xBEFzOoHd0BZyXrVnEs6Q0\nFt1a\r\n=rR+T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.1b44b43c8.0_1596559653851_0.5052185195191339","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/theme","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc9313f2839207425b65afadbb29fead3b604021","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":32,"integrity":"sha512-TPKy+DEU1qufTqA79qXARGTHtUidyC95Pj84AanfrPZvjo6yXiDQkx3g8Vrzhczd5dOAP/fFQNM+xAXO+VhGzg==","signatures":[{"sig":"MEYCIQCu9mU8Rc0sG03amJKpSvdWovkeFVms6alWVHglnJpTfgIhAJeAmvMajbd+42Tmtc1mGEUPFmlBugnKyQ8+ACPrbd2V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcPJCRA9TVsSAnZWagAA2pQP/1je9Zt3aNmBtc2OJK32\nMTs9ar+ILIOH9KwaBZdY0123zUk2K424ldvToXSPLMu90ko1cvp6QuOWF5YX\nPpOz8hmY0KiG9SFeszt7dsmNhcXVGUWOGkfKz4sHjzQh6EceoAZl3SBVKhwL\niX1gDVyUz5ybLUv3pjHurwrm+QnSS7Le+hroatwtA+bT+oc7EgP2sJ/UU+zt\nXQqZ0ckpsXrO/u9GLkf8A4inTa0aAoJkuavqFUtmVGU8kmLbiIA3yvXb6g+B\nZYhLviftKKu9HbNp85TkwKATC+Mbzdcvn9lpNd/IjsvJNAmmxCrJiFUUyYKA\nNAMIDxl6BdiN6OigqP0xWwlnf1OMFyFaDlnAb/aBjHaLepvJKUe6Tz6d32xF\n/cb+5B4l/FWG0bABfadeLRpSmF+iBMLN8a4M+piv6AAwWMo67CrWVYCyJUnI\n3jlOKCC1tLTgxwHw05vfjtIENepJJ9MjqJvW9AOKqtubV79my/gATm6thGlY\n1pm4C4ifmTNE8SNPkiOabvskwH4zZv+y63z0TYILyE145/zpyi+aX69Kc1Xx\nsovgVnKHBUJr0vYEggFPrSSU7jPTBdkDJofcrte498lNtPaw0Is0eR2bxtxp\ngrRzkLOJ1oBiecyCQ+A3TZihcLdOyoofoKqarL3p4SsetIjsV68734UoJeeL\nv99Q\r\n=oq5X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e9d2e2f96.0_1596572617445_0.345286430679868","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/theme","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce547453b24c26ac1c225b6a02588238b227a848","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.b9dff0a19.0.tgz","fileCount":32,"integrity":"sha512-oeLiVZPJ6NUTcVeNIg+wBlgGxA0wKDc8eQns5qH71/MrixuB0do7eUvvg6HhOnsYep6ZkNZkKYGhdaMv/qVLtA==","signatures":[{"sig":"MEQCICpAf5l0rumxzxUJavPt0ngY5C4+PwULpytFRk9AU7/iAiBJVuWSjADwuyJLTJhNr/+040sR4DV5IwD9t4smEf7R3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiv7CRA9TVsSAnZWagAAo8kP/A/VyMRyieJlS1qgmizI\nYIcm1y9AVxEYxJJhFbUTEB1S7fuhJmiCoxbq24IbhyNQR6HvxwQEMBf2Hdhc\n0t0AUaIM7aeac50JGj3jLIstjHcy73/uCObba9J8uY/BsY+q7Fzn9OliNcfZ\nkPLMeR5RNYt/G7bUchDyGACS6My9Xn6/7t49+21Ju2g+/qaYp+n69oYsFqcl\n4+o9l8Yplx5o7dNQdvn+aE8YZhGoyaGM0QgZzb+vwHw2c+JyomwhKaGtuxcu\nYQye526xPYRHpskr4sWhb3dzJc7i6MaOrXL+8DrmRJGBCprAYxJ6SemQ8B/Q\n6jqggBb/KtRtLkkMHKFSfF0WGh6GmPoynVHm3/6Ak3OzL/JeCRu47XzbMvL2\nVDEBseo+gnPaXnSpm5jM6ifr0drPtfMg9quSNh9t/RatUA87yrJzIBCy5nZF\nTVniUKExHI+YyrYK9R+lGI/aVPBdJhVHG+2KNgxMl2rPtZyH+lF/hPIeC67m\n4k0XwS0ffOkwg2F3GpSVidC1vztelRKvBI/Z4id90xbiE5hXSbPol1Grr6aG\nh/tPJwL6w9IBOtgs4Peqd4ulRTuUEC5u3AL+XimuC1tJw5TOhB7RYtacS7/+\n/OMRsSnS67okzGw1SeFfeIOFqoLj9KDwfMi49mmt5r3bJons/SUB8uXr/d1m\nWDtH\r\n=HzZ6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.b9dff0a19.0_1596599290875_0.7289612956829352","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/theme","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32551f4f43cb553edf4fa10135987f35a748f0f9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.2bd09a706.0.tgz","fileCount":32,"integrity":"sha512-MIH0CLzSmUfwGDsQGtiXAb0m51zroBOpHNYw8Mw6TRo8eRISm7/PTK+cda/cWumVve/+PFpEg9Vy57tYaPbiCw==","signatures":[{"sig":"MEUCIDmNS/UYxruIljq16pgPhZfPalu9BT4ktuslxvhsglbXAiEAnj/okyTpQNeCln0Q0mxXZYkmo5WnZUyyTO7TgvepvE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi0oCRA9TVsSAnZWagAADwYP/01Helcj3nh2acivKlGF\n7ylPzQwUeGNIqg3OCz2HFL3T3W6wv2AbKx1juFb3fxMywzcgCi8Egvmf6fH8\nvVSC2Pu2pp4Du3iqrc4hZ7fUJKrOCVUtdlo7SRc2sS9P2k4Rj3FXFlXdObc7\n+6aSEGFAo9C+JJFK41+jVoUsYO+k4OE4663JyiSP/pmRCddV+7JoS0at0C/h\nNByYpIhuXNkUN1pz6+/EpZx/laiUDTY6pPJZ1tvJqKPYxDRspmvXRDME6+Uu\nbDtLW2Sw71NIEjoq1g8C9WHTu7vDKRqfIGmKLfjyFsB7ZasqbfkHyEu1CMLD\nAfXk4Lm2Pu9bCpVVTu3ymhvEvnEWsIVV8PomZoPox+g+6UXgJgM17jgk9ptz\nnxc9uTyCDHazQxawhWxviusryZ4wSscnz3C6GGW2C67D9/yWKgIr2+LPJm4T\nZInC081E0uWU5+WC+kdc4U4q6IcqZemHiaofBT3Yjgc5uGGSrcyz4vkQ2AiB\n/gjsIax6nOYbsYyaPAtTD5v3Cbp+xoGesefumITfVHXrTqsNtNTBf2Xo6Ao5\nlT9UukJEPsYEiogBpkNv+VtHmY+0vLl0otef6q8v3HVcdt+stI70KZf+9QhW\nmZ86RK6l9C2PXMha22wLxY/jgWKk8Ke346R9z8HDIF6AVqVQQjjjTCamqQOC\nZwvU\r\n=Lndl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.2bd09a706.0_1596599592418_0.6931232632090663","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/theme","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e0560522f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f10599cee334b0b9b4689711914a6120ce831a9e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e0560522f.0.tgz","fileCount":32,"integrity":"sha512-pDhHml70oi0J7EK7TdLf7E4vyIb0fKH1UsiEHWmrR7P2ZZMPZ8TMOYQN3K+b2E6X8oiExqXfKKUOIbxKvuqR8Q==","signatures":[{"sig":"MEYCIQD/CfPiK+GpII9S6DbA69n9TDkSYwhT42WQEidijorb+gIhANqNqIzinZ8JbCPO0I9C4VHs7R7A+cpxzUVP8I1EX/3B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuoHCRA9TVsSAnZWagAAz+8P/0vEEmPR5M+QSURPuUhH\nm7kwQvhcZGBbbkuMHTtj576ho0QFelG9he3YJ6oa32jjlXMh1tXnZ0f1/GkE\nlxZ+Y9TSBxvXQoG0r5LO/i7kVHwT6Hz0lqdU5jp+LTzT0WrP/26Bnt+lzkkY\nLedwnNb1K0WzQboatUh6jYltV+7JAiwjmJs8hIOi9p/8WtVYlKJRmIFx1pQD\nsVtsoiKjMPEjNxZjlNWQLvfJfBKeDIV+hNUtlCfVbWL/3k/Su6T8WkBZQA+Z\nhVIzrZk2gSK23Zwdmw4sO5CHft8R1i/kTF1vUi4wzM/Nyt8yqPo/zvONadT8\nNcZAeUHQgPJxfdrP4tfqj/cuKUAOfRZ7GIsBQMuFgiPsQG8jtTDE9pwRmFlq\neNM9ZU8ImowWwaEGaUdFH7yUIe++mwWcywK56QMdue20T7aUsQcyQtUiypxL\nt9zEV7pX/fqZcbqYL23hGa01SvXJwOhSXLknpi+gD6ZojLUrVuVqFBgzauSm\nNzcmRPOxeGzcf6pMWwzsYjrBeV3+XibYulrggiH5SVk0jgCqdid+S7Ew02gp\nU75qh0UoxTqtPl0p5xPLeIhX/qO0V6ScgVfXzpBn/ENITkvLAgxkRydTTnlb\nYj889918tB3KyoW96jGYbmi+ps56CQ5xhfHCFn4BkFNcrxZ0I41wVszfWi+j\nGGtD\r\n=432t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e0560522f.0_1596647943425_0.74588704178349","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/theme","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4401e5ee049927517e62fbe8aa9877abdc7e5957","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":32,"integrity":"sha512-TfUBpCDN+AFd7qiFjMieczcC0ShKKsLFJ229tqRQU5lwqKb6jFzdAkikLwvHx/8mIK+Jw4r75l18CK8ZDM2hPw==","signatures":[{"sig":"MEQCIHs+oXDTpyQ9JlEyXrRhHM+cbFUpZac6R/3QNEbubtf3AiAckISrKt1LZUXQfI1E/qZglslOpsP275Vq1nQVfcFA2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu6pCRA9TVsSAnZWagAAckEP/0qmVki24/QQ04wcyQGT\nQ+EeyVNtm5AgzQVUhQHsHmkzwHifx+eHtewnIHOpDJXitTMJl3ugeVJ/qNlk\nJxFE5rlA1t0NM8gTxw4ZomXkr8JPcHDlgtKPza0Uqp3VsvgdJ4nUb5NmpdMt\nuBIbk6FGf14LrhmgpkPtXJVI1ZGcJSPTxjd/f5aGDH3DTcG2xfLAfoBhm9Kl\nw9GM5Unulxtb4sXS9tGzoLzYUeDaSRlQ+zf6EApqFPzlAHfrcUS7j1BSO51z\n7HxQQ6Fb1xhetjZRC/zQst8b6xHYFBcIjdHwY/klYKy5AVhmpi2XcYz5wcba\nBUOMJrbWXkHLV/FdA0bFIenY+G46Ka07kb0gffalH2K6r2vx9wKZHoQBnzaD\n1pnPkMN6A8yaSH4XNod4PAE8qmowQxersnzaykzk7TLnEGUmRPYw8PoJ9t9Z\n08epvQrwW7TF1ktZvHDkl7rbBwLXFoNUz4bYh8gfvVm40n0O4PwGDwu2Idmf\nVHX/MuZYeeByCMXhbki1VUbrKgJ6TGarzy0xKCwsxgdQvSfWG/v5o7ZemSYr\ncchBWrwX+q8VslrFdmQbae5yJZvuZYbAP4JuGuYuYfEsUd0B9aTq43xweLwG\n8PG5MuRVLfYuJ/7HLOyheBAu7Drewv6AjL99i+1uQOwnWlE1gP7FI6XGJ5Rc\nhiGK\r\n=VgtU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.08ca4d0ec.0_1596649129352_0.6725499096527323","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/theme","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.08090126b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"320c323cbf3256209360459200feae6344593199","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.08090126b.0.tgz","fileCount":33,"integrity":"sha512-FChhgbSVkGfvnGE+RswI5zLjvm+OgAzmcsO66lPU9cJF+pQBBReAIRu6psSA42Fx5/rAfdj8jK6ocsYPUF9/Eg==","signatures":[{"sig":"MEYCIQCIxT5s9WGI1RiUIZkpToMf0hTD5B51zOXIIKrizD+h9wIhAKRVASbPwd481WlAa/6VssmFZvF/3WK2YQz+rT6Tlh8U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":120797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFqzCRA9TVsSAnZWagAAJisP/1K4cSc8W9eN0KJCb9uQ\nhlRrYf7gHOImuLk8f0XSyqhqcP7GJtXTTAjJw4zfz/PFrJWHOoqF9zgvlj3w\ncC1+JcDNXb2uGR90psY76fZFaHDF1eU6VnmHdEqKfIm9kiW1WNZYfqaLTuyS\nf53wOji7Pp8M9wvUWlG6aJ+Ln0rOtI2d+qBP9il4lHR+DwIXf5GZ/XsQ6F+l\nlIancoIVU1BINUJ2ABCfg+3GOPjCc0K6MPbNgH4zL7lvQtA8R85qrbNGZmaJ\nZoZFT3OeyZvyOczZX7ihrLp2e37NpMrUPk4po9Av/4lsmrPMkVNCcO+sVsXc\nDxy1eAwpEgi9mTZ5qW4ozRV+EPC4W/P8Z3HsiaMxlwwPS2fgr2JbZTQrW/Yy\nZjjQwcBd0vg2lPIOsgiLQ32QGAR386heI5/b3FXVEZZErPZiLD8B/Pucmt7b\ndvQDw+PkOPld4GhpTR996cpm2a5pfRHLX7zOy+QUd/xCa3ofdwX5TqMrvCEw\nvotYVL+wc2HQ9mFFDgAhekjyiL8G50vFI7+d1g8y9/c83Z7UQ8vZhjIfWWcH\nyYzLWr7QhF4e3Qy1CF3DOT3YHtVHa88yx1SkP79VuHfLK95LhKpOmDXiTGeg\n/jA0iLR9tCXvkGmXHUxjRl15XBetu5ne91d2kQxhHtdVXivIlvw0ARQMmLMO\ndxNH\r\n=Gs+7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.08090126b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.08090126b.0_1596742322724_0.11288197744964612","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/theme","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3dcdcdb530c6460eb1ef567995d41c026939b5b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":33,"integrity":"sha512-rNZEfmAUlOsQ3iP00pB6rKYd51Tn0pZKLDBoJ8oP5VMOqzeLsMq7NQrOJPJ6sqCgm8B69jUinRHdhKALCzAXBg==","signatures":[{"sig":"MEUCIFqWczVOQeIaz0UtWGnzj8WTCHccceQRZMHLGxOHZDpNAiEAwbWqgfoubfbwAiFDsuQEzcNAn5MGDAdtCNOqSi6Wnig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":120797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHrhCRA9TVsSAnZWagAA7isQAJ5Z0AUzb6lhBLzn70p2\nzEUna0qHNHscMESA+aJ1RwBJjb1x0iNU555V3j1YUqKOjwVcPjye6ddb9fIL\nBocU07Ix0kUE6eij4aUZ6SRbZycgah0YMPn9wrZRm2wSa6E7hgZM6xsh8L+m\nw420BYhZopN3gpJ6yCaaSW0PxyvWJPta5m6Foo8tyCFgKK/7xT/pdh0v581y\nRoEbbWrFhy+lCC+cdmnms/5ut4w/RPBlNrtP1Gt2Fng+mm+yZIybeHi6OGpL\nmALrfgqYxWcVNGW8GXcHLNcTEw1Z+0oeM0y8RTRFwq/d7uOVMJ0xjI6u4Q76\nwwwSLS51JzDBFSsz55TTzeu918NqQFCPPw1UVCAg0rAGcMdJmlzh2tHk5IcT\ngRl0RpiEMFDlOvBTofb1DrMYta0nAFZ0UuoTn84VpTA0oRdQAC14NzjcXsAn\nxlNtXOoXI5sUpot8x0En1DCU9zwiriyMBoUcwQ9Kmamks5ih388gxz94SSEg\nVwPa3CubKYoXRz8kLDzfOCxhSf8yF1xjJRFnMo/VgD1c82IHiR1hnlKzz15+\nOsOK6plhSaWtA+aLiL8ukfaP44l4ETDkJxlVM3itXwqlDbhdjhdctm5QpGDn\ntCXrfNCqMPUzSZaeEZ/dQ/RIKb4QPR889dH1Gd8ToFwPSjj3HLEQvdgeA9op\niqOB\r\n=lPwW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e8bf5b2ac.0_1596750561103_0.35925471445315726","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/theme","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e3b746208.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c2899c10c33fa3d326b5a839322ba1d351c6382","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e3b746208.0.tgz","fileCount":33,"integrity":"sha512-D7Whyt5NvvVFQMLWxuJXuRjihNadDYvekVRIe75Yhh5NKyy4q2CJPB96r5BHXY95P5br1F9xlH929cAv4mA3Nw==","signatures":[{"sig":"MEUCIDQNeW2d3TflkOI3fK/n1YlpZpaROiQp/A9nOxYjrhq8AiEAq8VoUKzUZmlHYJUBVPaEaW9cHdDAmDQ+bKB/i9T6Wwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":120797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIN8CRA9TVsSAnZWagAAL0UP/2519DzM8JtmhpJagU6U\nXdUXSmkWronDionAh85kxw9+rJhOI67xOPmxWHECe8dbtNOUC5cwUGj4DNC/\nkC0w83EeeKl0A4VYhhRiTr/yELHsDDUx+Bo4r4I9fXOvnBjjSYhS4ncJhmBt\nUXYy6R0MJSMx6HAYg1L4boTrUY6W9OWTtve9heB3JdUHS2TB9Ks6PnvChoVV\naR8NMbZj+0GjURGdprDBSQrUPRjGcaPlabOeq+ThmNkuEZaLjlH0VdcKbZH4\nIYfdnPILiY1hvcXSYRvK+w1CJDGrfw6pNSaihJJdEV+MCjr7pQP21AkGUnpg\nZ0c1vInUsqIWo1nMcwXJqonvJnPofU6I8J7i5zlULPZD1TRpLf0LbzuGBhz5\nqwhtOBB8JSgtjKaEXpzJox0UbnUN5CmlyhPaRuBBMh5KNebS9XRUV9xM+h/+\n8KvwHlo23vrU9StNNwYUyWgJtVL4bRHE1dzbXsHSqoOci47GMOPrc4E1Y2E7\nzgcutb4zzPCXWZkqT9QhCRX1+QSc6w5VRdrQQKzqqS6uWgPaV0Rv4kIryZ6f\n8a/eqg/MGLqaDUR1NMf+pRBPUHsPvwBvOqjV4ZsJdU0xJWsYLieHL9yMpe5a\nEo9iAHeevqrs6DdOnz8C1zSoiMdD/0Fb/KQLEuHIFcx5Ejf1lfdtqImg0NDW\ntS7H\r\n=sOtj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e3b746208.0_1596752763767_0.9794373564567269","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/theme","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.96a640534.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"389dece7ad5658e1346c504304050cda26b20d2f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.96a640534.0.tgz","fileCount":34,"integrity":"sha512-FbnUWBBe8kuhdF/cCw+cG4z3dZJn7EE+RhRrNlTlJl5bl86Wd3iee3S3VbDlsPjiKwstntdRD/WST2CjIGSSIA==","signatures":[{"sig":"MEUCIG/GNuRQ7e7DaYf7mV81qtNWlNsIQHjzrjOO/wJCgK5bAiEA72VM3XtpyD5nK9h+RKmktNMkC6S+dLp+U5CT5RuNGkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIb1CRA9TVsSAnZWagAAMAEQAJk9dxnXWrkxj2kPAtNB\nMx/k1oqB3MUXWZd1M4C/sm2AF5FlIChoUX/XN/fItx+iADDuHxaNHw8k24jp\nHyQzgUsHFmEudX5FvUoged+blj4BerosFLiGdqN5mVgUr01GSHmLgGT8mvx+\nTAmo61xVP86IWb01sLrrJY4dDM8013Q9WbzvF+rn/N2VoAaj9SvN23USVAw9\nMrZUc3KCT8yl6CG+ntAkKKlErdXMarYoqKDqKHFCxAcFlB6cvfUzA5lrGGO2\nZkOjAh40qsr2yHmhG/G/w5/hFkfoFSWhvaJyRVha1rUajSwlL/Q3Nqibwkp2\ntRIERTVANeOgH1lT0fB5A+9NT6gzdZKhEStrpZ+nUVBlmEaw+Ab3YzmQ2oU1\nENdU2sqKlonsQXAhSxD41wmFV+i22l0jj2hrWnvoK/RAy4isHcn+yOnf19hY\nuk/qU7x/WqLf6JNrcAyUzDo6UPphmSaC2NUeQtIQaAKwgRAJ0d1+7iAJO0NH\n9Pmat2BxOdhSGEjBnLaO7NBilnHapTiR0kmVEA/hBhgoFiXbe99vxNcGoYqD\nZeQp/bu8a4eEHcAyx02JIx8kSvP6UfnwsnCWGuL2nkEYMrnFYSnf+534ywhF\nXmzvMDjpaO4NWJNAbtZpsTOp9SoybYBTMxexz33gCPH6JebCByA5Go2eG9GC\nHvgw\r\n=4J/5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.96a640534.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.96a640534.0_1596753653336_0.9087520550331505","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/theme","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"536361ae79895f3d2351f1030b2110edb112fb6e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.9f9aac825.0.tgz","fileCount":34,"integrity":"sha512-YsCDRSPwfM1DlrX2xv8x6JQJu31rhOv3SHfP8rq0+r369psLeMknkJhI0+X6dcPDqV19+Y0szriP+VPyDPW2Mw==","signatures":[{"sig":"MEUCIAf61QJ2dwUA5NWtcsAcWRdgLabQfqjj4Yj1UDp0XF0/AiEAgUAG9UZYsFvxVI3oJli/lxFwT6z5sO+aRl9YGU06Ih8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb6lCRA9TVsSAnZWagAAivcP+wfuCUGh00xeMMRzgkjV\nz3083g1KKJH0OLywTkB72+4DNAeUTBqXRQvjqfX8oTKOZ6umSNsHHxL4i2wF\nJEhoCfbniAlqBt/wVpAKi1loDL9v7kVdjqZqwDXTpZrdyZunsinJm44lepM6\naGMXsfSP7CrmmqxPDWThU2CTKIGLAc0LumevXHywHLvn2uyLgdTyARKGzDot\nH7nfVyAMezLD1SsfM1pvXEAmi/lp64K576RyfnCva4fQVXZkbVn2TpwFSFUj\n2pXZKHA1tdx/ti+I+AkkTwaqrpRTCnaooJxHXipQZqgalHp58GLVy5Ia3wEA\nK4WyWxW8/hyKm7P0CWwKbJhUsD/Rr0oEyaxF7sz+tJOIXHynkj9WPFq+nhNn\nVEk2fIpGFAMx/FKA7Tr81n+nrm88vbEryRYA+HE3K+KDMQ1EyVgbCSo0VsS5\nZfLRZZO2sbCwkEi+y0LUwHQLxSlfE+9lb1iw3NJBqT5AMkN+5Eqi16YhFj2n\nk04X+ECDqUTHYxNdUMoOzfDQkAn0y8Bo5LxCTfJa2dflL4C6AI3NQLVcQdZZ\nsPmk1QH0LbrUtSuxZT1p5HgeTlLjePlrDqSPiEj0pvvpqrUmXLyGDm/cfrjt\nLnZDkSCL420+QmRTBAMdkrL779hvzOURdDinMVFbuYaZ61FCSx4km9u/Kedz\nBz0p\r\n=lRUl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.9f9aac825.0_1596833444587_0.5762736037910001","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/theme","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0566f5d0ad6f3cee6db26707468ab924ce0ac001","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.fc65fd00b.0.tgz","fileCount":34,"integrity":"sha512-SmC2N55whNdcN6PvYsvs5EIwNt3T87OzHfreT/bbUzOK0P6LThvoL97h9O00CCMvfZIm9Bz6b0SjpF1GvLwJdw==","signatures":[{"sig":"MEQCIGO/JE3MSeOoTnjGPztGp/KPGzFFMquw1vMfyKm6bhUyAiByXmOQMpfM9pWs//fBIApS5YsO8bx0uhNg0r5Lwe7lzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWWQCRA9TVsSAnZWagAAAhwP/A4DpRazY7RtQFgv+ykk\nHmpzah54LQyRh/PpVAD2gFXDtbjIu9KO5JHNsKFgWxAP+HILWZuEviQ91VvP\neZBM1Scy6MvTNKLIv5ohdqrq3Wyw0o8st1qjvdm2AvNKA32bZSlkUCrutLOR\nVuIIp6D1j0wrGLAdsYCEzH/wT0IIzvYst+fDqz9Bubpssq5Z/qyKLkN7LdLW\nxw+s6yF68X+oo8zAE3D6X0xfbOkMpVZLUu0Y1yF2vnDsJefKjofVEKq8vqoP\niAjVNuwB88ctUs6GZ6wDd5i8fyeajqWiFz63I6v80DUGEwwhpWtRUCsp1MdG\nsuFal6p+h+dfcwm1VBFDztKCohKAP7+PRRFsOJYzsYmcJCkJg/txi85vFTSI\nr4WndSNhTSrgnwsdIveqSsT/TaOZbYkb0lSausEmvHorp3iux4Hp5tDFO47J\nOYp8Wz0t9ui1mXOD7a6y2uw4J3gkMwPHvTt9DUp63eH4msMuFOKcNsPRTxNS\nh7+XIplOhgA6J2QTW5CmzOId5gJ8hC+pJpWn8Fy8gKKTTEcU7EPS/TjyCA3y\n736Bcw7VLGfU+KLrTfrs9wcTW0R9vM+vYbsyCiSu5AmeZt8+bWNSAnzrqBPB\nu9xDJYPXIU36CSbQh7GOCyPonxXrzEHOZRJ3bVwvzirtBDCU2THdplfOatqW\nxNIL\r\n=sPam\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.fc65fd00b.0_1597072784496_0.10777053330812048","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/theme","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c0d17b6e5eea2a8b9a24baadc6d691b11549648","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.02e372c5f.0.tgz","fileCount":34,"integrity":"sha512-y2ispmFLb8BgYIG9FYqXIlq4WKzcI3WlJaNyb30VvrvbQ7fxQ1ZVq/iEsLancYSJH0/q92mnbrKCVDNP7Pkf+w==","signatures":[{"sig":"MEUCIQDXTmmXha0ptujZ5TGoEtzEQ9F9nko3nCpsfI9iTIs/hwIgXNBI82aQHBWN3X9b050ZzLvEY7EZdX4hBxFQVroFA60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWwnCRA9TVsSAnZWagAAHcgP/2eqHMQ2Mu7f33GkBwE2\n53TuwBBb7/Fz+QwTdnV436PwGjqVFTdq9zFBJ0BwaneSYCAK4t/NaaK9stvj\no/BbCDId4njMqG7kZ6kYZk2qR2l5omexsGrVqJpsBsoKRAZ64x2g6wVSeSsH\ng4TZ/xDk3Leg6HthZ11eORhxUJGirQ1rfvz0WsIq+fCMrnRUEi+xW+cL1uKv\nClIzTyqFQmUT9Y4B5yqWxJfsqsM47pBTkag4u3dsq4bGDKGhSbVCt28KSAYb\ni9WAnVjoYX/j+fmcSpvngHgrLZzvv8Hhd17wuu9kLvmiVaCoAREV/FAfaCU7\nSHBoOWXQs6fFrcZpsEmjhbrSs1t+O8flPy5CHlQSQ6i+csKqxe/J/ZQGYZtb\ncdNK5zQ9L6CSHMQFgil8/QAVKcQHS5suywZ0eMp+SsM+elBrwfgTPMcKdMia\nl7LMywQKveiASsdBKI8YyH7tk5BB5eE9FHnoIFbpVr4MIRYLWZmg1izKVJyC\nk1lZ4GBloHxN4YsWY9g4NEPszQoE1Vl6Jn67rXsLlQyipFEZCH5T4sefwn1r\na/99PEXUnjCTKR1pLgngHze8WMQ5ZLZy74vTPzkLjpN3BXfUhO4yK//c6c1F\nCEfeVQntx9oV1oquZtKqdJPuAZhys8TyKAAgMoKQPGNmhyMqf3Ia1ES3c2VK\nEqlM\r\n=BzkG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.02e372c5f.0_1597074471493_0.45326568208282403","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/theme","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3663fc87a4b3aaccac213a4b39aa7dff99e2dc52","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.66669e3b6.0.tgz","fileCount":35,"integrity":"sha512-DlBQCnB3tD2DMmNNBPt9MNBJ68OH3FKXuVw3XkAXc96znRLrHq344Yd2HgoNhTXNoH4AUGLIsK2QUBHl2dLFqA==","signatures":[{"sig":"MEYCIQDOwbSs47iUvMpQvZMxfmXrbtSvuWrTC2FmA3LSEP129AIhALRb9xymtoqmKoiIoec/rTq5yD3AO8ZIPlv0bpvrATzP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW0cCRA9TVsSAnZWagAASbUQAIfbh04qAkTGCin7SBM5\nHIEyipncUQDt3WyoepK5ARnWoxhkgkraRs78iRAqFmfPeFNtK1lmSlir5paI\nmeYKAGFMpOhL4HtBLl9XAIgyJcv/0QZWjBE9DVtcW9tVmnEmPxl9MR36Rvz6\nHI6600/aJJiIoVaX6qB2LVv9EjoUePbFZUGxO8xPT57yAmT+q4kxsB3ghyTH\nbC3wLst9lOuklT9/M713l/wKSWFwPd9EOACBjodedBC1AM6L4x5GL+DZU1x4\nCwqGLsIZRHA0y9TXJyU+mRk2itb7MEwxoCVdm1Gal60WQ1WKFKrhAR7/kGMu\nLdz9Ea0pUrHym5QUwZWuQcmAtz9k68JbdK2k64B5ckDh7SO+hJEwFTfRJjB8\nwEze9iF18EwNo3b0QUTmbDwp4DcllFKhKn88sBybbGabNGKkIG54OtWz2xxC\nWOsWOnB7+xTTkrUeAuGIjCaj2xIU9HVB5wYqXDmC+2gsI0Or64thMHaoXY+J\nxBrukmffqQdQy1EgZsATsCLGbUmol8aECEX4j+cg2VMFWK0BIM4lAc1ZBHKI\nPgAHeTkWxd/I9krxV+fd0n3GWtYqNAJpK94FijeFp162Dxt1QQwOepxEGrRt\n/KenOuEs/R6MVdKxUch/9YGBSR4hJCFyoDo4iN9+eZ9iFdZxFsf0mGrIfo+T\nvgUu\r\n=+NZ1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.66669e3b6.0_1597074716439_0.17595588524414674","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/theme","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd6df0a95a1a1c42221bfc3052507fcc9e4cad9a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.6d1ea9761.0.tgz","fileCount":35,"integrity":"sha512-9n4uS7vEh1ydNPEs/d6UK1gBtWKdHze7Xzw8wSwCOdkKtyCcnn0rY+6vlleQWoe6WLRQqC5sAHq7DUD+r/oYxw==","signatures":[{"sig":"MEUCIQCBzxXTQYhKwvHJ0EiKsZzIbJpgCxefhuTQ5uMPjB+yawIgHQJcj5FVX4q7GjzCmXPuTBGgq760fENOVNP3IQrgo1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqtyCRA9TVsSAnZWagAAVOsP/izB5aosuo2AeFMOWb2d\nMvU3oAOmzIFFIEHYF4sPmnuaIp7RZJTXgseE0Ev6TtavJ/kmFbKUYMJztGFb\nBkDSfIiKNvFPED6ZKGrjwiR8bAzMAkdvFNEeURZiwRebNivfAeWtE9JKZ9hD\nWvaWcskaoMLJCn9TziwzgMtvU1LkD+A+jK8CROEDWAY+ghoT3/Nlvx0ijiP/\nbcR44Ai+lumV2dGaUEAAUHuYjnT9s8mp9PW+TYc0u0UFEE9wOYGfZ64tWQgl\nGYA8U+pqUw8N/wZ5ootRyBnMIsiY1NhxfGRAgrQEgzo+SpmNPgmwqhPCkk6l\n8JKY80VCQ4wl6lgpdRXmbBl73ibRe6OpDqnVo717cMCAg+PJYZr8Ma42/80Q\ngI2vGPyzOq4hceWweyYdp8/ihGG4oTXiduJ/pI4qRWiHHM4td9PKySYa99u5\nI5A+5DOl6DoerVffNS8ypvUnH29SMAYWNF2/SlPk99ZMHiQ4McaBfGTLj1Im\nm+l/n9eP5Kwe3RqPZeK5QQ21o+8DoGt6fkoKkTW167UNCkKwhbxbRXLlumwQ\nFncb3kF1Q4P5ZaDHdiDxvhUqa3a1DsMnApvYL44bHUkzL6OqL0V0icj4ltQg\nAEjDY7O6D65upw+3q4zuhSIwmonjZKSnAJvxceYGgUuJocn9GbdXlDCXUvpN\n5wW3\r\n=o+qr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.6d1ea9761.0_1597156210139_0.9003137715915728","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/theme","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d6af845c617c5bd33762a689e550fb41a6b1888","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.79414bf9f.0.tgz","fileCount":37,"integrity":"sha512-YHjkQsc7BsQsog2gHoVaZ8xHBQDRtvvJG9895ogz1cupz3T3fc6poyhcOjzKvYzXJR2RwOmxTcChmQMHvzk0ug==","signatures":[{"sig":"MEYCIQCd1f5I74RnfZIBQujxXBIWeJqORB98lnkeslrC/ZfZQAIhAKz3CWIXXasUz9W536jgAnnhQYd728DKBPnUmvxi6sGp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMurxCRA9TVsSAnZWagAAf54QAId7kiu5/kiADd//PQvc\n2ETkwO3pa79ZbMz9G6gNzn2So0hxN+rVvM6IF0OMOMWy4E4PgsUAwZq8fGCU\nFpbBBGint1jTCJ0GH6fIFD4aPoX59294aRjzzhDq+bJBGPEEzMc5q6p1iXs1\n2GShyv4gWqBs2K/bgM3QM5GJY5mbcz/hWBmYPn7dJ2J4Scw4gEVhAyzTsTXx\nYUN/pa4LvcZdl7qrxzGTcj50ake17lT0nQb/Vi4sJhJbJjtQv2iTigIOWLW7\n3RxjIEKHq8kzuGL91jjr1fEPxdadI+oeH1DTCmj8h8dpzW59o0M7dfNgkjdS\nx1MEioN1x70ujOpoe55d0MmRUeeUdsefl5Xhd/LN69QpmqbsAT7S/G3IyUv+\nOyOcrr+GbYX+wIZXzPySIYES592BvYEwATnYTfUEWbx3nnQh4GY+WgE7jlcv\nHD7fJnlZPaaaXMW/oFhsWZUokj7pbz9CtvJj9mM9MiTxKuTCdNTzbnydPYzF\nDzBHOQASVswhJNBlsKGTCh0GoJITNKvhesSzMBv+INP2u14khvUv2YfOpTI4\n0672gAR6j5vUhfeU1Bsbuz314NwA+X6pb11NBBBhtoXDJ5lpl1TngF5P9UH+\nUws9/UxXYebz/J3C37XHzh/q4p5J7M0kLoLAOEd9oYkPGL1ZYfINO8JEoRkq\nqPAT\r\n=Vh+w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.79414bf9f.0_1597172464584_0.626845191241908","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/theme","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.85a5272df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b385fdcb2a4948e3969ba67541fc371eb99f7d5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.85a5272df.0.tgz","fileCount":37,"integrity":"sha512-uF4vA4pJgUzjgT9VrBA2c9hMCJNuaUAgLnw+VCnu8C5vtqB7Sh/jBuzLvyrfkBTiMW2yrIgWJgTpi6xGchCrYg==","signatures":[{"sig":"MEQCICz3JeOu7diizO+S6NobHSvkZ12BQJ/lW1SJB6DGjOn0AiAQglFPLiIcOvH8UCGYEUPndtLy7XwQlnVKGQJ7fmrbKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvqECRA9TVsSAnZWagAADPEP/2s2oHiamNyDoxrT+HYJ\ndUt7MMwiotqs6rIffBLa2wE5ZCj6Bfmq7v5eOBf49UMC+Hf9zR/awy7WcGTk\n+8CHN2Ko7po8j6wzc8J2XjvKF2PDfu2cYTKBDOGrSnrKS/DqrVFClakjOvlS\ndkzwqag9YC9HRD0dQrHNoxpSRWB5Svr+nFV8xU12MobcxRQ9JXbDJM7LzPZ+\nynCJ0Flpbb3VarP2dIuCKGawBSQsB7+o8KG6h/AuPu1MVpG5hE6hAHvxd6FX\nnliGtionhlODVePZLmmSNGQbvqiQcl0l66OYW+/2RDReN2HQMJd0O6FGL8Z5\n8fcNfEozdVCIIR1lAwFITIJnJi8KuuYjEFylAev3wuXK6v+ILaO37DrOagNs\nx+kq2qfHFgiEbQ7EmqppQ5eykRn+fK5GKCCzripmao1QKV425ycscLOvSqMR\nNdBvyTjCPaRcR2T+RsFOjGPL5ms0E7cF9A5ly9xG+ISIg/rdKc/SVncxSnzZ\nKZJDMOekxFBchbsS1oTLds/3t1byK7DkzhX5AeXtbI/prjwU+g6SCR98AO34\nQrpxBxtlkuiZFS0j1qRFPcAVQT1bnEd+Vl/+/Pgd/hA0toEIFOvVQ7Ekc/hA\nSVglctUxe5taw5eBDmvU0TQ1lUIVHvLhOJHEarbiMS/dzIsemfKIPablgpVu\nkFbH\r\n=W/Y+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.85a5272df.0_1597176451678_0.4542963431961975","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/theme","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8d3578f62a3b9f788e2abfba958d1ae9511e30e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.fda053eb8.0.tgz","fileCount":37,"integrity":"sha512-tuLg5AbaA3UqKJf1MR/OgmxiXchkPVT23oItjE0/+Xmm9JQD0PfaaWy9m0D9wmw/xbIJTBsvhCMfhQiHe3TAOg==","signatures":[{"sig":"MEUCIDrYqwIyjncKOVVaZGe+1SqhyCTS7VDcOmdM83LqANfwAiEAk9xzh0FOIDdD6KCWDAc5ZJANSC9cZVChh7YI++guTgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEsRCRA9TVsSAnZWagAAwF8P+wZ01Tt1NkGr0JfJ0sr5\nfrYxBdT5AMGp3mjz6dYD0qeep4mIfTKsszFzzdVPYyH3+v1kKyNI7cjXDmQz\nF1MkEA0zFIJ8odxUqLsrNnhTPHCv8170FRaTIgPlw0+2TudVkKSFWD1NMiog\nNYb4KBpQE257g5ikLFo95Hs1/v8c2ipuXAoQyNSyvqb3WhRojWt1NPcKhiT3\ndfUwbeg1XCeDLGbv/cahFYO0akjsHS1M2eQBnJO6dzvhDU5JWkfxVHXPa1GW\nqPfHSU7odCcGJMNZk2pA/lgJOWW+jil1VUnUXzbghD/xeV5kps/9fQE7VENS\nu6F/Vf1Mf79j+BttdERWKDrquQ62OSoTsSngl2+Z3E7YTv/oUo5Wyi8o60Je\noEOUDA4YAVxE89XFPKi2gJ7F6V1lG++XHbHFQqH5e4IMQWvcgxmw5qUXTGXW\nM0vIZl6acOfGoAR6mXRUXyK28OAroeZHvxZdHqIh+ITUGk5B8xmsTU/C6y6j\nNcsOO4dnhRGBxeuuKbB6u/iS+1wielwtPq6lqis/CoEWoOIgZRbbW2uCdpsT\nGai6SrO5bDIc5jBtwY4O/jOuMJJJmM7ISpl56tQw3b4X+RJUk94/Ss5yxcT+\nHEspDD18/OX0TjLKELOaZ0RG51Vi9BDV6c7j2PpZ2LHLXBg9Vejb5jloY0hQ\n9t8Y\r\n=+56f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.fda053eb8.0_1597262609164_0.5202024258769253","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/theme","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.760873445.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"229294f2c0753d280dad4937eb6a070273f56f08","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.760873445.0.tgz","fileCount":37,"integrity":"sha512-3oKMhwReUkZFmKvMLb2NK2gelUU6tL8offUqHwmXjCk2+fcAnbzd0iNrF9YGsUG950q4/4jCGhRZ0SM6+AQD7g==","signatures":[{"sig":"MEQCIGrBib5TU7IQXvuuXlGZGN2frISUHWkYSUjXEURboO4eAiBUrwb1hH9aB0pyB2WZkv8DhWbv9C3KAerM/0xm9oJ2Hw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGJMCRA9TVsSAnZWagAAKUIQAJSd3Ppe8CGw4O+woVWl\ni7J4L8jkDdzD2I3Uu48g4XAlfvuAfQByt+hCgK+hE1foNdTaLofTAcnGTvKo\nGFTBvMtUJcxwu5Us1epWpZDAebaHhis/xeRK4GwS/S/zjlgXlw6lK0rGm3Bb\nz/3CJymNpFiyugDRUm55x8NyuFue7D81vqXg94BhhFLCVt50vHF5Lnwzutem\nS6yT8jAS8fhf2HfRgoIIOhugbyvh9ujTcbAvnc2jnWD0DWyMzh454eFWSCIq\n8MM3Zo7SBowU2XmKoKemu+JuhoN1BbzZh+f0dWgoqrIb7J6BjjpGkfJjVngY\nZLTvKvsHdXhfFGgdlTUMVjRXq9DRfA69iWMtPao3Lv1AxlgJSnlB52Mo2zGk\nuzT7p9NldLn6zban4uBuGhZfWmnbx7SDyXMtDuCaNQCK1iM0/jjKr5pvf7eK\nYu9ml9Te1yN2tGHtu2QGxxDNe1pqs2a+BdLuD3uC2ETbsgGRanzCKpmnpPUE\nM5x/sokY/LJ6nb+fV6nU0MvpR8KarbAeEL1s6v/ZGXkGAa6tTj/rBh0WAdmi\nbWzuS5CXbQ9C45pMZM67y7zn5slW/gOiusIY9x8jtnRvqui0CVdG63Fi/YFF\nhluqrvTnJLX90EA3tJ+g7/1rrdCKEFy834KtyXDHJHMBp98kXPEKNdc52UpL\n04Fx\r\n=NQcD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.760873445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.760873445.0_1597268556339_0.49885368423594056","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/theme","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9541d9a899dc21c63733ff1d515fd450df9adec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.2f4711a30.0.tgz","fileCount":37,"integrity":"sha512-DROmttitqWCvOnoPCGyMSVJYI+E6kv5Tees9Omupvh4Tyhg4+i8DYp9TX2Zs6mK3clqUKzKj4Kze84ixQyyZQw==","signatures":[{"sig":"MEUCIEnsQSF8gT6OA1SI/VdNI1hwZgiu8MZqQlsrlpmlBo0BAiEA+6f0fswE5oyxsPY2qLoLIC0rRpFhCU6YZDHe3vS2KhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGSiCRA9TVsSAnZWagAAJu4P/A+3jvspxcoqJ0az0zur\nG93j/zdpQNXQr6taZyXS8AboYDK0VKryzRJJFKSlAWwqD0w4a6CR8AVHbSIS\ntkgna8kHf8Bo0SU4z/ssMBC8y7Iu33QXoXd4jDXYah5H0Ql9g0l3qPrgvz07\nwioPVNxylN6mXHLV50ftcAogH9/2/RDw+7YY/2uQRGNRt+J8o8QhxReg+/z4\nW8a+/QbWAp2zcaSJ+exvqaE80JXse0otORcKdqRR4VxaUxYGr1W1EdmpZztX\nBmT0jf2zugzgtOvFijDkADTfg6cCxrX7xV5PuksKRqkgb8Jf21BN8MQWcPzX\ngYiYwQQ2ASGniJ8g6ZjBgfSmnOyz3fxCGny1wdQ0zYLmR46aV9C0LoaIMYpm\nsHkCI/H7A0XEe0+8XY/D20DCCPPv0sAlZQgyEqAHRN0/S2Mgr5Rwau/1XUj5\n05FTMeQ39k0kKdNd3fbd9/J9gJbB7ocLJk+eAp9rPi2UZm2HPQHDqq9b1JIQ\n3aTeC9zdeJvT3JcB5cRtstFHj1+9mbyGiaS38AhZhl4kNGTNYmxjrYKYaDuO\nqGXQeuhj4+vP4I8WKu/nolqBrqF+5ELx8NrvmRzmz4Oru+FC/NLx7KnvsbJv\njhSLj5czH/LjvS52pWLRRUS2Zk3rugUwKPa3M+xW/TUoIOotWz/063TK6nvN\nGCYy\r\n=bA1J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.2f4711a30.0_1597269154114_0.9317821505998634","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/theme","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af6bf04e7b68a3850c18f7991513fbb6b5490001","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.2d72f3659.0.tgz","fileCount":38,"integrity":"sha512-EMAnDrE85R3wAMsrcoNygo1/CAz/TVcxkx9wcmdl4TA6HxmwlLvsOAO92R39zjtpk2DUDlmMJLGFGCaaB6MVuA==","signatures":[{"sig":"MEUCIAsgrjNxficlaUqIcztRVqVVNc//My0dnZ/aymhhEEmgAiEAo8A0DIPuT1d9G2Zm1xv3pDkEW/v0jrYSl1nosyDcEI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGZhCRA9TVsSAnZWagAAVdwP/3odQFQ8IcLgqjAwxks5\ndqxGYTMJI7xNvljgDvCu/7K+gaRQ+/sIQs+ih+S8HE7eDd+uPkl0W8KiYRBn\n9QSv/NxIS7YCdglE7wWKqDeyRXkU0fYWeH7Bg3hxaEErdMtOxvylq242/sKa\nQj/9UYMiYkUgh0hOIdG8H52/ZHWfGHCq6IzqBAEO1Sd89r11hi5hdNocewIU\n+vhzi18SdaJAvF6iiWzMr9hfw4fGmccBt5MlWPHaR7CdOps7OmHiaZoBc5zB\nBq7b4LoyGJ6jYED2QzfZWeCvO2Om9andqAjhvnuuDPEhDhEs4amSZU2TAAta\nkW1j0PZ/Az/zkz7twydyJI2uhmhvQRs8FmN422dHLZNIJ1a/rmEIJ/sSq7ou\ne4AbqnqEcT+npinJLb2rI7zy0KUhbeefzyAszTAFRQr77L4eqiHqQsYhMCmx\nIOqt8IaIihrcZ+bPV1y+wWIKGzb4PiYVvgqVyV3N4OM4N+20AQlElphO5Eaf\nTLheRafEbNlwsrmugibmvPihzvzDK/FD87TDqjIFv+Dfb6xrJmdvQyhti0it\nCmyIkA1I49LkeWfQgzuzgQBCtA8aFvb/c+GF/CliotS45g2S1K8GuekIciel\nRiWYlsGMV96a5iW2xBrca8FsTqLBiJrabYLhzZkWhgYgb9rg9Qk3Ki7Wtv6n\nb/oy\r\n=efTN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.2d72f3659.0_1597269600638_0.19797580818025784","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/theme","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6505ace9339e437a0706b447cf7d103ad5229de4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.1fee70a5e.0.tgz","fileCount":38,"integrity":"sha512-h+gvmHMPjKTKj4Mk8wdFZ+kkhtYJHxq2a+KzsKBIgqrAPruSHesqqfrchAkse69wBIcU7I/Mcj4voIDaGF52/Q==","signatures":[{"sig":"MEYCIQC8MqjqZ12rqsf1BDZF75fLLT/Fb2h1wEM9oUa6F0rIMwIhAPed+4IFA1LPGXwXTzEKlTdufqicsLDGzhRqSaZTdl25","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHsDCRA9TVsSAnZWagAA8dwP/3KdMZ5ediC/uDwvP7hZ\nwhuvxdPPfxitL5MefdwKCRqJMFF6zyzSTgnRIv3cUb8vHmYvKysSUCh0VTBb\nrXTMBRWZMczKFRsQadQaM6nnsarf+XJhkPVz/FxW7iMKg9vzWsNfY5laIboz\nvqCnlbPHMsO7hzH2lkQA0pL1PtZrD/4/Q4fgdq8JpLzmRNX1NGQSHqke1Qbk\nF10AC2zthr3ayF/lxyBhrOaEq5pr63REsQTL/oRKfkG9gFaWjceZPQea67aX\nyMqSSqmX18C+s9pk4c2rrClBgVjD+LU3wqcc4VY7moXZ4ZjK04j0vEG/pe5p\nrvWEPipCSxKE8cQDdp9Qi38PQoaGbvVUwUvIVUcFV0P6FG7g0S7v5V7HgYZx\nfOO2VsXMev5KW12RARQ0q50Oa+r6bDFGx8IOk8ZkyT8kqWjTIrwp3lkTyZaR\nVhsDerDSTHrl2jdRMaj7kwu4Dbw7lNtPj9pY6GR/0E52Ib1dnfrxMx7NEbku\nMwMZovIV6dmMHbWPhep4VYk09f57v80GZpDmy/X+8gzytobWTSZJwILUW4hP\nG5a/F7sf1ApCo8Xvl2YhJVedKlVNe77PXkR0nIq+SSXRlONZj7lBtiISIs4P\nzhG0mXckR2wQnvO3rh5bZVJE9PomPn6rQJ+qWNI/r0w38L8vrJNRi7poGNtQ\ngNRA\r\n=k2V6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.1fee70a5e.0_1597274882584_0.23666959085898998","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/theme","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd7553b5d7b156a0ca0a00fcaead6e770942576c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.023f3fa34.0.tgz","fileCount":38,"integrity":"sha512-MpFkx04MNb+EW7m8IUt57at4EU4jgISsqJ0UVf8AxXbojHynZjLE3BB6pn+X4TMFjGI3StambNKnpA0vXOeNPA==","signatures":[{"sig":"MEQCIFq7PCgC2KgnVMyOJhqQpxoQDMeJ5TpAXD9NFydbRPgGAiAqPnqI+hhdUUdfEmmWuXNEFoLDaE9m3tl5J8oKOpo1dQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJNNCRA9TVsSAnZWagAAarcP/3uZqjuF9HTkz5bpQ7v/\n38uJXVeDv6eBS2pH5rIClDEH2qpUABaX1LZkMoNhceuH1f7raAIM/6ZZsdGg\nMGINnneT8ws9Z6BfnLTBgMtbNqR86qSAcLw0VoY16DnQ6cr7qbGwI/iiRdMH\nZfqOzXTZqZTr1UL4WarsK8JPwirZef5OXFqygPzvlHr0s+PFy7hsGBNnA309\nqghHwpiKLoNybeayPeXB/F/WOkLQP/Ven4h76UT6AmNQ97WGBgQhIprWykbI\nZhKcACF1Pyeh08trbMtGngUK3M7z4tVlmDeqGxeZNG9jWv6Gorp2eS+8xaeD\nM7NnnvNPuIIBz9drpzeJblFFTTs/AlwL4fBE4noKqFHDDVqvaBP1X51xFYjt\nggF2nCaVJmNLu/DTY2de2B5dCanGgK1e4pk5SeNc4gxsYUK28ErGpfHY1pTK\nOT9sccqZ/FEDXW6zWZ6ebZrkCn92tdWUSXBJrrNHcy1ci88qEuw9F4QCiv6U\nbP8qDsFDZ4NcfPZkbnVEysSzCOxdrnPxRQVUHNuaf3aqB2ET27iZoFSHO2/H\n8RfHUikxctfGzfxSz+A4y2oL492rxyDah9Vll64tYYf7/YV4ZjELWPgvlr9Y\nUfgVz/kaOKMDPAv8CGc5szXlO5akqIJz/canlQiiLSmRtDqq/sdt0NCxt7cK\nKPGO\r\n=wLLA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.023f3fa34.0_1597281100855_0.8448367145987603","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/theme","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4cb8bcee706cace73fbe461ae7f9b3d4a2e4908","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":38,"integrity":"sha512-O/Q4I0ea7EBvouM3M74MtVjvMsDRjYEkHJMwTH+lmSkFMMWoniRGTuYYiYuRv1T8kn5C4ghOVjfSvIJ7+ZoMAg==","signatures":[{"sig":"MEQCIBcft7qUYr0E5GrIpWI8FZqKjmIB2QwesCZL2tTAnUMaAiBElsIGrslwLGAur16tza3JvluXFGKL7xeYHU49oEvcXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJc0CRA9TVsSAnZWagAAt2IP/iCN2WpAa1sDB9qvZBpm\nYVbxnsOuM4sycLPdjktQbn4KkZbe8UJX630sEf9+Jm7kcPCAD+9nQE0L4kfZ\nXsuaKUJsq8Ddi8n/73VsjDAmAeT6OEQdR1WYlIx4L+fKWrV8hBDiBGhHBjF2\nyaovjkgnxZ++BXKlqSBG9EM8zsrfwPeudN46W7HPmBUigrG58LpdMQtTT9kh\nnh5Kxc3/e+fraoHAXlp7IAebtK5scpn6us48h5I7jnPgtdXz5dLshmT2WR0X\n1IjZSsf6D1U9dfFY24w3TWe0kMjGkZjk8zM4YTsuIByhmoYsS/VZGRZEtnYr\nW1ds4CjxPlVVCQedAN4ZTas/5LTC7e/bnxNVUt/dtldywPxGtEmR8m6MubM6\nTMTYTs8TPin6eWyu9s4K6rIk4FQarvUBXnPzqKvCPM32sYtTQYiduqhZRJSz\nLEpvm3JenuuR0vc2gDzEwAFmG51mduBdntKwylYRiSTJZB376Rr4kEzJsZMU\nciOA+9GrXmEko9sQ32IxW/XpLOEKazppWY5IwOVWXEdd5x6Ix/03X7DWC9JP\n+2GrN0X9zkY9mZYdTPeGiN8eqggVmMKqO83vzh740YZPqDMXVTReLdYnct8H\nqpg6Y5PH1ozzTW42LArVtepG4H6ipouL/A4J7KqBYqk8vNETSKhPhAmY3pmy\ndqoF\r\n=cyR0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.80f3a9e5d.0_1597282099855_0.43472997313392137","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/theme","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26e319f6bc52233186ba843f2b64f3bb35c5c9a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":38,"integrity":"sha512-2CvRRifo6FP9g6l7Y0a8SadZ4BM1HY4ZjAcG8dSInYcZV2ghCy4hSi3vswNdxAMqt9uZQwdULH0ZeMiimFJMFw==","signatures":[{"sig":"MEUCIQDPuyoqDQ+aflHm0C/QB86V2y/mRhoERqJYqks0U2QEwgIgEzrlUrorKBx+HwvBARc7PmLOZ9QEZxHLpaGmNoNwmig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP5/CRA9TVsSAnZWagAAoD4QAJI4g5lVSQehTGpHCqRf\nHYfhozdAAEwTnpsbmOTHW/AhPHlTnbwG17t/yRl3LcLUxjoqswMSiItfYFpT\nJBhA6Djd9iJdzdqTFmQIIcNuVmv7zqp6G59fte5CFLKLjUPMO8dUpGaAKqG2\nr9Y6faNc7LH2vBS/9LlPT0h3mJEii8IwiloZ1aW1WWW/psSSm7LG+bNZHmF0\nOgu60+BJWAhuGVt9633kO22pvbANiKAmgCZT068SucbgmKzFttXXZB/K+ZpT\nBN2pWjbmhI/huvoaGjusgjnacGW3x1xXpgu1niDSeLU2LZzV/EqZeIvqX4M/\nOkpkXN6h5VxEuDSeg4I79sSujVja/YAJeY8rYVB4zi9yiabBvhj3Lfhx8xU1\n60L0T6dXM5MReMr1HlJIwntHYlKPwuVx7j877Ltn0sHgtFhUck3mq+O7zf5w\nR7xtSl+byckQtYYSafhmJlrVrB9W3krynbo2adV5H9AsNLSHC/FlX5h4zLyJ\nE4BDlP5qWIUMn3+r6elJmi3VOSQz9HLlhHsUKzvWcX7Oc0NL/RZKxyanrwvR\ntjTVRX4Xh6US3b03OZoPsXJHuSlFgHpAIDqJUzQTQw4LRJzsfgO+T8bSjD5N\nhdraL0Vjn054p/6sVOZJ+ivlY5aVztrc8c9pa+Kp9/zQC4R3eNM8ExZwU/Bf\nvYSS\r\n=Uw8I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.a1dcfe97c.0_1597308543482_0.083180140671689","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/theme","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.af332d5be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdfe61484fc2e3f1542b5ad0daac4063aae43ca8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.af332d5be.0.tgz","fileCount":38,"integrity":"sha512-l9kc6fzeQ/U81MMNfv7RE+8JJN7DoHGGdPHBUU0G110dBo8R6Gw6VfEqXZeQWNSesU4Bnhmel9FGCVXZV1h2hA==","signatures":[{"sig":"MEQCID4TgOP3XMFy1va0UpR+XZq03rZ22CuOG5JR5vMLPloAAiBAr5qaqNba9qkBw99KDk0IUZJltgJ4gwnlgw6dVQQwCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa24CRA9TVsSAnZWagAAs7cP/3Q1zMdOX67tXt4KYGNf\n+01p4jiM1+yWmmVBdE6Mv8hCjyd1bM7GzAMP5NZADymL9OZTkXY9R3rzDA8C\nn0+2se5JRHfOTKWFKKbXXdlNkCCiRrr8pVC9NZ+ilxj0eHeypNaIwykT3f/J\nOKRuNQpoRkVjNNDSWe/SzB9idffQTD2YM4HpGcPksBlJnfp1a4SBv/FT8e0G\nvwghbZLJmVnwgizUnP0b6zuq0aoQ7n4Kkip/SoqcdYpPfCmN5rgXeSbzvnBo\nf7tahca/TZJqwkIQIybmkzl7A8xp+e0DhIrh5X+ThzHJ2Y98dUmD/d4o+37M\nWm0ZWBPAqRlCdsWkOLQtRM50VabI7eMWdj2vbj5IbzKET1jeEMFuIxR3Rq/d\nCzfmMGboLOyz03j2m9vQ2R4yFGeBo+h5OGQZe15vCBXRt6LE5UOAL97q+4HE\nzhnWQRFlq8oIL2+gTkZ2DlmLx3oaMtTZhaLYGX6liFP3Z3VzA/JizqeabBfk\nCB58tAYM98/jvR+J7SEdFVPY0mwqXjTc2VIk6e8kPA6zfW+c7oMKh5iu6nlJ\neYTFqjjyRKKD/WTj+j/08RS9NULJszi1KxPDjCuzvitKg7sfvPemvgjIk+rM\no7kv0gvccxvVncWRFhIAVT5lUkIV6MMqKK727LkGLbSAmoG4pKKyFEGKRs6B\nweFT\r\n=a8um\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.af332d5be.0_1597353400028_0.4656788111381369","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/theme","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80dce0b8bd15cceda3b684a856b9a1af72ca4d84","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.7dd4567c4.0.tgz","fileCount":38,"integrity":"sha512-MLXKjqvyP25H4sPsUCvNvBjoo4Y+uc8NhtUU4t6inYN/jmtFmyTDFcPdYjixamBNgUiEW0b6NXMOEXU2ft2RVA==","signatures":[{"sig":"MEUCIQDo99sCi2C2sxpsON8fqCWNMKAdrK2/KB8bJHVujsx4YwIgHK7wB2rEfOMqnWAoJBHlvkRDRYL32mnGzTl6rDC97VI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNd/GCRA9TVsSAnZWagAATnUQAJVoS0/Zg8mrnwck8Bte\nyYuuoItVKIc7RKkXU025pmjskhNDCSksSlEGG9OMWnxh5C2oZleltAcWZ/ns\nWVD9tiM88zjmKo9yCdSGzMpAQK287/EeHBVPE+GMcZGA/uKKh7ZKAcvg5rYC\nEWVymRPyM6zHiPi0WJrIWdzY51/p0msqBOTUPtj2CqGdGOR7uEvg1aOApbQZ\nROxFw8twGYjH8c4iv5D1VRmpajg8j2/kxo6zTTCmQqABvN88rLOd1Co2cwLg\nmqD1ju1/Mg/G0fk3Hxq05yvyAw9kJ+3zBfJL1rYWTkd7uqZLDILMxm/XjMJ3\nBAwT3QOCGK+9Bgog82xEoBch7DHErb4Kzm1Rok7vcVgShHEqZvQqDsO9WIcX\n+sTgTdlF7x+vnorMVjHIozJ8ymu1riemHFju1YXWZONvS9rOWwxaGi4ZYRXT\nqqwpxtIucFUxjQU/rzVA3GaNWLfzU3rYhxj208S9lwmJY41kQUbp1qG8+/Bb\nyfUndGjbCg5ExOK5ADqBgR/VmzZeVRCk63Cv8ZFFh6M9aV+fPCQ52YWILTHO\n4s3FQ+unBNPHAVTM6douUbZsJnFWWtT0MODJX5w8elcGYmIQYADw3wbz6ZIf\nalivxGO0tF1E4Z5PD7WBbUrkM7WtR1PnzYAEsvsJldHUmwy81mJ7c+1kg9de\n4Kaj\r\n=lANm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.7dd4567c4.0_1597366213987_0.09237949934055867","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/theme","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.ff870005a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64718f75d6ee823c73ea7bc274ed988210d953c8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.ff870005a.0.tgz","fileCount":38,"integrity":"sha512-TRTtT/Ad+7cHmxkVqaSpzoYyjMHMlbOTpwTk8Cwpq7psHFM91GtdIhZajOgjnjBWM+f/ulSgXrrEup4D8l3KWA==","signatures":[{"sig":"MEUCIQCmnkSWX21RBpmoCEjtXeNRKq/PKiPed4/oWwjWgaOYKAIgZfUTrrX0jsUvnQv6U1/egk7iURXqbIoMZetuAjVzXwg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeW5CRA9TVsSAnZWagAAvkUP/3uzRjv34ewzX3nQUT7l\nhFQ0Psr7CMMiI9a+AoaNgL77WWa0WPWXp/IMua7riAN2OfiEPTaEJzl/Zkqd\nBw2ftBoTWh/uTVVs46YFuRyWwka0laCm/oUbI1SqqeK4ZlBcesj1LlTM4stG\ndO/GNL1EpSp++5PW5yZOAiyUF9x67uUr8OIWCK+SS11qfXO7AXgVG0z9NkjY\nHYg2ZY5/b9W6Uhpe7SN7l+NRJYhK/k2gvwyFoBz6XYt0iekXJsx+28TbIQX7\nE5Oac/3QLjCBdt6rYi8200EM10b2HuvHMshBNEtWOmNsv+WHT6Lrrs8/AL7g\ntsp76LTXhtP0aBmyphEeR5fXZXyLYSAk78+bHxip9ykZYcpsxcNLYdEhYYFO\ndud28+O73kV68LhKon8Do6IwJ6nsq5S+PC+6NdM9kP4Nyx/P17vGjxKPfu1L\ncBLtmA025AN5BYb4FYl/w+eYkD7G8wwOpGvv/yY9vEaQPfLXQUbFBmtzKGDf\n8KKwrpTOSgOz9jcIb888+CuuD1KcwyMfzorcgrTxrVZn5N5beEEov8tuksOR\nqmQVXeO+HaIFPYt+w3MofHM4iml9nTQgivXlp7//E+E9j+zKkHou/xGA1wnx\npOwjNXXynVjKBNYXlxRUO0GXORJal+yXSlw8RZ5YdYhKo1vJHOIoBzBrUbcH\n9aV/\r\n=qr2z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.ff870005a.0_1597367736522_0.04528700210186698","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/theme","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.150f427a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dd9d0ee48769b89770c92911d6df1e8a0cf6a9a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.150f427a0.0.tgz","fileCount":38,"integrity":"sha512-hmrm7a34XN4EslFkpNKFUtIYuDwyOLOZCS59sxy6PHD+RM1YRdsIvhXEWWRIxptMU1PvBFPwk85FzAOscY0SyQ==","signatures":[{"sig":"MEQCIBAMJnojp6M8xL626Mv7pV6HWvkbYEOpLxQj647NVxziAiBpSHH4IfKNp2539BMLskZUQKFTaVdSBvBsVDE2924R8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpGQCRA9TVsSAnZWagAA1zcQAJoeU9KjZSlGElv5wTpp\nygsyRDsYePez2HI7Pg8PTs/o7lCJwGmBDGC6UfdgCpkzBLPdx0BvvqhZ82Nq\nldQisWz13F6h1gWMgARbYdYCI9D5C4faBDeJHg+pIgy4FVziQrGbA+acv1c7\nIOOxG52I2lYsFcmPBNibkeOQy/gkKZTAJ36xNZ5oFt/py/k/8ODZfvAdXWqu\nk2Fj0Zq2lgZsKDh82KyAgZWN+fGxxuUOpHVhNSDougKLIT7+seeP9tV0caeU\nnqGSNPK5svk+QAlBEhmmI75DYQxKEusW1OSbr7Y7xntu0AntZ4HypB0Vp5IL\nx37TSVcphP+b4r/bdpRBEZGqlBo7jZzZ9wN9APy/7c+ovNuHRfg1wykfOL9B\nP3xAJT1VRmb/8g1ChRD+HZNoQzbQGz67UwJrB1e3Sbuf9kRNouZgzrfS4awV\nixWNpAFsAmYhA9Kph8E4d5qLiDpZTXX8rWj0MXnkBSe4vSmVkOoiQVrApLfh\nnttjMAn6hfXKMItkI8n/82c3ng+8NDBt7rubR0fGZ/H32LDERDhl0U6zBrrK\nF/yAnpVJEW5WjrkmMsMMBJMZmZZ2W0AqP0OB+6yl1nHIzZwfO4hpG+mEHVjM\n6AEdAgA20LnLImD7FZf8+QZ++BvH3ns2/o3Z5RaJ6Bdu/RJT4MUW14ngH+rg\nSssW\r\n=07fR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.150f427a0.0_1597411728112_0.6794909881769546","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/theme","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82d9876d5b45adb2f817831d3c06e2bec6006320","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.bcc58290a.0.tgz","fileCount":38,"integrity":"sha512-S+o8Qvm+61Acif2/4HQW9zRCB28ifG3AejK8gq6KtWjvChYNgbLRv8YmHBi5Xaata7rBAoJafhVkI9grysEpKA==","signatures":[{"sig":"MEUCIB68z6Uf/Ur1Wb1cmiHWSUoBESmr3EwbTaoTf/Y6EWS5AiEApUZVsa17FhUDGsy6ZdTFYRXBPGDvH0zYO9ptDXtsgwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxySCRA9TVsSAnZWagAApQ0P/jezcacIRNKQ8PfeTgln\n9ECgyoW30aLCyfpH3LRerdn/rcTgQfHHw4/vzUUs0hdJmyYUBTPLYBstIU/p\nxII45mri4fraoQ0d+ucJNMvxmz4J0ylrLrNvL/PIZVaA4KMm3p03vEz75EOW\n3moh/cvNpfcXULdGxTPewo1vRhKDkmLY2+YeVGNE6FpWi+YPHagxIpJt2+d5\nfxqUFxKZ7OURiA8gzBVZSW/ALAPqvp8Y/ossTAefCof578iSx08njUEp0OyT\nHtL/SdZgfJvjDCwXUhTQTCQ7oZidOij1D3ukwRz1/drRq5HZKc/gyF5oxvDm\n9h+S/2oxwn22tlOhcW9MrPLkXrzNJy29imtG0+463kv+TdaExQL+9j9R2Y81\nNk1yJdtkK0bpyakKRyo1HoO80qC+qIsy5LldC3yCS8ojEU5lw+cI42WRMNzW\nuDtR170z3J8/JZ085YSe7/MHw2UCAG0SiYXxtNCAW3Nrhj4f67wYAk8oNNuc\n14DFFaxcO+/OkfznEbLIt3JmyTCnTNaA1Wh5B2cyaOB9kwUbKdIzkJbvs0Xe\nXKeB4Y2xM8aLP1dKjJTC9Tj6wfaKsi6r7iUkiiwmuls6dKU4SVS2jFZG1y4E\ntQvDssIYNzzwG4rpCx3ma57F6pD24ZIOnEUcdEfBlDPOEh/xlPL/AArL7GDW\nOzzX\r\n=IOe6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.bcc58290a.0_1597447313602_0.1877373825803108","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/theme","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f2de9cf2bee0919927a136c553e0e0fef68af64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.4f55400bb.0.tgz","fileCount":38,"integrity":"sha512-wko19MR3WHcDL28Ha53FtLqmxnJCuiZX4q7+u52Weh6sH+9CfYIYlFKIJasCyEeZnCC7HRvg4NDRckQm4KUVhQ==","signatures":[{"sig":"MEYCIQCbvKXulQCOpR7cwlEr43b1rFR3UBlk0kQ+oA+TtAkgDgIhAIRm31CWqAQhwr5wRRx1Ulgaak4sbB03N6wf8wzXwjRw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrJbCRA9TVsSAnZWagAAUUoP/jaVOlma+Z3ZyG1fuZob\nmLhX8CvG9njMYJHN6uk5hY+7kNknfWppjgCj0MHBozihFN5Xvrudl1ge/mAV\n/8G8DyVlSnkudg7Wth/e5OKLdd7tPcUMmVY4bJoXviBZ0hm80XFhRj+AGYEI\nb7TkPu2CpVm63ImjyCXZUZUlQSmcSaWS2t3yQY8RrhaJ1mChj6tAtU+wNLIr\nKS0eD+eIkom6942WRlPaLXEMeMSXj9EBz1GV4oT2Npa+bJLTpJYt+sM6OJQt\nz/zMUi3XZCIxGw0bdgqLJRNptU2ZepDdLlsH25Bv0GXwezGZ+kawtNiXvYct\nwontap/OCJMN88muiid0rFxjNBrWbZAIoBRIj79m8ixqJQHSf1+b+scZgjt1\nxizZB7/4hcyNjmV03oSFjHFSJFFx7qRrFWb6v/TAlqHMu7LBO2h6fmg5OSwo\n3+J9j8PS8AXyrv+lJtPs9n1kZEG7EfcgVP7tNjawLOujHjSfXB+2S2+ocJJk\nJD/wY3+v90cCHKE5i+csUNBXXyGr+fiv+H36Omh5XG/wWUgO/nvRCjiqeLVk\nHbxekVlYdl2A6eAg6wxAqW37r7ow/3x0HJfqF6Fs1DMbd0D9ot9fKZmWM34f\nV75pLWGJB54qMDn7Y7nWDbJ+5xgMUVUbK1MkRQFhEuPF9ssk6t7pyGqEkEjc\noNW2\r\n=zwMr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.4f55400bb.0_1597682267381_0.6091713441415929","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/theme","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.000d64815.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a64e530abbd85629d88c838f6e724f1bda155e95","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.000d64815.0.tgz","fileCount":38,"integrity":"sha512-dltunLm7V6zc2RAuuTSUuCJU5cOqLMMgNjkZpg+DwiJ5Ug5n+VsC/cgCWCCPC53yuTEmfNYEi2MowzH8W6LSig==","signatures":[{"sig":"MEQCIARy619sptO6uIzZbxneU4UQxTNHsC56jedSbawI1IMHAiBD/3Bm7UMAuvY+hQXOos0G0uysLfgyjB6Km41tzYvHsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrhpCRA9TVsSAnZWagAABbIP/RZllT2Zl8tB9KLnJN0A\nyUgW41lCsS1bvmAu8wOywLCN8n30j321UGPmkmpOjMedNcfXRTJh7RQzordu\nfOe7YzJD2bOOvMyw82/FBV1/tsNN08kDxLip+ptaiEN3hky861tKK8yAlmB5\nAaWRnGHgTFOkV0VzUr2/yPGnNE8R6GxL9DlXrBNETr/dMVAphqc4UQwxJOno\noNAsn+mRxofzvaj/lATnznI4WDjRglUPM+u/VkHl/8alRMClrMbZyEAe1JYT\nJPCIwcXA2cO4V/J6Wb8ibbDQ8zSZJdbCsOmQcTbdV5oGc0yu2Vd3ZnxNSPHW\nsGiy2Mq7PHptd90gE181sml5avWi0534nP1e60lVkKuBwboz8CHcvr8+bBWE\noBqEubPuhFXpgtLDgmaLGbjnSL+tUzviNz6hZkfI0kdDPEiCfPwCZ6QPAy7s\ns7f/pzw9pMiCtpcQ8ZzHHC4nRAnISi4XIWFN9cX/NeVlUTrM3zPLS8G341ue\nxh2DsrYonLjSoaWr4NFZybAXueLGmT3aPIMHbccP3F/6ubduqJcZ3o/PK4br\n9f4jHt6c6qpzW0hYuZjBeva8ykXAT5XrYmdwyLdMFQ053JeFcLaLvBPBsOKw\n3DBTbLxGHjGwByBXKoV8YYnSOzYAhhUKMmNHLeAFQ8kY73UwQZ88oYPedrZ4\nfanW\r\n=KwLw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.000d64815.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.000d64815.0_1597683817456_0.698305775096981","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/theme","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.defa599a8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aa5fc5c5391c69511c4cfdeeea0ec3dacb47926","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.defa599a8.0.tgz","fileCount":38,"integrity":"sha512-NlqLv6oeaLmGV5VLFeUnIR83OWeIki4f+6FYOSt852jBHlRNc7lfCTUwtCqyUcOTqOyBInhhJguH1+e1aoDfTg==","signatures":[{"sig":"MEQCIHN1v+IdVxCvWK+NmAxdQTEq0aL4klO2byz3Hj4jd5WbAiBJfU8clfs4Xg6pfQHX/YrYjtIQYyM3ElcIrIQSCwcC9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOukOCRA9TVsSAnZWagAAbBoP/0e2qJ6H99FCngBLsDSR\nf5jYIDzGd2cS2fTlSMCUvAyWKlhAbDhB+kWhZS5eXuwHiuwhQdeaV6ejrkoz\nDNLZqAU4XIgAREXT7YH7PeZWJR3zgGydljXLbhyCIAMlkNs1yx3w/q4e1N4b\nxHGWCmC9dlasHJ23p2UEy8srCzpcmdl78ab3F/cH92UeQcFoZwdJVJAavOxU\nuggBjzCYeHbk/HRYO45Kh7klX4ek3v9+7wsljTr+LeVXtuIUNCXRMiZa+bHz\nFTZXMB/7I4nHq9o2WnrJ2kHj3v1bxwYIbFxgM+tP17oVTB/UIe41Ri0hoNLC\nB9uKgVWcvfKZWmX/fj4Bj+kw+w3kbm9etL8X74auFGcxi73H9JIgacZ7ywlg\nM+BXrWGvNuQ6g/PdsITk1+SYk7NHmVzZYt4z4BHpCoVtz1CCHol4modRtQgC\ntmIx2gAU0SH7XjbQ0vcKQTDYUnXWS2NMmgXXBRQfhFyw5DXaFSjSbIyPvqqW\n7kMnZAOqQZwuYIaZSsll9qUvYZHocFXnucDESlV2vgvkADR0hZIzWJp2lj8k\nr34hG9aaWrH9VW8BCvdhzTGrJgDHXf1aY1UH6eFXNKDxr7mcAQpGdXBYZE6K\nciio6+hhtg5tcPpcqTGxhn/5VUjErMoY1K3CTQOikixt1/itAMz78iK+qIn4\nIGhY\r\n=qE3K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.defa599a8.0_1597696269720_0.7440312189965066","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/theme","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf93b0a61eea5c7143e83ef85f976e66dd4ad45d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":38,"integrity":"sha512-wy3rJozrH8hUdzLPWwESOsgdnc3rsYeZi3TgAJlaYI2Nck2OC38XBZO16TowLMQSvY1dSqLT1r3H2AEtLIKwMQ==","signatures":[{"sig":"MEUCIHuhbhWVEssBMVdMmezYLzhYj9TB0ekw5MxQL5fb9c5MAiEA+SJEfa/pRDyqXoCGESrR8diISIbaihVZGyE8mBKct44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB+XCRA9TVsSAnZWagAArSgQAJIlP8emv+8bfyJvWBjR\nBE6MnAEXdEGAKHlYQVfBzF2uw8PwsJB0iAAUtzQDIGRGpLkRLb+pVMkbRKAQ\njshMxks6gCAqPvePpnfNkOo0aq8e9oGHraPJv3E96oP2roVv94RrqebVYRo1\nSRUcusNccBQGAGsVOtGpSpICandxdUz87YUhzKuaVoBNtBoqm8MsS0mNKky+\nnMqUEPEOrJmnnyapanHSgyBYr3Xy5ZsaDyWjVzBBxaf/vfqyZytGcEZMHWAf\nZcHY8MKpMud0vzhQARHc+d/tfpgbGALukNUVNt4QlnoUqOslWxWx0KNJCfGf\n5klpevW6XP1tb+2B82fhKzTUiHsunwdZb+JC7nHeZyA2Su9/UCrLZZSX4MZv\nh7sjhIKj3zvkYyMoXPzf1+OorzwHmzV6iq9fCug/EOoIHDzsNBRqg/BUuA97\n4AbECQq5t1MvhmioJQJ9bpmHZ6KEurCZf+0yTIv3stn2bAXH9vXkIcDfbCSq\nBg7KpMEW1VtDSilvBVXEVRLxx1dYKJmBKb0IYg27HAutSIb6wnI86MlYgr3R\n6VOS7FiWKk5SFC2OZ2ExiSFD+CwJOKk2A5KHV0QygfaOYU8DYgi0g4lrYjY5\nSbNfp2IMQmEaU/B/9SlsLwlxzigOAa9qOBbwY4FX3/Sd4+mvpymMuKdSsmn0\noiZd\r\n=KOgC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.66b8ed7e6.0_1597775767369_0.6570211018113121","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/theme","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e29b4854d781eb735029c82d808fd825a032036c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e2b1033df.0.tgz","fileCount":38,"integrity":"sha512-lDyggmETSOOnu/04bYde73H+LYy6L78MhFOJ961XSKCKZiIXIdtC1GA9Ni2jscJOXfKsBaILbNoTZuoPo1MWzw==","signatures":[{"sig":"MEYCIQD8MbtPsfhSU8s+pgrp9y+Z+CiDCk8HhT6qsSBHeo1dzwIhAKseUyY21wDT0Qqm7bgiyIDoR9eOzi4Fq2kYwGJgh4Wy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXJMCRA9TVsSAnZWagAAYMEP/R5SBy+KFk/c/pl1rAB9\nYrh6aPWJzpb6v7SpX7qb9XyNmVQVcgQMIVPnILJ3Yx7C4HObF2n5Eq2iTThe\nSJ+hfYJJNzVVYwm+IlmJ3JbiPk+M0FI0yF6pdY6fDaEAWI+gpPOzu/+cE60K\nNy1dOPItUDlg9eouRRnHbvNXPuOdvR7e3DAiAF31AmLrzOWqNHqa1H/hSray\nGdECJsAnlI26JZUMG4zSoSaHbJl9izNfzEkG8BYA4dXlcZYuOFCJR84Ayskl\nKk7JZ0cNfbF6rEvX4owEWCSkJyoqVoVLuVZwXuXFD24YHiGAYpMN7DnOauzI\nnsevLDf3naBYyV3yT3BxpBcXCaxBLAtYz5g9Zan2hpQyiE1s0vYSOdPn8yCo\nK7g5g9YRAiRqMDH61pigmx0p5Z/6j0byNXYIGIVpwazuVBqSMp4WSgNBwc7B\n+oz8wpmPwESkFwoKTQHvb4BsVvt8P+7fPSXH+nOvg5GLGEQWflCM71RQHOPU\nNtsANcC4oJHb4agymHJK6igLvmeNJjizXOhywNlD4TdSJvzzuIzHUktImbW7\nTr37m7bpvrrNbkeJ8r2QAwIjo9l3aXcLqUrYRusbn/btGTp8jaWcG27zxf8P\nXMQPEDDU3ChsrIlA0q9gMlJs1E36bU+y1LPYhwqdy5mLlJH3Po/YMErXEKaE\nqreM\r\n=ReFa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e2b1033df.0_1597862476151_0.13331821152801204","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/theme","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e3842cd9c8788267cb3d1c3f2c9ea503e28905b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":38,"integrity":"sha512-xUB1+cYtommKwtnmO4lVAoL0kaOMncYhEnEOJTuRXXiHCSNVvw/pM/h2ou5CSW2CZQOXvou0Y/gjohdw9g/EbQ==","signatures":[{"sig":"MEUCIQCUyS1vUQWASedT3WLDuoQMmefy2qcKLqTVjS0nibrMZwIgGfkpngRgwN/M0ZLVaa3RMQKLLI7K61nctbEXp9c3GtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXwlCRA9TVsSAnZWagAAdykP/RH2/rAvrbz4BhS9JS9A\nWcvtqymuq7XJiYIzflgxNLGcw3ybyHbbUZ3MN6LQYeBAAqGwD0I3tqTj5K/3\nk29HLwUb9sHcWE7J0Dk4LwDKTrEA6d6h/3eLk3dAgSQipBLlBEQQpDdveCys\ntuyEjsFgSAaxIKHgaDd97V0aRmoohAvLxcJDGZNvWVEAakoFzk21Oc47/s1W\nash6paiw1XwFV/4btUVDTJLGMmW6HpCUGjU8Fvhj76ef/LXaAqPqbh7KLP5Q\n/RxgDTypjuq+3mAU4awpVz5nyns3GqJx5eYc5R8H6VHMGrFZ/BKkOshETSuH\nwtd/bVIcpuDtVE0MNyoFtVIv3jWm5y/eVIYNxL44H3CETROpS5ukq1FhOUop\nabalGPo1crq51SPoySVi9wwN2XtBq/raYwaqrG3NX/DneZbvY3+N8dVTnn7l\nQ6Gatzq2MTddn+qJPuAgalKdH1dDUoMjVnHq43AHyHWI9e1g3eg9rltrHRkk\nOMYZfzE1mu1qPGBM052XaxlsfRhSIBFVGbwPB+7J2b2bt9BkMuplchRx3fKC\nS/EavWbbE4ViGoU8l8mqgHIbyCUzFDW3iTcOpNw+G1QgrEvErE3AC5C3I3Q0\n+QwsPq0DjXMcNtDRyv5r7FqDvcWG0adJlG7HvtaPNuXIkV4Du/9rd5aW7Vlz\n86vx\r\n=n+Jp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.2e8c3dd2e.0_1597864997300_0.18231937465514703","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/theme","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd5445d1b0be68869f6ccda19cae26472c0705c2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":38,"integrity":"sha512-48vWDnpVdNJcnJ8E+nEPFfSVHvSc2Vrq6pvVBoog1t8wBg1spjAAdSWIjZpn9wbbAJ4j+4qIL03MOOHD4GB5RA==","signatures":[{"sig":"MEUCID6QUtWmxA7ASLNgA6KTWwjZQVsyYiLnY2H3ixIKsh9XAiEAgmdCvkx4FHlni/roVCLKn1bINX8/wgUc81LJL8ZoWSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaWhCRA9TVsSAnZWagAAXsUP/2jMQUitwLtU/zfF4E6l\ncX9Zij6U/KSdv0TC6rVZv8ULB9tkAv0RHB60s8/uBWOSVXIIcENwMrGa0uP8\nXaerSDHuNe4GB+lVdvaByQ/DC5+K0WphFkoJB6AAoKN2xEetcPim9K+kV+/g\nivGBauOr2SkApsYtmjocOT54j4N3xi4I41QZX2or8Ob82N3Es/EwvfI0rqCj\nCcggodZyB0F3AifD8OWp9kl6C3Z2YSJuBehF7pWhSmw3cHa4h6ikZ1OzbaeU\n2cH5M/QJ/ar8XJfepgk6GHsC1fdhDDlSFNa3JBlS+Q1lvArpsaGGESzwGAyp\nlmq7u627nEyeiFy+CY0CQjKHOnh6p86NPRL4mFwAx9Q+Wz1ynI4RlI4EKvwR\n5fLOsdRkv773XDS3jTAs4ZlgE7DQAONj+sZVvSgZqjs21VrAhM2qfRN6cIWu\nvGu/0fnwkDx2BvP8MVl5G2X+YBnHEjAv9hhYVuMfqAPDbq/T+6lPDjDY7mNg\nDXlw3FVfQuLw2A/5yTWqJM9kho8UwCAg8D7YeJG6xM5fQKaPXS0a2L/wEtqC\n2yHDIHPU8wgxXnydCnuBlTIElTRrkXEfEmfjuH0oZHKJxpgsmHl29NzAlB05\nsozLR0nl1LpAm9SkqXmDyyz9Ba+3I/woALIRUpXVUKmmFJLoRfcTZ3uw9huo\nm9IM\r\n=XLhX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.b2e80a5d9.0_1597875617303_0.5961797499727357","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/theme","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.ff88df637.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a94ffa28aa72f042bc3610663ebaa03593be807","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.ff88df637.0.tgz","fileCount":38,"integrity":"sha512-KwGd8dV6PPW3/jCEgLDIdL3PdSdnoDGxxI7UNSFI7v8jQUOUMNVRImfa4oZN95FRdvf3fVnEiZhYOm/6wfQ2qg==","signatures":[{"sig":"MEYCIQD56KFz+dnTMr6pZK9QbY/3AdH4JJfTvYzXJkCxsJU8TgIhALTWVvYDo+42dDC1gT+nvthQUKZN3YtoO1ZVdRMFGQ/Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPahzCRA9TVsSAnZWagAAVpQP/2e13VCbH3l1IFX2oLMe\natXvkiyz77WhawaQfTtxGkmDrIK5a/xX3eqQp5FrkTjJJTLI5uvfeT1LpQLw\nwwFBuoNeGAPd7zerm+H1qepdfkTXu5Qb2LlL0X9/mrxMYIZ09TMgi697F1vh\nZf+xI9KJPlJW2sUSQcAcDKOe2JWWoRmK7RjcyQ+9qPLc3Bf86RJ5y2d/TNgj\nigYndHxF1gJ2iFJKQzshQrh4E4Jvq0fK/c/HR3lxRnPMd2ltUuLU5qzJ7+u9\nAO/D1xGUbJe7biO1sbdPyowsgksMP2IVSio/l/HrPVnFsNkGN4ABMEgE2ehP\nAB3NZYn4TOvgtbEZIb+eZirYKjCU6M0fq+tnFQ5RBQO7MRsHVV8Bs5gseoaF\nIJ5bFB8nqL25TGPgL/VLQXdBmc1Zis6shJ0jm3aUDUx+Q7m5u4RQYEyo5eiH\nUQ+V6sTvRsj1Qy3XIlo9uCFgMYPGzRymF6WVjF3i3laL8XjnU1F3AjcTtXgN\n7zpPGlwwwjz0RFLm5fOpPrKy8z50w2GW6PlOrlJTk+LeVvX144iIKg3u4uz6\n74dPYTELbhDPOBpYKYgHC3uYB/L1xv5hqWo7gRsZPBx28cPz0FGC4Hq/u7Wo\nfY9YGAhO5+ZkZS6ez8qAT6eCXraZvOaOKwDdZ9zEeLXi/N7RgEt+ZLcsQdTm\nLdGx\r\n=aGsa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.ff88df637.0_1597876338684_0.19571511619221327","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/theme","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dcfdadee1cdaf8a95ed8fed5c8d363465f399cb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.32fb314cd.0.tgz","fileCount":38,"integrity":"sha512-NcvhEQx2ApCg99QF/WrapAr1fufEFwLgRJDOfcrtAdrqfNz7YsnaM6eOabG60eiaIB/Ug9P0IL5+kyL/Q0sPpA==","signatures":[{"sig":"MEUCIEcGDugaqzepQGj+O7wE5+vU1/4AH/bqEbywIJ00rbhRAiEA5QJAvqBWK14JxLVNpXSviWl/Vauo5mec9C1zGxE9hL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlJBCRA9TVsSAnZWagAAtuQP/0ZU5cHv/Z1dSk9EZZpP\nix+v9qJOM0pu7Cv1/leDinPJakoAocIVgl7qxTgwl7rtgIrcS3tRf8QJ6oLT\n4fMN+3dgd8JtzL1YJXXxjhnPfFgduagjo/Cx5pFiFj8Ye71Wy+toQ1F4U47V\nbTLJ8iaeEcCXyOfeVR/i1j6zJXvbcrAlbWCYsWIhOKgJkupT3XOoI+KeJAX/\nS7xz1LjPIrlTcl5eKBELEynaDsXYFApnx/MpiCm67uTAsd9xe5uF05yF1czv\nJlGl2eQGunfagJssFUU93Lzt7yOcjx3PARt3bzUJkaHskXRt/q8e8jA+6KIw\nFtxXKowDUi7x6TGp7B8KN27ugkrsV6Hj3DRvOoykowbQl3VXzWkcpk7fPcNC\n8kYeJhjACvRn6RXe82emEq9eYPmZwmiJoD4++1AcabxImvdzEbpLqsVhRmFY\neaHbfFjCH2kOfguZmBo/HgYjQ05DsiERQWn2GREiybVWjaMqyqMz/+n/S4FU\nQaSUUx1JapBoctT3vAvuhRD6PKS91LYbIykFsuPm2YYN0GSyhMyP/hMKVOju\nfYA7f0kd7TT+ZF+gonO+lx9SdSuapthEdC8T+EfnBpJaL7QbCZ2L1IH5v5cP\nLhlxEyTacz201iEWWLVUql/HL6ZjsS8tguG7WX18JGEsYUhoJvsytP8my2sM\ncUzv\r\n=3R6K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.32fb314cd.0_1597919808996_0.13743433897575597","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/theme","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.546277d32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"852c83de2f32140980b3dbf914d40e06b04bbe98","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.546277d32.0.tgz","fileCount":38,"integrity":"sha512-zLkiZoi5SEd3EvbsNEVQK+xo96btrQRo9AsuTpfCwUoUYQCGfAC+Npp6ffDiD9Gcuk+5yNWrb5qPmmyBiuyj9g==","signatures":[{"sig":"MEUCIQDksHCIXKLfCLKxTJSNQyQTWGzzA45niRUGlH6aVZZBBgIgNKgcpsmjsZAxSbjwkNzcmNmwIHGhBGLrbLabhexadD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqfrCRA9TVsSAnZWagAAufgQAKBGdsMWDUO/G0EpLQFW\n7ysvXZw/BoAOTkjb+dIXHAlDhTTA6fChZNSlkZC2+GCvmMDGWX90NOQzfREZ\nNbtJMNNybGKbCwzH5BGv5nKuD16NkSoSgPRHaUZUr+UfnKveurDMcu5jx3Dz\n/e1hbzj8RfBe5NOFDXdubK3vPXZ3S4bNXkmBFQrooVn9nDIEjdz2EkH2Wt7j\nxTyhNty+wXOaJsL+vOSAaGXG1y+/b5b3PtjV6id7oYlpjVxNfplscabi4sON\nJwQG+IBSkXRu+5WcJgyW/FtNXuctCfqoPLAwqJL0HQ5MHdqVNBZO5FbkcnZE\nCWekhBijVhivO8EYg5oURVlwCZW2+9CkCCVAC8+Wd4vT2lFE/XD0o8pIyASd\nhvOWlIvVEb/ZebShx5SeY/MyNYkmMtSCXqhhXs8GbveD7gE1Lcus4zjR9Ygs\nCRq7wHRCwCC60L2wJxISVzqoEP1C7xoc3WpTqBxc2iRWodteArFKpGf+WXbV\nTZdv8YkxJX13LP7upmocY9MyU65X670uLvG0HKR4+nJ69Xmd0KdJFdE4+95c\nw5bAUTd4aui8vDsPacjXYc2nkTUw2exeNYZydjdIHqWlzTqwI4lSe05YF+PH\nNOkBKjSq6g04MyR5VzSb9xGhePQQVtS89UCWi++Kd8Qhnaj8QqXkx5vC91Si\n8ppe\r\n=X+Ty\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.546277d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.546277d32.0_1597941739351_0.5023595735332644","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/theme","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.da72839f4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95aac0420a2f988094d65e36a7aa921a0d3d3ee7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.da72839f4.0.tgz","fileCount":38,"integrity":"sha512-PivC3WEJpob5irlqcFmSDgSkGqBvogFLsZVULUnT3RW+vOLDT10mFseHPmY5Vq1t6ebKvCe1NwWgNpXnsdbzrg==","signatures":[{"sig":"MEQCIG4q1+7ceTH1Ph/9BXUKCTnHhKM6yU9W5gQu4ijBixvtAiBvEMk2v0bYT6SZ7keCm8tVB0vs6K6JYNNZYLdrbJ+SPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrnxCRA9TVsSAnZWagAA3z0P/jIBnAhbz0W7MZhkYyt7\ncRooJCdZziiJRtkpJxEaMKrObyeRcLZBarfXtphOokV+qqy9UESXYGl+8Qq2\nePceduUg5C5cdgX1Ep8omkYneuqUgx8qNa8YyjnYvYU+wc9pYr/j+hz6wBRu\nQAXTtrCdE10AKBLUtzDJcz2s0RkdahXUDfzkttpYyvtN/2GGh7u6NpUM6LaH\ndvL+dlIfb7m+dXyx0KyxKCHnOehAbZ6SFSnWb0Ch0aPfcqMMDTSzQmH68A0v\nxtBCII8iN3rWvRWKioyH565YLZIrnxvSZSH5COSCG/x8IAFt0W2Uj8Cb3bTV\nj23r8RjH89XDA44o32yWN2Yt1jUlBqSmAh0DwFC75FVfrb2mAOHUSzEXriP4\nnHRlUL++CJ4QOfpQGynBWKUeEa+QjWdoI6Hspcx1yKDZXA90J3ut9mUh/6Wx\nekN1obW0lIBe3lpyCxpdMdRR2uvdt7slfWrVD/+8Fb6ny2SXhdz1kpXlzq8W\n5zBhSQxBs/IvhvwpOUx8sQYy6xaSUYKc5SbXqoxOri7X9Mia9scAGnxHA266\nlCUCZGfFS0PlrBs7+MBcvm5iS4EBQtOF/R077GQwCE77HDWr2TEUtUjjwe3a\n39tYLFmM0pkKU3Szq9sq0Ijv9Cu0MocR1a1upUmoWxbyMnmHX9xrsDYNxuAF\nQse4\r\n=uzsh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.da72839f4.0_1597946352478_0.3171720181083426","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/theme","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.346069ccb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4c6fc0daf7492155629fb044d37c92575c7e3eb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.346069ccb.0.tgz","fileCount":38,"integrity":"sha512-S+ATGWcninI1mngj/n/hCGhSfjnFDWba1kBSQvJDvgBZ6FH0ZKH04wUluQa8JsJQHaOYbHYbZeqPWYEs6XSDkg==","signatures":[{"sig":"MEYCIQC7vGu8zkMKFGVOB515dbTA8//ogNfh+7hiJCMi14JS7QIhAL5AZOJJZkKW9j0YU3WBLdZ2Xl2d/7pBFLQfV0K2otLt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr5JCRA9TVsSAnZWagAAoIsP/3vr1+ZJjloUVoal21gq\nfzJmywYnXaPOBREpTPZfq5wKVF5Bl2yjKbYI/y7AynFAJIUlcUmNiD7dUInx\nGTfs64fzISPkxICaQ+piBXKOPEJwHRPkxQGzdStzkvkiZ5azFkTl8r3dDcGe\nhFL5VR68ecyz7ctaCloJqaaJQzlv7bQ1PjWk4k85WN+kz2OAdH21L3D0OzT+\nJAxYysbpe0nR3BgON+M7lTtVEPpuTGLRi74VE4gXxDC4CJ2pttbQuYHf2zC+\nV4ArXO8SBtlV4aKnAnchVxdmceVOZC4hby/e+G+hDuMaUQ4PW6mQG7SkpiNn\nRo2+LKJKSxiLlSvQR+puldyWSfKI6J7DdmCS+eR4OqgRli7H606SyvDDUNeQ\nLDBbs/1jQe6myiXDu5PekbQkptOcfaGlTQmnd+wOiQuh1CINT5zCMWyHmUdZ\noTdtK+9Y17Gyi/SP3683XMh0rj5DJLX06Wxe8PfGzGFhxQiqiSch86+806u9\nejCEt+Nd3mKiytvq6vliTnSf+b3QeWtJShSYSOhkS728AqNuOpYTaYy+baT2\n0LPkkJ2i5l3e8XE5SEb4+PCMZYvUE6R0JpNat+32Lg3eWn9dHG/cWI2vw4TJ\nXfMsBqBdXV2xRJqxjIcMRjqIKDoJvPrmAqj0dnXshOlBpNzLJSbnzZK5gvUR\nXz2R\r\n=QtxD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.346069ccb.0_1597947464720_0.629742521809235","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/theme","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f6cf8f8cc94d393ef462c0db0ed47a745f7a8ce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e27c5802f.0.tgz","fileCount":38,"integrity":"sha512-URmi0sA09wf8YDPTTux2evagny8NrYMa/Fyh6gwEj48NwcIpYpgeLsr94rRtmf8nMQetOdMxMur1Z6MwI3mI9w==","signatures":[{"sig":"MEQCIEJ+McTmCFg8v0kMX2YjQXM9QUZCfe5dmJorNsFjKLBTAiA/M06EencdmVy9NbbQceivC8VQo456CBQci02YybXoMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsuXCRA9TVsSAnZWagAASwMP/jf+ybgD23uLAWkBqH96\n+POPF/tqgZ32vVHNPh0UkLLdLLr5Lw629RHDjbK57YhocOckqwZzi4R+ANXw\nNND89Lk2HYN6pG3Qt1remTC87ksG3Nd8OMOdGC7T+J0a/DhyL2rig+f64yAe\nIJT8hNWUPFszFj1w+m4hHQ+t1e+FszbvlhcofaJYCodsLRWAOAJDFPBdcZ+k\nWLlMB+P65usR+ysdNNWvtV22aBfmvteEbbx/yhABe1oXe50oLBw3EBx3PxC0\nB7hM5PuJZeY0pXvL9+sNdfOFi8qMNfTi4JuIJ1sdfO0Ge8X7qDtyJ7/CRzRk\nD5TKABFR44ROiPNYS0TOfSC1lK8cLBT6QPZWtsd4PhHi1gI8WolDtftqsEMZ\n2/IfgZyyLknHpqdXtB66OFA05S3vuNaGSRcVWzjjN8Fd5S3Egi7qlFU6j+aV\nq7Wy93HNPx8Mv5CfqIqBXF5HsSBdhZU7OBJ2zmo4G07cB2U7NwTJNWvA05xH\nb/OGR8PYXanLtBuCKzDmsOksNJxoergbRDSE3UbCrkHZu24z0AcvcmK5rn5N\nanDnrdwf/c4H0b+GD3Yy3hPuBAAxebmSH58tCAX51D7vwaFXagDeAVCWFc33\nFK3UdzMAsHbtmhQSKKqXAxUubushrYD0XEA/YyXjriAJTHMx5Xcp36FmSIUI\naoJ9\r\n=y6eg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e27c5802f.0_1597950870817_0.2264535288525198","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/theme","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84ff7af70255840da94144bc784e8bd8342d08ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.f4532b9c8.0.tgz","fileCount":38,"integrity":"sha512-N+9+LmLso5tH4u595xUCN4nqKfRS7ude0ZZGdgKYPOQcDwdzoQ762jaDeCu8vrqDG4QiWcOE/qeu64rDh2F/Rw==","signatures":[{"sig":"MEUCIHe8Ji3GFQR9v5TDuTTHs2ZNSjmmsG7I6Ff+U0wY3t03AiEAztdh5CL8nIplqczwcq4TWsY50kUup0ogO/3oTkxvvAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtWSCRA9TVsSAnZWagAA4uIP/2Mwjciy2Lc9Bzkouu3y\nkHtic5AHIkUkGTALSJ251/WsLzQNu24Y+ffODF0H06T3louX6mQoo97k7dZl\npDuk3qX9j5FWwlB3FLbOvk/qDr3dRwBo37GmOeZhF8zWd2ecOh/YW09HhA/Z\nN7HVziDCM3OIkJgFC66+GvCsTwMvPulLFAW3PVYwI3RJFzaj3hzuhf+3WW0m\nUgNtqd4DRjJIX8w17zoHdm2xWrEn6RUi1HKcyWpT+Or1BhXRGvz6cnYLqFbh\nWNaCYH1MZE5gfgS+FZPyXJezLp5kyA5ek6luGQeQG8LTlrDzeZsM1YiH0xwB\nc5/W2eov+1AV210vtUqVGYNQCYj7+p8gzHOaR/V65qvM4/ClWSuimIFOhHjM\nTMheU8S+Iz/FX1pflhCfwBoq3AZPgLrVTDgfLuYCF+RveaOsDiWO6+9JuNXK\n8a19w5PeW1YyuUi4xYO9u1sVqVhZTZo7kqSW0mN7OwDB0t6pRPlKX4ZYz5/x\n7T2shfNIjYz15xLFHsBCzjU5fyLD75qP0XLZOTb++5izT5SytW5vVSksaUdS\njvI4lLs65O5pjyG9uZIsulx8FZL2JQBcgTct13+WNtgsQkCNo+2Y2dKPMiMC\nX0UoaMrIzWC+7rC/cM2iy4ztnocJ5QfQjiuH5fPU2HMTHJdX0UDBR/fuVO2X\nbQ5R\r\n=xW3Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.f4532b9c8.0_1597953425808_0.262301451857635","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/theme","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9ddb4a9b59a38fb8ac925773292b558b598ca53","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":38,"integrity":"sha512-+19mvP0Pk9IQHl7NZLnXmITLQbFCvtwnwrzkJrMPsJ4Dz8FA5lpUOg0ee31N7pgH+uXlYhDqo+gzyeaXGBdGyg==","signatures":[{"sig":"MEQCIFEcmU+S4hyedxEWuHyfUQEd5C9PB33pAtn86trucZhvAiAejAoQTZoPVVhzJGrKAmGM8iBF/2k5HM472EaNEM1WwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuWkCRA9TVsSAnZWagAAesMP/isRD/cpXg0G2L32yxmr\nDS4FYlQu4OIf5qEIVx6zfFWCoLhOrzLdcUJUYilKhggiyt/jKOFyy2UMZRKV\nKWo/arIKtKKrNLMO7lu+vjvndb2KJ3W/ILWv07OM/tD+bDg/VifgDIzHMC/b\nCvIMmuVg74qgS3LDt0ZYSDtbYJv+Ylnj1GNIZ+Irtow3MxvcZF3quyGKMR3m\n58mA71pq8VaKHZgIW7CAtvYLR7jS84KyWv0+dCDdxMjN0wVe/MFYU4W1BX96\n+FdYaC4Ek21HLDgdyaC1T4IIoOZVYkSk12sobhSol/pLZXuLpmbZ1oZjx/Ii\nJMnr99OL+8Zt8e2/kOcQOMK/oGEgyJjp8gTkjawfmXHwv85f0AS7rRpjNaxI\nm+xQCZF3jeDyxNOvljRTjIj5bIKfwHaOJZruF4TGTLj8mpwrNpNta1Z15d61\nLconvDiAE7HwgTPYHnaHX+AgfbHX8eR8bc8mVNimNannEveRvzK6Lgd5+u2W\ncVnplxMCRlCBUcZ7pvLw6wm4nHKhoFteXdfkS5BbCh25LoTDEBGs2pFO8rxa\nAa3J7VQeJmOxmtbo4HvHZKMGdG25gbHwAykFZCVq+eMTYjMTeB4eDqcGDGZk\nhNPDYFuD5fwrc85Lj+twUtxBa0lEw8pYsaaN0UEcYJyG6DvOw6urcIneHkIO\nXfJu\r\n=8trm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.fbf73c2a6.0_1597957540303_0.5534504704102274","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/theme","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.cf800124f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d780bb5ba1a93e54bb05abab032c92b3ff126e2e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.cf800124f.0.tgz","fileCount":38,"integrity":"sha512-BuABXirsLQ+cMG/joJTHCQiiZep9wQso2rkKjh8Wq6z4SO/tJnFyZOmLG3D0jkbdD0wOUXEU3771p7t8nfmr0A==","signatures":[{"sig":"MEYCIQDt3VfPUrzX2olB/hHuF2efJX62e/jIYlfUAVJD6XWTsQIhAPCt1Jb5grbnR8zdvDTGuB105x1udp+1wOfJ3V8k8LNb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvB+CRA9TVsSAnZWagAAbcgP/1mbpHBtalG8Yp8EMEOX\n5nWtmB1aCaoKPqRaykEaAB6gWK75ZjXfWXX1LP5gnxyZ+Z8zJ6M95/Xh4AET\npvDYubCOUWvUiCo1bVH84pTsfFI64ldnVvH1rkjKetNK2E2FF27eNfXJt0Cj\n/JCZXSMMI3TOSSGcSGxsnAN+nHBbRQsnDfQwHl5kAvoGCpQW/efTQH8xNPql\noFOmrAZwLjmb2UujUgRJck9CyXzx5guXN2qRmiSJejpw+/zGUyZWy+HyXZ9r\nUhiluZeoGcV65qkYjp6HORI3fdIUJiotbmd3129Q8/fDr2/owukZXlXMFeof\n8TZ+8ynbBBboNB88byXoHMXeKbIzi21NLnMblaqENr4JE8B3S9NaQbQ4gbnA\nH8NlozEg6b9273W/OoClNQ6y2LvkgEDFCQn6gNA89Dz+JR7Diih5m+6cLD1z\nd8CFMr77mIlIopeNdkuvqray4Eh6Ln+f4U3dQpBafClwvccljJXz3gvWSK9U\nlPFvBrnQTs26/1w2W7bUH7FUrbje6a2/4428/S7oVyGr17qrKASa9KtCdXen\nmpjja1l5cO/tB+7ZxltSgoSDYFaR0ujHU2d6bo2Iqqk+ux2Lz7cJhisI/6fQ\nPEx6CxojQO9518akBO/iw/aNAgyszHTvW4n4jiiJ8Ppe4xoLUTklYIBROPZH\nd68C\r\n=mOox\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.cf800124f.0_1597960318422_0.44851304553787696","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/theme","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88cde673d690e3774ec9c4d417368a386a94f4db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.95e4eeea7.0.tgz","fileCount":39,"integrity":"sha512-0NRwXWHR6cukdj7kGWQmtxlBsYrv+wULNeHFYKcMQ4v+5tLLWPrctawBnFTPIw9sLLh9bI0Zu/K2mP7cqw2PAg==","signatures":[{"sig":"MEYCIQCSZOMYk9OS8HD+OrsZ1X5xdfor0bKlLr1UfeC5J2PWagIhALWZ6I0Sq/3rAcQs2oKxv09Vx1fvjC8rw6NfQKRP/5zF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwcMCRA9TVsSAnZWagAAaDMP/2hXq+g1O8OJ9WdCFUn0\normUJSng1qdTkOqgaHZ4+c1ecC/51qUfYKsyMckeAapW2ftl8ARZbsDv3BqO\nhWybOZ5u5MqjjgGzN3ivEz+OhiFLINTZFYI2lROqH+5z6lfGCawoEiJ06L8/\nUVc68+2SXdfkl76Z3mpaPDt2+K5ksGmtwdkv22S8iZ5C/NlzvACow0JALjZq\n6niSO/LllJLJMrI485//bBsaitj56Z4/EpdUfozx5Cf705OHm4UZ1z/hni7G\ngHJ5nubKfCX21FE9T53tq5stTkITDjy7g+7WX5I/iiErLTFL3TidZM0QPq0H\ng+kdAAhO4OPYzKC4SV+frXco8NiRzyu2wTaJHzFmrkOz/Y62Ob8lerfvsfT9\nmmEctCcWThhS/jlHyAenySUmQ7wUUf4JI4RqGMM0y05OprvzewNHUOhkpZGW\nJDxtCzWISYFSoeeBnTlmaB4n6P7zhqc0V+0EWSLC9DqIWk2ekVvLZGgqFlIr\nGjch0oC17pjr8IKWDJuVmqc5n3KfBKV+hj473RIeJgbqu5ZcLlxRvr6nhF3W\njLGaSyoChHrswl1kFJdUPKq3VEVfpnoZIb33g8XjaPHaKEdFmf4+THQiAMBb\n0Y7jEmDEeUNhOfB1ACfZDC1uL3sskYTylYGzeJq351MK/T6ZKmoDfq+ylvq0\nOWFP\r\n=LJ+7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.95e4eeea7.0_1597966092371_0.8193088164726632","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/theme","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22db77b6b3284fa9ca6c5fd6747224009f7eff6d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.91ab1c62a.0.tgz","fileCount":39,"integrity":"sha512-kxddfbLRp9qAidBa0Jfkt8aeJY/I3bi8xdpaW93+0Pz8YenjjmwvVw1iQbCrMWivoj09rkS8Ch9g+3eTiSWSng==","signatures":[{"sig":"MEUCIGULtj6r7niiHkEwngLWv81yqP5zdhRHRNEWLNzNOmdPAiEA7TMK+cQ6Ql3naV+H9Onl9KVmf5fNxryti//e1UANAU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+QNCRA9TVsSAnZWagAA86MP/jIcaRb0k22Xg8EwrahL\nanYBp5XF8V7Fko83cSZPoIGtJngBrHwA4HLU3zUkRGKBPQ/YUzRGRSffny7O\n/3RgWujJHFrr1PRrl6fwjfOVszuv9xAZa4ICeRTC+yGZ4YCXEcayGfJ1U4QO\nfHa+h7HaQ3cOUUGfIHdplEX+38QMYhbhUewgmg1cOMgiDYYcCIoQ/poFJdXO\n1mNK9O9G6b5v4kvNT3ZWOiWj0+2Nd442OA8+t/59hE7bzOwh1auOUoJD8iol\n07Dtz/0ZUr45Tm9XUOsiGwNUsOL0/41JDvQSETighEeShWcUkHWcpqiFVxdk\nMqDC/RuMfNC1VDQFK0FpkNFOMw/NuTUY5cQl3AJnJ9uQ3U1YO5Q2Po7xUCAb\nBZHkDJqqLNJkZ7cMXg0QMYtYx1GJiemE+aeWPFYO1D+5Nri7N9rM+qYhgnep\nKXKlpqxpYvjFPqCkylJx+Dv8so7VybnrM5WcvSJuVQ1F3gLkQaDEwLSXXZZM\nNKgOdd3DkVZZk5TW0vRTUD+gr/Xq+y/QwYcxbhqCvVEZSSJnIf2I0AtqKPOT\nBYOC1kgyFzIQUUaAOaJBHfFkzf6mMySu5NMyi5JuIBjw7gxr5cmfFJu0gkDK\nnV6J6Sbb2DwzTi/f0c7gVO6WQnH6w7ruxQYAP1JkDlkuiWMLUk5xQogFEUHA\nni0c\r\n=pHTd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.91ab1c62a.0_1598022668752_0.01192667074975362","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/theme","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b151b15783765c9521b058d40c043508fa93648","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.58eaa9f02.0.tgz","fileCount":39,"integrity":"sha512-xuJicUoRK//uKwqhwrzeoUK5nMUgEvNP704JmMTz1p80RMFEJXMVlyfbaOKVnDNjVm06fozmHnACawxjw0lnUA==","signatures":[{"sig":"MEUCIQC1RsWwH4kP+k+gEoa8B1wZxqm+TKGT0E4UUt2SkYdfEAIgaw1RL/ryIO+jmM34YiUdW7FGj57jSI6ke8nLg0aLzGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCevCRA9TVsSAnZWagAA07MQAJeicdJsrE4qbMjdHlqX\n1M14uvJal3mRpHhSI/p1wOHPfFe9fGWTKK6Y1sANShzaynzvIN0wrhF+fE8O\ni//cSIaNE/AyNG5IDJ/rRo7wEj/yq38mHmwxo/E1M3gIHY6PkYTCn3ZhrGnt\nnmt2WKMzejughBfs2HFRZCoKmwnXsYn/6GBArgMM2zZgM49IBtzzj9hcetLi\nbuH+HjfW1k/f9cznLMw0f7lL+bIt1YV/ti0RJ7NZNBhHUZPw0kU5faNSoPcc\ntIOpAKidtA7GtBH4Q/7VtygF95VclX+MWh8BZ3RWagX/uigsSRQoQ9a3B0/L\nsbzC6Cju5FUkIP1CocwYQYCCksshp41FjPtUEd6Dz1d7J6v2Bsj5LbaPoQ/U\nw8M6f5g5dx1qMShTnSDNcgxkznpHd3eT86GYg4ioqmKJXXNf0diHOaQK7fMx\nvrcPH2DwXP48bsskcT1pAbV666tWBw6RimDw6Q+xpY01nPvK2Fce2W5k4DcB\n4hMWcYwL0u2At4jDytPo6gJeztrBG2l96JvuF6tJaWNgVhSsXhnJAyc03QmB\nHmmzTIwMo4J/RhxhMtnKzgHO6CxBGG+2iHOV0OxLOVSlJzK14MbO1b85cF0n\nT8Ds/RehXlMgafH/jqVQkWnGPOyTvro8tHKSdW9Hv5ZxpAz90rtwdOKpZYb5\nnLCt\r\n=yLtd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.58eaa9f02.0_1598039983205_0.8277865293198969","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/theme","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.238216fc4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a6ec34c647ef6c1b563869040f621b58dae3005","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.238216fc4.0.tgz","fileCount":39,"integrity":"sha512-6MRdpSabAj4EvL/HFkOaLSI1Gv40/wEbaepqvbQdQhZNrFfWDXr30IZYr9RHaG/jq3a2duWsj6tz0lZpqgEfjg==","signatures":[{"sig":"MEQCIGa9+A/4PyauN4lY5LuB1KMoSUOBK4TNodHaYZ2x689ZAiBDzICn4wCiO6zdQl8XGwOCMq9JENC83d5bZs6ejDNGMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ99WCRA9TVsSAnZWagAAM4oP/RumGHweiVGh7y5SmK3z\nidKnRQoaGPd4uu9BSyuTU4IqDfyQzfqRbAEUI6Ah7Ypk+CIuCcOovB6qCp9s\nUeCH/sT/Xj963jrDAuAlIu3Y+NEB1MykW9rI4mReEdIv1E2ACz6XR8nUA+NL\ntqVRB+8S/5GNGXY+DD5hZwk8dD0SYszb8IhfApL0gijNt3B/XXZX5HAM6FkV\nS/xkwUy6X4GlX1zsGGw4b7xjXwyttlMoZMM9Fs43/CPEl1xtyRil152sE9Xp\n4vr7u9YcT1lD5Olh9B1Nq79EAu/1VnfdieKxwMSfFZ4iLOjxI85vzVjJOPiZ\ntZZyBCl61WzVy5VvBHfWBGBnDeQvXRwWtkPTfPSQy52fInzpXgcKZiTXgkmH\nUktIE/1k6EYFU4pKBJzt0DlnY9WtRvRF8fYPqWtBTXhppRZyPJmNrJr8/yqE\nO5yc1wFH60kZSnkY9CbuX2IyEy4gEzsC7cbhVLqb49yMd9YkaqmVIq2ZF2AL\nqUbU+a5aLo5DZiO8wh7mKPM5+WXGyh3XenAqRzdl137puW2x7bbNrmjAw3Hv\nquaXhdbR/NGUmOB3s9HgAhRaSVfuJJruGuXXzgFVlYe1u1JO8pnyNhTym7BG\no11O/+2OraiyPzv1zqfNFjUqYFtQksXvZwSMW/RwgGV3cIVWLNrDy9jUw9X/\nC/RJ\r\n=CHOc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.238216fc4.0_1598283606172_0.9521934622854564","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/theme","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"093b38149faf65bae416894f983186ef035caaf9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.a1c65593d.0.tgz","fileCount":39,"integrity":"sha512-jrQg6UUPhRy8ya77vsxGOvQdTySLegrzIbDBbfoHw/cEZ/u/YKkgb17OLpsqHyraZx6+dGGsgNbOzBOpeDE8Mw==","signatures":[{"sig":"MEQCID9QdXbw1JL70Yk6Jng0zmClekd9dPCihDj1D0x7zO/7AiAAox6CeHHhfdKiVm8vkZ60BSZjO4X0wIaZdWdax3gq8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH9vCRA9TVsSAnZWagAAyrUQAIY7KMfA+s2TvrcgmxYR\nvrGlddFV47g4ZWgCfr4xIFRmsZGabUISg83zrq/KzKbiRgcKCGKD+h49GXyl\nzNJTbvhv6C2EaV6rZoIZogy0QKbezwFcyhg26snurvpJQIpXxTZecyyW5Ry5\nO9OEHe29KuDS4r7E7z+sDMhtOh+JmozTV+MpID/OUkluETuTI/1st9eZcxfM\ngB1P6/Xy8Q7SlQ59wh+2+ShsOM9DoExHbYP25tX1ElZ0XWrsdk+YKrBCckRb\nwK0Dql5OaqmJ9Qn0IhBuNRP0xGt++hvKgIjs17LLDcKOKAFsnRHch3JqCIiP\nmZTUeppBDcrU+CpHclenucst8KyCpmR9CoZ06bJF9zEsjK75PBfx+g+SGEPT\nGA5T+wdF7aj4moERMTKdfBqWNhhmwe7NuvNCP+W5TFtZCR/hItMOwvofmJXF\nkjuMVXpcHpHyRx3ae6xzgbvgdy7YfK7WgyjyPwqIK17Ki/UlwHq3p4dDtwrD\nq2UV6iPKzkrCXOAXXM6iRJSG47RZ4jPZ8KeqxkaKYejZfakxFpEdywfSfh/5\nrOlH0+mFtrrlShUL90Mi1Dta1nRU6mZQoRS2B+3JqCDmRxx6okShJn9ibilE\nT4YmxkRPwCvlnF5aNxwoLR7iO6u+NHlDEbE4gk7Ow7heLTxcpdKbVNPIg6DM\nOnck\r\n=Q5Nn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.a1c65593d.0_1598324591255_0.21669473941594974","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/theme","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e99b643d6588010f7c42ac91e005414b656bf0d5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.708cc09c4.0.tgz","fileCount":39,"integrity":"sha512-DeRkNNrcGYP1IpUmaRy9gFLIfZXpFN8m6Jfd5mLl9xwvmAJcPNT4Vaz4SyW+nNnm7ZeVWiU2wjkoegQkOUDqTA==","signatures":[{"sig":"MEUCIHZ73KXjIJCDaNQW7WqkqV6zRipsoB1Uddat8tht3RXxAiEAigX6ZiTM9Loq1U0Yu0tEjggsWypnw8MVTPMPKMnOmEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTSBCRA9TVsSAnZWagAAIigP/AsCt++aSbAS3OMfo11H\nj4JWzMZ6LAhrGkhzeLoLzjIhbs7jj8Yat6PJsIf2j14vpepvc5ffEuSsS5Ey\n1idHjdnfAbB4yl7KuDF+W5X7RGgoM9SBkypyw10iP383jNbH5u/tgOPAv2Jx\ncSHxRZHaeBQ5tjcJ6uNvvdX6exJ2PEjxscBWmWuCCCHkTUR7DeHFKo8jZ4UB\nbm+ecIeSHa9jdqJADB/0QfycjgX3oV4UXSyx9QXB4sTvwm9nZ5wCAGf+XKJr\nS0Cm3cKb5yIgDOenYd6u9OcMKXpjR//KpDv2Kcy5YMvISWOmKvE/D1GiLfzI\nzPSlnt4HA+Grru0lAdE9m7CwdHkLIDJfURsVONKg5ElER9H4ogFnG2ZK1P+G\nYfDWeM9KZwIZhUTEQ/Pghj7GglmtFYmhMlcMHeFfn/GaB2QzUAxVovaRXWo6\nv3gITWn+ahj4+vN5eBYtPSyb7cDXr1GuaXdB19rlhvg2gYz3cuPK3XS/NXRS\nRBaoof7UCXMG2VB4FnrRmgBO3IYdYvenR3FZjBvi/0QpjxzFyCqP1gfbujRl\nzrGnJYkvREvlxJqxH7aPaiINUH27y+Vz3RonvPohQGtffc0Z+V3dWn7yo9Lp\nx3vWqUAEypMqb6C52vqLbkz3QAXP7JmxJSxYQ4flNjzPS17U7N+fIgVVyjcu\nmFXr\r\n=SUOT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.708cc09c4.0_1598370944588_0.6673821882856228","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/theme","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78308aa131deda00e6f4775924206ce4eb740cbb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.19bea2ad3.0.tgz","fileCount":39,"integrity":"sha512-fFoTnHKzXoFStYgBd30OlXV3HSt3XPGFXWJoVquIlAFwyJVoiMYrAJ3mmaTAisIK8F6wzZO6QmyS8NHdz0nIOg==","signatures":[{"sig":"MEQCIDSwGUy7Ni+M8UQ5WS9pcPW0+QEqTtGJYwegFnmesqJsAiBG/xQqdraj6l2rzVGc7am4RJZAUNHBkNvs+GOnCK+asQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq6GCRA9TVsSAnZWagAA3cwP/0KJz3VPLp6kqYQhnzfc\nO+pNRiOzqTWR/fTyvre8J2E/x4kkuetrBud6WqBfHrAbMzwIxiG7D6mFCIPQ\nM+f48FuNKLQ6GlFmw3sHt/MjXtEF9Rr56tIlibdWcP6i9h63VvLEiX/r7AEX\nOoPO6deUbkJ7xBlSX9o/QVzs3ZLvvCfLe927jz18RrqMtwUHXIkP3sOIG0QY\np+1KZAohPqliIXusAbR7ayY/XZtH9eOJcWbNPrXP7dLWFOFtQfuL2KSgY9aP\nDrKpm4+b7k7VdyFP87bTJfamDZlm7Jgwm6gq/+piC+GU0ShPGG4cFckF1/Pc\na5Vzno8bguwPya3qKW2zHZ9qDZtaGAuxjR217CZf7OlNHay7wCJt1GApas4T\nZSq1znii0NTiGjGmwAVPiz+bLEpuNNspcyQ9ABJG7oXNFUcXVqARu6rhFBC+\nZ7pDYylp9k9SG3Wc6kOvRgOicp1Qb63/D83eTnBR3qyfqDEs2+Hi9GQKR5rJ\n3XWkmibKE+38rxGEjqWlIdAXywt/b+Q9uRzMNB4kcyzV8sIhNl9pQTPeTwPG\nixbnKlF+DIDr2SXf0B5uvtrdiyUHPH1ZP8txLgPo40VIGHl9q/qQUjCZf18i\nvVlD3zASQhOd5HWRa8NoOXBCZfN+MmvpWDx0XkTj1ufs9HuGogspDLhZDno1\nDbQW\r\n=npZg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.19bea2ad3.0_1598467718078_0.25522744104018935","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/theme","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.911014711.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78f0a3ade3c7128658f2f9c9ad802cf023707cc0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.911014711.0.tgz","fileCount":39,"integrity":"sha512-w6ZUvAaz0Uk6AMMZXuvas7dYLRTHHVFeVKLA+fBmzqVs5YAwWaAdemsBIP6qM62HAu4TjGCIXeOV8Pqybr2oAg==","signatures":[{"sig":"MEUCIQDh+gjIoKjSBVjcwSCv9xXkc8fn3XEiy10ZEAWe3qyYvQIgD3l/s2ftaSJMMQhcb1+hPdZvbxGR3gfLNEZnhcLef2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9o4CRA9TVsSAnZWagAAmWAP/A8NCWmibZMGtNP1JLTV\nsX3jkFCAnn4ezsj6G8ufmFjqRKmD8w0TJc0uS+saS8pLHKp6ivIf4KhpR/Pt\nOU6gefWSjf/PwcHCIwTh466lbUkwrRCoG8OnnsBOcrIFBu3S+a/i/bKnCeR5\nyCOFkuky8P4X6/29IjREPlMWfvFBRtPRrLxjMQZEZXv7mMIT5WlLx/DItRuL\nYzlqWL7x1JFg8jaPor++H+/dpDg0IUn92+kvzxXdBCcJFo8Pc61/n8i0Tn/h\nueTv3Ruq+r+m4jIEbQJhRkMhAa9EE24/i7lQ7OAelihZIIJvTNsVJj9Ixbho\nzvMkbnM/MZmyAJVwDMi8bdZwMtGRRXV7N4pHllJ+L1GcufYCOvTwvYRi/QKO\no9G834N8ELDNeXUO9D2dKfwr4YwAdEZXQrYdN3WRx/i95RNd7yaAs8fJHwyw\nblhmPQt9rev8e1S884gafcqFne+S0W0KGL4Ribv5ePbOr9NCpM2MxplAW2WV\nFLzczsxCsgkOe/sVwnDaSQIb0x+4e0Rqn/GYF2R6Fn+6LKmSX8nEEg5TNeTk\nNuqtmW7BxG4/ttgJdT3acvwfPRVG26bhGSK3C2i7FTPLoC2qDjwiMC8Kgc5S\nPzjN/GxMY3fW/soXq+X+y0qdxrrFk/JqruD2G6t3oC8O4ZIrTQNyLCWG2R0q\nAF9/\r\n=Nmzn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.911014711.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.911014711.0_1598544439693_0.15935349987877778","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/theme","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4dce0507407d8329c03775c2a2cf292446e3e09","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.d3387f54c.0.tgz","fileCount":39,"integrity":"sha512-UD0rgCABoEqd7OnJWKNnG2iMCcCTyv1u43k45iQHhqsuTIyhHxsCtmOSA32ictH6ibazk6KGYh9d3Mu9YJJm5w==","signatures":[{"sig":"MEUCIEmN9MKovMRRVMEEcV1Wuzi+u6NLS9Epf3KwjWeK/rCMAiEAhnFPnd1Dbiqk31FjfFsWTUmwmfLjJ8HOkjBQ4lAmlUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVfgCRA9TVsSAnZWagAAkeMQAIm2cjdQsQSB4bSyNhHE\nM1GwjdTLC1lgBYVnMcV7QjvJWnpTmkOdejk0ogC/Cp+Oa+82Rr/rZ6mkXJDV\nQc1VWwlLLuOL5jJzAVpda6z7hCWvV2mFHaZm2xTzap9HnP/TrH9V2elZqyO6\nRjGsXNfsdgWrcQVjeHYWXc8qlXfIB3phKo3QdnZiBUJb5WULiV0fxd+76Hxc\nyacoqiwaQfS8E1JDArJHtpuoYsT3yQIWsQhD6fYXTVtRnJxYiqPPcdgIXKjs\nkGSrLtJSKR7q4wSRCPbiRt7Gx2NH3sQG7V45o6A1T7CQKXXi4TKfua243fN6\njqncsKbB/l0kL3NxjRTqkcxhS6gCD1vI67kxxaxVbVLtlizLK8SWKnOJ1iDq\n3FbFWdj1IDq+eVnbs+pT4mVGv/eWIrr0HRIwQJRLbZSloneLBIr319mfFSp0\nRyQM0dkxDk02drx3nHxgGxyEFddZ/mqUKWj5ug3neOz+QvU1ssXFrohQIAsE\nD9OIhUp9BpNn3b0aFnorSfMiv/k6ZqXOCdJcauyMYjNQmNF/Xd3WdlhoBhN4\n5EPCePxklRCDmSERV526Xrj6gXJcRRVBnBEnK/s+BTifTSXnEMbbLmaw4us/\ncPzpqwR0TxtYB4qNDij0YVptTjYz1DaSvCKXnEHPOoTPq9kom3ZOoxFx0sHr\nd4xU\r\n=tv4D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.d3387f54c.0_1599166432284_0.4471440712178556","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/theme","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b34dd6543c183dd94b26d0109c5a046996131a41","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.2ccf996cc.0.tgz","fileCount":39,"integrity":"sha512-sDW8+1Bzk35SPWlgCmNl+bLUlPvpYe/P4Buh/9Wr+pEutsd2jdnmMZO2bwVgKKUxlVfsU03MY32IPY+jkLzdhg==","signatures":[{"sig":"MEYCIQD9CeXgrAxIc7GuyfLyw37O0vHKrngP/cRQHgAQLW9qsQIhAIiuT3As8UvJfhq4KQ/AyQ68lR7uSL2THQKxVjMg1qWP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVfyCRA9TVsSAnZWagAAwzQP/RsNWJaiC6LGFfwvBCGM\nnyo2oZ9bNKX0YDkhTrtUGWPv7BU8TA72Z6oGJf2ohrFWdafJpXJdeef9PQwt\nize5EahiDBC5ZM/LiB2a6DjXIfAyMDqWTh0XVuBLFnFxAChj5kKA5zJe70/2\nbbwmCB80NZxaEl6SnVELkvNEeEo9X3ojr648f+LXuhlNlWMmcU4/POa/xJvF\naNG7uhzy+smibmWfECxcWg9qS1EYXT5W7vU70h2hZVmPKy5rjtLR102Ui469\nBD8CMJ704Fr0bqcLCksyCkGDed4L1rx/MkVxd9CfVb+63a5cBkP1oiKvzelv\n0tPtlKi7Id+y1quXPbXDDtYX8oWI+MSIeDltYi21YKHeZV7rLtZ2GwIH+/+8\nuM8s4wzdVkhpToksDCCgUusTEFQ19UDsk9LFOwsPpTR5wXqLRvtl49oGp+XJ\nhFagUAba+zi0mnpZcj3PtyFskLuEgHqWKxuLDKOWG+chErQmJzmN3hHmmAip\n3t/TK+OJmhknqtXawMnjArzeio7bZTOo9Hw1GA5qAt6oxIzjVuM1ESQNWEWI\n8eb6IMyzUUQm6DhBquXm3yCj0uhDAjXgH2DWio2bdgPc4UVOpEuas7mDXHmp\nCNeRzpqm3mUXbAqk7KdPNFdz0Nl4/qacCCInQcpHHsdpikPWL/UwAGG5ZYrx\neeAI\r\n=H9OD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.2ccf996cc.0_1599166450359_0.2761314476602501","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/theme","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48b119c6fd36c65aa4020d2d41140003576ed84f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.744bfe5d8.0.tgz","fileCount":39,"integrity":"sha512-QUz/gdBc69xnFPmpf2rDRqpn4C1z3cdmHNlD7kJLZVwwbPMO5asecTMuPADApNhDU9nBTVQI43qQi9WsKbalHQ==","signatures":[{"sig":"MEUCIQCimiY/lqDxDyuFB/2xWq0RUTdCT+uWeCVmDwkdR++8HwIgTnKDqm3lkB7H4SMKXkMU9y9eyxa6TR/83a2fQAoMh38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVg1CRA9TVsSAnZWagAAG30P/RsByZdP/02qBy3bUwTz\nVnhxk4bBwgaB9Bq601NPPKbVbR7omOU1Nz6x/0UxS2FA/eYGTG1MhJ+GCav/\nRfIJH+LeazJhQV23hZT2XBOCqA980a010YjMSaFrVnOvagZJRECnt5CQdwNC\ndw36bZcV8wcaZvoZHPY28Hd53CY2346macJKYWRMXKikwrFwYA4itKal3Ypd\nqyFW6ZzKRljZpLTT9pldpW/QoVzNKiACG7xX6kFlHnosgCoGnZH7Ogi9A3pP\n250qJeVJYzIg7QJOeXE9RYuCte4yg+MkD9X8wiaZoMAJj26R0jXlaOVh1qs8\nD4CSWMO9ur2RkUynwby/J1M6pHerwWj0MBH3gYrDIWCJSAYbrzPYCEfGyi59\n59F+7JTInzU8wxmuzlxhetFnTLbQ1CqqZFk6thhLGCl585z54unrbm1G/+V2\ncofSHQKQdqYG8wgAST2o3TYG2YaKRIqCkeS55H8/lp4+fziKLJ3kGSPiHYD/\n701Y7PNhUdnkfVfCzkOSVpQcYqe2Jkpg6EYQeQ89fGktLAk1O1emsDAW8Yvm\nJX3RYRt4IBT31ZzITZ4fhvtFJHbHJXjgjBn9MHO3DahlRFuuUb7dClne0CMI\nobbNP+JJ7d9m173QG5aqMeFZMWRH+LxsXcyxbilyK2a//4JnOao+IZQ62EMX\n5LrL\r\n=/2MF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.744bfe5d8.0_1599166517452_0.2977658603542781","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/theme","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ebdbdf898f4c7f885f8c6d17aedd78d46ac4151","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.78da96eaf.0.tgz","fileCount":39,"integrity":"sha512-JQWEr9IQCHbsUOI0aoRrPp94xLMzNSuwJar466IkbYMv2AQl/il6tu+4AdvZLFISqbGhLbF4RLX5xu772e9UCw==","signatures":[{"sig":"MEUCIQCB4pSbRuMcxWrMeur8I53lB1MJgfHhjv2O41Sr0VMOGQIgYz9BWUZCt6/OnteyxeUTmj1Dsooy9s6Dw12bqwEP4Nc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9eGCRA9TVsSAnZWagAApsEQAJxJrw5DlJOuHRE663um\neW2jjxfOiPEQdkn9MyaOyPsnHWhbthQSCOQNJzHgdfyflKzCYyCZ6Fkw+62N\nV4mC/dNb8xYt9kk2Lt1pi5XKrTrekODGp/+SYmhm4k25hifDy2w1XN6KpNFQ\n931oeB+qAQiZ2I91N86zckCNT+arG8/w/tQNgVW9kdJ7JgS4OwZHwMIpg6sO\nj7tk61TaDULOSnChHDQ26bVV/h2xiXVwNSOPqGQ7bqav/0GObhqzZ+eEUD03\nlEND4ttme5Qe9zx59ukZjMP0Ytvzd9QjmYDdourhzGnXpJ9EtOl4iAzp1a/F\npHZYwhfJhZNM7ghe3pk2jbCtaxqrq4QOiY/6859SQmvzV5MejZTYT7DL+Gg8\ndcn4/XUK7g7b+4acEIQHCN4aUVk6roptXKzLbxOtJs8pozB9GdipDFyn1Udg\nNJ/fcdCZ0IeL7VxRJpE/guglaG0ZoAXCA1PmB1HxeP8c4MPpYkReo5gEEcPa\nTeLe4+RE1hLb8QMBn2F+Gv00C5MqkAHdenUgGUr/t/bzCu0l1S2ixPkvbt+D\n5JTvPo37DBFE77/VgXLnDPrWKvOG0rd1o1Kuqg2mK/mX/hO5ioZIUS+08v6b\nxurLBgfoCZEZkWIDOIXh4hxsC1Lq8BHaz+qZmObFygOEJ6Idxy3iGz56WkE7\nfucp\r\n=HkdX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.78da96eaf.0_1599592326357_0.743930757942397","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/theme","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34d3453d68859e4e00579dba36e5d857d627039c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.b0ed593cc.0.tgz","fileCount":39,"integrity":"sha512-yGioKQdoNfAIwDC3FHEuTRt6oaTm8A9ixrsz5du6ElFBZUcQ5BT95Ifestx8FWdE2QywIziVVs6YUggBqaU0mA==","signatures":[{"sig":"MEUCIQC8jxF18MRZ1tReGnzEMZOuHi7Qaa1/cvwmyZOayZxp4gIgF4Z0/c4eeFKSP2ajj4IOo3Ogh0FEHttKPhSQanr4/Ls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHL5CRA9TVsSAnZWagAAFcEP/135H4IOfJPiszWLS/jm\nAuq/zroqKwTpWC586DnZPK0SoGTT3pgQCcDaDO0gghnF2MvzPaXaV3uWXbvh\ncX5ucIGAAeSvKmnjZKb+8cDfkMOLlDUAqIlIVASL9/1oI9vH8gjXg0noIXfn\nHCp4qHQBf5ktJPlMDsPfnq1ma7YRGBAALTu7NV02vSNt+o4dSwNFe/vp67UW\nTviV/+Z3eWk7Wtsou70KVFVfFk0q9CiYIpk21jlHKBvrm/Yx/TiVZorSYh2+\n+V4D3cppd1EzGbQoI1RieJeTv/e5yqRb/JWUwkplSwDAYcYgbD1ix0D3daRC\njS/H+P2B3f36svtglekdsJQ5pabMaYJbje4oP7G5v7fiIbAx1GjFWTojxuaa\naLrgPyfacVzni+X7QvH+56X7j+CYRrUgEJy5Vn0vWDOldjWHxSIAFWaGJfPN\nZDD3bOchBkZg9lDDEo/IrPbLnTyOts7A4aigFmzoI4eraNwxzXZd/2Gzcom6\nzZ0SsMYDLMnuyk2r6RnKAg3U6RmkAqnZzs7Ak4Jm9tit2oXZRJoR5mND5WbY\nAQKjk98bgqvRI0C/irQqhmf014MfoIvscLG4M7gC//Hjkklv/nm2HNHVIAeG\n3pPBNCC0mrIj8t435OPzEGzUNFsowYc0s/+okwXBlHT6LWXN1eFlXF+BLJjG\ny8Hv\r\n=tdIj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.b0ed593cc.0_1599632120708_0.9008869551448402","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/theme","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc9a0c824cab6b24e4389344800d0e6788979dc6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":39,"integrity":"sha512-72BoW2L1mNn2mpnQMZXQhd3iD6EFZl8pyEuL/0cEj60Kx9LQgWlkaDShWBS10KF6+KSECwiggDgVEmVVravlnQ==","signatures":[{"sig":"MEYCIQCW/Bse8o86l6ofo5Oc8mkursx3XM+ekijuJuK6mYgJVgIhAMTAQZmr0ERtjWGEpilicBsP7eq5Z22dceEhXsCzveAK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpYeCRA9TVsSAnZWagAAcSAP/iDTwK25gbtBxMOl7jhL\nYQnTOOOT6MN+JgJibHsrgOy1w6Sq1j0taze+4kWFJuqTKvSe6QmZYCbIcNUu\neYs/IQEOkjgD4ej/mAIux0MJ97uorE3VPYZB8wIE5AZZXBy/C+sK3EIjjeFx\nfFqD70U4WAd+gHNGW68m9Uig8IiWP89rWZe1uAOb4lne6GpdpHxmhiqirSrJ\ny2bJFPL8lqEG7a3uBLgnqBsBIxBRDgysoT1XO6rmwqfq2BMoai+ChNocQ1hF\n3+dRWKVzJumgFh3rtDLj+Lr8ytIYqyvz9cAHUl1T5Ki69bZKDhALdahk8j9r\nzUEyRzYMpXbCA57aatpfDK0aJDPv2QCd7NO9WdT9nXLwne0spU5Qjc8F64cz\nnIv70kMBfnWHylXEr/XzmtW/umO8g+yfL4z31U+HFoKZK3+3B1YfXsZWoBfy\nOep3aeH0jWqOsVzECM72Mwcm69wfOZEdH1Tr1m+IxlzpvFgSgO609H2x5yb6\nTN+vGvELKx6X/1VMlTzsq5H1qIH0tIKo+7VuYsOuxHtDAXlMSSen0DuL229K\no9yMTJJ4otyDWBz7b1wgByODU8mQ0RzCwDisUNtRTx4jHrOhp7InN9DaLa1A\nYdvX4DGQCqVRJ+Umjq3Nc5OUmBc1X9J8KQ9Zm8CYX/xVP3aLMr4zKRd3jaaN\nHTjX\r\n=+hXy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.85a1fa9ea.0_1599772189906_0.4615217854995406","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/theme","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3465415e95711b6e0b4cb4d011ff9999e1561cd1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":39,"integrity":"sha512-IrmZ/zeNTHHaEQeLu9w3ou0yOMIrsme0LMmsS1qlpYT6HL0Yv4BiqOFlx98aFBzM/n5HHDV02xnghQ0QFjlN6A==","signatures":[{"sig":"MEUCIQD4VfAXr9Ei+uRUq7j6DVdQaia9306f9c3EAAE+gLtbIwIgY3v+FFrDOhO+FWCpKTd9DZHQPsVRoEaCGz8UHWuR0GM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7iOCRA9TVsSAnZWagAA2AIQAJL/1zyetpqTWayZEWRZ\nOBEIHPGU+ipG9ua1wAa8OaNKhR3h6aqOi9SfSbH0xGN5XXKsadml/d8p2kaM\nJnMK61PfLlEdiT6FQGdU3JGDC6rmE1ClT8VS+L6AXr1Fy9jtpHjHkOLu5GxB\nAd83ut+YVlpK6f05iDC1BwHunvMI66/gwos21xIezks6ta9Zcr3fGdJGPcN4\nrcGhq7OjqquvNbIDtq0FlWUf7OpExc5GFmhsugv5HowbblOvgx6FLBCFhjXt\nJccX6WhfEtDbHxJU+IKGYs3Z5fOjrrrTaLdfy8R/CITEX4jl8WLRqP9irsGj\nw3OgssOTcGI4YuuqkLyJ5yiuZQ9mkU/HWX+Jox6bl4WDH31O3ArmfZZ/UVcw\n2T2yCa5RHcgScHeoSfzX8vNM1/OXs4BttodypDtWr2GhGWn18fp8UfSanBFK\nlnBrXMjBmQFX+E2xGDBji+j+cAq2nzxSoNJZgAVfvXV+96uOAUXK07LFWsb5\nzxtKdqyPKssJ5bZ6WJR2gRcdh8GLwcsRAxkoQKppjV40TleVvg5I/qIBSYx1\n1zt6rF1oMy3mlSWDTW8ccnKudDhNdtQc4Y61Q5PPWSaRwmcKgl7ucYVHM+67\nKKV4LTtPBQZig/AKZBdUJWUCpngBv/mUb04acMupcRmMfqfd+UBSwl23KDXf\nSGgu\r\n=fiiR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.0bc41a9c7.0_1599846541493_0.8626115561533958","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/theme","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b92b363b61e089b77f09627ed57bd3f8cea8986","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.fc0eb5013.0.tgz","fileCount":39,"integrity":"sha512-Qzmv8x8ly1gxYS9oTn4sTLJzPh7AM6XOTHUysYssQ/PTVpzz7AWKqoTEOIxiQu4qJTPiKic7IZPFsO+3NxCbUQ==","signatures":[{"sig":"MEUCIALu6JvaRJBPBnTLkvQPtC+jeKoTiGS9bxkk0dTS4FEtAiEA7jnx5UMrhtEkCbfV3c6x0YQzX5Zvy+37TWRY5aKkF2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9YMCRA9TVsSAnZWagAAGVgP/2/3kXZfVyiz0VYW20BQ\nmwa/p2aPicmtZxhDwkv2/0Ea3OFN9iu+rbGGILDKC4H69kREQXCsa/7uvwUb\nBGkXK6fxeIK2zGSdHX5yE9YfxoSeAqgE8Bnl/Ji+RL3PTRv7Ey5So2Txfo8E\nx4Kc+IG40Mr6cnHbw22AAKrs5LDBY5Lj9okvNwHCrPBKZrRf5I6fe+XOYyIb\nYpwhw6THqY/wp51/o5uaudsVTL9oKR+QzhJweEX+kYIdSiuYUwivEpTwwAsi\nC6X6g6FYXn2Ff/zrhj0/eMq6fMvIU2m8w14/WMQQi/4G39+bV0IuxBy+s1iF\nHrmSDAkB4ea+m/kObPvRqvpJSN1RIT2FPLibmFH9RSoBIompOC5WeX7Y9KsV\n1oOky9oDSHVAHj/Lt2QDjzbAq4wV03wgmC92bDT8oJAz/06xUCCvqM1P4n6h\nJJY3YrfvZUdUYJ5lQN2wwRoLdeIgx8ngl3euw5MffUcBsccJvgr3454DZGui\n25SizPOQ3MfIUNIDCyfmqaio2hgW0x3KBzTZub0MC+HZv+YTxoTmdMJCWsnc\nnQU8L0F4D3+uvAMFt+6ytpDsJqP6YpK178EZbgSj73cFeKyDBLewi7+4wJSO\nPFcXmB8QmVazxMMzUVStQtBtz1Eeun3rDMLvHVjKpgjPKpgEt03MO7/F4xJ0\nhbu7\r\n=YIof\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.fc0eb5013.0_1599854092163_0.25646150484224406","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/theme","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.319bf66de.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae76200c7605b12bc164e7e218f458b5b0cf562f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.319bf66de.0.tgz","fileCount":39,"integrity":"sha512-q57EphiUP2ZmrtDoq1KmYfGj0FBhs66VdfTabgedbcHon672qRGC3+8lP8PgbAOHOpCjkvdpxQ4xl8Xyeb6N8w==","signatures":[{"sig":"MEUCIQDi4OHJ1m5fhS7gmqPhR3B37val5DbK8XPrJAcUL8+oQgIgJu+RFEAohs2HQGB3XyDOecsCMMHW6AIbFOD9LyFdM4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAOtCRA9TVsSAnZWagAAsycQAJCMhUaPxYBKvoRvwime\nK/+z34wukn/jAw5Cl5x21Rls625rlpFbyXfA1R1qpdCkUjf+5quW8GYPVb1c\n5/pqVcixAzk3BCL2KfCndI76UAdsBZV9nK8pAQiCAhb2A67pEbPLbgem0aK5\no3dhBKH7L4jGf/jx6N3+/i3YrHUey85Z6QzC/JYhcNjXHk/I5MWRSBopCjQ4\njsucVEic0A/KIGjsfcg1YwfhK1AG0kYoukJ2RLHsvSRMiMhrf4vlF2tt514o\n4BuAMJ9kE5s+9zQv7WMRXA0Dgakx0WXppbxCdTNaqHfLIQnH8X/DzZab++g3\ncr4nk0vsaXKOavgoN6Dzc7LR+44BfjhpUWum3ix9JHvGP6g83W+EdKJC3gg4\n7zpFCR253H7AacVukapUXFY7NbnImG6IiBV+BAOuRA/4GluVgBBGS9YWB1j7\nZuyUgUsFvGi5gjP0gNuszYmwi4yAsnKVxrftm7Ji9wv594gB7PUmr8HGqoXW\nc+z2tD+xLMio9xJBZkOO/AcnKDHHdYIQS2fGYUzCeW8sPzetruo60QUAFMCX\n/YzMJX5QnnoEeeRVHg8F8SnPYAefv6E0xDkKxTSMXwE/iMF5wAWUyk3B0Ijn\nNwjt8KO0WuhNs7Jy1c1W1CfjqqMZs8DlHTFvjmZlGKIes/bSTgvFVRIPE4kd\nt2dN\r\n=GKem\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.319bf66de.0_1599865772922_0.6907226111040552","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/theme","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d400a969b919b1715329549a5fdb386a47a933dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.5bfc305ec.0.tgz","fileCount":39,"integrity":"sha512-4jXMCX84ODlkFGs91QjX12kgnKb5g3o37z0L4BBWd0HTf3kRpLCFTok8cGr0LTe4Vq8UsL6BdKfTXPQmv60VEA==","signatures":[{"sig":"MEYCIQDZd7hyC1kCCsSx7dB9ay4b0rhORrevHSYyq0KJJ/f4SwIhAPvR9iM4Dd5JPoZes6Bxsrl1jdn62V4uP5hHJ6v1H9nR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqRUCRA9TVsSAnZWagAAh5AQAIoFD4+14Xe0aY7vq5TX\n5rHEJdxUTXxhim6V1gjILxvPfwOZzLIDX8MOrIatN4eY3KBhQrqPm2uBB3Aq\nWKDEm0ei3WUAVSmnSKrCyF6zZMtj7EDfQPmKm8WoYYg/80mV97f4NCfOjaEH\nN6OeoQBlAuMfZZM3Cq3ZYYjATM92HyT4kb1GvYIxhwk3pxZXfMv5wHKqqRAh\n0uJL/Z7riUqWW4MySQ7jWMs5WcnwXQxyf+1p0eS8qXwlJP+pKJb7mSeR2mv5\nDzG18+HOWP6LLZ43sBQyPgjkIw9oBVLsWmMN9gBLe27MIPHI6y6jORrtMUcH\ntxqL0zucyCna8B7lP1if1B9jzsQmxJROzU0juMYZ3NDaVhqbwGiuJj89wB2R\nlcbStCdXTuGrHdjFGn+0QkfmjRjp0fxfjX1kfkSwL4jTojAKxkq28chuPQxk\nJbuyKidyljHbxpyOCgvhpCuxXbZ9+bQnBnap7hhjonhEzkpnI+ns2tq09Roe\nCleZbU2y9Kz6CSsfPlSRKpviQZ4DuGbKSYQHJWI8WNdpLTLl0TgmYMrJC4h9\nGV8bx9jITcZAC7Wf3wO/paSaRaFq2UAvjMjM0dOI4GqYyQufX8NyA1YVO1cF\navk60C8Y9UXWKQhwrNwskD3JgGOYWitOTn9vgT5PV/cco8tvv7d1Y1G3JqSq\nDp3p\r\n=mDPb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.5bfc305ec.0_1600037972404_0.2106766142339962","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/theme","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.83d83f131.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15423b8421c796aa6f84b329c239084d7848825e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.83d83f131.0.tgz","fileCount":39,"integrity":"sha512-IASUbtqI0MuC8M8jRuGmOY+IF8m9LPqkyPgPUTgGu4rUJPmpHeAxI3bV6lz1Dm3lyO/bWOwyP1g03ZeQ69TjAg==","signatures":[{"sig":"MEUCIQC2I0A2ruhF9VmS22R+GYuj4hAhDvXGzaCyj7irbqIpeAIgKMNGmHhcPgvc03O9dK+AulAFfQa/Hlpsskneh4+xg0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXroDCRA9TVsSAnZWagAAkdgQAKPX317un5EkUB6gMWwr\nFbTpsi6g2sZx55ebHsvfi2qZoGSgMrnTKMalG4Em3pG94URwS5dGLRInH2p6\nLNC0q+FKY5kHuzXsRTLJ64lm0qTprOFI8yMBaOjQT5P8+mnpmv3qvq5EV4kJ\nJ0p+6Pp01yLuo1nicEILNcHYLZZVjvj4aSHyAGl6GKSc1UQy1y0IcpLF6pt+\nG5Gn2xw0I3wrTGn8dn6bRmqs2qZxrD2aIKos1JVOSF+sp17sr28Ts/zrR5v4\n/AWWBEqBZhuKg1kusoJcGPzHLkOL42c8eK3JFEQWJP0+aRqShbQ0NeZijsgk\nR3StgfYTjfcclya9iHgbkCG/+BWOs7EXKc82hRynoCkY3lHz2wZkLal9pTWK\nlipyCCk8DoDS1tJS/26dH+CKeSqsHFHzY+2iGgyaUoNcwtff4kE1tmfkS495\nO2ZdYbXFVxOLIi+gziRU6VMu86mIaiS7BmPWbaglOzTld8a0OJ8X5I+tPpdc\nYwrvHzvAq9vVWACApF5BjaFR9XbN1nSsIdnZTavvCGR2WZMtOoj0vlF+flXM\nf+fEXqF2RGszETXHAC7s+PTMAWQDs4ez7B5vba4Nv+K9WaY0+d9298daPOuH\nv7TJrRm+OdbMSyc+ZkUXG5r7XM32v+azwjSTXB2FPOLLTFaRyIkUraH2GWv1\nXnS7\r\n=8tkv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.83d83f131.0_1600043523088_0.4276323305263019","host":"s3://npm-registry-packages"}},"8.0.0-canary.40d8e4726.0":{"name":"@material/theme","version":"8.0.0-canary.40d8e4726.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.40d8e4726.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaf7f3b74a833d2a8b80f006568afbb4428386f2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.40d8e4726.0.tgz","fileCount":39,"integrity":"sha512-T2haYLYPs5j77SMoChUNTE6+sW2pP/9JCy+ZRbGHw919ZpMOv1E26aWhFX6RC/csZG6fnBeT1sgsMV3Zrpvc5A==","signatures":[{"sig":"MEUCIDCuu18RNnsvdcNwI6lMFH74mV1wgDjrQeM1QnetWABlAiEA77Fv7Xoyx8PD9awezvwOZTHEwHmmuwTGiGRP21xatnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/x6CRA9TVsSAnZWagAAJxkP/1g4DEZSA5FBNyBKokZE\nRRj2bS4YIwQ7GnjBZD5S/1u91uuQgvr2Lg9Nz5aoLQIAZq0nHEXErohqyi0H\n0O3ROqlAxv4f4GEUXi70S0t83Fy7Ei+bJ9QhCMGxdxXilZZobCavy0FNaRaT\n4F65zRmcNBftmWKo5p94zWIocXfj88u9IEWQgKFIBAWWGM3jrwNpdZ9FINam\nI945VRFGaogwmolus3uKLkMrNuwmKA/2UhR+5x3RzdFHraVttDDEibxO2IU7\nyjX2HzBJ3O5lvLnzRPZLDezDtdqsvuQVYMSDzIRUkoM4LKHVKfGTlkOYeYOQ\nRkSlD3aju3BVUhEXGZ5y4YyaknZzIkbu6Bg1lyFRIZzLXmstwx9xbRUSaq98\n1b/U7Fd5ERIkQW65iqRAGhH3ZjbFIn+eLEIB3HTXRrFX8/0vyhs5dl2qmJbg\nzEnEFYKOkOTAlqzIS5w45GyqRmXDq1C2W12VPwodx0+U7OpYVzcAEdpzABF7\nr+2X4rP+OvE2DyjvOy3UnngZeyxd9z4Kmpa09Z9c1cSa5PNiWVyxIe8pJMNV\n5lOU92TlB5WUPixHkC0yLS53sfh6D0iL5qN41VorBlsw6jZYurETWImbeVXy\nBJNkFDK4yV9GUjDSheESlxF9R5WnphOnp7DkAiZ8eQziuaWHWRyshfibz3ol\no6zr\r\n=y+Cq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ba2736b8bb826dac383c6f8f237a6584247d5198","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.40d8e4726.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.40d8e4726.0_1600126073783_0.7939399642809435","host":"s3://npm-registry-packages"}},"8.0.0-canary.c25d70a31.0":{"name":"@material/theme","version":"8.0.0-canary.c25d70a31.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.c25d70a31.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91071c243de364eb4d9d1ee8562587f328c4e3e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.c25d70a31.0.tgz","fileCount":39,"integrity":"sha512-nQJ3Z/CiRJkMXtOpD+LnESDYuXzaxdhXA2MnYLwqzciDalfZ4uzRGeM6BaNuBvin6qjQOLjU+NwovcnNisvosg==","signatures":[{"sig":"MEUCIQD9HIdR2SuRs6eLenD7bBtabbNFEIyG6FPFp/+SwNGY/wIgd1zpaRA16+1gLHGcJ1/KMv25yCExawD2UWjYamW1JuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYCawCRA9TVsSAnZWagAAnDUP+QAXoq29w3IMePwCH9wi\ncHpE4RvsGB8+4ZUgQUwX0aIRC8bPw0ua7n0MXFGJKm+0fkknVwlZNvtJL1JE\nVGN+1iJIEcBGeulu4md5rH7o8TtvDY/u/HdGiiAjyZXcIv74OnVxHy4PAPho\np7XErwyDKOzsG/czWTFgdeKsIPiip0zowa4qeHq7u6qTVc7e3T3K3zLiMOzy\ncVFGWgtLoub+Qkgt+JhvWnQDhd5+lGk/nIZsRt78xnx7/j0JJg3kmzgxZegE\nTUvgkOwafVUGJ2RH8innsQF4KHHUb8/JWcM03CqQsm9pvVo2mY8iucLYExl3\nadyTIVqsq2H2TE0DHQTdSfIcnysRaWB18JklStCHszL4/gwbVGgrEXOlpLk8\nHduZKMOeZTt/koyETgeeV5ft1QNlGD4mIq6RQHh0CfuIySeOYYxePmRCbSac\n+Hq4kolcd404qmmhmp0IjBmz4a/vQXo4Sy+kzdDMzkR69HajrXN3UuyimjWR\nPgifLOl0jNNeKozB6Q5bZrxkNGK9Kt8RZn93Se90qc4WBr1A3yQ8l/TbTiYk\nxKIlH5iS5aCPZ9dV3nTgxQE/EzMF6HR2LCwvO2gRBiuPLK6uXFzkzAD+Mxn4\nyTeS81GSMbKXB8o6WC8S/XzSfzfcU6Y9JhGuR+5StN0QOgEBEXLBDvNuDZxQ\n1B1a\r\n=bQUy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"23adc9426ee1c32d146e601987be4165e56c7934","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.c25d70a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.c25d70a31.0_1600136880169_0.35635363608432447","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/theme","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3afd638da1d18a884e5f855e0ed327c3b479b13d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.d52b165b5.0.tgz","fileCount":39,"integrity":"sha512-1Do2BbxqE2vqSG0sKNlRklkvh2NjP0C4k2vLnecqqDN095M5pIq7uyp6AxZIgRZMWCQBSVNWn4Na4c6pfcWylQ==","signatures":[{"sig":"MEYCIQCiPK9y8k2+YFe/tE+zNk3Vu/xIgsTX9iKUf3wGkMbIDgIhANwfiJ8AvFbJ7LrevBTnRdqCmGsNgY8gS1TN2CGdh6Wy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNVxCRA9TVsSAnZWagAAt/EQAIrG7vNjjCvB+2mrYD02\nzSpCJxN6PsdZ/2OH6CEPXAM9iFlzwRIP5GcWEguBzLclWEbHNpasTmGdX6Rr\ndqsFKZ6MmR4hzi2GNuJ9xZ38EHNVCGtgoWNDtKI/RAQizoyKVMAcxnoX9e6W\nnh1HuYA2AtfRM3cBtcpIXzLjVbmC3G5YTZGpgAdu5o5aErhJP1v3RqH8lWw9\nwViHA1uwT3I9h0DBg1BeAsyIHWpDoSxRCizTkBJnw1eX7Ll01f2Ni0X40et+\nfLfV+19ST+1u2sHH3wQ0IGBy4OCmhldD0BML45ydXmjVdiWPudY8W4m+XKGT\nOr1WDg0XV/HuznY3j6kpSFqSTUOa30fbYXSHSnJXzeoh7pZFjwmSzQhpasV1\nWiqhvcF35iMUgwA3pfGrLgRIt080T5Mwk+dw+/rTwb3SgAS7obSvo9FYm+bY\n9mXN37B06QrRwLKASukued6eNLejQ55b2i4UuvVSKoDB7IgwHwf6R9G3PAKn\ns2AcpuioIf6Nndsob87l7QJwHsoyKDeCMQYRRVG1k8nDoYQakxxTtqM/awZ8\nRR2t6LazepsgQcK6hohPyjK7g3psHsPkRFfS+YIgqYhEZTo4h/FryFregXVZ\ndOVOQgyE0z3wgqBRSRMJ8ZOZ9JiEfOC6hlYHv6zSuKs1ZbKuDNKXL2+ku3om\n9Em3\r\n=i+qp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.d52b165b5.0_1600181617345_0.8192252414935299","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/theme","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.a831d4799.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de1bed097f188b866459a75ee5e8d37f4abcb3e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.a831d4799.0.tgz","fileCount":39,"integrity":"sha512-+d9VeeJh97dnuGGf3EP6dkE76HmI9wOIr4tmloqiwuLEd7fvZBZAhz57ZUvFve6LrQIdwdp2ixHpZ6H0lSZorQ==","signatures":[{"sig":"MEUCIQC5A2dEIktuCVbbNQIFwfzBnQDZ+VZDgoID+GpvFCJcFQIga4ydIjUyD5HrfTszmouEtd1X9aXr3IPbtQ+pkZ1ph3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP8OCRA9TVsSAnZWagAABbIQAITCooaHh46b7XkZtg7K\nT1fsnyrfB/xJc9LbACUX1Ogk02xodKr5xwmG2Qrn1ZID9Dm1CXB85aCiyd1K\n3MaY2kk7nW6Zwq10zq4tdy/DVuJMwicjRLftQqDD2cv+53/ABbpgVKD+Lo+D\nZTP+keCykfvf+0uA/2CinA2g+pOcpJq7zvWOS5AXblwDvGKFoNqnaHqPRMTx\nuxc6b45jmmjXEjc70OGuk6qOFOJhDvOYU7TJ0o41HcDG7ug3lIyom1z2yO45\nXQ2bzN0+iojFPRqsnj3R0/l1ulgqQ9nYZdZ4edoA7pJxeMutxjLrGTbh+9IE\nIDTacTGsa22w59j7beOqh2sDq0vSsBCPoo7fuXRupPlfoYfirYrKx8NTMl53\n2Y8cv+6TgsYFE/+9PY4hGX38BBg+GDy4tqPWIxApZMvOGkGk3FjdwOAPNbN/\nGBoFa8eQiBkpz/HcrQnAlDqY023AcUftMTCGw8UNk6vNcCWKH1eMFZh8OkqB\n2c4uLblverh5ZnPPddy8CcVf4qv1b4tGl1E9m/8ui7smeb15RTYMIiX7JfdA\nqWED5du3uQ/qVIrpAdg/vI/arswC4RGcpPr2IpzZBri2tNtzlCJe3pwpu5oC\nNPVSn7/t5GqN0heWX0KpfU2xCjfogWT9BTAIBzKi7JZ8eLHD5NzjnjUsEsIc\nQLjH\r\n=NE7e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.a831d4799.0_1600192270352_0.9048366119247249","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/theme","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.a306aa488.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fb527516542142f258439861144ae48bf97eb9f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.a306aa488.0.tgz","fileCount":39,"integrity":"sha512-IPs29gnmtnp1L8hCcg0m6vSNIcle/fhXFok+ZlpnPJpCzkJPyKnDDiL/LnYBNrGwHkNYt5GFAkTSHqGYxefvCA==","signatures":[{"sig":"MEUCIGIcjRXrPPWHxcuK7ICdhWyXEXYcvmq47xiQepmQQd22AiEAsKG+cpIQ2+NPrLTBJ35Cp0Pp7ISJ0o11zpS4OEcLjPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrSOCRA9TVsSAnZWagAAc1kP/RWMYsI2tQOjKpPZayo5\nHass+YujF3w6B9NhwxCW2Osp8SNmqvB711LCNwaaypo7DG3YpyIU7qQieKWP\nTkvj8UlWyj19dk2GgwuxTiXnV0gZsiSPP50bA8G+3lzJscZQdKlk+MRpwoUG\nhT08CR2GPRXFcdzJDbbE+2nRPdbEaWHqFRkNsDYUaHBPo/Rz8v3eW+5iLMOu\nps1Brv+NUKRMlANt8tyoQmx3S9ikUEhYBvgL9g6KBpO51tCjn7svtze+29N4\nHdoYC7m4w7jxu0h7v6KL8IbYfD/gi5GRm34FmCldbXFzW6X1Da/XVrP485tv\nqEUjeXlCl+1aom2CwAon32oi7tzX57pJKCUKLt/wfddqcBma8y7tVVoW0wFH\neuTxhePdsrh/i3M4P40qo8Fj8uSCGJoPJsrh6tmg359QVCHTi4t2ovl6MZX7\n16wZ8Wr6hOcAwUjGCZq7JKGxg/JArarg94+MVvd/CC/F9q2vqFtRiG5bihHZ\nfKI/5nq+cH03MW0f/5C+ft9j4JdhP1XY2q4Iz/fDABY0QPk+n+DelbBSOXcY\nxM/8cMyjFUDWSF87nDIlTVjydsJpExdPdmrSvNmYsppDEfhRByxmNeKdW/Sb\nsoaAVRBlu9Z0bgxVSlveFTRUrqwfP1FVW+lt+BIIz5KOSnvI8rH8ZlEL8MC2\njscq\r\n=LUFi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.a306aa488.0_1600304269830_0.22296160687434274","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/theme","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b8c1ad3ddfcf34d641151205446d393f855132d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.fd608ff66.0.tgz","fileCount":39,"integrity":"sha512-rW03dU7pDkCKYwW/aUUFyR+2lQGDSoDitu6iCYuHUZRjnx7syEiEGX2Iu/Df6SedbENwZQLj12e8lplyP3B2yw==","signatures":[{"sig":"MEYCIQDkU2+GkPwJ5fmO2kwXo7i2+cjHZ7FaL4pZVLCskNZ6TAIhAPvU6VhR/6yGrpSQlKfJft6214MTui04bQRRvmOZoBwv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3G+CRA9TVsSAnZWagAAVWoQAImSqsXcOQHN+t7+9af7\neYlngbjxCnxSB9J3kfNqvOoic0cJmNAvOdjABhJCBdpPtJHBdCL5l6x2Hh59\n/vpfximblWkUFTIYD35FZBFOZo9G6dPVoiuyupnT4dzTWtA0C8S56g+QWgBE\ninSdQ+zEXp0nC9vvWUkEvMmlt0KNeTdqLl4jw2kLq3l/PesGs0eGr1JLPKe1\n+FCUE+wonP9Ez7KR4nsRB4oQcz3xtmY4ESWBIAsWiyVd1thZzSBRvg618cN6\nPndbr+523oF1kBb3B2mAqHmY3hGfNsMFRFF4lelVV9dJURPlRfkB/pgYtxjD\nFvEavyOCPUnHbimC7Zv2mi/X/wRw7572YBzbWvbc/iBk/naN/670scm3EiHq\nGuO6Fpxu/5x/a/qa2eMTmGZYJ5nZp+D69tzWXQAo6sI4pi+USmPR/0j9CHKd\njBzv/LhTXC489xiq20TYsDPoPykYh9Cq2/262htx1DuiwAElzIGBjebziovY\nsWu8Po1gQ4UUXNmrdZxPp3KmM1Q6UKvvx0emCI+Eeqc1VH8ncPqGQhGnATq1\nYBhQHM0N5XOM8PP8MumLve41iMVsukJ6PE6MNdcZisUiE/hW3qV60BC1NXqz\nvGGmQ1YWwGtNlRVPRA4uBZScV/0dmhTw4+Nu/QqSgoMpn154ixuqr1idKGhK\nd4Yt\r\n=8mJU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.fd608ff66.0_1600352701526_0.7765864022080484","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/theme","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05c868aaddcd63365471e415714e2d83c5a0bcee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.3e435ba57.0.tgz","fileCount":39,"integrity":"sha512-pHDwQWt7Pb6GJU/Z2h+dsV30RcRxRc+Vu3KpSmRm/xnpikQDVnR+t62sJWzCLkUpyIhBabKUVhVRkXs3pVohvg==","signatures":[{"sig":"MEUCIGMQ9kbwvdTY4e/csU6j6BNrDbeiCrqHucpAtlNQQ58gAiEA2293Rlv8W58tTQVpvog/IoNWDjVsg6ZLKNTamnjlLbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3XJCRA9TVsSAnZWagAAqZcP/0WnYkJH3QNOPSlXOYLx\nZsgd+5nGrtvdHzvYE/TUffDtO761WX4KLPtRByrwa9ITECyf3KnD2Ym7/3NK\nYOfTbUkBMJQddSNEy2G0Lstx8DFCEqZFhkb8umilede01cgKZRSt5bT1/3tU\n7uUCxCL7EBCCvkyyiSSPXwQ9HgLZF0JruUBL0/oYPYMahIhwnpERmBXbZqb1\nWJZT9ZV4sHVNZg2aFp3b+BzPdk2kF/zxpGHjiiICf7zIAW2e8M86bSWbseSM\nrfsGswErYaajtfXDuYQBR4Iv40J3lwU3xHcIjar7nKqFielsxMdowG4ZBjSv\nIoV2GSgZm89lVms552qbhr0nRShNHwqClVTwXC/KbORy2Hwqlq1DheT4SXgD\nfj7+am2fNu9CMWbPTv44HWOwVAAVO2NooqkvKOGsSXEk/GjsPE2pWU8DvRau\n0jvbzpVTvhndPMFOjKJC2Pu8G6UwZnn4cZOkQTWumGaEE2ynuayNjcQ23lNq\nWpFr91a6NiLxIp0GQ/t62MKu7bMa2qg1U8Eu/m8aOYqAbL55/Dh3K3tS4P5l\nL9vf/+1a4Q3fr0hTu6kh9YHqZhkHsIFVXdXLDKVaSoq22uk4mOCm0Th4uJq9\nOnQz+7G9L+mI/b14bAo+cKuAH07EgdZcvfaBMIZexROQMWA/76DZzIKDlvWP\nGSgH\r\n=37XG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.3e435ba57.0_1600353737045_0.4843580303461654","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/theme","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e92aa9071e3363f6b8a37b027e172f461947063","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.c250ec52a.0.tgz","fileCount":39,"integrity":"sha512-nMlfUAE2ex6t2kmoBGBnUem1UhXO0mwPxm2VRnN8u9iNxIuJEykCJowvRf6OIFDz+qYJ/nAQgR+ZLkppLzflgw==","signatures":[{"sig":"MEQCIDJdNs5VvHJrjRaRCiGLZRGZ7Rb1u/9a/+VPX5OLcRBuAiAxYewSVbLg434fdYqcXBjaIdF2AbTf51NfapeLbw3F5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8KRCRA9TVsSAnZWagAA514P/08dxa+BDqP/UOOTPhoB\ndikgy79PJbLC4wp5pbseqOiQG+IF08lZLyO4u8+/azEpgavKpQ3DtCb7EzLr\n6N3Dffqxo1MKFSShw/ds1in2y9vPSdSsHmS2zpB4r6TcoE8vAQrDcOZdSAg+\nSeajw3Fod0NjBYJ7rqFquB+WFypqjTtEghp4gIMnXDKoIILmuvrpHzEl0+u5\nW+nv+rHHqoL8SDvtqW/FijReBbuJLjVXsVLNDzawym6hHakQ8hs29zEQV7fh\nVsCnLgoDZki3BXrC2nfH14NxzafpZOclwMobU9wWJ3Hm6ROtB0U+BOxEWl6I\n0L2+qZVZbX1I4spdTocUmYowMk1LJBpcQMZbSYXTBh4ZxVJueaxlEUjW1u5M\ng8tKTAGPLVFGtEd25uVQfzFRq6s0uMI1T9xmDG6sOzqXPLhmnsiNaYA5trur\nCWh1OVfOx5Hz3aMCYGH5D8daa+xQDf6suanCnZDIsW8ZPL/VzMAkykmXtWcX\nJb1PCSNSsrOCGagcdGj/7jvp7iEuppaQXN7kwWSz6wxLhAMq3sfQ3s57meC9\neg+OnMb7fPElSg34H1yO4iPGHZyM3MxWGuT6IYVHNqGMVMDp8Mdo+P8qmMuN\nzQJL2oQ32iinv9q0v99/UEBuo0kqnDR9xclL2YrfDw/KBrPCe7U5e51jbacd\nqAlP\r\n=llnv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.c250ec52a.0_1600373393105_0.8700842977138434","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/theme","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6015ad5999f59165db2cc0be61d135aebd40388","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.e34e411b1.0.tgz","fileCount":39,"integrity":"sha512-wQwMHbeUYBjHt6OVInEXgTODh6HNF4JTE5ugQF/sID9ktHNhD6Ki4ejWSGEX6UmmUKEtGFO+Gz9pvzqBa3loSA==","signatures":[{"sig":"MEQCICFMsb3yEDdd8eXz2u6r092Z8fKSlkkxscLsWkjFJ4ckAiAlVkvvpN+Z38Yb+ZqySeOj55LT7DEsZiFeAPtCRV4PQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8RNCRA9TVsSAnZWagAATJ8P/jSa28Y5gl6b7/QhxSgQ\n/2UPd58ec+MUepBnjmVoMM0b9BFkjzy/T8904sNwmZALz5GQRm/5IaZ7I/Vd\nZRoe1qnDxGKU2BVZPW12npwM6tBalMvWrAJ71SM4fxXIDL27NIeZRSHiNhwO\nQzMR8FN7blsIIWGdVQXyMlia3rF47BlxZqFBRATjavfDdRS6p6h7ydwRZrUF\nUzIlxMaLM6BTTJJowfa7R73Nsv2RRPcEslBwRO/vwMFzQheiJfv1riVn8tyz\n5ce5XebIMoRImBBmSZFVYYrvaJF2eAPZ/HRBPqUpvSj9eLf/A/Q5h9pNBBbN\nrvrfrYWe3npHdPB/bL5azcockiYNUJA02T2H+LRFFJZmb3Ye07ZqQQBd0OOS\ns6/Uj9o+GpeNh/N3dGJR3r14aclw77RJM2KaQ7P3FVwAimXz10X47reA2eic\nNbPIKYC/hyPbj+yZwUJN0Mt6KW5AjtvsEFiS7W3CSjVgEh5dKil02VzguXV/\n/2m0ENTlqZaqIc1Qwgx+4xHJhXisF39VR06BfDkT9c7782VLZq6urXmQUWX7\n0ubR8StABaw6NslxxVIOst8qcxf60XJNLl4oqJsQiikdFr8YWbbtK7jDZUvm\na6ajGjyGZ4wWtKlPDQyZ0B3u8//WT/WQWmtj/ysUC53Cwnei9zfA/fghPFNA\ntTFr\r\n=E0o3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.e34e411b1.0_1600373837049_0.7742138377296865","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/theme","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.4e9343929.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e28e39ba3dd730fef17e5910b2489ef7dd519124","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.4e9343929.0.tgz","fileCount":39,"integrity":"sha512-Q2tJ5E9OWUfCb2Yy1hbsGCte4fycpCSBNcAen2+soHj9/mfFACnWHLlehkuolVZ6zWP/xajYCHpuHMjiydZbwA==","signatures":[{"sig":"MEQCIE8gn8aFlvF2zZ8W4MK3ChXR9lVDC5Es0J32OpxvqhEgAiAgNpnmzaozcqV/T91GNtQqDJUoA11848XL1qllCz62SQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8o2CRA9TVsSAnZWagAA0UcP/RlbUtmh/vKwtU/l0ooy\ndvzY85I9XPMgqEPnX/9oskl0P35rzq5/58eQnxmJ7YabsP6oHrHJhdimBLAe\nvOXw/SwuejY/+89nOwUQ8O+IhGghN50w4pzUQcJROyfilaYX0WnMcD6/3Boy\n6UF35W95SV0VauGowpMiNPobyGJYnRuoFBtz0nJxPpkpM5g5lcb73KjFl+3G\nqMwLM6nFifKJwh2xjr6Ia2A60i9PeQhKqlHTKTWz5n/u0CXqR/vB9ZbOzCFy\n3DrDd3f4Wbb/J+7p35MU7WugYtH3aHuRkK/bgjNNdbjm/4zP3s/d+xkTmF7N\niRml1J87dVy8svYA9GCEDZLTexI9qboppHaeRW4GF4NNZV6bL40gG38SpPg8\n1p7BKcVZ/krQbuYozqPJVDqg/SKSkX1FT4j7R6/pi3tAhJ5x7Z8xl0syTwa5\npNY9Wmq462l3MoVQRIROdj/PzaP/1nvOTW8FDTgus66rZA1Y4sYpVeKmzVY0\nMMq1QwOYZfq/mdV6qkXzca36FJnPQZKWDPI5/OWlRALY9+eQfwbyqBTLl3EY\n9+zn/eM0QzPH9/TL1d8M2oRPHobKcQFwn4Ng3VS3RGaiMvjm50+g6WeBIWH+\nxhscurTQE9Wew91i8WLCbXrfX76/G4QAiWrTKSnGdSnW4Da6Yt8YPSL5HXn1\ngRgx\r\n=gfgd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.4e9343929.0_1600375349449_0.24180050218158633","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/theme","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4474b1806c90710e297d704446b0734ae5a4449","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.4e5c350c2.0.tgz","fileCount":39,"integrity":"sha512-HC4fEISSipZRNFFi6WuCnpExi8cVScvLMVr7Id5x2/z7TccziME4GjIX1R3EfYhqh1Urev4rUSJVBxuMX+4Hig==","signatures":[{"sig":"MEUCIBSA5/JtDivM0p+z4MxvMSiXxxvK8PYpg/QYS5E8nUwdAiEAseI5SAF40/Lte1KmYm4a7fpKPaRA98jYKxUw3EX+jmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRd6CRA9TVsSAnZWagAAJ6MP/2AlKkG6g4vmxU+e+R+S\nzr8C4q4uqEzPQDYRl3O0mpn7Zmt0WeEYgwocv1fl5lft4ETVvDzZx4RY6XR6\nZlnK7iEdGNF4MtwWHjmEvUXmAuirQpycaefo4Vb6TyWwcUjSAPv1bWiQTNZY\ng4nwsntFYLqDv5i1PW02+nWDyQMP1JvGwDpZW6orZunDkAGj+vf21NgCZYs/\n0YIS1MZly/zaBee+i88glqt6JPQlj7hyGX68xOe7wUJxOU9zZeH8zW+mkFdI\nwxn4Q+Ac58IA5kHShxZ54rZApI+KVy5q1JbpCwrbIuK8Q2CyZTTXE3FLXc9m\ng6iriXWwf/I3v2XAR7rZOwVSnAHlJPHwBX0B0B7BWStW5/8QQc5o8lM5frxi\nbBe5Cu0c9rrS1DrjUz2+pJR2T3QXMCtUb8v+yoN6mx7+6LVQgFUKXsC4PsxD\nNGX/xbWqvR10nMPRFUyqk181fMbIufpNDrd+ePKw59/FOeOhqDUGYBOuz6SC\nwPGql3uFqMtI4iciqrGhRSoUbQoYw6XxiJYA1DM9rl9o/eny7JbEXL0XqWnI\njHvs5GZuOprdF+5BiOh3veMRzzf6pIqAIv2elyArbRAYcuGgv6vSl3RiDyxV\nHaCQ4hq6vdWUogTw5E6RLyR1fYPtt7z7ELuZzgP54X991/Ov5mveGTNLwy5z\noOY+\r\n=/eHf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.4e5c350c2.0_1600722810251_0.4130616270607803","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/theme","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8af9080b2ba17ec0b90bc1349932ca936ce6351a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.16c563ef7.0.tgz","fileCount":39,"integrity":"sha512-rLtW+7X+DISzenskksOS5KIyQEljUM+tVbbgYYr/cQp7gTK19BtlMG5k2WcMtiE0ZxyxMkj8mjuSFMxgnCywwg==","signatures":[{"sig":"MEYCIQCGvhZiBjsxpE4JtdYcMp6LR054yIWFyYu3ItI83U2YHwIhAJNt4HIMvPFXg1Mzm6Z9k6uDMIAedrITXpcwFTTia1Gx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalRcCRA9TVsSAnZWagAAtRgP/i5kcstgyF2jlvN4lm/r\nmBzUlR/I2hfUwz6Kgaj+Z8EnADuoLWn1eQFOHzOJztpmnQNL+A9fGCaLRLOy\nKclQnQBGphpXI5n6luieo/oINElsOGzhwDCoZgJKfg7FYWdQar4k+HGF6RwA\nhpVRcWgWtFZfhRBsJEf2Qck79UDp6Wu/UN/BfJp17L0EQh1rgxIAfmF9Vx91\nI9tjNcMd+FFhBn46DbymzYZXCVTVa+gSOS+f6gliNI2ByyCsuIzPkMjDFeeq\nfOL3Gyn36qYsDvLtIZfeGBHOmCz4xyQU1ztcVLn9xnb7+SldrupdUFnHL8jQ\nzIm5y6ds53+rlVYr4hOF2C7WDsX67auH20Z4Ql4ApWA7xgXvRaWz4/hKfXfS\nAaYssek0YnRWi/uMFDm/vbnNNc+2S/Ou+KTCtcC6cnk4o1VZ1SbCeJWlXr0O\nBg0qoDKGN9o3F+B9qqaJh7+ezBQCe79YV6Jno6SvEKPVtgi4vQKbOVkuEzsQ\nVOOt4NH4ylnp7YgeeUZTpOVrTni8b5tldU88yXGpYd8eWETYWv0+QmqoPa0w\n1mdtKVWCZMh5ipCXw1F5HoJIobMmOu/BNS3iTLsbjEQ5qxpCuOrnK6wOIruz\nn1k4kxIWOhl4FV/lAYoBre5r0ueAreNBoBVhcSjXt/i3WK9Vsc6yMNZ0YKJD\ncggr\r\n=JuTY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.16c563ef7.0_1600803932005_0.10641593300050789","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/theme","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f7b7c0b04691d0f7c14dabf0fbd47f36655959f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.fd8af3d43.0.tgz","fileCount":39,"integrity":"sha512-F84O1zg1xRsUCPdG7QsOGXG/4RMcM5KBXNbmUBNk97Y3L6zha+rHmbaalLJI+FI8MUfpSxwB/BTPNTbUU4b1Hg==","signatures":[{"sig":"MEYCIQC0/ePxcUKto1ecQOTVUxaARqW2rcMtVuMZJRGMVTlzPAIhANQx/72RwbgmGCXJTJL3ZdhOO2a0oiuAYJkWTDRQDCdq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6KXCRA9TVsSAnZWagAAcO4P/RtXWPEvy2wxofD65KIv\nRyF15kFe4eFU/6FOQHyFsFsuXqzz41p5pTDBKGjcLXud7+CfwWXgT8AL0vNC\nFINSLmCvpBukYL+pDvsSAr2Agf+DGzx7VE2iC41n/KiTXVzv7svykzlveItd\nDTF3i+eFm4BHpXjVlWHR5W5tWeBV/bPYuMykbAWiEBDneHVA+Z9V329wUB0l\nxV68bIDPLSZWPTrySnTN2qZ0Hp8IKytcOoQfnsaHBGpKK1txFjMzb+iSjRPA\ncI3AmylfGs5gxDV4Bm8K6EsaHMBC79nUnY/e/PNEgKjhU2oIeoczU6SRI6pf\n9RkvZqdghqX9MJA+z+9UjcuX0zo680EhWrIth9Wj3WFCdcUcvbpGHl4nxwCH\nGWxPV0aTIG5i6/gJVT4ik5a5gc/iWEZVlVaMPZOaUnDMATAxnRO1KZf3Hx6d\nn9ZjyELxG4x87SeMh+WB+KCegBwNtS49MQ4FnjaduHBO08o5VirKtH7qLmsf\ncpDK+ZATq3esepbt9Yp0fgxCAgXTslnFqSIipAqn8IVx9wau3Xt6j/Rkqwdi\n9dy8yw6KbOnCfA/73BxQbvSNjbzQbWBQt15NK22+OAYQ5j8V7d3Bl0cEI1DJ\nFDVO87iwgq9yHCHEKp/zoucuV93/UklCI/jYYVwTqflogSlE1B8DqPC0W89Y\neYwG\r\n=uP8z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.fd8af3d43.0_1600889495412_0.9062252146825696","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/theme","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"051dc0fba4efe24ff53dde8c1fe660ce9a8bc920","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.d4cd83a85.0.tgz","fileCount":39,"integrity":"sha512-pPZDrJrGDmAfD4qEO64N8VbqM03I1G4jpkbRMRchP8HrSL5tEG4FjtOIq44vByakyLxMWqWaWm09pD+FVmgNFg==","signatures":[{"sig":"MEYCIQDNwaPPdYrG62TKQgyYnHZVXin5MjCMw2dfxahuGxNWoQIhAO7zBn268h80/LWKJ1KRnQZoVi0uJMPfuWUWGtI949mE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTsYCRA9TVsSAnZWagAA7AcQAJRePvFskOnTfUqZI3mC\nqAdLoLGZMAsiuMCGOU83yPaMBbBsTZbh5qazSjVeIARcM3DQRQ0Y5SZ6bEzu\nXRJm5hGqR2WYmA21z/wax2aLc4rjDGf9vV2K+NJCOYiuUbV4K95wNFb9jlho\ni/SGqAQ/uxV90AQo06gIDbaHjN1Z1Eqr3xMrHXM4Z9mvIGyTE1Yaz4kSsd4W\nBUYpvPXHEExRLkA6EFVB027MqcIGDqAr9pC1KoPc9fm92QhaTqQFdVYATBd9\nNnNr/Sy9FKYZVZ7Ei7bUDF8DJsO8rV837GulFN67SoNpEacQfpqR4hMZ9Bre\nm0OKDirgbGlnAOv0zyF/fnznS4WzIfLl0xFymnFNwDpPVcyO8BKskWTFwRNt\naa8zkuAcRSt9fBrF1y4Hypu92gf3OvHNTI7aCWwbLwcIZh9HEnOxvnYjmfMN\nz/VX6Gwq5S+3EZvsA4KWkIU7tUkxdHAsjPmeDNuRljrHks5vXz4+jA4UvLjT\n2nDLC7Xuc3bQrcT9W8xR3HkLasfAdtGZJFAP7Xzt/bEky5pDhXkgI940IbcL\ngUNWlnSPLkfOLPhwvSfufZkpFqbWvf6ROBURzrAETACGi2CN8/U+SL+68kp+\nDKTVpo/uWGze1mzIAOdYQa5dMKQ29rRYg8nEEcqizWbwpOK8G3YFJOzCaK76\n37Hw\r\n=1vDq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.d4cd83a85.0_1600994071870_0.061831707378182","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/theme","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"042bde7535f68af0d8168b98a2493ca8ae894f80","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.199aecdfb.0.tgz","fileCount":39,"integrity":"sha512-giTK2nlALAIZTxKBnwkTlCVNcUt7HkUZkTu2QjSqGfio9M8CciuoXMndwtP3He+gfkoHUCX7JKRf4KXmY/vUTA==","signatures":[{"sig":"MEQCIDM7g+N3m/RmK6Z4AMJ1mUzsqzfAQAyJZKN74k57i6G2AiBY/vSzsaQTbJmOctpMlW36odIPBk7ptp1/uhZwcjW+mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhHMCRA9TVsSAnZWagAAKtoP/iGK6S66OevEEmCotv0p\ndBSNUc9sw3xM1+2gb62VfHEYXIQTmY3c3Acq1GM86Oa407ab/WPIlfX0BLi7\njaeUeJos7aa38oixMQL5wCBynRvx/2bOKue0JHCZtaJ/uIjgIj58SnHlY7Is\n5lpIaaK4Skgz28iFSUGtUk4GMM5J3uFt4ZZ8LdPVqs/jToi7dRSh//I8fHQm\nMCfnXpeu1gm/CjPlQ/lreTe4I52fAXS8GAGlruoHF+nkfd0VQ0myw55lZ6qe\nQvWNOb4xAoXNINHMJoBhFbyrDJLcadw+/n2Z136BL7HdUAwyBfusBR7bJl9/\nxQr5vlfrUExU1GmF94Hjj9J27jxk/wB5SxPmwfE9NAoGeoetWst1xusuMWMC\nS+PD6cgMT9L0zK4zUdHUD/fLENLNVurLgnhpFCureeQDMsE4dYwEEcDCdGBH\nditWWY+7kz9gLJK1FSEnYbf2lgS8a5QR7IRzP7ezcD3FGJUQI8eM/IyZxZLC\nYXMJRYochaZtNoJhcfzAEp/g1m7U+NT9YI5Y2OsIAnOR7/oGIOSTarDPuwgT\ndfCa0gcG9+8aX3CMcmmAF7CBlcqGBdm9y8QhQMeO/G9Uo+IirbOtw45aERXT\nbgoc45a4Cqtd7lqB2KtSM1v7UWsa9GBucav/pABLGxtjY7pHE8lCZisTNqE7\n1IS1\r\n=FcPF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.199aecdfb.0_1601049035518_0.4740759676727042","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/theme","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82265ae4f4922ec758db8555e2899e874aa6ab77","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.38ef4501f.0.tgz","fileCount":39,"integrity":"sha512-CpWRIxlkcI+pbAAjBiKoNwNfzCjucoZNyS8m1uS0yEU96rH/YggNL6k6NCmqYXzt9LZdlWY2LIMMkJAOO6mkGQ==","signatures":[{"sig":"MEUCIQDnpm5ttHJTyjJQj7dLo9sJ5j7pk8Do/8JMWWWlqq4ZJgIgSZKCHeoSY/419+VoSIcAVQ02A0u53ohn+Z1cI2iUw3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM0tCRA9TVsSAnZWagAA+E4P/jpBOhjSRVWn2JJtgHC9\nkpClR0B7TU4GDytoMxyt2mwLX2v7tfFD0tc01EKpPPB7X5eQ+CKgvfhVsrM/\nQYImVKEJhil2D+4+iJ9nXz403kKuRM7qTQPsIm9T/TKuK9HbtsOPHiYV6ppZ\nyhS+DGzYENBw/2mvIkj14bXRvcA3djfgakhjG0Yz/XoBnG8XlziezXnZs3tb\nRLFDiW+yYjMso15r9dUVju92dooZYwNaLHG+A+naBe0+mAoepHFIPLOSCEpf\nRsl7OLhHvM2/bwWTk1yl0A/TLwIMqYXpG18qUJsah+Li7MqxwTBAAqS6TU4D\nmNnV38s6NcYrnqo3KJg6aYWs/sgDeWbX18BTyW/kW2d9QV1xLg1CpA0GJwdl\nTG1wWv6cGRNWl2aXzmsxOAdYMfxoLsW2zYHp8FjU0dWzhc9ELtNFbA4NbMIV\nAKamGW6JPDEZorng53n+RjqfN9VjP3LklvLuDwhuv77q54yPbAQeZ8rDrv04\n26nL005mZsitK7/hMYQD8bob73H2M3LlPzHUPqVWb5Inbg9avKUh+RtinT77\n25R+lW5USAZ1c0L/NHSSPRvsTDC60f7xg0Gripf/xLatM10NcRsq+Y1drg0w\n344m+iFh34jAW5JMjuueBEHv1apb6b0yYE6S30gcpK9mWENST+0mZa1mP8wC\nBjJM\r\n=GAb+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.38ef4501f.0_1601490220567_0.11532518075788856","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/theme","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07322fb5da2a8a6f84773c05e9edaa7ebbfe4440","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.774dcfc8e.0.tgz","fileCount":39,"integrity":"sha512-dGQHZ5nHVdgdmG/PtD6A/oJifWdou1Kx3JAu0D8JtopdyUrNFKHU24qj6SIto7LLm+pa05RPnfxSHWsBvDyLTA==","signatures":[{"sig":"MEYCIQCwiWAUft/eIn720riUmpBD7Bynn5aR6RnCFpgkpVHgYQIhANRlT5V5TeSVL1QCPuM51ixfjQKhE53XVxzF3u//5awb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdacUCRA9TVsSAnZWagAAk5QQAIknCBPGeBNsKpO0O/Xq\nISv/k8URs71Dv54XMm4m3Z/fP+oC8qW2ppUWll7S6REskJBhlXf1QIJlTll8\nT/uf01No//MJh9qtIzFo8Am8wbRMrnD1H0yuElt19Vur+8P4MDPrmqVrx2IJ\nOYgmO8gvhRHL6tU4KmLkjpsWCeI6R78URVBbMkbuC+Qg3+v9sjfY9guUfl04\nSEJNria/LAmMleSjbNAbnWfET7eaUcVrpPcWFGNaQRV0akBnYdfEyNHiBTwI\nXIFu6l249MthtN2uAF4wJij1aH4L+lR/HhXN+D8anAEAlBbGUa2aICIsO0hG\nC4WKdItdx9SqprebmKFcCF2KF4gH/MQj3QZfRNSKdj5+ZlYtpoDa3leSxm4r\ngZc4hiLL3F3ok/JcCVR1P1UVY4nqwdqfdbotk/QyRE3Yes1CvbTY8aVGfANr\n+azS9OHsqq2gfKnmXwY75IM5f+smtnubtQnF1oQcQBE0Mo22wTHqNYvTlz4U\nXJci9K0y4Xzm//+DigrtFe6OXS8KWtd2XZCcmg30ZCRiZg2um1XgzS81AG/v\nzA8kP5eNwgebzfHJZASomBMBkrfvAI388TNSEDBY+9U9HBajFrNbGrgo5FtB\nwRKDnZmbyMj3ioJHNr2swbaQ8fMQUgDAJ3rxnpjM+xknbT5miVN26VsTLs7s\nZj66\r\n=B6ar\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.774dcfc8e.0_1601546003943_0.9465946608888804","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/theme","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"616ed2072010eb2f6b23acd77e6ad36ba8fe70c2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.0f60323a8.0.tgz","fileCount":39,"integrity":"sha512-opk3PlbUzUVjNsBCtqdEBV7c+pXk5akjZgg6nnpyh5Bn87A2cUQnZQrTqIkNLdAC/e1lq6+7So53oHbgXgE3vw==","signatures":[{"sig":"MEYCIQCRlqvQ0/++C5OlGrsnzrFbhbddqcl5vhrMzIqqB2i+KwIhAMzXTVzT3g9pYazVMx55hqpaqds7Zn/F98pIkBRqf3vB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4AGCRA9TVsSAnZWagAArjUP/iO0h666rnubKwj0hUvL\nZ2AdjdtcWu7S9N/APZM3+58xcio8NpFFk/IZV/GKx/fonkGhkuBZk0UJ5RKu\nP9/qPiEB4E7YN5Ee6H8t2dcu7k6WljTIGvMcS4MMjGPsfld/EQ9tXj9yDy0q\nZ04+ntT+I1Skm2hdPRBDmqOh5MIsNainKs8h/TqS9mQkmcNtRlbRJ0/09V8F\niCYT5xK94pAjOKBEI19XcH5K5+bc3ButqEHcl66jMahItG0qSAgjpX7IzrbF\n5V6tLl4TzyJW+4EkW3cRqlj64zV6Phlf/Rykz+AVGa3JaZg1hc9vKZla4UyR\nT4Ym2DjSSTukxC1YNkoA27+Fj67nvHXU3ZzzkiHyvWcdGJCM/Oz//pNfBF6X\nEQT/d7RhOX99lhdGzfxVVxmvcQeSAmueW7TZ28UCaIwEUl/2x5MH7jGAZwzK\nPnMFYCJzbYrjZwrnKiyXWrvINdL4pLUolsFh02Mj0RTOq2ge8aVKbSZvBHcL\nH5R724MCUS8vT30tOgJtSQXNIkdElgRGPiZmZLV3OtvQsF12e63SVuWV0/DS\nX9XEHV+L3/lvhwL5U48QPZYDFeOYIZungv7yW75hnhv364itvF/OIhBNlUqu\npwPz7DXJQFkQqiNQPnTTq4prM33NsLeXlYkBxRbKhMUoYXDIPtkIyi5lv0TW\nLViS\r\n=NEkE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.0f60323a8.0_1602191366424_0.7185477600295143","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/theme","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.d71622574.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61285defad9a2ca16034f52c427773be74f2ee03","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.d71622574.0.tgz","fileCount":39,"integrity":"sha512-BJqhH/2oNZeWDLC/Ov17AyONeFY6X3p1qbICI4EQkQvvv6Y/XryfrimWbPLvzT7h6FUjqtpw+9PBke3x6sJYEQ==","signatures":[{"sig":"MEQCIHqT4jgJz15LngrRTBMrBIcgYui7yTFeCCuW9BINvNqBAiASOMcapffkJupy4oDqfEUFr+LIgd1g05CY+uDgGEvx0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJBACRA9TVsSAnZWagAAGggQAKGBG6GINHP4rxBL1p0K\nYzNSTHF1Q6/8a5LTZXGgHtfkjbZ0jO2iJ0Re6KwAfnlYrUCWj2PqtbVO1BM4\nQ7rTIQgtJO4WrVCxKVzqg5XBZH//harH8eRdCSUzUoN7awX1rPhz8rLePXsZ\nnxQjkxkuS9R0jUYj8QlE5HnOgvfgnAdpiW37lpWU/fSKLHWbc2KHgnZTDDSO\n7xJ3S1URySFBMzThpYV8mGC85aimKUKd/dhJ9KmUNLxuV/h79KIxvWFEdPbh\nk1cpSk73urljHB+OCQy7lxZ3+QXAvmKsIwhayMtUPxUNPvXdX04f3c62ETsb\nxIazFDwZ3iZEDILjSZstjZ+qxje7YuTlZtkMGlWmFJx0J9ViqvYELFsACTb9\ncPRmXkViqjbpS916uIOND1VqFNcQUGIuXgT0rTZ/IDqY1QOp7LNE0DK14uhK\nQDvg2ThXVkSnjC6UUZNMLI1nPgUSPlehcqKDHxBgiITfYW2rACJFmEak9SBl\nZEysE0k0CncERog8z1pIAW/agjMON/hEGC02upKMrjRDK7B3MVhIvsFjBjeT\np3R7XKQGHAWfpBihKqR/8GYYv0QwOvpRo5e08RH8Cx7qxGKSX5kJlV+kBCZb\nYjXnui1Yj8nXKQBNGBPJ9R8h2VVywUW9DPmcAJwejmfWqfC73JeGdQGlKNrY\nD0Iy\r\n=QR/y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.d71622574.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.d71622574.0_1602261056093_0.7075226830749586","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/theme","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6018da6cbfa06bc008fc1857267ffc5ee3f342a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":39,"integrity":"sha512-Ifev1B0vPb3IyFpyYSd/74xg7w+WKT+//5JlGN8UdSwInQZ7ekMRxUW3VIp/1wOqR+/q0ZLzacIy3GCT12Q/Gg==","signatures":[{"sig":"MEQCIHL7rXR2qHmI8Rvcq/BMhdggAyMo4wZM63V9SRM9VkJjAiAxJaPpHMAUfVi/AnfDWwU+a99NMEKpH5utYpS0sdg6dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOnYCRA9TVsSAnZWagAA6voP/Rhc4iBLRfi4yYBNtvdy\nXspr/yXnFkw5EiqqeKLaRa++kmRisQ8dfSrcWoxQx9yAtwuu/HZAlFoPmlyw\n+Tz/l4EfAb3ZpVMLYfNdEpEkrByfuLTIceSPmXGY/h6fRZJJaYg1FkG8MWka\nIWe9ahua1tVcNj+4wS+IkmcBIMFYMeoN+bBOeUFl7dPCY1dACzChVFVggOt9\nkBLt5pV2PTMP9f0e4EMHnz7fhwN6nu65xb8H+7WKZFODXplv4j5hYY29Zarh\n0GKBB5Etth2NiylgdaSOhDBbz6PrdqaV+9PzkqjzY897Y4Ba2IW8N/jwe6CS\nz9Rm3W0c6T6ITlZ8EBz0Zsh8URh2spFy918kgnLbz4fwLTF3+jSLqE8DjVmk\n8uO6JGJcFRWKfT4c99y3ydBVIsgpxeY4ZlXgnqwbM6N4qlrRy8jGTeehC5pA\nz1sLS2fBAJ1MZsmDQvoHNmU9jSSIuqMvIy3zBiPn2Jgdo3kiQuklw5R4+saL\nAaW2TzQzF5O/NX9BTjAbfa1Yd5liDGmbDp2s3Zki4sQQhVmUnZUiTVBVgBUz\nr5PN6G/wOhvbnOUrTxFPon/a/8jiYjOc+mhVTr37v7Df0Rnn/L+pbJjG188P\nwQVNN8rm8e+Qm8FKtXEQZWgsgoYM5cOa83UuQMrkliOHuA4HAvNDgtYShdq9\nTN0o\r\n=h1vr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.7a9afaf4b.0_1602283992504_0.6923382942425638","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/theme","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7ba9b825c0b8798890edf866b1b05bd2be19ded","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.8a39352c8.0.tgz","fileCount":39,"integrity":"sha512-2Eb3AEbtBwwIYm4rYmsZfdZwXqxBLWIqWGowDOrgEx+TtUBf7BxsjueOedQsL/4EABXFghM5ZuBrkfkgH8xLpQ==","signatures":[{"sig":"MEQCIFu0hrUjj4hW1zpjIVuJEE6a1eqruSA+MDur0LJrRI9lAiBwK7jmMQX4IyoR/u9pGyi1uyh5jzmy/EsFF889b31iPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJZICRA9TVsSAnZWagAAkfoP/RrGrz3RpB0VtwDsyweb\nsv9S6nw5/z0+qCbZ5ZqmIyNvH9H50AZF36CUYq46d+GLAMXNX5NFKkqaMdSc\n2wMmKwoJbxRXVUUrRg8c0od1xPj4kFSvZJR8Y3fsCJdBDYh5Awgn88D5eHNF\nLNtZHw1F6KoqpXkWdq0fOLiu0wUEgZuJEUXugtP23z6pJykrpU7X58BAoxZF\n94MyKFTpZvHMbm+57baMcYzyyukS1hrY2amIxkPv8xOKlfi80C0OxHdxjtI0\nRv0u619jqxzSmqWl9PwWOSpQ2+2EdfA0GYsBjynL0FGqbiXRIFeGpCZMWvED\nliX9FWBHnHG3tYT7rozqqonZ4p1WMgCeMV5rIlCFqHDTwOlKHWH7hFr/k5tL\nuv38Cc+Y/QOOZQIUhFsZ/XFdml9bMQx9XxzZoJ64rJS1LcsA3e/l9Tw+2OMf\nf6ayCQcW5ekOYWiJYTglSf6KbWRdMC1k0GZUW8hqikPMKyaX0rBSp5pF8Hfn\npU6bBSMSvc0Xe3GhP0JMx2pIEkgp57uQ7D1acweyF3/e0LMJ3De6SMgYJxnD\nY/D0Svi0sow7TP845fvUw46+mGhsYtKSqFtVbiNkg2GsrRypKnHlfVQ0p1uE\nU88mVVXEZCpeYhwiPBktlez8S3t4w5m9oyferyxRyuh7aAorUCi4TE+M45Zb\nw8Q5\r\n=Ccz0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.8a39352c8.0_1602524743961_0.1062150666602395","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/theme","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"076c3bce5872275cf1b884fc5681053b919edb26","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.790ca85fd.0.tgz","fileCount":39,"integrity":"sha512-wePF876Ke1BE7iVMl6BRtV4K9k/UKRA8LpnMEGA9tJpmL5dT5au+D+ts8baYIuudgg9JD8JjFUOqp1HAba8I4g==","signatures":[{"sig":"MEQCIEBFxL1+XK4b8btjfdFt55l6kD+oe9sYQA4BHBlnI468AiBWzWeOFTQqYINUU3JLpladqfVHPpX5SoL+x1Vm8CIJag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhND4CRA9TVsSAnZWagAA8jUQAJtTK9gAv76N5Zb4AT7E\nPLtp+XjzDnbW9vJwBLWgMA2asJ8OqmwNLzKfE6fmCKjaCOInv/0++MO61p5S\nGsd5okJZmVf7IAw3zv5VmyuomU5yeA6DgJQHXXC148lmr6HRzI3kgkFDlWW8\nJfeecKpn9goDtSK9yG7+VgvCOnW5CezNW+PvvytR+6xHoERbulZ47bFqW4m2\ndy147SEjcJTPk+YQN28Y9dGnrqslOzaAAa7Fe9xugmM/9lvNcnxCkLtEDfTw\nQVrg+8lZ3zi93wKNaSnHx5RFpSNnuQPuBpSNwslbFcp/oVy0o444MIbv3QMi\ne9uNu18TCnzT/dgXP0LkJa4P5klW4NCBZQ720x0+2zpbLw264V7uqLI7FUTg\nFcCesomJUZZ0xm4F0S5mopXDnT+EFj9FY4TRG11vj6yb0yJJi1sz1ubZKbm+\np93SaVHFj89Aq0+78I/7FE+Lb7mNRYQG6PPu9+OpBgtAhoLcuYaeknQDJH4J\nI3RBpYSsFAK5kAdfK59UUYKVXC/V+YjU2yxp4xgsDtfJLZ73+EZ3vQK2DpNd\nh83GUSxloow9fn/ffvB9XKpGdD3n77WRHhl20sEFTy1S8TA0ENgYPMlj6rnE\n4lY+pGIcEjgGqYEBQPsQbAnnyd3C672SBKSwQeMhYZupVo6a5MNz0TuqlHlP\nJz9/\r\n=gUkw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.790ca85fd.0_1602539768337_0.6217542231750741","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/theme","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.174c0becf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d844de472762a32dcb3b9fc39a65673fe4dc8dd7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.174c0becf.0.tgz","fileCount":39,"integrity":"sha512-Hd7TrFe8nAwJAUyQ7XKKVDJdgOvDlp7Tym9lKQgf0JVygqTf0Hoe54pfc2kaoAQVbSt83OhZPvw85cKGzIplig==","signatures":[{"sig":"MEUCIQCDmERCzXOCSa9oeMrTup8y7c7Vp/4Q22q2jDqrjUKVIAIgNlR3bmn0WSZb1Q53jhg2tJ6l5t0b68qt5S2ezUXuEcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl8rCRA9TVsSAnZWagAALCwP/02OB9ExgC2pl6+NuKtk\nHSgtuwGGZt+z4oB6jju+mV+O/AqYkC7SY8WNBk+gefjQHj6uVIH6YH3SpCus\n+qPstH4H3DL0gmP5hTB983BfdRUP6nN6ZeSl+74NGz02Iib9mAygt3tQV0W9\nlow6+BJqjk7TC396KgVXv3k0qMqOlxK0vOlwNcLE/7fAAcTzciIWarlruRyf\ngXyInEgWC+QqV60D4jnvqX8/aN4OPd+I63O7VsggZQvN9u/bkpcR4DX1MzGS\nQ2BTMZH9aYc/kDRcJgKiSwKvyJ4pYbhc6AmEO9Dwp32tEnWOmAYgsXEcuzrQ\nSuQ6A86y6rC50JAEc89it83ONUgExZfh6D8erq6O1faORmX7Zcfn1RJo6xNh\nliRb7gLcFttk2HaRPVgPxBSpiq2F/D/feAI8HwelkSYCxIFHxTAocYG5Rf3W\n4Nc4ekN5zqYYXpxj6LW63BygCfjIN/Z4igbpvv66Ktx77CNI6Zb2/mq2/FB2\n5MIz11RteN0pPhNokhm8KCr7T3iiuTXdbdFJrXw291Mcpwxxsnjdumtw5YC4\ndFTNmuLfiDbfWzc3w9G/QYy4zhzmKqMCSJOLn0Za9CvI3xApCYL+BkbrLrOI\nR/uxlTHDWn85FDV4exAWHWL7umermiHpkAS3WAgYExP3Fe5Qz5ZNcfrDk3Co\nw9/y\r\n=ncsz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.174c0becf.0_1602641706807_0.38592610428953567","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/theme","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab2779ddd479f25ae6de46f04c4efadbf724b3c8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.c71ebfa02.0.tgz","fileCount":39,"integrity":"sha512-+hQ3gpA84KP8Fprs0C77cvVaEFylvx5dCSOrSJyzS+MliKGQDEIqOyX4HkO4MOXKB4ZFv39ZHyCYjslrykngEg==","signatures":[{"sig":"MEUCIQCK9flaLvRW7WEG9DhfcLKdiRnuUeUJ4W9pB7DaKow5YgIgWMg0lnqc5K6PpY5r2NG0lhQQL4tzJai4ishdZI6E4us=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnuxCRA9TVsSAnZWagAAGZYQAILajPXY5vrAmhxI4mS6\n4DYcWiZ6pgiLBdgG+b0gbF4uibRMxdOviOBlgoYW/wFOzkOMc0Rfe8FMSHLV\nGCrgjfCbayWqdItHwVLOtTpOVQC3n9EnFSxy8V/YVP7x2p57FwLcte2StO/M\n5+Qe+0y2CRUDtyfbLnc45OiNQ7zFS8qPDuB1ZLzppC+aDsYZyRaEfazxPEM5\nD0UxGwY76FSLgXCahuNWxSwUIgX151dVkC70EEdN0YwAjsrdhf1cHlrDsZNe\nNMURu+FECJ13S5VnMfNyqgjVGFD+ccYYrGhGhBQ8c8IFSv9cd9aJmd0NQe/e\ntoPU3Qc5qiEQfSnVqRGYUm8+wK+bpKILhBHGSwQ5+ZBfOowsSclV9iTaehho\nMQMoD5xUHkhK10ZUElsXStwNbAJ0pAoc6iGfQaruwL87ItHEG90Ke+gsuXzc\nAU86Mp1tzePfv4Bcw76vwcXMezKE8rPhHCP2kxWXGEFc+KrPaMZMZJcK3P06\nlLmh5MjDWSY7tXy6UDT/JQ81e7hdvMD+l8IWN3/Nqda6pYgbOhVY+ofFz+Na\nUahA6uWDMTjIc2nXHZWz/ClTUzgNlo2uXFuYkWCibHEyoFDSgpgsYDIlEAaP\nxGj9aAQEzaKuEqjN6xHmA4yuoc8qN/Nr/9hQE/XXUiZGsFTMxb2aliLRB4fY\nFbXr\r\n=gVfD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.c71ebfa02.0_1602649009075_0.17773420556992625","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/theme","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19061e21669c72c2ce660db98af9c9af132102fe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.2ab716cbd.0.tgz","fileCount":39,"integrity":"sha512-EPHZei0dA/2HF7h45F+V7TZ0z/W5Y4w/ymIa8k8uX7DX70YxaLSqUW3J+IXTyDm90Hitlo5ZH0/40J1khB3zRA==","signatures":[{"sig":"MEQCIAhVdAyShoq5edbqgNDf73wyyQ7y87WGA8/Eg9gmOxEOAiARxdzndWbhsmak6b+xX3TckOtpZs5QgkAcyzjLjSi2tA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiONZCRA9TVsSAnZWagAAUNYP/Rrsrk91aG4k5NQLBDed\nbkfCCnncb2zdE9ES+VsySRX1Z2O8uHD5+cUzkfMqrofqtSdzFxui71rNUV1/\n46MqGJ8XDih3qRBv+PqgbfUpoubWkisltTCRnVpnx9/pQFjEcEI258MTMgO6\nPgpJOTVPnPxwTHtZsY/QMfVxhRTyz8/OnA2gGSzm3wj00HiaogsbNRftJHcS\ntic9kQ6FMGaWtXoSKussrTkKjmQmwnj+Emb5EHvyrhLMbg6ZQjIEHUPF8cXY\nhR7bJ33Kkfhm0QKAq5cYzMeoLbEafeXPW/s7oFCnd8/QxPQnC2iM41NRNnD4\nBMW/MHTVee2DfOStyxkgF3Z6OmzXWZSEvIgUVNhKJLVoD8GVqG17cXO6BjNM\n6ZHyM07eO5BH46QyZ9Wk2v0jbmLzFV4O064RtOjF+FaTHVBADWAgIH2VoIzE\n8fWOxp0I68P5wPHif3f+s5qI0YoJGdWAnOfezJzXFOo0aV8KzCXOyVyqAGhP\nv2vLGB68mLMRXTI/PRlF3XRQFE0Xb/pPaU3zAVXnNV+6rHStrhQPsWGugTD5\nfdr06WpdEYk/aY2lnbuFrt/XxiTSMPLuHhzm1Wr7GYZQmTy+Xv04x+najaX1\n4ZoSXjvXWyHkv+rKg7xdfXKtCSanmf1Ur/vAyOYjdguO8ZB4cRgtJ4jkWD0K\nynZ9\r\n=uPcX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.2ab716cbd.0_1602806616796_0.899233439049157","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/theme","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7c5d68de73adbba855ae97e7cfdc0637cb75dd9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":39,"integrity":"sha512-BZlMQiJ48We9nCcdT88GIjNe4P+q8djX08jrZtS5ptosSQdE6QlzjaR246I0aqXtoDuFBq0FU9xlvxHKrrSEcQ==","signatures":[{"sig":"MEUCIQDid/ZD6K9y7Mw/DiR8KNqp2RQVC9VxNJ80DlZ/cpoY3wIgGHznuzbjsCBAGd1rCMgItQ3aNHKXnzEjDAuOXdjxAbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ2dCRA9TVsSAnZWagAAkj0P/A+Tl6ON7KRXP/LwlKyP\nTi9MzJOzP9HIgBYFRFef7NUxA8y+BGNLW1t+XgH9matzpy9glQEbit1Gq+Uo\n7gSlMSh7lFfxegwwBcNbFCSe4jFE/DXPRsUw1UFTm1rAN8zipt3TNMqjNiOR\njUp9QwOODl6draZftUHC6VYbsPboQIZHqLraBfG5s471j//Hae0eIJswiUN7\n5G/gcY7l7ZSbIg6XcW3Q4IGZi63kTj3jbG6ZHCNOGjsPAsxMTVrq6vF3+IW7\njj0gCDvXb7v2o8eJAdmM6qMpQTbxJDJ1r4leSGx8Kp7w/ItLgMcjV0Uy9VEu\n5cTKlT0llhbkBGa09TvxVlR9Ql1GxmbWr7AgFyWXAESwumlrGJH3ZoMlZnVD\nSi2r2bpT8iCRGfADSWdhdWWXNAmy5bXxDCeaIfgz7EXZYUQcxaIfnVA/sDa2\nWozThkI/uL/s1cEJHZZhRfcKsxMAM9pM4yz5rGgFi0qwGyTwXj6h8Xua3zin\n8jT8qbzbSGzvX/xB7wiYbM3pMPebXQ4LO6+klkcm8LCxamNa6PU15SqMMpEW\nM2XibZ0KbqR6luWXFijA4vjYg9Mp2dqAablSjV/PmqSFKOCK3EnM7Qwkb54H\nsdv9EEu8VT61QWqNveYvPz/6HE+xvhVtd/wx6tXc9LKjFKCAfoHlm1Pp1sBg\nuYiv\r\n=2+bj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.43c1c5e2f.0_1603116445039_0.32557342880577167","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/theme","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54ecf9ee0a716fe6408a0922c7679dd5145c7f30","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.ccc64eea3.0.tgz","fileCount":39,"integrity":"sha512-S89RxZtQG19Vkk+FX2++HpdnNIDgE9JfR/UEBQwM69jNE5aLdJ4/LNFFsc3Usq6i35ZaNB4XgyPQs14zx8E0fA==","signatures":[{"sig":"MEQCIFyG+PdsjgiNG1qwgPO9JmDA+C/pX2nWZcgJyqNurIgHAiB7ocpUde8cjr4i9OIFwGH6pz4bRRb0OP1M37R4f1+4PQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1LOCRA9TVsSAnZWagAAZocP/2QVziXMBrjW6T1kupZo\nRrHNqoOOiOCFKscDTPc1YAeHO+lwWIyCPwmefmXRnFGtSPP93s6/N98KBXWQ\nsBy7EvpBYMNq4Hw8Tc/j141hN/asKn4kDPxaU02w+5ldPiAWhtwc5YzM86Ol\nhAGEC3gFljehe3aiNyqIdBNmiE2aqhJO7/WFVgXMQRuhPxoTspPYjrahWXfM\nr2sK421zo+AuCUmZdr6/y0l8a3utEyY8QyYWq+cUKv6mor6krRiREt3Ee8u0\nU48RK1Sgugq+HW7QifTILienwstTIZ0jkOBGuCCYZDzDiUsDL8GEdpG+Cvv9\ncTqnc7eZVKWRx4GAUlo4aGYRRfglUi0uKiRr2IV8M8ctRHypyWnZ66TAj8Cl\nKXMDcB7ghOz+Zw5OPjaaIoaHoVLvjVvZi08t4pBWro2UIAOiCRQt83l5Kdgn\nAR0C2f8/jN0Wn9BLF7p/Kjr25GTEPPqPZuWCt/kgfWPodD8Z06AH+x2TO/Dd\n9ekQ0lEpu7bB3pSKO2BkBFCE/oXWiWwbVQi7ieNP5TZxRkWjWbWOHWSKIED5\nPevmLMOUtIpyFi45Q+LuzPsZMOK1SmJ8L5sIZSbbwKB+dOdCnk41141dS20f\nV7LF+TtMdFs+TA+b0vEeTn0pb6PhIUsIk7YCMgudN/+dOeU5K8cx4v/jRfqK\npA7W\r\n=AiLu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.ccc64eea3.0_1603752654011_0.601250326408346","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/theme","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4155915685a2c5f427432b00663d227ded06ae3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.a79cdd019.0.tgz","fileCount":39,"integrity":"sha512-1kH22Vlu/vJUCXZlHPkcOl+tJu72Lkx6IZHgO0o1CZ2KoTqssaNqPfFT5OxzW36EJmkxBPP2WZG+OobkHXBbsg==","signatures":[{"sig":"MEUCIQDB57gPgPPAkogqOMbedfGvCm9m3ZMyvMZKnZPRdy13VwIgOTo8IZIT/CIkOP2aWiP6p7XKKhVu85UUMUw3UHBwaq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEspCRA9TVsSAnZWagAAtscP+wRkqvov7QJzvXQR0fJU\nIBxLgm3U1gfp2uh2Ns2b6FJOJizN5Ah+WAO4wnA6MIzM6StQYpCk9N/0H6PG\n5z2oOHWofliwj3S/oa0U1QZs0Ov9vz17C5dPxt6XhJYoUJ3mSsMcrpBzd43J\nDkqnLoEVDXgenqn1amuPwHyMbnbI3xuiuADHDDxmyNnn13GS/XeL3m9l/joK\nEEBgCnmbJxieBrTgnj6mLTddamlLuFahFwDg6Y5LlqGXQnpDtiYCk6H4qUTw\n3VOnrss3tmrMYvL50GZ9X1DvbmutPy43io/qt8BgHeCVkvisXsDLnXBvNCJ4\n7uPA1IQ5b8Kj200+UaUQHY3EesfRIm1ygwurl4v6wk3J7fW6XFLDZbEyramj\nS7XX3nm7YL0BOta0uVDl6vxrb0ymA6KSIc+AtriIfE8mfnDrU6I1yu3uMC9t\nhi11uqiybcjCqUIFApHZypk27kOunhgWKdoI1VKgaVi6yDnDlheZCcCl7y4W\nzu2GLyVcG+uYgze3hQU3d13nwfSrvYE8wmPhAGeG17b+FnH9BxDPlrFjdeTP\nXpLkpcOrLnBXeI2uid68qMihUaqGFEChu56LMVxdwed2wMnRAlG7zsPvkQ2n\nc0UAptn5inrA2j5WrUTYBiYLfMdOFQ7vp+cPamkG3HtG7pxjSeCDLdvfjJPC\nSvf7\r\n=mvo3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.a79cdd019.0_1603816233187_0.6258553183879343","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/theme","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.596e98424.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5afd3de2e798b654600c84b93fc1287e42e44b59","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.596e98424.0.tgz","fileCount":39,"integrity":"sha512-vdq1DTpz6FLQ4+603jBT26TWxhOReEOJyUjvSFDiqdVWG1Lwl4STcw79WRbTcyJmXrJwC39noLzBT2NZpO+AlQ==","signatures":[{"sig":"MEUCIQCfIC7CbQUZRPZUl8LYE1fI8kanGejXr8Hk0xBZAMnAPwIgbgkjR5h8HuDr/Gcdzp6SvtqLhKop9PJMyWiObT5CqIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZYsCRA9TVsSAnZWagAA9/QP/AxF/vezW7nyUhLlzExt\n6z25mDFinML1H5DAsAas71HF4H9nRFV+JwXmsdiZ9jvo2gtjNPwpgwPWedED\nLwDhvSOvZ698zeG+8wYWJAFGkpRDeVNUGFaOwaO8gOBzWXm3vMYCieecAwmc\nG2QYN+xw5/tUkkDyQ40bUl7CVWM3hXmWdc99mH9HJEE+AlQW63c5F2APMYjn\nhv3eWtqPDKsSP4qetb9QJdvuDWc7jPX47WGWd8cgn2T9ItC5xZmuGd1HZ40q\nzEEL8nFO1ZXbyfslXk579JySf0AV6WXCmhBHpQtIwHsRRlSCfqgRzVr8Ugws\nJ/MDDNGJMtcq2R9WkyuLjhE9wHpiIF/yYOSylTmXtaV0RGrkRVwc1SfBgAEQ\nEBHFvYHSZFoCeZqmf8dSW7Ymn/5v/FrmYblnof3jICKwulO7xHNQFNlMulQG\nti4/625ask5CUDoLKzX3ptI+g1Dzw21nftOw2VNkX8bZWXrmDwnfLU9KZnLx\npYQ0JptWLERpFS6JGAbhwhJdMaZ6ps6qBM3I+QaM72GSIEhIG0yMoiuTSAeE\nnzueheLTJy/exnGpegZwnvuuP+aiBhdxZ2SU44iPi1q8M0mIouM3HAWFfSqD\niPyaTyKJDIyAy5bzJCuP61iUfrXqAhC0SwetmDvqFZaOEWrwWHozoQCR8zWx\nCRsd\r\n=d5yy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.596e98424.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.596e98424.0_1603900971695_0.8030601460329567","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/theme","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"746f096696214435d9a7c36986ed9fe01632ec6c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.05d5facc2.0.tgz","fileCount":39,"integrity":"sha512-GM5gdmT6crDfahSM43Enz8br34QgVegzGoBeGI8tnlirklftTCyV05oViINkUPGuBejeZdqkSF3ri0HuRwTOuA==","signatures":[{"sig":"MEUCIExS61+yc3uKWSFx+KCReqchAwigazGBNI/+p1OcPJBOAiEA1/c00i2TmRiM63pzXpCWk/651IrpOYvryYpil4YZKTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZgpCRA9TVsSAnZWagAAhbwP/1yLSsKFZodrdMwgK9OK\n7XdmOSUvpg/fKWclCAbKQBB1Iy7PyVOYfO0I83xq7i0qEOH4Sgbbyixc9S2s\nCC0LNrKU/aYvTzka7lqn9jEgDgJlXf22VuORzcc1PVgDMblarGK6r9wvN5H1\n/FDvNYMdYEshBvlIzXJpooJy/aajwOevYI8h6BDboPWMwc7AXPE7fMvJz54U\n/s+TlWgcsePoTEhZ+fBi4VoHGTbeKXn2f06Jm5jMz3QlnuvrnCUnF9S4SQrv\nX1y/NvuQQXMwtJ9Wdkr0gc5MlZouKWdLNIlhy4twcfOQ9KUoMfAb4nuGNbap\nTJzcVdjYFLkLjGz3A/S84uFjVwCDRJmssqO6CV7t6hdYBnyLcuhq6Q2O/AxY\nn1MaYigZVZGuRSa577uBQ0hRSnnYi72Amo5EZ5Y/97r/NBqpgER/fBhGY4c9\nPuzaLlztO2HaAMaLcrdIlu22BOdgRZqjJuBk0O6oKbek6Z+iz9KRSO9JRVvS\nfCTccCmlMShEiRODlxA6musI9C705gdK2/UBzvBsO8cytOtIU+xHbZ81UTLU\nFg1MQnFF7iDsgNFuwlHKBjJ5ZHLQsKZ9H1Mez1kTsPp3hrRMeTJBYxxYTU5D\nog8nyKZJVS9JpEThX09k6b1oQdyTf/Jj9ux1/BzStj2W+IQSdWhX5j0VLODO\nTNiW\r\n=oPE3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.05d5facc2.0_1603901481121_0.24310621008394384","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/theme","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.291b3553d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7992d38066b1e85a4a0c08d3de754bed25155db8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.291b3553d.0.tgz","fileCount":39,"integrity":"sha512-ag4sguxn7u/fUpVveomb34n9omundi+tNUtsRo1Vk8QAa3eUVlqyqC6G1MXt/idZxrAXhRstgow826UFaNus3A==","signatures":[{"sig":"MEQCIEkO+B72SjhbkuLoYVasoXHhDGq4Jb2pZStHnz5lA82eAiABTKXWt9IeJmng4wXwWNV+0Pb8sj7Jatj5f2yemzk39w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma3xCRA9TVsSAnZWagAAM0QP/1Ozyo3bCe52iPstIkHF\nmC4uK621KrxBh+7HQDBaAf6SyEZmw8R/lBlPmm2fPDbaw3rLue5D/Sv+bbOK\nUYmgZ1Zwzf3s3wmGWkg5iRhWKvXEqCrmvaGWXZB7fA5DIxydIhiTPWyn01yY\nkMaSgMZPI1hmeOT4MitHjY/arPuyUYkxYE/YOEMR5JEK/E1yVzHKNGlc7V8i\n4fAt1ymNOlRMgaDSkQ5zCvDArUI7n/YnVrTBO84bfjzNJIO6IcYF2V8j9puE\niwsSqLBw3nbVh5bUcavwE3bn1ULjp2junnLYZChnWsEO8bn435rwZsSNGBSx\nUbyTzgSPKcDJ7lqavgadXnOfv8H55S3jVxGRj04P3bOcye9lLIlGMrC+s3v4\niRpihd9hvn3S6882v4r9GayXooF8kADK6SP/Atjm8+JKGapPUiW07V7vhE3d\nKOl548zIaGgSZwdMhk6z4ls0ZP2FJj/rKBfJNHXXZlFZL5oHFT9GupHsMqF1\nmuqDeM9zdvohxkgSr58RioqtSUYVrnatDm2i6wN6GUAoggW9a0zXlMEMo4u+\nZaRyawc0ELm7+XHikoU43pMRZEBI5c7agnYxmh2mfjBdwaP/rmdciUX17zd8\nz8bwofj00/eGAWTnyOskR3z5hpd6aYYEnEyuQi0vtw9HW9+BR4xmEP0XkKis\ncyes\r\n=aFkd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.291b3553d.0_1603907056724_0.9275834212242158","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/theme","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f96e3de3eddc4f556242a59f384874d68df50a9d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.dbc449b09.0.tgz","fileCount":39,"integrity":"sha512-CoDw+0nRvU3hn2dsRI4vEAW3IauyLHwUtuVRFaZAH/a0D4ew57VWxiiJuAcXV1JtBYwmJumKE0i4W6HeaXt/zA==","signatures":[{"sig":"MEUCIGh4Eqx3G/AIAQjo8Eaf90pUdfguqmq10DxvqrfWUCjNAiEA86wsPHt3fb0jQvm0I4Xoc3iZiCgFHSq73cKSxjnjTsU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbRxCRA9TVsSAnZWagAAEXYP/3B62psNi2EXtlIlrcVW\njyLxPu5NcpBbC0pIVrjdw7EtU8Y9tEWNlEqFkk9G1Llpleb/vEY9j1z1yoNI\nPPhEDK+maTPZ3cuU9Ds6Loi8uGO5FbEg4a8I1d5ITStwR/HJx6NvPin/ARN6\nArnnR/ZyQsinlrqCkCQifHzJzHkDxvJ1e21jL3BGh2QuBk+888Oc5MwSe938\nUcwDuPZz+RIvqW7/cj6EtTBPSptmtdaF9XtUVxpolIEnk9/nSq0PR6beq62f\nkU5Mj0U1s0FYMAr4a037wxw6X07+3n/GDlfOZg4oPeuEkNpwUjxbDqtSWQgR\n0KurGm51HGkhIrXHUtCBfz77FlHbdJfkmMP4huehdlkL49kVhGIpoLyuVJs4\nbu7Z28dRHCWpboEYpgCEhytz44E0FfFrfLj7pkwKkAIWbD5urwidLzhNSjag\nF71Moyk1geBZAoX3q+k3tDGHjWbNDyMxXcjs3EAa8iNIBqUmiriXFGsXmi4o\n7y7SN0ILQGDSy98S/SvvhX87VwE9050e6GhgI83K9SHJAfwH/oO6dqoNglPX\nI0zlCzt8FMu1wHMrrDRA55UDcwxG2lsOW/vZP+kbUrI5J7Ok9Qr7OczeXhXB\nUGcTuEpfPTWOR56Kd7lcctcQTFKSv80uFHMdzF0lnB+MxIH/eObNsieDijHx\ncZ+8\r\n=C+IJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.dbc449b09.0_1603908720853_0.1527090207310231","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/theme","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.4794b25da.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2e88184f9ea8f693b691e6a3179ef92288bf67c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.4794b25da.0.tgz","fileCount":39,"integrity":"sha512-225ZtmQuNM/HPFxYNTXReGZvfrOoNiikQQ6q9q4Br22zrr0Ifmf7cH04rugMEA8S5QpK4SwDiiCrmRWR5Ds4EA==","signatures":[{"sig":"MEUCIExg3azG62p4t9oEMVnHYsajZlV3nzTEFoxu+7MslFtaAiEAjNoPQM3nmtDlZn5YyZz/EbTK9VCW/hx6fIdKr/+I3iw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbsiCRA9TVsSAnZWagAADoYP/jy/nUA1NYmWldbsoPvT\nVjmSvY7IfJ9fUUeU2wYM7aHaaKxqayH3XlpmyfEMcNrbOxvacjCtBQruLoyJ\nlRR1Sb3ex+zK0vQ4qbOvFbzTzUkj+2Y63pUrhnYYwneG7vbysUD6cisrhFEj\no7zx260/1Uznx+aQypFPh/WH2EaMBA5V7nBWYhCOhBLA9RB7OfzgYy6PFSGH\nXr49TWFFJ6oLGINap2/5joNBAGne8lk8gunX46rNLR/43x+zTePQdlOdoijf\nWBb8ID8KjIPrFWFlUhHX0EeZajOgQ9jKihfAGorFYnWi438fMvh8OdPH9U/8\nOQwfz+QInXsSkglHOP/oOPaGksoAE7s2UH5o9gBp1ZMh4sq8BWpROk77dHr6\nuZ4C/tVKRrQgPqOstH16HIFZHqBfDevQRNBmbgXstq3GQaTi032gGLvT+HNG\ndixkSU/oelqD+7Jz9V/9+0z4ivHrjZ5owNl6ZwKDgmZow7Zt6qCrC7+11mVk\nuT6Niu2Momy6fXsKsxgHdaw7NfKr37dQJVfyCUBqWnZwAxJbXZdCyZ1ItDWH\nIBb03zKDgkSgLDlZ7Yog81JU7mUeLBK7m8g+ZdTIpjS0pZDr+4avMxknh0nT\n6mXJptK1JKuScLzMqNeoW519pBKaRyBHEckyJs22PK7/JBsP7XZDvNGp7F2B\nS1iw\r\n=alIu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.4794b25da.0_1603910434375_0.62936957247218","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/theme","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da62c98134e2180f2bb5ee173948212485e0aec6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.c61db90a5.0.tgz","fileCount":39,"integrity":"sha512-jIiPPG/K0APKaizkzBpoxDT2bpJAv6v78Z+dQpxD8s714fu7bh4WaiLe1/Nyq3wh2WpyQvJf2Grh0pfJi0qSgg==","signatures":[{"sig":"MEQCIF341/ej2E6UvKRFRsbSNKq/xr5XheoPt5E6VfjVRdSIAiALLOJWyFKPZak+gSYRDH3IpPP3fw+qOekf6SFjYcEE5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb9xCRA9TVsSAnZWagAAPewP/27JKfuj5+dtlReymsHJ\ndHiXc7XD3vkuxolrCLv0ztqNkudSiM45/8DzTQuc0+V1xjtcFlIJoXXKvwEG\nkdJqpOtz2hd8ZcDnW4B5O11850h9bmcJPtLsNbQyjsu+Ysbo4xCSUEUpdIdI\ng3dtTcZP0eh6M8dtDX8s74wsQfdC6+Kl7qqGBR74v1D6jfADxWDWOWvOjl6T\nGIrS+3nFt96fdXQsS0jDPPiKCLFLmtWnpjmqQCVd5rgcXPCsB7OdGW74M5s/\nMr5pj5lDiwYxOGuxWNvoQc/lRx1tsoc1S8yeD6ojxSIJ+QqBPItzjxch9478\nbKb/flI0DdIA4ZFkvVy9UkbSQ92qF2RjILyG58/ZCAonyGvpbvo5fdOP+Se5\nK24REw97gzLeiDnoqSIZLzhH/OZNxrs8fQTvfUNjS1zf70C6MNKtvFLsTZT2\nk+IQKft5ixRK3BtYUpdHRvSksbSFqk6bEFI9cPqGk6q5+s4wIAwNNJq0OSrB\njGL6yR0H07psvHAPyfZCnYVleHO6OtTx+ZLoE1xlo4kWKWp5vGukA0j5D+DT\nojkeVXJ+z/0lWOJXuXE6NQ2PtBcmelisiz+sQT/N9W0dEGS8i3lG5BxHsDe+\nsbdYJXljHPq1TZ28LllpwKasrct52+D+SSu95eqHf0cNkwgbi/m0d8Tna20o\niBz4\r\n=gJxH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.c61db90a5.0_1603911537012_0.6610307382031888","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/theme","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a8346e226500213358249135a8808e69ef55062","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.6d9648ab2.0.tgz","fileCount":39,"integrity":"sha512-4k86VcBXE/7z4leDq1UCo17mKwo2mu+JO01SZPS4k4sy5BKpgAXAcXiKoeUXb1/9H4nDq7RiUzQ2dx5SlXoF5w==","signatures":[{"sig":"MEQCIFpgIB5Wo97D0c+3UOuxOtOhIzjjMgTYhvLY2Kpm76SUAiAnNAzWTrIo5A7qIj6rZzVo+cgohMA+JDc5SklIcfCeJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmyazCRA9TVsSAnZWagAA1d8P/iNeRo80kf8ujSVi+3Bg\n0uAI1RCcUXl/ho5WjyW3wiX470IT6d7Fcn3WyEgMwI1zVMlnStdgQH3w2pcT\nfCwrZE63HeKF5yCfRlQrOS0obMoN2VsRPr8Pg68DNFU9v4Sp3gRN3WCjjPsc\neC7/sQVzYdx+dfI6etizI6v3LQcGDw6Lybf+nJJEQNmrQtwOvEUKATuKK21M\nSgItjEUjjDww8wrDmHto49Gt1JLwWxd2VgqHZ0EcYl+VOhuUHTptkuwAHs5W\nknqLYLmJYF/Po/3SyW1i2seYpQVqo9frsKG53Z7ozCJo7Go3L8Lb3nMkmQUQ\nbWz7XJVXofFeDdeUytAP5OtISdC6o5h3b94iXmc+KqLPjZtsalvt218GVrC5\n+uKPabkG5ANM+h9t2HB18/XGrW4QW5+HE6RxGjYKp16MMuQpA5XlLmgf6X42\nT2MJSuf+fhxTVp0Dg0joUxX/QsRJ+F+kCirC/w6yxPZv5GX3RvYPmgd99ZBk\n83jM+eXlOfb7hdNt2VjQVmvfYQJjZeM6g5VxnhltajN/vIleqRcXvvselep3\nonTPgQwcH47V+97xiezWfe+2g5aWmmpP6qZFQydjvkDMSppN8d8ADnj7lP9a\nIehxLCvx7qY9CW54n15Laa8MsqbdYzarhtAQIwrME7xOtQaYDlRRxdzDFKFy\nlxZv\r\n=A0DP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.6d9648ab2.0_1604003506963_0.12975026378280163","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/theme","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.5511c5254.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09aca1aad36cc73e9322d7a5ccaff01dd9fe0cc4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.5511c5254.0.tgz","fileCount":39,"integrity":"sha512-0UG7jS2Rdi1HrtMhzu/rk9rORq9pxs1I8CDDHZWhAdk59ZlOquGPhOGOmXWsLOod3c2oBMX/w6vm51FZDrc2zw==","signatures":[{"sig":"MEQCIBixQ5OAYNrSL1ljfAPOdzu3fbHVx5FsX6XYeHY9w+beAiBdPm2SthgW4kjeKFy9thrIPEImi+E0txpwhA1nGwCr9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFSFCRA9TVsSAnZWagAAeIkP+QGU66+R8jvNaNyaPRZa\n9YfDU7p48Nq3brvh+fh1XtIzDX39G4HuR1gKn+5xZqmwPbQegDxuETAO/AQA\n6kYs2tKroTKZzUHLzQI/h2kkWI0bKFH9OCkJEpBemNbjVoETCdl+iKtS01ve\nr2Y6/aEaS7zv1B/GkL8JpVxTQPw/kYKgYcFE4kPrOf+wcRzm3rjVvS6PLvB4\nkxfqFckh3WtuILbTj+SPa+W/vDDfky1hvKvFwmUMAS4agOZkRXXU9TVnOMNe\nhzba6DVFRhEbamb9FSBx3kJUMOPm001mI5mf3f+P8rbns9TyDIzuZavuC+JK\nlhj2O7TL94LqBx+e4QiAnd6DEw3KRRmdE1gMbc/gloAcdNTq3jxS8IOVCabM\nNA6FgNwsumdBNj6srmvjpzNLcJu0xQtALE6u54QQP7R3I8EG3+vcA6/FAW+X\n4yZ5zieTTgwmjvRnrfUF6z2mE4bzL7SRqvcpllCd7RJwV5uFLS+a6rNCebzr\neuBUlGCD32ZpzLsA3LwOgBFbZ2oGJALET31tmFtNatBNfwmbwNsAkLmEkXKI\nfntuF+JjrbzLxOn0O0KAQDQlv1ctjMZNBEI0VU2UOQQKJLkjBICNj+pgppVQ\nnPg82KjNOcJlcmdvNkvWzuvdL9/NHk9SSIxKBXlVxSW8VJCJXdO7tXSc9SF4\n7Xi7\r\n=drQ7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.5511c5254.0_1604080772970_0.8227690841720716","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/theme","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7a5b1e7d479bd479be57abee809cc308976e874","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0-canary.bd6e302a4.0.tgz","fileCount":39,"integrity":"sha512-DTF+oXYTQ/pa8tnanpyCG2BDxU6HffLpynoBBj+jnawBqOouy9V2YNnnRMOJQ3Ffvodx6kzwOkbED1NNac+KJw==","signatures":[{"sig":"MEUCIH9YlF0XRSuiVslMkb0l4GGJBhB61rOyxlx0ntuT5ibIAiEAgblJOSdRphC9q7FjAW6MKZqyXZgwRIX72vfLNZH3VXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDwICRA9TVsSAnZWagAAL/0P/3/khaBAWPIN7fEUf7AX\noGj62hPDKGJb0quB5X1D7cmboiFgIx00gjVYYF9tJCy4tlTUe2zGt+At197z\nYAzMxksE7qscALsG0DOkErwAh5rBSPiaKFQDu3pVEseNLSgOWmjDsuS8SG+v\nOT1PLmOUoySMI+P/DElyeWBDwNltPlVzIyMfa3FV4TdkLD4RVz6ao7YfI4Wl\n15LOaPQNuAyu418YnTBW8it6DCeeUU7HKo8mPEfiAa38OIZISvkoN6GrKezc\neR/TgJNxWF9CHFNvHgjtOHK9oi6ZhEWDONwD7gWDcQRiGFecU05Q4x7Nl+S9\nim0YlSwpRGNpkAiKAsAnlBGIhiVDHtl6qYnQHREXCyMPJcRPfPlbmlb49E5g\nQhPxKwx1Uf2OSfhEZcQ8QqceObFosNaaIfUvKJF+ulP7c95DaoM0toNhZmoW\nkdnAexn5wZiRxYqwHvPYuC0+LWpqNmdO0N0RL9Eajru1fnGDeX+ZkX/G8LAs\nk0ud1sO2iYH+EhMv+10Y7HHq1kV0QAAkNM0Lp4+uAQCEtrQJkdCoTwX3+nbU\nT52NgLSHPiKX1cESzzlRlkVclrAdCroHG5sTPO5oHVfoKEoIh/9C5WW29ire\nDA/bqoieb7Ul9DHgH/vYXJzLt4XeE6mcc4tfGb+Qxo+0MF1AQkUM5y5rWTs7\nNA8I\r\n=jHal\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0-canary.bd6e302a4.0_1604336648270_0.9609464260394178","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/theme","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13efb3a889eb170462c3d9b270fb88af2efac356","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.d6b5cd418.0.tgz","fileCount":39,"integrity":"sha512-jXxg+16rK5kvq3UTuZ4NtisiFokMJ1qNeYX8saN95alTh3bMGXNAN/X0O41R3s0+DsaiqNaDSvNkrAQhOBg8HA==","signatures":[{"sig":"MEYCIQCZ8M6BUcpP9qHocwGhHdHzFNCFwO1UnVGrcWU0KpER4QIhAMJCDlFeRI39SnDbSIpB+LLGczrvFb8deJn70t8a02mv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":157330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI8NCRA9TVsSAnZWagAAjDoP/1tUKcYcIN5UR9e9DCa8\n/eACRP9Q7G97txDJNkhPYJmNhrQkLvqnQl2R5g0yGilx0dlytm+oxjDzGCCt\nJz0ev55FCtngcBYzuHW3EJS5bnRcgGf90/LCwdsC/UnjtvD/3jSreY71yy28\naxjw+XJQR5vlnPwJ+kyvhe8bTDsn9tu0eXjD4kZ68BXxM1fRA3SxMhlyWAJm\ngq2XxyHJX8igpVd/sVJOdekr0jvDzafVJwnoGZ0QgSP0zNEyz8ZzcG8K9f/s\nnRDTHpk4/fIu+A08C7xlXaitbEnwWMu12IzbkNxBH8PWFrUb7wMjl2AAgoou\nxaQdmH0uXqmUFlzPqXuwfgxC8s9txnzEYyu/2lf+deluPrSy+42x4cSELFVx\n5KNx1prPuORkxNZ88VvRwn9xzTdrWCVBihAn0paEGop4T+sefjnTNiZ6raSf\nuzQpLSYL5pSPVQByjOCA1QKWdipKkAMtHdAE9ytX1DJmOPH9zBWcfGpecnQ2\n0QhSLTHJwFhsDnTTTkQY1FmFvMr4UnfnnTWjIz7jfB0AUWfgRiLw2tDizJSL\nnmkk5I8KxWeQOlFhontvDmtd7oNCTyAbRQO/GptYwUXqA8RXqGq9bZ7a7zuY\nEw5nhATXcM9zT/KGf0qd1szvq9Tp2PnhrylcN2+rROVFiDJPlmWiLh7jsxYM\nwI0Y\r\n=g016\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.d6b5cd418.0_1604357900703_0.2900050566250625","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/theme","version":"8.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@8.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b51ef4bd0ede5f3b0aaf4e1c2c9c051c08a69418","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-8.0.0.tgz","fileCount":38,"integrity":"sha512-YcU4oi1pd9K8KfPfhZHD7GGnn034SoaVld5534eEnTMgpUn2y7KHZJlPCjrdh1tIy+PBvnYAkxBtx+mKWRCKFQ==","signatures":[{"sig":"MEUCICgLzurjQBDbKhgbyAEsGlr0t3YjOK7Hc99Z2fF3jg1WAiEA9v+MUjdVHopjqaD7nSWJEjX60383ULhprTuwdsVoGT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI8iCRA9TVsSAnZWagAA7JoP/A0F1EtgoK296FxZ2O+K\nwC5pP9SfIFoAr0YxLuT+boL75SR3DRPKgefTG3swLvvmaR3v/OtzSrypi52C\npiQFaP/OxqkgQWOBPuOVxn44fU6QAt8w3wdipS4Z1NK9d79/59tWw/K8uVVY\nGcmqJ5pEt/ziL3OY7KJMt/JosLjvoGc+dzcSM/rAjcoYNlNNa/4ZWbLPwB2O\nJdhfsuXy7vDNtC/LMJJClKDQPUewU6Et9PseyEce9Zuue7HzoN3rs3j/t3ys\nF2lqO0UyEd0LVrVVycr7wdVJnG0aJtxQP+m436prlKj6yy85oIUJfHgp6sr4\nGeOwV9CJPyg3kaz2Stlbiwc3e+piuyQ8Yyh5olCR6T/h7r2XQ+kwQGzyZ6Af\nC0pTJhY0owWI7Jh1yfziW9Q3OENQ9/AjjyVFup1qNVpIk4sjZheesZPaoRC1\nHqnRE0vuknRx5Vy3QA06aUK4KZ7Eevf2zricCMmiJrl+3lc3TLQZUKE8AJut\nTe7T4gIlPMvYirT3OdyRfmTnr4xb3J4PIykinGpOG4feeHN9fJJM8gNiBBcL\nXuXYV+pJ1Uk6ScIabU8i8WgesiJ3MdOgj+7RW1XCMOqEpY0TWjd5xoYfRQoc\nJLBP8kCFHMLqBkAr55DnUZzmdx2lWukZwgWpsjZJquEh/c98KIjo81hMqvW+\nbK3/\r\n=yQ9E\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"^8.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_8.0.0_1604357921882_0.9981069736399628","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/theme","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8cf79615b05adec1ecb44b22d4ff52e40054e8d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.fdf9a2634.0.tgz","fileCount":39,"integrity":"sha512-E5tTTfqTwdm8MEHZId9uJRYsaco9JKSQj3Ock6QeneNddYLdPow9M55n4TLRCbhlCL0IYK6Bd9hKEBRG1W4oIA==","signatures":[{"sig":"MEYCIQCW4FaVV/432mVdoO8dt5AxSGE5V/APJ2rjgcHjQlLXQQIhANIRn5hVTs8qgAZBMOYAXn5eKqwNKx3fyVBJ5GkY8oT7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeXGCRA9TVsSAnZWagAAwK8P/3SSik6AMgLaRje0bCCF\nWIa9f5AXxXHKTQ+nlacq67xVBU9lT38ZhZUug1djXqLONYfa5eyWYWDZpDtC\n3/DcoGS3pc9viK72KkXVBJNZzg8JNBrXzVFVR4oAsQPkQvazWHZ86QbxETdw\nDejsTaBHUjZvJQGn99ZUtB7sffeo2bLktFVERXzkQ+0RNgDsSIF0LxaXdJ1E\nvY+ta9nKS+l7Ve98hfm1tM1/mfR0sVtjYb3zJoQLJiC0JYb8ZkgXk9efKYI2\nSw+A+qiDIaqdOCwIaYa22fijZjJc96OrE3gdvJh4W2JiMe4WYIPxvMX1kv4n\n2pqOpBflqHBz3BOwCupbUJUffGlRafVLHTBG5tDlzHtMETm16d8KnCjGpltP\ni3E7T70wskdy15yhoFAftf/NonRrgb7SXSlfEXdj1CWAV20gcIq7xEXuPtPP\nQjRjoX7vsm8ldlQxd94Z66VtQVEyekjHMfgbweO7LVe7pjG5Qwz08B1wSx5Q\nafDsFx0fw1+NVYY+EREq1zaV7JnFuWrBchbjSDMGmYA1oEGa9tAb0cIOhwT8\nOdaGMHoS0sJhn8VClgvZKYOltjI2Mdboq0vbnmlbvLUnPrqQQvxnO/OsBoBb\nbcFmdPHgIfZm5Uew8bbeOQ1i13z4j0Q9gQWygkhqk8nBlQqWr9L2RK4TIyn0\nH+Np\r\n=y6/w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.fdf9a2634.0_1604445638147_0.3167925111441754","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/theme","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92fce4b9e0d10808fed70ff3eea49122152149c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.4a86f30a0.0.tgz","fileCount":39,"integrity":"sha512-j8Khz4ZKxZPc8YrtUZYZk408ydv+HKVI80ACu361ll+TDqVRG1t+PicDDCl593u+geBVzmSCYP9XiJOFPtdfYQ==","signatures":[{"sig":"MEUCIDSpuLAi0JINWXeuVrSv9tai22D6Wa29amZ2gWaSgrPmAiEAv91M44gOkk98fvPGR+29VnyxX/flkphvgQiJS8lKPwQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoedMCRA9TVsSAnZWagAA2c4P/235WCvTh8DWO3MtkYkl\n/WF0IxSBrskS6C9kWDP1KEVXRLSoXOMcJrGjspcNFrorlBxXoMe7Iw2Kz459\n+yDLee4H44yus6eCYmWTR1ducJdk43D+WzQ97igNiZzweAbi4nR7Pe6Mb8qN\nCjjuyDCtrcJckLpnJXsCq9fQhZhV664FHQk6m1T+0m5BALOndbMgmUng4CuM\n5sHUzfSTaWIlB/v5cQUCmkY5V5mR02bngDkcg5WgJx0c9yJJrmLYC8Jl7mkl\nCiFl8NtYijwpXOxDCtW+Fju5S8q/XYV27V87M9QEIIvmHCUpHBklPP1tbORh\ntAHNsNBFV0wOlXPVAK3vbxaBrbXRq/nr2iym324P7Dbg7YkNjbQxnOnhRLrK\nTY36xyO1v8mB06OgxfCW+l3+ofYeZFQORhYvPcsi4ZLPtTA0ti8aPD3sjOXD\nGhZ+do5LrHRpPHpT6/ld7BCFIPFbvZj5ku/f2OAi6lD81wB9V7et7jOy3zh+\n5hbNEx/+jo4AwnGVedRC9s/o8xp5d6esHtEsYuKDZHZswmbqRBZ6HJ1hjO2P\npizTTU8IeAUy6FYU8xGxQVdf2pwzCex+upYOBP9tL5GjGMMCpdwcjP0mx0UX\nyyH+9qwFCHirC5OeOxj8Kfv3+dUi8gzf4BZJg5RTUb0wyXBFhk37TMn3shQY\nr3q7\r\n=ROzj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.4a86f30a0.0_1604446028212_0.8112336731415768","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/theme","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28cd8921b15a583b4e6e35490a21abd6a4dbb862","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.fc8b045f1.0.tgz","fileCount":39,"integrity":"sha512-RmCpBZgRq0ly63F3JVlZdhLgbFDDf2OJes6a4rSlqevkPNeFS8kMssF+PW8l+La6OVTVpBWSFiX2i+QrtBwDjQ==","signatures":[{"sig":"MEYCIQDsZ3Wx4tYgsFm46voYTv1uDLOJFK138TmiN/9JjoCLwQIhAPO7cfjTf8Hxc2Vq0t8yuwvBY8/QYmY1CHq6oxKogAa8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoel/CRA9TVsSAnZWagAAv6oQAJZ4gnouRKaT+eUdRUIW\nPRzqd+K6A1S5cm4ZoR/vaCtUEHCaCGdzePc5FBy/F72DnTPLVx26lhk07KFN\na3d7hFWUF6bS2TioqFHAkw1MZcd2MtezxdqUSufyNZttek2SXXI+acmD0p8+\n7798pxu8jcBs/RVwYaESIzgjhLpCp4EQoVwu8SuSWMr4Pxdxo4lOiGxf7Y61\nnSczuchrH9hWz7OS71EjwRzey1MKbb2pClehEOrekHrRTYEpLLOzHLLm0Cvk\nEWos8QlfBAIsoQGs/h7Ro4FP6py7X6wakcaOXQHCs11yHAQUpEzUwOY89mES\nKbkVRVYtF5+7n3L5ybW3s0RVlJEmxespkpuASsJIJIbStSXbinrILZdiprdL\ndVkZLeZGOiaV2t4DMZ7r9I4Dh1cZBK9x3TKawz7ag6mXzuLmhkqr+0TeyejB\nMpWJvllWVzdnRohe4s+7IqHS6NY2Ee9yAxcvg/zmn+vekN+I9G6ELjIprcx/\n03ALLzSPeYQD/1bv0HFKLyMtVkb1LJWEiYew/0nZygA01VTDoppXpVGyxeue\nex5+06NlceJdB31gMFpFj0u9sUf3L9VhUWpAzPXlE2AWg+oZZVCFN5yF1EVL\nj6fsXadKaf7vy260/mTWqpY7HwIs2U1AOltynslbS1KJNq6hJMBHjXcJ2MU/\nSUp7\r\n=33bi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.fc8b045f1.0_1604446590692_0.41504847352972307","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/theme","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa2ea15d9d4eb051802d884d4c2f1fd77ca5093b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.a0b2db26b.0.tgz","fileCount":39,"integrity":"sha512-3737eBR2tA6uL6JSqJ6E8Ho6Ft81fJe3+Njhvh2T4GdfXpdga+GpUkuTTwGBQQEVppvxJ8qjVqsSKKNHNtFMrA==","signatures":[{"sig":"MEUCIC2IVjneIlpAB1iMP1riAYCIe8KGKhpjUBisuw3ILJjLAiEAwMJnNoiaUgBVeLoHC2RxRgBwZeKWTjeg+1QJ6+WY1dc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofDmCRA9TVsSAnZWagAALWkP/jkEUSKsgC47yPl1fQUN\nuHakP7yrrngYQU/hctH7TSICOlSp8IBviJmwBn3kTzEvQ3LHyUekeiqj759r\n3SRDZe//LI6wDBWdN+t4SK+9LvB8nHADEFL2jeAoD8DcHOsnhPFGBg+Hd4EG\nZycjWPoTdC3fJnIpYqkDo4gUd7S7zXl5tZLjzejUY4n3wh4fpNYkE7gogO4+\nxb/PwbJvuJ2jZl4OfVrXJVPiyRQBN1CO2Bco7Hxg8SiWQOGFcTBDCVzdMOBq\n3iyZZwS7IYUYl7WRYjpOaMXCgYrpwLcmOphzSZ4+OJNGeuCtj375HjAw6tDk\nEIF85zEUclAi4p2P9nycFiuTaBcCwn5vPWRpEN1qRQI58rNLHlnrKR3sBuDn\nAGp3+l1dkkUBPg6kqS8oQhbk9RKO0bzG569RgMsi9/Hqzy1jUWhgu1Jz+GaK\nz+i+Sa62aOvdn8v5fRHqIBt39Zrr47u6FkInJVT+pbnZHZhIJrrCzdPpvqzF\ngY29xPEer4i9cGGkognwqy3rtXE3uZJwyKj/QD7+mI8h45Y0BZiDIdX9m0NK\ntgwrCYSE1swu/9jTVTF8TjMrOto3ue48mQ6L0cwZ8vcqHOgpA50MxlYGe7N0\n9/gA4bx5CsPw8q1KsSM80FJW6i0+aO7v5I2AIIEOXrVrmSx2rHjeyQE3gTlA\nJIGG\r\n=zhlX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.a0b2db26b.0_1604448485772_0.7591618631372323","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/theme","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.419e03572.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dce3da3a910c3eff2c3531437329f3be99c685c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.419e03572.0.tgz","fileCount":39,"integrity":"sha512-TjQtRTyNDhPHk8N/8yGhSLg7IcUEqimRLliKx/xt/fQBv39Mm29R9ERz8c8JR8ON9+vd+asbmVinLiYZH+TEvQ==","signatures":[{"sig":"MEQCIA2glY80WRDmJbiluVAeIW9vbnbamxhsY1g16IPNbZviAiALxgSHETeaP9Is46oPkklOaLIpXWXnM2B8uhdbyXfcgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogSpCRA9TVsSAnZWagAAfWoP/1QpqN79aMzh5Buz+wLb\nPx5VJW3rhGQyK69lCCx8/DAWyJ3hzk5p4GRTkxT2WMCjgFTQZKriGxiRULwX\ni79PTM1vcQ/hmCpLuvL0f2nJs0X79uHBPS0+hX4FGOA5hmgj6HQtoywVvIPx\n00c5tt0loWD8Y8Ia7YoMBDfUNAUdeqbPw3OzOAHMwVbMHWsKiz/ks8DMIekq\nmqFo+nYvJ0Rrr7UisH13Xwj+wqqKDXPLhLarmNqOk7jppfHK7juv6V1YqdIV\nnUB5jxzxpzO19aE3AL2CaTqUWyIXmpNGsWN+9oWRiGwftiaH3MGz4cx70IlE\nPGaR+oglJB7K2RYtE23nNYb5kqgqQc4TT6QEJgWW1ctfKJgWrf2UhCvFlMii\nVNspaV1PDmI8XU/jvJaXSGIhN1XzUvhWKQ3wlFmuF+slb+dtjQBJ9kQkQgMM\nPD3RQMDA49xumWVxzD9a6pjJZzk8oWI+ImTpPh32hWbEyLIKV+c4TZKQOmst\noKimPTRD0UA0EIvArwpJlRZFqIV4cJraiJ06TsGnHdv4gFl2JwCJ/LwsEZlX\n98feTEXJZMrE6ZbUwA4uyGXOXr6GCCNP9d3YAoV9S3aU4RuDzeioWI8Enlt6\npWqsABmol0ewhRbSDP85bLnhbBcgMqy9apIgSDbuRz8ob6GOMUuHNaYUfbQ5\nZ6Hi\r\n=p90o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/feature-targeting":"9.0.0-canary.419e03572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.419e03572.0_1604453545123_0.4916295800832029","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/theme","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.a432ad542.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"363b51db8b2deeb3f6fad0ef7db18c1587f80a3b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.a432ad542.0.tgz","fileCount":39,"integrity":"sha512-Ms7vpGNJaOgSKhh/pShMJHCJdlr5QTC9cOaLenRTs8rigU8s1Z7gTiaVNBA4UemKIv8b7VuWH9scfPmqMlyZWQ==","signatures":[{"sig":"MEQCIAusSnZnzTGs04qro7gCVsmEHA7MZSNpaPxEMxfHBhgNAiBXU+vNvhpppXvzYZVvupkiXnyI4EBQnI0MsOJDQGzRnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKqyCRA9TVsSAnZWagAAWjoP/0dgwk/mWRWJi98RF96/\nGF6ZrmjqlDmn9Z6uiQxYoG2NJQZPzyDMQAuO8PfLYHUzTZ2pAfjFfw0V+4T5\nvcjMLCGS8QzeAQPLmD2PNYWm9jWu01LUAfT1H7r0KPnFU104hKXHK//ZnQoG\nY9MgNzvw0OcxtFMJ97xGBNvO4MJDNytnjZKPFXYDrgsH8RctZNpg0mJVie0f\nuzfw2h/zRfMK22eiYZcjAGyUZqE3jbpLXzkBZ4OhizvG9EjuOFggs12GoL5k\nnW0CkGVEsDoF2aVNdrZpuGnVyDi4wZ6W9rEQ3ELuBMsBFj5xnu7Hd6NRyrf3\nYoF3VAZo+9+YQimu2oA9ODC7WeipNtr7b05u/dR+a8W37soLGAlNRyz2tGzA\nwb4SBVN0FVryHhSr+B0Axgy0ranCV8mRMf/6PWklnH3ZPpmQe/6fq1DdvBxr\nU+E9eaXZQ7qAcfix92lx1rizuhNak5SZeqK6M443uK+CuA9kgCVm2jtrnFgi\nSsjyJzH+GDaugOi6C1hLpJd69ofJkPCAF/yy4883dW0K+/5BzsPVbqV3giNV\nXbTbVBe+kSqreF8frYQNMyDL8Uf1Y7Tp+x+NWqyKXNKfbRUY1z9pyahCVeyW\nEZ5JvJpqG9bYeMJ/8bIwdVNzH70C98YB4qZTd+5mwyfvdipznTo7Vw7TY04B\nOAD0\r\n=tzKr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.a432ad542.0_1604627121954_0.7111208554590287","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/theme","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"459c779183df4e0e3559f5317d22afb504e18c7b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":39,"integrity":"sha512-zHLY772dqGC5uN+q/CHGP7GjsRDszfeVksE8tYf/uDvv7zcNzsg9AEfzJF3+w48OlVGh9Bd6pOVuM2926jSACg==","signatures":[{"sig":"MEQCIB6kB2RahXrkfXT+9kVUPjsH8Sd0mUCyFSyS8GWrRMVtAiAd/lGADgE5qbjczmqg5PDtkoLNSMFrQQAetEW4rmh+2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK86CRA9TVsSAnZWagAAWocP/RTXTSG8LtY3hz0WP8Hl\nSqwm0a4RaHR0rnz6tnLb5F2h5CN3GqSK3bkUu/3H1U4FvzZUFwSAi3ErM9Kk\nk4zeHGOwrJcxo3LoAoYsb8UBdkSj8lvsSjiLKlFfjeUD1EkAfoJZyuHTwcFd\nakIT/0glEakph2jzGMO8cHZLDZvVZYU3A7hvGMMdZBB1jdn6jU4X51v+7Pb+\nmNLOzkYxIOdk8GKC25k6OR0qVUasI5Dp8zjGrHB6w9u/MsBBeKGXHEwd3o4V\nE5nRVzmmAesN8rRXeRg1KdsLzKy4QT2igf8HoSTc7EBQ0MTjpjRJI0hXybJ1\neTr0C80AhSogSDMRnLwwuTL9sTZZt3wrRODJ/Ahj+MOiYCHZaJ8+LTN5CocV\nx0Aq3EGDqc2EBUZuZ+VqZvmrCuwnifQGNP/v+k2hff0QwHT4/AM2X5LClQWA\nw9Q1/YiP0mZvIFQj01lYAbVzWvygrvshQr+15D2ggftlvWWz/IAzMYtfbBy1\ncCCBRusJM8XPUgb55ewuYldtoKYUr3eOGQuBfpm4zIm9ZaVbr0aGzRSqlrWI\n4bxvVpE1mM3g0xk6swFVcwu+ahQLOYkmTF+mM0sRQ68EAjizAyMxNKfMWGM5\nOgp3TYUmHARgq1iRe41P/tziIbzUKV51jASixIFgdpg/4ZycvMrv5EeSqeDC\nxFy+\r\n=jf1d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.e2e8aef1e.0_1604628281623_0.950417789637567","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/theme","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f08ffd25d9939df0674b9bf102113239b5cd2c75","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.ec6b68b34.0.tgz","fileCount":39,"integrity":"sha512-I5Iwi2yKM3oILlbhcQfUk0GJ4flGYINKFFbKDFhrHzg7Qizu491WnnekmI+sgcKXNPVZZYBRxQELWlk6AKnyRQ==","signatures":[{"sig":"MEUCIQDhnSNRbUtolst29jk0BiRk/qmpmkKIz81wFxCxeTOTHQIgfPLsxjFD5gQsDbTKXPA5DOO9EbUGI0t1oCEoSp/r9VY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZw4CRA9TVsSAnZWagAAmwgP/0h7wkMMgdEhAjoGnA8S\nZQxbc7HqGvy6pVWSJq5l+ff0PUH1gMCbj5HcDXcRK/M/ftT/4ETTqtgqTl1K\nRXaMVSbnVTgAhDScQbiZIfiUXsGWLAATIsJK3Q+xE/SXgZVYweJvjRBD4P1N\nPYvVL0JaIJBcYXTaeywjXyN5CyCahlvuOqiikCMqAHIWFbK5eEJOJ0Xu+EUK\nz/boMwSMHynSWTBSB4Zkn7IsKJ33xLRb+FesdQQcMOEbgMfy8ru9oYZItayW\n4z946f3nhq2viEQBnwn5VYWZcyzVZxcTJWbtjBjj+R3Ui9XF2/Tpl5UXEoTs\nlWNi8CSoArx4lkijKsJm740bvB1qQg5yMbPX6ZmnzeyenbBraLP63PTZOWEk\n296kwfOrFeuW8EEROfUjl2xJgup8hd2TAfOvv+IQ48VASJmymEsToDgoYm3B\nQL2LG3JJzMisolgouV7La9EaaX4JNAy7L35nUCFoyII0uX/4YAAP7V0iZ9RN\nPu2iwko4JJtmK2Ls3z6Hp2W+cmPviV57Ld3HcdZKz7VzcRpH9l22fI5aWC+0\ncKvqU8ni4dxY31Ce/3Kq0ZHPeQRxLF/yy4GktBURbrvZ0/JA5RZ6tPZpKf4y\n5qhIbdzmxzq+gyAeZu8zVxVdSTuBkrlg7k+3jgxqIRVebgQniK3LZkqRx+Zb\n6oZQ\r\n=Puov\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.ec6b68b34.0_1604688952452_0.3778578769977443","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/theme","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.b39094d14.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8d28e74c9c8a5d7dd01c6f2fdee1abc359e968f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.b39094d14.0.tgz","fileCount":39,"integrity":"sha512-XTl0S52qqV1N87c7JgEqaSL0WKsdW2ol5sVTPXBUd8toaFiTKnPvm0AQk0QD0cGQvWfr9VhH+quBOIYhdMlOSw==","signatures":[{"sig":"MEUCIHpwTOqUIsT1Bpm9sYtdB8ZP24NOOz8hZOUrsv+za0MKAiEAifV76LeqPY0mGukKvfUr7ljwQrg+M4PvpnTXEPzBI6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpbzrCRA9TVsSAnZWagAA0icQAJt6lv6KRYQ0Zwh+rQuV\nTYnkmVOIxFy82czyoyxrAX6x8Q2hkuPR/nY7iV8EYUsmnysp23EhmV3ZWwrw\n8kEc96pzuxlEbDx6N10qVdWfI01P9NrzXOoSz3w/2QmVyHyPb/cpbcB4a97Z\nppk9Fq6QJ++dtzWgyO6VuNgH+jEi646uZIHQ7LQMUaiXuTDf0TDwb9U7mLQ8\nM+jqdt1BRURpKRJn+vucD1V4GpORZlcDV2bFHcsL9wmWnjRTRWHXljOuxebr\nAFifsUhtpNhr/Am5n9usAb+ddPUBdUyLK/O/FugYaLyLPfr0ntzCVagFsHrh\nJm/J3LOHUHCbziIDlYY38Dk+6/Pd75o/nGfcqFsUEfjIMk+qA/m4lnSEhCYW\nohnNL5AQx20DE6WbX4neXYKghH+EYA6gtKWQ+tErba7COIFo3Rie/uJvSTi0\n7LIiEmMvwddAkk6job424TIDHj/eVy4B+Xg0WAC4J42qfd/RAYlCmpLlNzc8\ndVQ8dqAfCMy5rkSA9ckHcdnmDmGC+zVqLGmHcKCxQ5lfFZ/2Gx6LTuYUk+/8\nRhBzs7hSg2mBPinRZCVFUQ+/ZNkCElIl+9v+4HRotKp42BJhyyXgKPEH+I6w\nbODlm3/ZeOr+EXbVNK3PQrHufXugB9Vwacgl53DMqx0cOShRNlKgF00/BJ9w\nfSwM\r\n=NK4M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.b39094d14.0_1604697323144_0.6437564613439979","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/theme","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.8648b8258.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fccec9f619d0c9140249854397c5f1fc2ef5b98","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.8648b8258.0.tgz","fileCount":39,"integrity":"sha512-SqBAJsouKwI1uIPDjb9KOizBgw9LMryCj9q68fD/kBemHKIQZwOJe7vYx+lz5fOexFIXWtdm0fbCXTAZrGO5yQ==","signatures":[{"sig":"MEUCICVptM7rTY+2VPTO45WUooOmynsEO2slpeoIkYTq5j73AiEAmGG7JWQkD/glxm6eumByiiVkdUx1KfWwXZne3c1eicg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRHzCRA9TVsSAnZWagAANksP/RVMMPa1vL2lgpw3ZRT9\noRqGmDcnZ+m8wm04WNp6wqeZtLCdc9Ar0u954MuNqm5ANzsAuUcolcLgJUV6\nozv2p0faGSk7ukdzmPOoPKkGON45pxSqdBrwJ1V/h2IZelaIM1lyZNb5IqPO\nY4LhwdXWTPcMBic2k8PiHFI1fCk8ycd5AlvdNk1kulWgtm3+xmjsvrc7TgRz\nMSYY8vu5FqnYjWAwp9A0gwV8CqE9Z/BNjaIIy8WUSnaCC9KY0cQUuyLar/uI\nifWBNosPb2kcsIAO12icz4VWrVEP1JiSzkIv2/ROMz7qg/F1eAzK8fXDK3j9\njeYK0Qxfxmdnct5MrGzT1xVVZhusmWSg4LlF/ulB7J9u7bexkNIGCfB+NtHr\nYAc1c2SUAsZ/n3IUjsYFAyFBVSWpd4jO+NPxlFBr1P6TTY8U6GAbm9PYMrwS\nZ+JYEwJh0xS8OhTHW2RhLfad7rBLk5h+klWvo7lj3DtWwScVb4W4GlulCmac\nz34wU9/fJNpnf5fjDZTBexwbXKj5udTYf1x/+BTc41Ra0V407j6++b05l3Ig\njrINOfmlbcZAc3dhHakh5hkYVRuYnufo4SLAR2ta7+CF/TcXZcKH5kXlnuqx\nhAnhze9CJA32jZcRD9mZkIZ/hd/w4T3nP06oJDKT9InI/8g3oBLA+s6ZgEnP\nPwdE\r\n=wq36\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.8648b8258.0_1605177842917_0.5501715703041006","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/theme","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80d5dbf14f391589fef2a39c8801774d59100180","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.240c5f74f.0.tgz","fileCount":39,"integrity":"sha512-0ZJsrwmMCivpACITKx8U3xxXAqEgbcH6P/gOJjSt6bzzKkj8SRGX69Hs2F3U+Vp21z8Kkb6sz9auSQ2gzMT4Xg==","signatures":[{"sig":"MEUCIQDx3iUcUTkSL40I7dohjtOQmZkaxvZ84/h5C9e9AsOwqQIgJmCLx270E9bLYNn6RGj5HlIYZbPsfH1S/B91VB6CfJw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZjuCRA9TVsSAnZWagAAVQcP/0BdrUBUNouNj+nPNhbp\n7HbHPdDVU5oKi4mLNAXiQMqvAhIPLolxRbpsPI1E8J5R4hWMngMiAmMM2Zim\nHDGgmf1GKqGgiB2pDBA0gTNDwGhuNPSl2XDTXHwpGograL8AY0UYDRLfJc+p\nYmzv0fILIf9SCZj//rAuKoWG7L5E3K5Bhx2Hx/E3w0TRc6V3acPHeDb9+nD3\nmWvnqE37RgfIZOEZg8q8aawNyzR/ycchmgyrPMFUn965THQZjM2mDAL6LYgE\nWwZU56GqmEjZSUVSannIytoyg2+ULT/qVX+QDJkAEkoX99Mj2CMRonJeJSlL\ndAiE4ZWJY37BG0/EpsO9PBJ3O7fd+YoKeaLpsHAw/dVtgC/K1tNMmdi6mO4E\nnDi8cYs+RvY5J4y8bvgM6fgoNUtrsm7EeU/4VJUdlPYR2+Gon4fbOswUO4KH\nOOzGwMY5wdf5LHtDZ1mAx+//p8FsH6D5W87sGX5a4hoI9wgSDkrsyvTgqYDw\nGeC13M7z2Wxaf054a3NJqMlShCB3xvtM99V1pn9E66wKyarvdXUDUqrFrUT7\nMoKtukBDB5FEnf+PcfJ6T0v5RrgMkpOEzH9HXUmi5nZb+ayNXsI6xK+WBUOv\n1pJ3l0Rh3MqG7CS5/d5cVJSefnzmw5EXmbrU+c6p/KZZNp2PPoPfl/wQr2gI\nJM5y\r\n=NTlX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.240c5f74f.0_1605212397998_0.6709624311373183","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/theme","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"168933b74432afa6434551d6d79cfdcc61b26c6a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":39,"integrity":"sha512-oFuuk/6jN2KudxE5dQOaoG0pSO95evtBRLCyDZ0Do+5nQ5dxL9YWyk+YZnTVWWT0XFdFpbOfOG/nRbdzN52q3A==","signatures":[{"sig":"MEQCIA2avlSiBwqd5O2oqm2D0ufGhJDUJa016PmjVzOTKYthAiBVmzEzIQJkb4dBtOJC4A1gguRD/2Fftcell0Mk6nsB3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssmtCRA9TVsSAnZWagAA6R4QAKH59RcOfNqCoyIFnP+I\n8DEhq1/YJ964TLz+b9EDizctVq4DjgcUkBEqo8P4xcmMh7VZJ/esVSuJZIWQ\nOC/gs/dffWb5EP9x1jpDcXQLXTkvqzSckU1rwvB9CCu6NKGrkyDg99gigF+l\nOU2CTYoi+TXsWyf8bf8bUgwo3izHUerFsnE0PHkRp4mbM19ukgrls1zAbqj+\nYw/XjbqZA8evZDQdcj0FYK0KtSEH6T+H9uDb3VD6x33B5z4rmGm8eXKIJ03T\nKUPLAXDWaLsjeKo33zF+rJq/wFuwgN8J2NPA6ft1vS820/yTz5Qge2Cx2onj\nrOJA1ODs3O0H2wm6uptKsiwGyTIjKnU4+t60+SQuk70x7ZIfENANlePWnYT/\nq48vIOXjPMw7U1y7+NXAk03K1img2jMhOp1vB1YjxitzFwQ8mjMsJeXdpA8N\n9Owr4LAgLMw8rv3ufw0lverakBgxhMYrv0fCT4C+qY/p/erflp9GiVNIWvQp\n/Cc+w7f3ZH2WfhdTuGF2sCsgaS+TZnNM3NR4LST4t3Wl4d/x5YSl94WM9vBb\nB8BdTrlTOi7GWfikUzQMXBbtsaz30ookUDQmftlM5uQRb07VtJAyVm2NGWVa\nkM0pT54ESR/ojyIXvWOHOYXMpfMhJTmtgLbuZqj5pROaNP5GUb2afWIUrPGN\nTiCc\r\n=23m4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.6cf6ba4f4.0_1605552557393_0.1982181578948532","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/theme","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02310ceb30984e845099cd41cab1d8a00cbbc67d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.07f3e01b7.0.tgz","fileCount":39,"integrity":"sha512-O+v1WzbDvJJq5ug9n7ncVWz8CW1ruCdFXQRmCG2NmZiI3zdKo0OGsk2IvQX6KSWIuZTArNJWpfTVCBAatrGg2g==","signatures":[{"sig":"MEQCIFODNfSjVJFrZXPUhA9whQ6612SJdf3vRCo+GSk1vp11AiBOey2KmVrvqjeBcAVJz4uuZHcxhU19OHG3BCggGDHV4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvLdCRA9TVsSAnZWagAAXNMQAJGj1L1ooDRZ55t3leVk\nVNuE2JhZdELa0Pbo2oiDrlBNs8U+YPtms6Uy93J01Xmy88SJLY2H9nb6f36k\nxMk0OUZ3slUiZKcRc8QwGJMYPq4V+yRA33DtfpBE+qmLwnUy+WFZ/91cVlzc\nhTzldMwuw5EDfYu28o82G4UCRO6Zk1+jFey7iQRKnRSj3RVOuFe6r6NJLDn8\nKAwoST0KS2Yh1/YVFKPCVzrIziGjO5iNr0apXBsAIFsP/1foCBdNRrAHsJSV\nqYZNzYfD1vgAk8+LCSvYAqtJYv0P648ZP1N+t8eN//yHbrV+gb57BHEzQtTR\nh0Ygorr3LkRR6f4LqxFO4IBC8vg9RO6Nf1240AszRUlu7HiqlkYqNP5DG9wq\nVoWyUQtsk5+EKxpOZECYdyucF0cyxdlVn0o/yVxNnlYDbCZWObWYC8Sqt1QE\nOXY6UIYAURZ5cwICIqSvcGAu0NQvQe7Jy5H4tqGQzEvYlStNMJMJmy0imOe3\n0Q0xaU1Z5IcIhD49sZAJ9+P7aNSdU1t6wnMRTImr5cODkPqr8d5tNKO2ULlN\npGMtKtYDaLDMbYkdaZt6LWsEiGN0C+EF+XTpKGTowcVH26MPYKpPJLffmPrw\ng1AVA0gCDWS6xQmsSa5CSLTDEZu5svcIEH6o9MWauNQsAvfEVfmipwYIiOhv\nxbQs\r\n=9p9J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.07f3e01b7.0_1605563100587_0.22945452152573265","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/theme","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.23491cf85.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0a23028a6fdab0de815f3aa2f3e44fc37c6194f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.23491cf85.0.tgz","fileCount":39,"integrity":"sha512-xvqOHp72PcWEa1ZjKbO18TdsHglOlSz0xkwkruNNXoECcuP7s7nztWQmRKDLB5Y9CvJZ3Mq23sSSEyIuU/w4JA==","signatures":[{"sig":"MEUCIQDaofgl9vemi18AeVhZMAo2CsUDBnlOY8IPuNzfo1bS1AIgBVmarVJNYTk5KsZ0KYATIdUmoRDUV/IWwaathodKWlw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxZmCRA9TVsSAnZWagAArb8P/iCFIpNX3MNahWchJkwa\nxjmxyAjd8Jo16A2Vo5Uma8f8HCVNVDiR60M/7DGOUnrsiGy7bsxincGGxYiS\nlxBTrBzBt27jvymaIKOXwgyBiUYNXhqQ32OI48q1Vez9A/6r+vu58KHU+8te\nH6hqmTfTUAsTsZwH+v40DkB8snBiTFu+O5hYfg69keKLjwymcT56ndq//3Vl\nCmvgrQ/2n/prJF7RZaRDFIMJno0eayWVAxcbkUIYARvk5Cvk8rGRICMu8C4t\nVgppEdlJd5tkMtuNnJZpI46lCCOgoChXu2BufQGm+05qZ5NcH4N5Cgfb0Rk5\ne3zmGyiQvUo6xr/9zeYNFOhHSsffRTBlDnJhHajkE5zIHZrDl/2cwqiNHGnd\nnVWXmVLR6Z8wHgLpOifxLSELAiS96+VsWJ1XNr00GkA9GSzUsPham3b1pSR5\n+dxTDJ8Rr9wzwsL+SkCW9lOpc6xUtKsUU/uAibNLGO0S0cPy1PnzBm34gZdy\nivYDNtJ7sh1m3iy96uKsR2FbxlgdfabzXVRKrsRXk5WtOiAFXBG4D7DXsjsv\nbQwjMqoAErWYbCrgfskptdshIk/1JoV+PBPcqowjoE9Fqor4LX1AVcXpx+Kp\nUltaXMwrMpyV4QMlIHslQ7wmbbB1oVgpcQWgFR80hRVP91uAXYBmg8GnvIRi\nPjwG\r\n=0Mae\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.23491cf85.0_1605572197842_0.9413995255681598","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/theme","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"822a29146f36cf375c6845ce0619bcfc606cfeb4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.b659d4fc3.0.tgz","fileCount":39,"integrity":"sha512-5o9BbFl+ZLQ9V3s2DRzXwj3dbzRThTqkZTr2ZwLdpxZk46SiHk2hcQRDQP3hcrVwWJuzvJ2USMaQOcEtcgH4cA==","signatures":[{"sig":"MEQCICOt/1DA7edqanKBtluatgicK0TjLp2vnLUS2CxokNDCAiBEKHvS5pkVOytrKDK8quiFTaK5J+XqGB2U88roge3u5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxgyCRA9TVsSAnZWagAAfxAQAI8k4a3FHiWQVhbc0XYC\n9+36hLD9TVlmtx7VJRHfTXXMCaVYtd6MfZhaGfmINZHjHsrvHMaKvAPNUXt2\nU0q4ugpLh2mf9z1j+BG19xbe6upwmWE0SjIpeVUryCPhnxDVoOzJPaSNgpdL\nhomQ/vAvQm2qrRGHsmV7kVMAnzH9HPvL8bZZRKcCOlNC+3j8T5lofCsQxEG3\nUWcf6Q5upVin5elzaZiip5c034lnFGAIr5pD/2xRawl9Io0aKZfBdFiqTq55\nHOPY4fwsIvkGavqEhGuDCs+eQCMY7ui30ymP+yQ53DqP/8lP+nMue2Q3qpnY\nw8d4dmyImNhzi/38W2VknmN0+cGP3fiB9c7aTBpmgsJdOHengPZSAuHN3/IK\nGsga/DFssYXI+n+iPumUs1M7vfkCBTJkj+H+4Lp9nCyM8G38/nhdO6utk05G\n0K0rvaOByjRXBRnp8TIEAYDkjLUuqm/M4p1Ubew7GIcY1YTki+pdhRxpoOjS\nAqjlRhvwAyGSY8pli3X+igOr5gkpWZpy5kYnod25d3d6kudHjnvWay8KtEFJ\nhQHaYaxAT2lVJo2pxGFRrius+MoJbD2AcMIJzkh2tGu4MEsDdaKOj7heb3QV\n4aDtkak3ooW9FTH7Gl9ewLlZsl+asmL+mmqoBNSi8tUu1SXeKGE4KJzhLp6p\ni+lQ\r\n=674Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.b659d4fc3.0_1605572658224_0.5044915092331084","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/theme","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79e07249d97ab19427feef03b31c2046560451cc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.d8a3aed67.0.tgz","fileCount":39,"integrity":"sha512-WqLys6SYNYzxwGHvgGaQuzefalzwj2zSN3+rL6/P3IJ2JUJho1Nd4GOycKdRLzZ/AzQRzONdriXK+6C40hCgXQ==","signatures":[{"sig":"MEYCIQDOASYB7uYwMjbfAVKUCM+wTCInY7SUoZ/nJMrFNqmLIwIhAPekHUlvGpqRaHJCUL+yElfH/owBkzqpMzJkZeCby3JG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+ulCRA9TVsSAnZWagAAKaIP/2gDCtvkjUPM5xWj+Uwt\nNFh1f7SGoBoGtowQ22nxjcVxj1/4ypSpkaQv/25V0NqTF+cZnfZsVtdkIfrM\nmwsCz0kPLn1Jo//rrnk/roxGfxvNXXu+rj9nGB+eOie89XbigYzoIOhEpkkJ\nwZnpqjlEkc2PAlHufKaYGYwqWkkltGFAqSfyIfs/Bv59Cerd4wVVgcQ8C/ws\nx8Y4ZRnYtPidM8KdvE5MaPy268RQQpH9z1vGmQKo5kfy8RWlFPqj/RUL/tU3\npmlujlb3hpEfbOPRgS/7JATZlNlOVYahA5j7bB7a2E8nCls/Vuw2j2WLkfgu\nELyQPypBo+oZDggEnywVMbOKznEGTbn6Arf7IHBDqCcv/SCs9JG3edWRdS+y\ncciNPLaxcVJcylRBnnWqd/bbr2w1wrfwQurWTzlz4B9rkbRl65JP4rv6OlCi\nyO1s4ZZFKksqMpVwUS+UpwGyNyoATHr7++98DVP25oRX37WxecOTR649R4gJ\nvtbdgTA98fqzCr84tlphG+5fe+lLInSpnZ4g+adg/0Hx2c4gHuxs1n9Gi/WE\nBooDYbBEkUS5ngzufAk5FpHtLzMgXuvBZVRnGUQMkygnnCypHIpp39O2HQ+b\nbUmYlWA/bsAOfl0HE4pDWi7qyzTdycZSdywX+e2xf5U+WTM+UaPciYTeMe1C\nySaj\r\n=eaKd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.d8a3aed67.0_1605626788935_0.3431143882145957","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/theme","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.482ff9091.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b99a3a77efeb2351b23a3ae0c4afcddade89f66","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.482ff9091.0.tgz","fileCount":39,"integrity":"sha512-ZrKtfdYSxVfg/jvs+jFCes9WcGRMCsMwZkV2ib6zuCfC8/kfQ6EQeC0JEdjj0k9whEIKg6NmZHYzXK7+Q9eYTg==","signatures":[{"sig":"MEYCIQCAg3yJE9sWSglj8lpynmmtTIzY2tDVPct4NdbqFRG4RAIhAJ2lgWXhOQf5eaFgfs6F51z/n3/PhGokFZpTyuGJtf2v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA77CRA9TVsSAnZWagAAq3cP/3MZOufDMJKCXDWz8zZW\ntUaI0xWhi6M2tb2dbGpyJeUOPUIMQ0pNqIJTdLtVBB6Bo58aW6flyHB8Oo4/\nonjvKvmTX8fIYz0eENLDYRjSGR5Fh5i/Siwiny+/b6ibtlhrRULF+bIPKo9w\n7tQWNovleuKGZBXyCrfeM3yNs9Zb7uJZta7pYd5Ml3MClTWSlumr6UCsOj1h\nWA1tBis6V6AVuJRlyiQHm4YwDOzaZ6CJBrEB1DHySfpGfwvZ3bH5hhVp9xgY\nbRb3ZjAsBiHjWmnanGSqJ5LGIFzuLFEKwQLoxKyCfB4hzrVZxEIoCe4JHg7h\nZUt/nnvW1Bly2E/CcNdrPtMntP/TUMhl2qX9tVk/xCEvE/rMVvUZk/D2gu5K\nFCeaY7QwsttdcpR1L9gJNCLkcdFiq5im7YpFg0Q30YbTVWBSNIBXkZvI4zVR\nkFvXHF0iIV43eqzLxusJ+Ta63hsyyLxbuU7yJFuMEh43W4V1LL5skm0htwML\niKefZ+fFadhQj7Y0wmhtE2pcV4Q1rBjpd1Kgv2EyjzfBMz7VYwlP64Bz8uxv\nt6pxW26BxsN73LRiHgrps1C5wf1hLRQ/hoMdx3bZaOYvAqiB+LvtTQ+GwGaC\ntsg3yNWRkmHTV3jXIKDCarvKpgfp62l369U6KimhMYVyFLns6qYJE5WIgW+V\nHoH1\r\n=bd9p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.482ff9091.0_1605635834607_0.5186340105601908","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/theme","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9da1a26156015999628b4297ac8c59d1f845c86","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":39,"integrity":"sha512-PFet21xGeDkBc7VBJV47GNhFazYei7vrR9I4eeX459c0nJRVXHJGXVT3wwFLSpW8nTa3hSmLf/WeC1M3ZLFBWg==","signatures":[{"sig":"MEUCIQD5Hm2Dj3/m3YTPcpPLYDnopEeSNcHFsDpLaAmOF8y2mQIgRNFo6Q1HFqzdO24lpvuVPJ06kgWZ27aCWOigUZd0SW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWs3CRA9TVsSAnZWagAA358P/AlEPYRa3TOnxe3ZBxWz\nwFb3qN/2mJwnaUA5ufVkQ+Vgg3Wk5x9XVLhPdDUgICGKsJmRQKT170joZP1k\na88QMJdLCSYR8eZNq3WcShZIympHo545rjUp4RTOADGSUhjOTC3N9o3KSt88\nkENJk/AOm6eo5Shzw1HHg8Mm8q7O3HR+g+sTV+/0FQhBaFUyHg/U/5nSaV5z\nxp9KyJv6xSOSILswR8kbKJoMPz/oX48HzbhvzOF18J0RftJjRaHj72sIc4pN\nOz/268f5Sm4wQvbrc46q7UEADyFaX+JRv2pj+h7F6os0FyK64q+wVr3VIw+f\n7j+Gn+tIYvuwA+4ZSyYw2+gkGQgBqdnVC4RUGVwEmCAHy/y/HWYSYw1r1qtU\nBztzs2OlUDhkUgWq+MzmjT5QaiHur0PZX/CCSMY/Tn6g47rQkobzUgQIAnCr\nq02zlnMWbt9tbR8myfL7NcZHGcyGJIlvc23b0N+2oVNMqwW/YvujZsnQymFF\nTqmd+fgurC9m18kXpHYh4dEl4kU2/G8iqug7dTQiqz3WdHT3GJVRLJ6NpSdV\nqVD4r21D5Hj+tui0VBt5QIcRDTJtJQMCSlp9IEeDsL+ejwhJuxrLHsl6D6Cc\n/+iOMq6x00FBMyj1eYWevH9RL/RKvvj8ChKHjauL9mc1zEzdNd6DfUVPVO4l\nlWay\r\n=87HQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.99cfb6bd5.0_1605724983063_0.8820811431302422","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/theme","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08d523cd92b13f60e08e57f86a3fa00f462dd2e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.b98d15d90.0.tgz","fileCount":39,"integrity":"sha512-3+B3Dsmz4QErvh4Wk0PWa23Kcl0yx2dSnrh0EjxA/83RLw0QgrFpxp83xuhHkQYFQoGB2v0XPCNveB9lgpHAUw==","signatures":[{"sig":"MEYCIQDjUAwq9QLGRA0yrxGBT5Imr3rlOiXIPX7vLpA04tfPMAIhANb7UPRrwyl6G3cS3z0ncBQP+bnAJiF9mWboKYHj+A0u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaFpCRA9TVsSAnZWagAATDsP/jj1HazaHA57VQKcIf6S\nnS/578OmE/6Gal/Ps29fgJvPmMmWHGQIpBj4xnpv4cU9ZcFRqYtK5bfby9ps\nZSGjHlUr2S1AzjMm07JVKOq5khMISvUMdWyMCAytf/G/M0hYcWv/BdmM9yFV\nK9rv+vYmLpsr6MrhPlyj50qup7Pvyqc8AduOe4Ct6sycjsR3a2lS58V/5E4p\n8WaKuK6ExthZylRvRRw0KngLlfUGiReqHGCavRh9VOjaynMCeqnr69FSRw3W\nl70laU4T76yQQ9XgjoKAWuOQKYHGvlhz6KdPOVv6TEdOssfeL5L+jTrk98Nw\n0IZQqocZIcC7Ct8oBtMUhk8tKnuhrOF+UK9+McAfpdbjGKPYoqszUcujAN8K\nrCnLU/VOhEPg9HH7PXOL70JCWb6xqDjfeRxFiu8r/3uPa4EBNS4I1E0VKDyD\nFUpRea6EGiEAjhWNpszJLZ0G8RX3KmUVypxWPTECYSJz19AuFnNnMEEf7J+a\np1+wMYSRTHX7ZVLCrlBycHW4RPVZFtcRXDTm5EEDvFllXPNtNzloWvl/g7Nz\nQGK0KrOf5jCzSbtMqxmYZ43qKYLP5BFLqI2iNksU1xshnqd155bz5FB9rJM7\n4uL32XqaZnwopdUWhwLip9Jkp2wtZbjUcTVQHp1/2XQ58fxq/JMqEzyX/3gd\nQzTH\r\n=uKTZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.b98d15d90.0_1605738856995_0.09158205188787649","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/theme","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d1d81d8c647e538f441d8aeff89e98a8c2cfe9f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.30c11bfc2.0.tgz","fileCount":39,"integrity":"sha512-XQHk8HfxBhb849X5hFP1us0PcCNVsEE5xHXobfKXAKxnRr66nGgzExQj6WG5m2gYqAQ4c8pq7LAV1r3hFk3jQQ==","signatures":[{"sig":"MEUCIQC+X4jQnvzyVqzMkzEHlUQmcK9L4DYcGXTkdUFIWRrhxgIgBVXhbrgDx/mS/y5ytfjSwAHoidkt2Q3cXa2i+IwQZGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcmECRA9TVsSAnZWagAATpAP/09tvGBZjd3nQjW/q4JL\nTpzAhUaFi28Jd91t0bWfdd57I83K2ZLxW3NDz6aT8G/hfD7mN9M7FGEguMvz\nKDg21ig0u6mPMIrxZYE+iJNmwkIGeHg7OS7UByrhmK1AX3lZ3yjLxSOEW2sb\ngkdT2FZCRPXTFhrnIl9nLuSr9gaAx5OenVY72YsT9M5MWt2RwE20y3RffJBG\nu6k15IVyLeBLPVGwOgxS2x/m0iLQxoA1Et6j/L2hTxE2JjDRQEMAxzALgoB3\nGvzcSTzZMiTbLs2PaPI1I5aEvnxgf/4HS+f1BSytzIRYnT99nLd57vvaKCu6\n88cXZZOwXYN2hW6gz6BRFIfUJeQvVFOoaY9+S6lLkxvFkz2fl9qynOpTSFqD\nBDf9M6DOfyz+s7XcV7czs908p2jrftIck5msKkPs6kIeHzSQRiOtKJACg7RU\nFuE4tHSI90BHMUDzZm5PoB7t7Uetc57FN5kZRytVTwKz7gGtvVxqo93t09BA\nE6Plp78r7qPJwhibpnCmrrZ+3VCitrEE1AWQRjKoPJ667H3YHqu6UBQSgEaf\nTAVeSXwhcKkm7cbH16zpS8DbsGNEvq+NlqPbC0AvUQ/BGD3twf3ND3p0Ihsv\ntgHtzHRA1e4DI33xKNLEtVAPMu3KN5jR1LzODj10Krk04kxl9uN3WOdYk4gb\nwV/F\r\n=zV/7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.30c11bfc2.0_1605749123877_0.44422525082978637","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/theme","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1d5aa4b4a4d7a3394f1c8c0e623a395a2f5d035","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.1b731d51b.0.tgz","fileCount":39,"integrity":"sha512-6PR2/4zLoY5HHWLxixTqxmzL8MzBPeLFU5n/lP1JfwCbksXheDvkn4wE2x4sPqdkuikcYYo5Ta1qkrFtF0Bv3A==","signatures":[{"sig":"MEUCIQCDEG2gul6Zyw9L61hOieHE83x8iZm4UJ4xte9cqtngawIgeLlGhhNSBho/TMIUEi5HhqF2Dqg0PWNfUZe7bx8Osq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr65CRA9TVsSAnZWagAAEncQAJnI1pe/08vsbjD+0ZmB\n3mMqLdOTlq3bRqBwCbB9W5667UxIHuuDC2r63h+7stlnua77RAgKVhxYRBQf\nl3c4HWKbzwFz5366mS98WxFyvKGma+KufutOOzutshg2SgX7lpObw0pZHy+6\nEccxUZaGIIBz/kyFk7h3FxuiTdg9bHowKYV+4TkUMXdYntmG58uZXVe7l7UP\nqivZ/hE8AzsRq+xBYD+v1nXEYF7FVXeVpBlRMkr1cBusn6/gpv/stX/QIUu8\nJkl+COBDjxtbU7sNu/3PJxUbcgm9JrtEQ2tq5o+bFhzlDZ4/aaFr7Qo/eYoX\nwn67LlBt/obcPS2pEVSYHV0sTiXXN17FPx221yWGXrPF3k/HlX6L4gYe6n7T\nNf4O3QiOErKXpA0VbRqIplMEfJXpxiY35BKfl4/eg3O7I74kI7f/jRUBW4bw\nNKobSQB3ng70NsoSji/DR96sjThuIZgXwnYNrDse5JUUFYMWeWL4bOHLM6FP\nQpffmSF9yE85dh4AUe3MDQ4KHeDr7xTu6g76sxgfOC8CrVnLYyPs9QTHxJ2p\ny+nMGYeQTHhJQRLzWij3ENedimVsHRQtOQWcd+haF/jiMUis292zQSif1M5q\n+HxpxInW7BxNCKXAsYwSTI+UnwqaeoL4SWtGEgJTtGalk6Qt+xbkcRguwBiL\nY8KN\r\n=GpkQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.1b731d51b.0_1605811897049_0.9484097995793221","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/theme","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4601a631352cafaba966731c3756127a12f4cd93","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.4ae94ff78.0.tgz","fileCount":39,"integrity":"sha512-SXlhmBsuHkuGc2sK5zXfAluuHYcZrdPbpEpoZZO1Vp23Exgps1U8KhR1ehU/p6EXCOS9iF6eVPIio38NpUDcMw==","signatures":[{"sig":"MEQCIGdshopzKo0/LlTzpp56jV9/XHiY4jemBxC4UIFrNk/VAiAvM8O1kAslhu+uc//58HGBIrbJzd7VJwsOBnSAxPU0RQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr9lCRA9TVsSAnZWagAAEz4P/RfREu5pTJv8UFr8fOr5\n9biODaUJdbwtZ5ODTs0255YE9lToeLCzYvBXE5sOVmGHFzs2GZyx6l5hf7Lg\nSvjhGw3e3r7Uf3TezhCEob6oC6Nv1rjvTTOv367XqIKX74rhcwUPHdf7BofZ\naNGHlALCTTF/2Pum1yptvDhUendwZIQnnePFfSy6wrBim/f9sI/E/qb48e+X\neRGrMjytIA7te183MrYJzlvq+kb7PRvdARMoM7+XPzMhV5QMhEGH9c5sYfHu\nGvjs4XoJDiIpO45dMioseDiKCJ6aLYt4nrr8mzEHcbLw6mQDR1mKIJYZGagE\n7C97b0kVpiOmx9BvsgDxqrROzuZ69DtO3LwDZmg0G/QJFM0zWzwmjqtEqFSC\n4beub+Q1c9SVqbkfZ1u+gAdTgn9d3K/bMDSybEusU/r+JLesxqBghFw3t/Ij\n8slFF6NpRIMUwOjfpr7l14nnIrk54ZwmvbLkTZk6NHtQuAx03OhdbsHE6xTl\nT3GFXGDpf0Q5z8d6f4ahy4XrqUC3BzwFbb+xII1HhPbcaIusdsZQwIM7q7I/\nh3ztcK54Yb9p+WIrFr43RW0fZ21KVmdr5736dW739o5iI+ztJM7vIM4SFq4I\nV0Fzxbe3Zy2XfPShALZA24DGf8x7U/9+cufcgrajyeYt3SG7h8JoO5mtQYKO\nF768\r\n=Cxxr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.4ae94ff78.0_1605812068541_0.8217052389367574","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/theme","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ad3ae60fcbf5ace9ea3c3d9ed55ebf3571dbc08","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.7ad038e1d.0.tgz","fileCount":39,"integrity":"sha512-/sF0CWjrEIO5Ps5oYUMqcktmZQGoXDpUAOOWKsHb+rx3jWYkvoARfqP5Vfho9KIW491wynP/HjWn//mjwDkzsg==","signatures":[{"sig":"MEQCIHEdgZ588A5dnpRQcPFVOZAuHkAIeaQ3v/Ta/AbNKkFHAiA+POoL6ChLhw5wcUg3yY1gG9gdouWumJCaDs+BijR6/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsTYCRA9TVsSAnZWagAAvswP/0QGoPn5ZwmVvL59KXgx\nvfpvZXnN69Unu3nJTjzp6G/KPsjOYFowPZbjEw5W3tZ9x+2TVr2kCXx2Sap/\n9959j7SuGgjhiLmQQRsXSCFfwtMW45ntcIiEtt5LpyD3+DC/MtSI47jgj9d+\n13CW/nzXY1dRUaL4cYuV6TyySfcT9dFi//zhf6TodHrpyYH/T3HvHu34P41d\nLRsSBuXGNlj5l56ktyLWNdJiG08e5FTN8W84k1/iRJ+i2EqTvrfTn7J/Pr8u\nobocZy05bFBdoCIw03sjawTbysah2oWakUWUhhH06NQl56ji8F7AhOlVjt3U\nikKiGNa8tj4T+tESmw9gVMVJafFBAWHNKOL9Bso0SqA1QLi0ckne5seanSqp\nmoaqOWN2DsLXYmXiDspDgm7/i+JqePwiDiG0+9J+6Npw0HpwUSLbICc6DXsU\nj0iL/Cr4X7i+zmonh1Vcc9Sp23FZWEwIpqrqddPZSfMvTdnuaXPOg7SHFjgd\nETVH+CmSWAfRTUG18meEVZpKciPRjBsIQGwhJl/idorJxknmn3Ehgd0XRSWC\n7e9ChodChrE1Vipd1SeM66Lvja1Vn/zQiIWBA9tO9Sh1mOa8YeRdK9mmShOf\nXruajnhyv42c/dtrwKXwe9ctBmPvYSqsGudFkJVwsMnvfSdJpVB7l6dh9Y3b\nUDTA\r\n=MwoP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.7ad038e1d.0_1605813463710_0.5246332304162489","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/theme","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.a41527604.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d9a61fcba0142f992ebaf07acbb6040319c60fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.a41527604.0.tgz","fileCount":39,"integrity":"sha512-k3n2X4e4BMoiEcKyYJl2n871+CT4IJiRrWQpVg4Wik8zN+T8uT0+Zomy02tfr+zRuHh66EL/wzsmCctU8YM+0g==","signatures":[{"sig":"MEUCIQCafFn3EifGsHkkmOhPYp5yZMT9Eccu8IHJmxcTMGZsXgIgTxF0XjZYVUZQAKhzSohU/8R6NuvyPWSslsp/GFpt3Fc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts6WCRA9TVsSAnZWagAAGWIP/ia+zUJbtzcRhcU+ytbT\nyWfY5GVq/+SMJ2wYUJjDLlpovNnmjByT+455qkJRfXA6fd6wgAmXfsZ3R57n\nh+2Bi54T08XoLXW00VMsXKb0VpQyAweVhSWeR7sh7uasDNnrYkuDBS9XlwRb\nqbhV9/iErIM1xW1rwZxzWSqHgQEBQNo98TrLaWvRV2fIZ4NJS4TrRY/D8KMO\niJ40AjlJGP8kQ/j/wI/RAt1ddSHt6EL3WsUbc3fgfnw4MGhbX3nQv5npF9nK\nGc6EjVp+TND6Mdm3Xk6+Dida3bOj37uRrZCLWzafdnmXFl0p+USYzYIwNbuo\n8TrjrRyRoFCH+egF8WFMrqg2BLDrCAarbpa4H89FnYgE/JLiNUpdh+NVd4QL\nsmHaOCAz+4Uk+/q5ipQ3U1dlYulJt72ISIgmO6tq+wuU5/hzmlo0amCMjquF\ngCk+cWrk4EqJ2ehJdfV0Kmm6UyOh4HCdiXTPRUiaPuCVugA8Lb/qeeXVRPt0\nV5SldQMawQmQG17fY0hUvtUEGuWJiG+WdNboMdTw7+Eo95GkBzFj4mbnrokU\n6NUlbJ7yboUPAoomjhvqJOp4tJKkOXlH3R8w/LmVNZWbjOJ8b+UtaYDFXLZq\n4jZvRY1T3gwB1f/eaPeR6Dn+eKfRXKAdPuj50pxCJrjBNnwg9kFZFzVMwofH\n3hUm\r\n=RoNQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.a41527604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.a41527604.0_1605815958271_0.3777068652880724","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/theme","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56e8a23eb74cb643778b17540b6410ebaf978cbf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.7b0e2b377.0.tgz","fileCount":39,"integrity":"sha512-Qp64blP4mY+1ta7Dtn8bp080ia8cZSpLtmg0d6h1hC5TgN7WNdpbt4I8tMdr4PGYJLEFj/U9KKKPcgRcGhNUiw==","signatures":[{"sig":"MEQCIH2JmIu9gN/9lJfnI5/LKmZAEX6XGrwe2eT+HC/ABWvfAiBmcEBPpmBffvJedbAvOaW1NPzUO3PM3BVLm0w9ZEYmig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEk+CRA9TVsSAnZWagAAO3QP/iAZWLijn3nM4Svy/tc2\nig52tobaewnZTnLqtkenzO69C5j3WBIU4ZBTFu3O3pEwtK1ExZBBSXw9oPdx\nwbAgzaztE/d+F2hpcgT0xsG/fImNj50gaLM+o6reZFrIfO1Pyt7qBf3s8AAl\nZLQIUS7r/4dcndCA91fm7niEnspbLBVZY9VnDgZpjUZCNyfpOhxeBPewE+fm\nhd6cvlN5CMSWFbSpQKHuvIujR9WJFA/1i3oHPJVzRpF7lOt25gQceSBgguPa\nlIXGVUAxFA6dJV7RqmXDtgG0nWOoa1Mtk2An7hWZ6Rj9/jvDea6Z/71wDwkE\n+bwZjnta9hfOS/U7prw4X3GUeib3sw6WI2GX2JTIVxeQFh3a9PVUcHpJNdrV\n40iNNUFtHtJttDvM0JSkgEHq1FF9u4uoqs2CQM//9BOSemIlH+h3zMqLFqUM\nMJMrihtTRuU96XLN8+PAObMW/NF2vrK+lM2mcWu55moMEpuEZFET9dW/eHB6\n8mUtKrB+DPGdnv6+Iwxondm489+s1cRxZs73KHZfvYmIP4hLWoIZZ6xiI7HR\nzJVBBaqdDSc0WqQp6we6LaJtbCrdphPEzvHmlY0CRxYQiUWpHBOrzdxzbpD/\nFnT61Yb267iSlv3R+OH9MB3dSCwAMaN6DVqksJ7sHhf+HXI5hIXc9YhOJWft\nyl3A\r\n=AJKc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.7b0e2b377.0_1605912893219_0.7699150823461722","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/theme","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae12429f58760790b1f60a4e2fe51ab875c172fe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.c927a5d05.0.tgz","fileCount":39,"integrity":"sha512-MZWCPvpAJLMah1+FoMbNXJymg/pwykTRJSIYoBFWv+WZorCjjex544Z+eTkKHg1/csLWH9aMMyNGZEktHAVM5g==","signatures":[{"sig":"MEQCICo63tC9SjKVR1cAOTrFejyYZKtltRTCwrLyV5I8kOlaAiAuOcajU2Sug39RNBC6d42evJxLA8mCC1wws7L5iTvSHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBGjCRA9TVsSAnZWagAAXIgP/30PJOOhCn0Hs6Rgnrfv\n3A3uJ2G2ZlaX/UQb1d+Jr93agHN/qXjuv6y1OiIwBtGEIQG2MG3KJYNGGa/u\n4+1zx9oIn+nngzT/lUvT8NiBB9CQec9l6CZy6cm7vB2TXpwqu2BSmOSjnk4G\nediDTz7XXB6TtfAq+oZWKUS3RhLpmaYw5YnfR9pe/OpgCMqRmmnTd3ALjKiu\nCuUGaX6Jcdj/UAT+rVBYhsqHK85CrbUFzbzmNByVlIV5Y08femRP3UG9zwKZ\nA78RZM2hU/XbmTf/t0P3YpBpOZcUYT3g6dkBB8ONt1aQHBcRiDBEVpY4Mu//\n5Xv6Q9YkrolGkhBl2wia8L8SzqIJYGBCFoC6PhiQF7LR1UmrCneRvd8hzh4F\n2WpDY07abnmGYUvJU5qDes7wTrNUKZsa2IDMPNsI7HAU5PseZnYJBq6NgDV0\n9J1MEe0//wnJaxnzz0I1g9rl0tXb7o3VdgS5GJNNURgypz4lOjFz8vggAGWI\nzFX0PlVMOUaSbh7yQk9SvKN7duuP8+6sUdJge+9R9nZW38nwlqhA+uo7Ekrr\nuZXlAKqgPZKctP1/C6UkbwteQtJxpBlNq322kOjiiC9qmd7yvrsIkCQjwZJm\nV4fNir4DYJxGLgOVGO5ct/tsdseDWUo+E72OsXPB20AClbLbWMsHiogaLC/S\nSdK1\r\n=hPtF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.c927a5d05.0_1606160798424_0.9465795336280223","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/theme","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.b349b5185.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ecd3a0d78792f0ff66962083c47e3b63a8b4b94","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.b349b5185.0.tgz","fileCount":39,"integrity":"sha512-eMNPFxsPMe+ysrigBZwcd4uQ0a01qHdP1Dof/Wr3vGLAtN+E1eCWosSu6tA+icYQRxohu6rukpUdg/qXigwKJQ==","signatures":[{"sig":"MEUCIQDDmgbMJb1y3yAyJ69eQ8KtddvM0ra9IcFsgYeGRA56ZwIgA4b8A1TB+80yyuM4KCJVGDfcSKO6w11WhD1AV4DwI+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT31CRA9TVsSAnZWagAAH2sP/2kmrjAyE6gk3quJPKv4\nxSaOYd1utEGSV8citeS588VjU5uBcvhWJ0MJZKde9vc8be2XetvZgJe7mz4Q\nxVEqzWETLB4MX/QqqQxTfSPKwTZ9jk3TYuCsPa513omrt96yCKZXMMjbSG/S\nCn7PotXA+Q84/L1WV/jE7HQfP2jqBUKFI/4TKKsIRinkeQsq3Lam9xsXXrdN\n5VNIJjkyXdeb0kod5cyGXEKfvFbYJu/UOiShrihYryd5TVKoLnGHo049dV19\nenJGw4RxRpX8t8fSDcZjTc0DSTQ/tgc71ThnQhaCqutJ8cue2p4l2ktEaHh0\n37kZT6qm2nH25OY54f0lZUznrVH8SZLtdbFS3kUoesJNHN2pbowFf78kVvy4\nacK8yhu2Ou3RwDcWCHH9rPyRWCjQXPXhcbtr05sj/bFIeVGRHTOTsSY772S2\nc7S24k2YBB54jyKs0Uperw6UWhJcXZwAUN/qhAJQHZRM+fk+WKaQu6Smkfpn\nM0N9QVT8o0EhwQHaH8VuE+fzZKjUFRJO8mRZJpO1YkNI3eWNOVedOz1dGUlE\n+bg3GB5M3FFLVYXwZDfWjxl2CcJE9yQlfHLm5SdJKz1TV7fDCpKbB4/9BLD/\nIVv9jeDyVD/FE4OXVynohVGwvwMvneEJelhhSKDhb2nXwbc+pM/AweZoKdoA\nWqrM\r\n=CQit\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.b349b5185.0_1606237684506_0.4126141689614009","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/theme","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc5c15c791b4c566877917c9cf82ab0cc39c7a0a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.9083b7d61.0.tgz","fileCount":39,"integrity":"sha512-nOtimYQaJdurPU2EnTNWeFTIN9UN+9WTzSn0GjOK3upksr1QRMIsotgNYKUgsCX54ttW+35l59tELrvCWPSnDA==","signatures":[{"sig":"MEYCIQCY52A7moBVnNpcKuWvPhNFwk5GqwGNdWKwQFCCa/7WMwIhAOrPddGMsN20/zQhx4Xc0b8bvAkNjGOSGZVdis0nsfJe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXfQCRA9TVsSAnZWagAAqZcP/14D2fPIovUXG6QXBGU/\nRSixXIpZeQvxEUInGus7Qn+he17YwFBKDJS9o46EaceqS6wZrjKiZmcePCyi\nZtSqNEMPDW2XCCk82EBgYlXiG/ngL2YBWTU8qVmyV435QqzY1nrYqU9QP52a\nGkkMxzQv1xQz6eZbQinfdulXAF8bhDooZWDEVX4BiEaAwhGvHkECPMRtUmiw\neAQ8EYubWU/FzukirTq+p/F04WFLS4ItNDJBZW8fg/iH6ru9yOSCC3krvET6\nWe4IB9T10nGxu2tuapgFpZVe39rqIxUvuJDd/DpVeII1H3VcbLfJcw+yZkhH\nQh2dqwpAFqAndrqtsT2xOj1UY/HhnZqOnhKlhyQZCGwhseBbqoC6Ii+G0NV+\nB7q91DNIZEP4NnHzgaDIvn+9lwJkTU08sujgjiUTeKmCnyM8zWeBkF2+4uAJ\nUYSLj8FlMw7hmPiJiw8w88phO7ri4LA3I1ST4rlwYQjetbAf8VZQ9n0iNNP+\n4iR5q0hqTIMFI0q717WdcwSQ88oeSeZu5GySyE5l+Cre3xC27YMra+LQC3jJ\nz5utyWO+bPD6hf3LoUtcCUi8F7HqjXvilFRELdiEI0mh/HiDi8NTdkJQ1uJQ\nm7bgh0vxwtWpYT8khjgfSSLuq1c36OPL/TTCJwIjjd37LRHiPxVECXGEaXm6\nZD8+\r\n=qlp9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.9083b7d61.0_1606252496304_0.80387035197064","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/theme","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f902cb6ea0cca28e238cad241104bb5d2ddb7727","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.eff7b46ac.0.tgz","fileCount":39,"integrity":"sha512-kbvC79ScwlaxNHBmEDsw3b7dIqEa9NnlwVXY+i6vDxPknp7/jKF6qKfr5AgivoKKY9vh2tjNz6R168Ccx4fC1A==","signatures":[{"sig":"MEUCIDiEoc8KBlP9rw1qKSnxeaaieb4VsnuooNfUZyyFMAb3AiEA7P3W0FtMXAHGb5HyATEC6/MgvL+DjvKDhVM5BVtJ5hE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZeJCRA9TVsSAnZWagAAkPcP/1xp+JFE4PZsnXOKG9IB\neMY5cBWTjaE04KaQG1yBf5yV21ntekLAlgYYE4uapaaXWai65Rw3zOiA/RLP\nJJ8+gA4YROSRca0iYmHaLF82okn772z93B3RGZo9hSAAcudNjO8gbqpDusgO\ngDMnV1+yNQFs3wsAJZrg+omY9uiTGWWb2+vyPys3Q73kVkyOYKJk+4gHHslO\nVedt8nXi62XwtDD5RwAxEP8hjnksPYmbBGtROoNGdxf+MztRd5IkP1hPr9qh\n6KhGIu9rwMtNCgj88m//KGOFGxLL0Ah2V1iHnTVnPUbDHfCI17RTBrcgK9PV\nuieuD8TkYwsQsZrC1N1q68QFSyT1zZJTZESlWfHtbOahVe84LuCdMJ7LnehN\nMbRT8jPAcD3hJqLidU02iTMP8upvMB/D+Dz4IlgVBm3gqZvsvZxX9gNI67ti\noXWKoj+J+p9Wmf3Ffi4OPrcea6FCw5gKx0tzh4Ze8f+clasLfzqGPDSacQoa\nvZPMGMLUw1Wf8IBEjfoldac9uEXV+NJH/zx9xADOahzqP7v1Nb3oPwDEDbxI\nMO56Cb7kWM3P1FkDlkW+EXCnJ9yOqs/wwPYgBD84oQIemBSN2zZFSkM/Bpeq\nfNdOTwqYCBeDvA2ciA/WlxgSeHiYStAPAyMTVQTdY6CBysi5IXF5PN+25Y21\nbMAq\r\n=Sma1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.eff7b46ac.0_1606260616556_0.3604891410906663","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/theme","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15df191f1c356510d9d31b8c68efbee77f30f744","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.ae27b44b0.0.tgz","fileCount":39,"integrity":"sha512-ympT3DPzhjCPQD+SkTyPfOKMN3kxA9S+RQcmO+w9O2muUcpcs4FsdztRwVyQdvuK/kOul8Y3f5iQUNdLY55vwQ==","signatures":[{"sig":"MEYCIQCbEp+FB6qYNgebAXnUjhd2PKHA1TqBdR7/yU6f+3vmIQIhAIBhlcnPLfZXdk0xmfEIexVOTMLnLIUGG7dJYkAyaGVh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnjzCRA9TVsSAnZWagAA8sAP/Rffs/UDfIrXPa8jHF7r\nZnlD3vMVQrucwUeFWTvKLEUHBeYGjEOBRjdJDMOaFlUvKJ/vkAIo/0Gy0MTJ\nr9LynLJfj8eEYfiReEhdR/olB7nBtjGBndfmMGqYlVcWhOLRvLynquBIGhwo\nH/G9jb1xD4OfJ3mKwbNY/1kWFaCjrSem/p93q7JCKOzDG9i5f6EKHYPXxY0m\ndsTLeDkf5HEJcnMvpr+9+LXgS0PquVtHOt16OpnHTGzmUXMhCnlo89jVkQTK\nxjCBe+GvXqygQIrNavf3kIHiKUrhZnOTrsmEJrGHJaD0bBNRSiSocOsBme8t\ny6udcQ9P1GaKFG4E59EYsoRZ2p+GtDALkvuqsruQJhjBi7xB5+eEULDQU2uq\n7XHfwPeNiKbNQS5/PGaeVQ6FU6/HpEz0om0J/u3+NoV6AqzRWR7hObZD7dtA\nFfYGFNjfmVeg8QIKifXrNV5StJCw3sMGCE6di/iBCfRn+YF5/2FY6x7vuOaQ\nM2qhiJDLgNPZW3Fgkoo6V5zQmuZC1ilYOltXxb61P+Hy90gfRGjcIkSt2yPo\nr71QZqadS4q04l/lZ8qyj5G91V2pCHslWdgEaQvcr+TGqzbjb/1VJEDgk7wr\nWifOxWzgUtqedVs9x4WjrTM9mN+Qwcbe/hn+vic6F8RUimbtetb7dXOlloTj\nJ2od\r\n=ybQ5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.ae27b44b0.0_1606318322667_0.8506289886288019","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/theme","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2881d90beae527e34b94e5fc6b7fbd34c62ae2d0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.2fbba2554.0.tgz","fileCount":39,"integrity":"sha512-d53IV+cwDzw8Rf4S1+vk6sV8FJoPStDxNfm+59D5/eFs0CUFw42W4/4x06Oorz+39GIldwnAI+bv6UPaL/braw==","signatures":[{"sig":"MEYCIQDEhRijSZpDoxX/uKCEBWaLNTJ/8LpKAp+frzSh2fKcZgIhAPB89290Em3h0MMHnOeeUdcqdNC4gHrPyBixcDwNQmfr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS5dCRA9TVsSAnZWagAAh0YP/0yEvTLTRNwxw0lZHxpH\nfhTG5GeVbE7nKosC/+Kps9v0H5oDxDinvqJw8hQPeFVL1LRh1S6GSyVhtfAT\noGyTG3utbQZgK6mIVRhsaOJbQTejp7lvwpclwmmuAOvXr0nPy7/870V4dJac\nAA4se701gEYaLPdQQ1kd5sI3GLPYOM3jPPxB1vgxFomk0n3FFYQXVckwCo1e\nEX+gI0fWA2ELBsWQNge76XXlB+58xJmdPiAj9OejFmn0/HK1CoLzzzIDLqSf\n7B3209ATaB/yD5J1XmkiXZL4JSuwqECAWHnA7j6sGm1OD8TbP+trBJV5OPQA\nv+Q14x0Dz1DRe/4VdlM+sMTYyYYH5T+stOECWzrIdSaKCDFDVqc6AZUmSE9S\nLVMq6+0j7F3Y+Tdg+s3zr+Pto76zyT90vr3o5nhgwLlcZdIHToJRKEkPuPMj\n2rzZwBLv/ybBv1tdA7D2SeNdxUUJtl/TVVArANLMfUc4+L3/PJfl97hLjJYe\nigRKKhu5oqO78qg0CEKhfhxuGrTjZ3CYpEAZCdvefuQj5fdrrbsGkwEzkECE\n6lkUYydnqLgH665vuYJ21I+ObKvumJlZtuNoR7ifr2yR4s4LYxWnZCdcgnCf\nEgAsER5JzSNxsWFW4fFCD8vR1jbBMX+3bpb1JHcNrCgX6/m/1qxpaGtQswNa\nptM2\r\n=8mio\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.2fbba2554.0_1606757980931_0.12385872076330728","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/theme","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"312f8c544a6399c40a762970abb2aed078c02071","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.6d8574fe1.0.tgz","fileCount":39,"integrity":"sha512-QxZfb9cz2sMwBSZGjN0nPHGMYUtegzWyYU/oZefPH1bJrUhfvMS7ChI27kMtjB29xSw2TjuPDnSTve0IesGHmg==","signatures":[{"sig":"MEUCIBVeBOwqHlXsKOX8g6l6bFVVS5jgbUrHPVR3Zep3dBWQAiEA+BFRkK6Q/rR9/TJkijR+Yk18Pnkt1eEmzt8qH2N2IDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTD2CRA9TVsSAnZWagAAUEAP/jW8x8dQXNof2HgbsmIx\nRbOkPlrW6kYO5OxGHGEV2BZhYvzfHW1pKUvM9oYHogRU97Ga9R3N64cJ5JRe\n6wAlJzqQDRi//xynQM89trUbxfYQJUe9EojYheiIBlQli3GYHIQGqMzpeJK2\nTFac3YmfKfQXvyEyZa0YBYiQCJmzCgpBO8m1PAmja9RatArz9xOvcNWalN0Z\nb2GUlNp14ALSPlfygs3VWvcPJvXcTrPryLEwcxbbFIDmaz1CBJqT5AD36njO\nqI+0UHOHxMHcf03wdetGk0hvlLPpCf18xk1JclxFdP+mju8nkFh/pMqRmkPP\nUbsFnZre1/wnoamXRBrNXEQERKr6fITaJ60HJ7BXlmUsptk4EeG+PWBVtL6R\nPYFvGIM0CS0o4F9MM/tBY8SC46oBYem8jwDtDcSH+Ksl+Y0RPUIxSNlaEMof\nbdzNFvm+OX0Skhkdyv7JdrzqfjSnJgLMpURqa8vksSs7hxCe7rGjOzlOuIrN\ndlHOjMEsYbvIeNTKyhj0C/7Y2Cy5LgKNwomqm7C/cQA9N10cSaG1y02wU8qZ\nAlI+1Wp5Yhabp3yF4T7DzVai6pkdQAreBSFKK3HZNl4P050HVd19mOUdjyXq\n73J9G1bYBG1gMeeyU8r6n9nTwoK7eX915nNXq34PDZqCyTUIsHbGk3C96hUH\n8ym4\r\n=fHOq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.6d8574fe1.0_1606758646271_0.7285512051454617","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/theme","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4637756356975bc832853f45fdc86b2bf99fa6ea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.fd22355f7.0.tgz","fileCount":39,"integrity":"sha512-2Upy8w4C9DZCUWZjnVE/9UTPG81pl5+yFkF3iFAK5f2R6YOpsQkiVwEBOPu4CZFUonpp87MPtjI3mwfRmkrRtQ==","signatures":[{"sig":"MEUCIEWcJgfcD8kGeZCfJYj9//9cfbLl1LI7mc7gi4K2ML/vAiEA8Y5R0QfBhzK55yejvmgrldlAQiNW/E3okVvY+tLk2qc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXktCRA9TVsSAnZWagAAzYIP/2sz1v3QWMlgg0bBrZad\nbhcADBQhTUjtTk3Ofqw1f29N5l9QiN1te4/VCFCM9ofveQKGOEM2DAVLeoWA\nRviJDJs3ztAakVOLgrO6MZyGQCFx3pSQwPP3M/Pft2lSCx+ZIN3QjBx4Jo+f\nkVOuDZ3OdSzCzrdm6WgiODRVJc5sBO3BkGof7Kt5y2Gig333OM0kx9Ky485o\nD6BA9LGm6bJPeD11G6Y/pnaTiT44ExQxSLSn+lLKs9FfPgUOBSd0OD1jxQJH\ncLySFuaudDA4/KNvI1FRK0gYhhxUf9yCdss0WOPwCtRb5iuLWK7NkaYeVQY7\nT97XC/ziS5JaT13lgxuf3S1KgThkWcAs6klKtjW5z21GKp4HzPf9vs3xeNzP\nALVovc75s/a5qNizWMvhnPgS3nnqZVyGWGx4WeXJBxHaalxdXra39dtTtsnf\nuUgbESaVqC1xTm8IJHX6gLgba7lhwckOgLVGdoWj/J7ZHJyqvjbnwrDvL7Ny\nNEgFRs9vkkL1tGhGyR5tJqz2A4SzSOlcejLS93cwNmmR4DGyNwX0VivqYs0D\nnsyyH8qG5QFT/L2nN2VNXqzeTUVWIbO+zzqSU1BRtdmuHh+NYH3MUdYkj1M+\nd2CQrrlhkTzPUh4OzMXJ2A+eG+ImUVxeWKuezauUYPZ4mL29XKh+ZVsPCvur\n/6a4\r\n=DOOv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.fd22355f7.0_1606777132573_0.6016685347258197","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/theme","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45f73eddfa78629a9cd55f86f90b389ff45f4e23","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.c4ab98722.0.tgz","fileCount":39,"integrity":"sha512-KAAPnxgE1XPfJvAGZidCAegNVu47aOaTi6C1D3zwYZAT0FoaOxuTVfLULCD3po7et9rR6CqIWRd1wTVRtWXGsQ==","signatures":[{"sig":"MEUCIQCOp+Xm4gB8ZhCiIxYDjD+FlFdVZmjE0xNZ0bkVDiwx3AIgQb9r/3WYWzCijyDYdzlOf405Sim+nozzeMrysntBOF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuYWCRA9TVsSAnZWagAAW3MQAJQmk0tRi3vYTucm9NCA\n7A8VdYzA2uXMPOeESveNAdpHSTplGJYV9UnIAQg2izZhXumv6rjapqTyxO+M\n+8Gk3SpcO9Aibg2p7LHMMhZ/ikC+LxwCongHOnPnuqb1SggPppsBHeBC8aN0\nFzizxW2Js1ECDuzY4UqxpGfUlCbZc9it0Nk5oeXLCol0Vi128mqe1wM3z/It\naMsp8F2ZNxVUcSvi33G32YxiapNxp7BG98nwVRyUi9Til0+cjQE8yEk3FpNh\nnPfMjkx+vOHHoUF9SFyBwTudijGPxRVzuvXgkjX7rT8X5YuyJqtW2tPPGgBn\n9JWO02OOKbNad2RtW5+KBG8Ju/qasxKyBn+HxbEAT1AiygsRKqkpU92h+4Dq\nCWzsaUEoVjYzZrB6Jqax+iPsJRFl8Fi2htryVfUem0YvOgw7XR5XeifUDvEx\nJz4Vr88JHnZ+ktAo9ih3ntDAErPvAYUX4WhZfBFvpErr50hv5l4t/m8RiUPH\n/sTh+MKUQYlRLtpmGlFJu0Hh8IZ7+oyoSmTuw7b1d0DelMfngm7HMxFikYx3\nnvF7MzSNmUCpsI49rBrpt9pNk+u9KHeiI8EI0pTVbw811zh1T2geweLvKUlQ\nCPIbWvzUfbf6eGBp6ehhe0TtWAOiKOjIO7cqvyor6ZadduTlFIVdFXnZqXZJ\nmk29\r\n=KBh4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.c4ab98722.0_1606870549589_0.26377167924612976","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/theme","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.977585650.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c96f4356f67b6d6e47a97689236f7ef5e30cb13c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.977585650.0.tgz","fileCount":39,"integrity":"sha512-fd48AE+FEon50dinDMHYFWYMI68ivtF0Q6cT4QvEMN11ecwGX/rGFEwbFVaJbmIkkNOhQ4cGkX6wKTH+gwyvMg==","signatures":[{"sig":"MEQCIHezHLkBstY6YZBZ3P/jUu6KvZnMUiEkx5caUVBMNNz8AiAhGnNdu4LowGurExVzwxb+H1Eaw+Tf5NVKRlWfvPeQpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6eLCRA9TVsSAnZWagAA8CAP/0wNTuUp/5HS9bapegCy\nuY941Omg2qNn7BJRLZZLiS8d8ARgOtRIDmmjslDEZBpI0AOgbWr0mWv9yoEm\nPYKfJXPRLkZVIpEUEre+WsGOO6CBccjKA48V7IJM9T26B+M/lpl7W4MrKZTZ\neV2sDq+vX+I5FqSFIBq0vLvm0I3O35Lbr4aXyYxYguxtA3qGlnK9wT/l9hrt\nY10rMgtEZkpCJODp8lY2r8l5UXIwM9XxUCkPK2bzE5nI6CNNVYOcCtwXNt1h\nVO4On89Kd4Wl3xQxdvyGSRZiWaArkyb4B8ZwbdQMAOdvU/5FahIrga9T2Kj8\nX+Xzf+HpdXHYtaIG9JWZXqZIRUPnFzdzfB+qcBmVa+mpDkIuxHKcV87Usil3\nrKZq8ScbSYlPkYX9RabN9paufNStIsJAkKCbvUajGmHDnVOAAipqqf6bqpdE\nR3iRXzAyvb2OFgF/9T1rmE4czF2ro5fzY6FsmZYDQ8WWWrewi1jKvWP4LweS\nkb9mH0mSRAuyn3opXYSIx9Y9E2uxupJ9XPXPESFUeoTCjc4aTMbRzBisaU0h\n2SN06ASS0vQvniMcV+Xi3nBzMwNjcsZSozFLUMYHlBZYqVaP/DEsRz2vbZiM\nm3USARLTGcZPkhL+/iX4skpj2ejoBlQyJHKvr74hibNcbYuUbpEsUb8jfaTM\n5SPg\r\n=Lb4W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.977585650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.977585650.0_1606920074774_0.17960812193337605","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/theme","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20f0231fb381ca15c7dadca2bd1d63eb1dada05d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":39,"integrity":"sha512-Uq6qq4lufo79ZQSFRbkfAXxpT8h2Hh9wfDgWHxmVR6v8sAUjrOBy7Zo1a9ZBMKIs0E8coYD+VKnkcgz4g7mp9A==","signatures":[{"sig":"MEUCIQD8omCXoViz0uoMcJHBdyQgQkHTJMPtlwKnBqup6LVO2wIgH9BpzlYgIrQj/YkMnPkf8gzww4Coab3cwx3Fe2s2HSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6lUCRA9TVsSAnZWagAAduYQAIzRVPoWIU+UZHF/hXTc\n/EJcTwUAHnBRJxO82tBGjtluGfUjYXkjQgh0u2FXPq7zTPoDscgDG8HakkEw\nW4+7nHZ9vBaUIfomaSBibdZdMw1RO/Mm0akkiTGmUZ4AK/bPdHxe2VQQm0o1\nsQnA/DsJkK6wj3dPYvgfCtIWiaef+ZBpzagfGkX10/f6u8YcWUnXWR8BRe7E\ndRS1XVuT5J6syq0uhBNOon0fDpP5BfrCEPas9qoA5VwumOllahzOPEDPfLFc\nvBfT87HYqhfp0KRy+Qd+XEA3WXW5LT0yby7K56MB9lURrFO00RZboSMF1OgJ\nyM+De15kOQ6CpWW5wjHG5lLBh6/r3lGnfCJdXoFHZD8CN2oE4TSUZ+aD6ZfE\nMZuOC7nvxLqt3R2CefB+uA9sYOL/Vs3TTad0MIi5c1W1g/T2Kva7wBNh5H2b\nyQvSmAUB90rCNIVMJtKYxS+ixNQGo6+MXCLqb5S6aUPf7J2QYncNNM60W0+n\naR5JHdRSXCoR9z5cv8pEAP5xqDypObYPpmNvr6mdEcPC2MgiodpM3QgBsr98\nyAPlJo30imu7oSGAR3BW5IYz+RbhjUa8oDZ76QqZ+MzJctI6YDFAvddBlsSa\nd2lasG2MmtSVxh+9FMk8S7Olzqx3h7ImTjJDiXnqcPF0UZ9SZLsoLq8eG/at\nRwBx\r\n=qxKF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.c7edfc7b6.0_1606920531821_0.898752885889109","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/theme","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.4f3347306.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4b788917564d97b1dcc8265b8a1d477c15d714d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.4f3347306.0.tgz","fileCount":39,"integrity":"sha512-VIj8desPsF1gXCVpIHt2NmjvAaV1orhISXuw0wxnuRkwgXkLIA/rbVHwvNDXK2pdVI2986j9WSBu2QLYu1J0Yw==","signatures":[{"sig":"MEYCIQCDWWlhMxO6Wn3S+Qyw1uxeHrW6QD8LW3jMs2oygciSGwIhALv2xgAGqsYbITG5aoHBzrbU21s37WiyRY8jLAFD9KY5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":156734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx62JCRA9TVsSAnZWagAAze8QAIpfg0Qx8HXoDEV1MPAF\ngrj/70mSwTs49yHzLaSCez4KbDDR/Pcp3XtLJPHEyJQkFuk++Nng1nJ8Sctp\nuDXZBa6tPLOhDnMbmGSjhxKuRq6FtdasJo4sk4EDadMTU1L6hGjshO7qNBvR\nGusYJoh3zEiFIyk7AAvPw6v3pGvjzLGyx7Iry3c06YCnrEhaeIdnqQaI00kC\n+Rq3TAQBKQCB0qAQwWg8L/4HMHGUX/hctiZinSML2/oFelx6jMTeK54GS+HW\nq9KBQlHm1qmzxCefF98QYZXt0pAYtRv98vKLV2uOppUrPPcuhONbdTN3ZaxJ\nU9k/CRUWB3MZfKflFm1peL+fDnFecbU6gMxuwB6lJsm0KFUTDFA3dPSvAOeS\nbpXkRpBlxt84IaeYIANorTF1Dp+e6Woo0LUNbo+P17lAPKU5IPnPDJAFqecz\nfqMqBUP2d861rfLXaERpPdDZ++sBXIyq7MuGlKCBuwWPIRoFDHIcLjtOsftW\nPb/qSNfJ7Ouob9hJvYrN/oTjSWXzqvdEw3bR/pQnehjOFWViSJ1TY0XHyOrA\nIGr6lRklmD1+5hkpebl9f7as26sh/cPxIhvaEUXXn1IcETStBKbn0Vt5levK\nEB8g+7CXaVrq3w9A8wgq3aJK8dDJ5LpsqarJ2VESh5aoLaTmA7+QjUXCIQLV\nCbzk\r\n=43Am\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.4f3347306.0_1606921608757_0.3360424835875","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/theme","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"786bfc0a322988892ff79570e607cb19f36cf03a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.37fbae10d.0.tgz","fileCount":39,"integrity":"sha512-ujLCYKfo3dqkhljJqeYAfZPrn/dPqEn0WH1iA/OuyKb3HtbfrVj/utJ+moaKQ7FY4ehUEcxrZWp3BHCtMdTXew==","signatures":[{"sig":"MEQCIGG0+bne2kVpy6F/UwvJQHvbdIadkHsjFWeqvNOacMQvAiB2xs8gxoQXMLUPXC1nQmMvt6g46pDVKzk/5UkbQo+kqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9nQCRA9TVsSAnZWagAAlAoP/1j4nnyqXhbLaCXQ5POy\nBLIBlnAgNcsaIhFFcfqVllbR4HP13mvH7qHA0JzsIRYly6wVA2JIKAYZCckb\naxKKdlT9pCn6KVYVKVx/knCpXg+q8KFrVyqLUF4qALq8KbcqdHrzcOPaIw7t\n41FRFcw3Mo6XgOd+p5D4KBxc5KplUi7LKzLOb4kfpFZf+6UCaPR2YdUV9vRf\n7baKmOuE20O9vkm4VE9PoHJQxaP8gK3PVDN7wQf5nRvy7JyYLRbX9AyaMwmU\nUVzFh8Jm9igi5p5AY968p3DRQCmSfcUqi4bVop2NWRzLJ070kQPvwy6EuRdk\nGN0dRWO5ut+QznEIDqG6926q6SOMmTYwci8pYu6EnrLR7TfWp4qeYjslUvLY\nL9TgidxCwqCJbbhic6AF0w2g7r5jBXqSwZy9Ew4QLp/TicwHWNy0W8JCbdPy\nSlNwauCLx4v1IUTAOAEv0/2g5EEisiqpmhdygwWauXqLfFg9su5yonlFf4bg\nka9XcgvLaZ8keSStu6q/JKqU0YVdDBC4hIUU/95OEZGUAWqsLYnhMLO131BQ\nUL6sBQAdikEBkoBdKEIikDInmlsr3YKKO9xvB2y+rJLqvdsV7XcOTzjY4tWH\nCN0v1G7JWMNXYe9tCnDP1N3VLLHaLYPhilQxnN/BAtTk0tBH0QRQ6g9Vieo+\ndzqP\r\n=FjYG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.37fbae10d.0_1606932944200_0.2975940421661505","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/theme","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"610e8d9ec51b198762600ffd8340b43588a5fd75","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.11da3c0db.0.tgz","fileCount":39,"integrity":"sha512-jE4roYlR4ezD/GVIzhD+9pIJtTG0xdQm+v0c6c9IAJSmBdSwc/r5GXdgX6vKN8VZgHaHx+0d43ORRKtR3SQaBw==","signatures":[{"sig":"MEQCIAUiEGwMCsMdQYe2lhj52tE4o6mpDtjm/KESLvU1DktGAiAx9aiTyyaTuM8PzhBbX5c0VjcZ/NwubT8qPbJh+p2vcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/dVCRA9TVsSAnZWagAA8xoP/3gTfTlpKZPqzKZ3dju7\nreoVgED2WVyIqdEY6LroGcGuTh7pn0Z05o11yYbSfEwgomNmglmHGnm59XNu\nD2a05jidCoDhmG9JzXP9IUpR51LoTZum20f9GMS/WGwDdHmzeSbNZQrWzZ6E\nU3kXf66fyaXH0r2BNOz5Vzj2CCYEMl6h5KJBbZptnXQDyWZJKyowoKAMNqFf\n39xEunhP+FHSZKqjegp1BYk74wO2NAx/gP+HFPHy2rsora65mOYtnw03TsIc\nw87R0OXS/7q/PUqRWMiwekSgqe7IHhWcvqTJNKjOUQcSS9qsBy7VR+ZLhx92\ntBaMtFBYhtc28PoWUPj+eF8JbOco486c/tcigLOW+lmbVLgGVcVj6ReLrHiU\n5bKPsRtvhV1D/Z08IP7Xn329PIHihIIxysloGVFrimYN7dLDk1QrhaZEkagr\nU5msrYMI+dxTK4vcChXxlfu6gn3WUhrdK6bJuU0DzPNeQifNZuA0jbgqwLps\nOcQudbmGrIMqAX9n7gTbuYpAdtsSEjYbqg49atvAjyHvZe7Vc1pLXQcqLNui\ntN7cgMUqzxsIa5yq9SGVuHK2qUVf5sCiLjHgQMUP5l7Si/Cs7JXnAO/7W7k6\n3vCqKMptz7JFTAs5K/2avIFHsER9p43H/00SrxRYrh1lxIADTZ3N2GCcHlK1\n41BL\r\n=b5uV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.11da3c0db.0_1606940500608_0.030646717114188426","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/theme","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.489d4c219.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"630ebab79ab8497f0f6ee682edba584b4adf27e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.489d4c219.0.tgz","fileCount":39,"integrity":"sha512-91Sp3jEJjl8mD7UoG6G6JV6En2NMTDDN5/rrZ0bGLV2Jn68Eyk8UaT9Ia+t4WoKv1EeiEz28XkamTOCFNKsy7Q==","signatures":[{"sig":"MEYCIQDO9xfzjDZwLf1F/Zavx2kIbfWNOuVsta2jXuIC+PtFiAIhAJPJWzv4wTxaLCOrV+yZW+Nn9C9BSBakWpKU9ll2Iee3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQQ7CRA9TVsSAnZWagAAuZ8P/23NDAe5C7/APjy+BKZp\nOoujVrzX6m5IdmXkqAVltIha9WvsR1JAWyrdS2gK7UEYtB+fjCmtfWDHtgg0\nHNxcOl3mSKGp/xP0LE8u3aA5veKavQ4M8IKNFC7Lbj3dqZVL7L4VGSDwG13k\nZJfRzOaa/SF5CuPPCrVk217t4cJFX6kFk3Z82JlqbIcSNywRMqACUYQyy9mz\nYd9kRNoQTQFtZyvl6LOtG/79fEOaDPF0PHwOVlw9roNV62SaQg13IAP/E/rP\nAVdZyArl5gm/k/lh8XjemQUmaw8TNjkS+kXI/E1T3tKKTR3SzEWzf8dpu2L7\nei1gXXO4WXO7jDAwiZRKhGRtmlZAyPEmk7sbhj/XidS41Z8yaVtBy3c4p11H\njVr1scUx4m9771iAAl2QHYrDYatKCUlYTzGg8Q2hjOCjf4PQBraXritkR77H\nzfUbZaLBp0J0HekF2KY03fgYuaeSBZyAnwCNUlqpzMIogjAOxifyRMSccZQ9\nRxkFKArh+LkYSQEelkHRFgG9BX7t148PjxPGWtLeoiRJVf4wRF0MSTn2FuV8\nqpyOBDhDQFwbSAXSnafbG7jl4BDVT3Hmk44wexNNalW0aYibjoBLtVKDtMp7\n83VOrc73k++jYe7fgeCkXyw6huNnAkCok4JDOUGeLkgYyNUaJeRu5IfxFrO4\n+8lg\r\n=axdK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.489d4c219.0_1607009339178_0.94742978841814","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/theme","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6236785f808c50f43d08e1d509f8330b742d4d3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.6557a69d9.0.tgz","fileCount":39,"integrity":"sha512-Ik6I+UuE7Hsngcx1/vMpuAUNt1Zc9HfD6zUpnhcngpDbbJFMhI1xgkavx3v2cb4ZS84Xa5ofPO51UldbGaR6wQ==","signatures":[{"sig":"MEQCIDTqaWhCGhconLMiLGZtNYhb7av8RFXa2vK45MddgT6JAiB5zFJyW2bxfg7GWfGcyRZIuYb4ucQWohmQ4QNN1yTCOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQcBCRA9TVsSAnZWagAA5qgP/Aqa5eHrda+h46BYGUPj\nKIvoqXh2qqwUeL5lnEWoj0t4EyoWEe4m7j9ahscfY0h+Nc7JqmQZCd25BjEa\nlzl5fBu/901g1odgRB//PHZbqb4SBVU+Xk9KiO9bPaAH5nhnJqUqsmioljAA\nuFBECue5dKa4Q6ao45/Zcir7PGHWuinZcClHRdnlH4ASIy3pZNb8UDU48ilM\nygzXrqK268qjBQqeJmOCvSVwbvHS7jnuqTVOzlpteOjrG3hpvuX25DjGdicC\nszccm/naoSiisgfOm4AuOfMpUbXkYVnxA5zYFHBwZ/ouepi8EdNKVj/0uynH\ng7/C87njD9rY+PkEcm/LvGE2YpIwP6gHnHdK8sVCe/+JXf7VsINSd5F+3OFI\nzUNhcIDYf3X2maivvwoeXAfAEV5FMklJnIzhnJEWjZd//niLgGuIMV5J3Yg+\nF2sSBI2etB2lIPjGg+lEYNUr15ZJJH6teEJuYxY1NtNR+MaD/egzB6gJpia4\nSJtcfaNaFeyYXedjCvfraR5IJxYdh2EDyXtld89LsDp+hCj6CVdOsQtF/IjS\nKO3TUThx71V9nXpz+HsfgLWyjN2LAD+End3pFyPksIIQkbEUyiBHJDs7fXc4\nIC4cVM/A+S2cL5YQKbsixzNVthBc3Ya43h6+ijlndGjBaEWSS1RwZjEgv3Jp\n7deL\r\n=lD4x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.6557a69d9.0_1607010049447_0.6229375739029563","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/theme","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b074e3ac7664a4e590a590cd61c75ab8c65439a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":39,"integrity":"sha512-xaHdig06GT9amuyTjdS+4C9EYFEfPdFbFP081XDW4yRzJBgeKIxEy1UTbPXdgbKtzQh7C69waJkDAGPkkVxm9g==","signatures":[{"sig":"MEYCIQCoQ//EmuuXeFEuKWFCS7foagC3v4DQz/w82PsN7k6OrgIhAOzUqfhLt8nuLV1q/HFrhyqyKEO8t8hsdGhi7RJOrgvc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQrpCRA9TVsSAnZWagAAvEQP/0R/IpheoMOOX+5NdAC5\nP4fVt9V2xyKvPaJCLsawNFJZoUiNba/p7q4CcqxNq6obb9r58g8KaVTs6Eyy\nnGQWpG+ur8aqJcPzm4GQTbxAN0CPeKM7tKgJ/Qd4YhTgzwmelwTgU7Xpo7nz\nZw+wV5ndqGxP90oxwyfsvKFSFENi8rPiA+bYppKIJH6susL+DdksMuyE2Irf\nkoQC4M5iPCcT+f5nAXAzFcVaYrWqMMUgsf9RMtAFK80K0F6k4pROmeKiev8B\nsXt/Ez04+LghEL/L9XIWczxXNLcRUZiH0UomwuPXu4eHfsFejXzQL7lxakFE\nYP9Jh99lqOTHRA4eDrMAO316ITys4/kDEufnOCtCORs01yAEhrdWQcHBRULw\nVn5/iMLTuNZr9aa6McNzMCPJDcslpQtqJr/t8Q5EIsQFlvpCuS3lBsA78Z04\nWeVL2DwKGaBEVgWIjeJDhpUu/O0nIyM5di/RTtYulZi16a+a/RhwmORjtaNR\nqlGnLdKBZJoMgUrqSX4JoW1ozHBXrFkGd7GCVDWZ0DCH18nit9wIDoDp/l4d\nC/VX9lwv+EWY/wUJ8IL76Ljdw/XjvaTzYeOLlIhMefiMf+3Ss8SFu9W9b7mw\nNNwOvhcmy8QFL0WYnrLlnpcJd/rMYgRA3e1IAf2l74CRa9JXoaI+nBy6mwj6\nC3On\r\n=2VeY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.4ea1b7c69.0_1607011049320_0.11078104548654344","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/theme","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"438d53c5db0ebd6d2fa46a222b6a321250f5ab02","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":39,"integrity":"sha512-ZLXOieUDBDFgPKEYuVTlKTRY/cIaJAlxJq+aT6dNrll246LYZ4UrcfTahncn2fYaNLoWdYYdtb5D/DjC2v71Lg==","signatures":[{"sig":"MEUCIFxl2kMfpsmTyznxxljNAkiklOo7mRinicYcrpcyeriGAiEAsC8GfovYr90nyDp3bltmRhozxNVR2QqV/8xlL5mUaCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRm0CRA9TVsSAnZWagAAm7cP/2TwCnylODVmnUnH9irM\no0x9OoiP724RtPnHgPlVPNKGQpMxDytTwuIxEfvgQAsMC1Wp/k9iSsQNeHUQ\nWh1fD+jF6se9uVkDcOyBDlpBoYmtQo0lUVFuKT1DGN8zo8xJTydlyuXaK0vx\nLWocB+TrL6YAq321bVcRBCP1glbBOCUjYWP1zi64z3gvAnFh7jm929HPPInE\n6xl4TuLJI6a90FI28yd/V7R+JftGSg6lW46dJPjmizuFuK8tXWarp/wRGJwV\nXDr1pWJYVxrS5kehMqmq1FunccXOgv68F0h57l7B2yqI6Et3gBreXzsbPiWu\nd82DGHKQr+MBuL8heO6pTMHvOMB5tzJcSSGWVZI1aJ8zt56LDJECNGCQvXor\nC6i6rKQ7cM9UONNWjI2el+AtNfFkwFernqv+bPRnKQnPH4Mqma6f9MruH3jU\nt97OcOv/HmBkOWsIEvcTnxuS7zfBHumskft3yWJbVqVY3nXbc+M8ZcUXI3DY\nodgie6+gcQBowoj4NFTjNoDw3bmJUF/An6aLASZKVzIJ4Ut3u3ITSeQuvOaL\ny1nxYG0k5uzuGKuBGM1fThh+lKMqS4PW1+QaKIN8LvgH11j8Z4IvwwcepEoY\nnJb2m/PlMJgzMQetsJwLfPzplnCfr2HmuoWFypno1+6iYUy/XuLkmgnZseDa\nsMDN\r\n=QJVZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.eaeb78ce3.0_1607014836113_0.6848350415405586","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/theme","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d733dea8f762cc8e35969915dfb3b7359147d1e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.1c156d69d.0.tgz","fileCount":40,"integrity":"sha512-r1610TPwUplt4FHMk7cR06Oz1jU/G31wBIh4Frs/YIB0ZonVlI5cZdIkG0IFtNt9ZYWoDwfP/1nQBxdqrDPPhg==","signatures":[{"sig":"MEUCID2oGlu/GWWqPiaGUnp7XDI2yWICJzwIaCnF7dRVAoahAiEAhWUpycqLluZMVl8uOQnJDE9dB+R8Z7wKJLMCgYg6yU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU4QCRA9TVsSAnZWagAAKLcP/2Yt1WpwY6PEbTXT9igy\n7a00SJTyckExqrguStAdC3X4vee1mf6u9CoAg0TDdLVbPzpjkEsXBYlENbQ6\nV3WE4hvzid5G+t6Tw+nlFcmffsfMeN17/q6IWVbGczE+GF4IYF9qaqsLi4jk\nEfCKIYtW3HSqoNEvh4CxxmUI3nNHc5OhCe6QA02LGYABv2QLy2tPAfiUIPnc\n4z22UO6bp36M+gSlqEWwnQWJXxwf8IX6zY00WibQ3KMgC2u/f511tt8WKoDb\nRWP2Z0VTV3K2eq+0QyskYv6P+89Xyzt71MCcKNgqBSV2nH7cPKIUELEtTS81\nXbvEmUUE5cZ0jm3iGNkK51a+aV72fg1vZrwMP8lTLFxnTH+N3Kp1q/+/ep/R\ncvzZTY73x1wCWJc1IcmNPIadj3b8tBJxTv3T1hivXqeN94SospMe8NY3UhCQ\nimVSvXjySzckiBIa+xRXol8EmvEGdwFIoFEEu5+6ERvriCtcuivTHWN3/PoJ\n/Yq/P9JdzTedphGitiGfhmSZB8psnHKY0Hsav8b6DI9Xi0QFrv5zoInA0nDE\n0tO5EamsuanbmDGZQA9CypNFim6p9vWilbyWUQFDr/ZDgtKMMZAFraIbX0f2\nkr2R1wwEI8wnqzYqEcfqewZPFZ84+re1avkNysMK2GaRQQ+r0s8bsrC2Shv6\n6m/g\r\n=ttzA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.1c156d69d.0_1607028239727_0.8302746954601308","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/theme","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.832668d33.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"146965eb473c721dd9e5bf16fd7409e4e95a5fc6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.832668d33.0.tgz","fileCount":40,"integrity":"sha512-PJjI/+uDNZc5taRlgvcjL6tUVlAbtvpFCzVjxuOoQOrp04uzEsD+NXef/9Td4oCoMwusw0rwEHl57TXeTjuXVg==","signatures":[{"sig":"MEUCIBlrFdqrZKPfyqTeYwZa0gJT5DGj091y5EYydrcE0+mcAiEAy17GAYxg3e291CrcAKrTnaP27RfATD3/rRvhSJzxwdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynpYCRA9TVsSAnZWagAA3pgP/jZaPnVVLlthGdSxjBsm\nSaovhFpdnCTNNJOtHnzlV5ShGHMjYaYFtK/x8Bxz+YGrUA7Iy0wZdmq35F54\nOcHkKoPo4Rab7zzaOUhlcD6TS9iWbTWRMmXCqB7sO8liRJVUyFN3tn/kTrTm\nVHZUjzHORRNN6aiDGJhO5R1ATrd3BPHgqhbUMjh1zXtWTW54cKEuhJxM8mc6\nnlo/xnA1+u3SggvjKRADtw/1YJokBfGzTs84IyIZYtvnxZanb8HEZIcSkPCu\nabz3+eawtRhUbyRqACjKhnIWLLOYhnVm6o6qpbLn2dtgR8lJwU3ZYHaP4ve/\n5HAVpoGWRFYy76liZbPqQSEw8XdnwPuYXf4EZLQ/GWZCRT7/7ZWKBqxmgKpU\nL7NdWyj9e2/om9Xiq7AXQddblIE+awDGlJMbsMUEeIbTYbbh6MWYH/BxX9A7\nkjz6sEclgKn1GvysxNjlF6L+2dnbmQRh13mjgue5zP1cVBzwj0PUAma5+oUu\ndS0Nq4DqdIvZVCOXFIq0O/G56zBM9MfY8oyr5FKU/H/GwIbzJlZGtnV1b5bV\npXGk1/msq60gpCYz2rsPDAsP9HF5CsBQEB+4SSj1TwE+fsOYmR+z9QwFMrgG\nmWM6P+9jC5QZmlBp0P3+gEFpCvAW03vRD09BO4KgU4XcS0jGJTGPo0WUQOVY\nHDNI\r\n=Mqqe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.832668d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.832668d33.0_1607105111797_0.48181787810628607","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/theme","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.4321323e4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"040e1318844294aa917f6e760a8d0838c210d160","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.4321323e4.0.tgz","fileCount":40,"integrity":"sha512-vZ1ybSs5cocORqc4pwMDdxTa3C+K2DMU9PQgybYSdap9mXDYCSzVRxZIaVCbT/O/3mDKI/VCUHpXzdY7EErybg==","signatures":[{"sig":"MEUCIG2sLc8F4gYUX2egubMX6qGKNpGFmnCS9Uhnz1gta6rFAiEAtrAEjrNkqbexGWlGSjpWdglEDBesZw11qMnNic+gC0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhHVCRA9TVsSAnZWagAAteoP/353eM3M1yrq3r4nnrbA\nECcM+D7jrl1di2yh8impEvPo7Q5rMOBmgbVEJ+szh7yfaqVvRxNXnFZ8Y4eo\ni83SUkOXwGatY+KmlwC9ifPUbgEgYjlioCsBJxgk/ZMOaOSEYcAoMjqkTuVe\n8KUq3jb6xrEBxBwLCZiHQgwhX8U4U+MIHZwmumb1DjPe2o6s1NU0Kcvp1vYj\nBFRe74/8EGI6nbIUX8qzfYC9GtrjojjXStpi/DxebPnXW9MmH1aPgrXKmXjG\nUdhMiknOJDbDjweJasS0ohUFHpEUk00gBPxeZyDCfHxXRnjzYNy45GfK4zmI\nnTKBmDAlZlGc4XWfcz0zu0lZ6XG38M7wBpmV3BX0fE8b/GPMj9ppYcb2J1LU\neKVgsdM6aTR1SPpG7argAS8ikYf9/cLNKByEbAOKETf5EvOyNmrH3cUSQWkM\nwaeuRZIcUeOJms2qwq4JDDRX3ElyI9jGwW1ZAktfGj2nPrYnVFkzV0N8Lv3G\nyDN8Y5S+/CNv7NiZrGZsyyuMivYDc0CPnjNKdHb7jH1xxuOIkxrYMyYVN0kC\naB7kqBzasEdPgE0ECxO7023za8uxAYkPlygkeg7uG4Asn7TWXikQ7Ivj4pNr\nohNXq2LoEXfpRUuCYsBjl45Kw8G+4/lwc1xLWGiwfbSp/tuEPJ9o/0yIAydu\nRigR\r\n=sxK9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.4321323e4.0_1607340500565_0.5475814625885587","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/theme","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b894b85a85124ee34b49d1c0b519657274553aa2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.2d5f32d41.0.tgz","fileCount":40,"integrity":"sha512-3iL7YjZ5rpPmqiRDTqkyOfxrAtJv0Yefr868vgMggzp3v4Twf2VtOQYCoZDFt91t4kUDyHjEHrLdCq9PcOgCJg==","signatures":[{"sig":"MEUCIQC+w2ruUd1Jik5HR+BFnQAjibZIn5wWsGOTO48A+i16kgIgceb4Mh0ZGcuBy3e4rIam6F8tlFerfdsi7etCGilArkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzlsmCRA9TVsSAnZWagAA+vkP/1PjSW2xqN330KdGwb0U\n87osDWaG6bnEQ5JkgtsfrVWt/rT94d9tsXqNYp3VT3wKQZYQVoAHsiCAKuBC\nbJZjDjzsCFRH3X3AAeWBAU82XuRtvudjw6w0kzhmq5RW//7cI0ynwOqbMhKd\nViBUgvC6hMpDxEWc6PVgS8/VoCo2cxeqcNaCGpN+CjBOm9iFOdwNyV3a5REU\nA6OPdGJ32rb5e4cvgfpnZzBE3CtORz9vuP+aTYbwjBmECJdzYmTtteFGY1ad\nlEfAIYwUYdhOJy7xxb9RknQ4wG3FiLtZVcWVHC+T8XlZiZ9JOYbiBvHe6dvm\ngtDmjfa1zplvr8JFEOE8mH7YpcUyo2nzDV4lzvLomlLW6DtKtW4NV0mXPlQ3\nEDVwO5vybL729fgvWDIB+vaV51wPDsh1xQ0rZPJzF5KAiu71cmybaOzPuCy3\nFNamAtUxzUCkr6JWyjSa9k4+NbdH1KJfck5X7XyljICuDL5FYHl/T6xSpZ3c\n6kh7jT3pqMrVGQoMvdA6/h0bcwt/K9iXD2l50Nmr+z7c4QxeV5jAoDZI49hs\nRho2C3Q/+QD1zFm8tu+iehyX4QXJXoGlZ5tOWGfBc08X3zvDAl6lfrdaw4fb\nW6FmtueKKNRzZ0sT0U5y/FdTzOUtmOuXEs4VW2VP/aCBvWiNvn31NpMAylCB\nzWun\r\n=5E+K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.2d5f32d41.0_1607359269798_0.4700224025874986","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/theme","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.8239afc64.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ec3050bf1370b7df0126ec68bf4e6143b5c1a4b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.8239afc64.0.tgz","fileCount":40,"integrity":"sha512-dAYmiAnOdPyEpwkRQ4HgsIbJf60squ2Y55yqDqTc1eyxWLzgerD2vUvWy14WKeB76U74yauuP9cxRDXH4wIQzA==","signatures":[{"sig":"MEYCIQDvlIH5ZPZry+V5+clT5voOy0kIqEMk3eAaOo2zx+wx0AIhAIUklIdRMrgwtfY4tGBzXPvfpzrJM+DGud1wj8Kqaiyv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzocfCRA9TVsSAnZWagAAQTgP/0KqzJ+atQjOk0uTqiEm\nlKmAjZc/dmhQPtEbtPWjQvP6xr4hzpVAUWeHEagXZ1ng3uL10VeKKF2I/TyF\nqA+wBPmaKF8YtYFV02cbAElVYCmiXvB912D9Uh3PA04d405jbtyCVAs9Sb/l\nyLtBFeFhuuJZclyNkVOniYuie37WhMqx+eb/rFStiUCJRq4gz2s+DJVv/PAm\nv7p2OYhhcDhhY//DrfVhhzgTT/zdN5pnttt0i12Pw5VDsiiSNUXQ6rw3Wavw\nuSPbS6VjmFqbp5PW+J/nHsaQeXp35bXEsDUtPbJwCv8oVhZGIyBmeSRhfM3Q\n5e4+I0ZNHwK+D9Vk+Yp5pT7iSoJ9gXni9Bjam6QC1pen1n0A8tFYZB3Cmbtb\n4LSn5NxFukCIgTDyVvarVXQonafEF6Tc++nS4mhEnBLcNWS2JRYISxYgB5QF\nNHk8LBGDh4KcJC9BG1aLr5IW43pAUHCr278JupexEkmBWk89ZUR0n6MCEcKO\np1cfwopyNofY841tFLc0eksjrU2o2sfWt4zKD7B3/qcHXlnygDAd/qJSJm0y\n9u5OlFxytK+D1dKCUM0VIgaDe/3ydiWmKBiI50E1F64i9KrKT42cQIxj0+Y1\nyZD8suC1HC7rL8TJtK6Qu+Soz9+xHn0AgxS6/dliRGPHkjvTuwmzo4gyQucn\ncYoS\r\n=vJ7c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.8239afc64.0_1607370526728_0.9185799430254791","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/theme","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.6871336f1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d029c0ea84b1eb1d4d2c270b230c4ad8ea85a02b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.6871336f1.0.tgz","fileCount":40,"integrity":"sha512-B/fD7fxRyylQUIGWFuWQv+QV9AUyZnKCZcUUS4BPj38X6E9f4KVHQuEJjidsha1/DdLwjhUhF4qxAK1yxSJQ8w==","signatures":[{"sig":"MEUCIFFDfoWaYH6hlwOXHa7zpQlGSXJeC9d3jNB9LXEsDuzsAiEAynmjECTv5b4oSLyr1y6lqCy8Xf+zmR22PpWmfLk/q7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6MrCRA9TVsSAnZWagAAiXMP/RrnW6dbZVtUJPHEveIo\nmS/LNziUnVYrhH4cHPNXBriG9sFq0ZG1n2rBJi5Rx+PDx96wllGfz/PBEkB0\nUEGJdZs82lR7c5rPxGIVpg/yjhznAchbDV7lR66u92E2mom4HVUJtY8Y1dgz\n2HIB2whYRBBKIe5xjR7cRQ71k/xKM8Udcwk0fXaF7EkVrKW5iYzw2ceMME/w\nYmn5N3lAs0pPja7ziz4r2SEKV1X4OzJfO3u6X9+hHGbS8SsKI8i+v46yeUtt\nF9HrcRAOqIDYG5X7A/96eVbqDgVKqvbVfkMuE59eItLGcIpTTpTCJuo3DKVG\nW10RPWnafFPDjOq4BV2QpBf7GODO7TJ4YA8t4rC+zR9S2JWCpLI2Sz/MB2ve\nSCo+AYudZRWyyFFomr+zzyIbpFKxsyNXirE46o+5LCGIMmHFB3xMRAXDmac3\naWGjzoJrwKPFuwYpBLLjIUWzZclh4ktKawXzh4joONXVW/2ipzAElHlat9/3\n92U9dQuKmrvzVitdaV4VGvEExmSLXIWPouyyVVwjJNjzy+hyfF5A8WLzXuVr\ncFsK1R0VuFfxDiWXkntU7Ch1dSdVeZLdt1hyD1aUq3ZyqF7owQtCONLCM/BW\nKEdJTpim1FbXfxjkimeHs67qiREsbx59/UAC3hvCZgJNMCYkPcrKyeP94jrf\nRg4Z\r\n=x4aN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.6871336f1.0_1607443243404_0.18455891332403307","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/theme","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.9f718da94.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cd79c195721bee09481eb04486beb491c3ffcdd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.9f718da94.0.tgz","fileCount":40,"integrity":"sha512-OoIMjEStRYWBkw6OIV1Of4XfIw7y7WuxoY3Rj3FKFNfr+Z2Tg6kWn/UPTWPJe2v7CbOP+maw2aMbkgwXLCV/Pw==","signatures":[{"sig":"MEQCICpWg2bKLlGcKtAX+ZRuHzDsGjo8WkbgW5b0X/kmk2SJAiAwBHfcG+HQpVncWPV3OCLSkWGhAkpbAZAItk4LmDuGjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6XrCRA9TVsSAnZWagAAcVAP/AivTIshcQIEJNYoBtYJ\nn26OrAzJg+iOn2JWsBLEEWjNZh1mqiv4OVZEbCJ5j2b99dF+RFmZ/JmTTB5Z\nxICQyPnOA9n73amhCo2P4GSn+BiVCxjOEgjbP2gpLE06ocdsSD11/jSpB7wa\nExWofLYocqZfQBR2kHvF3UtMhRHW3gA1LcDIoNjxkCwNqfHkD15iSLnPipW8\nhCg+owFR9evdsJaSkqQtFkWAgqw3GOYzpN40DX6rd/Z8ShayO/wOKA5l11GW\nESIA/bJCisRYgSpwc/MLlagMZniSTvr6r/EUqAVKfCXRRTrGzSQugRt0hHOD\nIZx2dG12sTDt9ass+8FIfZKbt18LcLVHOfA4/ZZsn78f44t8zJnsaIWOkBhM\naOriuJjrf6YQIr+slNe0qtLqZ4+ZwmLgClc7zF4tBBDQaGG6lQKaDtxc60V+\n8B9heA1nGhBPJ92W+rRDSsShypSQqqWQOLqdrd/1BDliywQvRwthURknygsr\nCLR02qv45PaO/vbH/jnBk4hXfqVupqRsf7PPQZFx62wg2dTIPMUegX6kcE5O\nlkCUbOoH/T+FEzuIVbDpJ50IS22P1g/+N9RHILp2IcSdlkxz+QhuUKd33RAH\nXJf5Aiz2ltFz0P+yglmjN5PFWEwwfC6F5LC0kZbxCOl+ZYZKvkv09lbKK4AI\niUqz\r\n=WMiQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.9f718da94.0_1607443947322_0.5362342828793651","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/theme","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"507481f812405af067ebc926d0acc391965100d5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.1fccb1418.0.tgz","fileCount":40,"integrity":"sha512-wZwtBmLwmL0+yCoppYEIBT+dz9Gu6gAGqwhZ38v3zQecFUGDi7+1hd37V/CTNG/1rTt06Ad0hrU+BalABQJrng==","signatures":[{"sig":"MEUCIGgDN0q1dIFjmdNGHkjIqSE1upeHIKHSJNNSrJJeLhBUAiEAnjvGUMr+uSMqnecb+MZ0Nm9bjahtXYZogKQEWvDTFvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6l3CRA9TVsSAnZWagAANJsP/2ondyGS+ZE+7Uikg9LI\ntcw/nJuF5XMPvyeAn6y79wuEwR7HdICmw/0MVDgxewZ2C91bKNk8RKnjnSCN\nvfujxc54U4JJrK0bRePYEX8S7RZh9+TT2oeXxdUTjWBgYuJRiUD6XgtVzOLv\nhbm/I7vuul45czNzEFK2MafuWr9cV+60xXlSOxxJdmPdL4yGWT6gZWCDKIxV\nS9IKRyaI8uP1/t6JwaZ1F6LeZzaR42i1l3PiauK20cd7gg1vMbdDkg/BsqbV\nWbwRjUpCCcmesMaMjSD/W9RHyDaE37PrvRbvIlXEeWT90rS5FfFo+5W33x6/\nwdiqhhuVrsDGIMhuI+rAvGjFtRQXtaHgD392c3SD8Hr1917GInxsCSk/L1h+\nBmSoTSeth6AYku+49Grm6g+tO358aZa0FND/rE3NlpMTLZKR4k3C91WZAaty\nKL5aXpSSGV1hWxMsbl3QpGhYRMbL+Vj7KuRQ1yBP9yhjfbCu7/sahN0qbGU6\n8IxY1z64zegSnrbFZbPPjHm+dCEf3OgF8T7Wrllybfg37Jm8HuPJXxok+mRZ\nBp46tkHouFxOliRijbLSM3YKfB0B1mczN8h5VIMVRV81cZahp1jCuxGIK+Z2\nXNbUyylS1MNck3kZzsvkVjsBjHsGd2og/IZvcamYutc9qSM2pmzjSZ4qSk1P\nGw/2\r\n=FAm5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.1fccb1418.0_1607444855312_0.08254379832331527","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/theme","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.afb68894e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3306f64df18f4c3d3890cbb9146cb2017b8ed300","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.afb68894e.0.tgz","fileCount":40,"integrity":"sha512-HA4XgPpJMHX2eG1g5FOGGJdd6d//ER5x+9AFoLZW7on13e+hECRrCgfIB4qp4BMkHi6i9690gm3rnuZpG6UgZQ==","signatures":[{"sig":"MEYCIQDb1NgiZOcqonxo3X2K4y3SwuVlqGuKFI46Dpf9ETOLQgIhAPAzjLC5pkTrljAao+cGcQjYARwbCJ8zf+f27855hMNI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6piCRA9TVsSAnZWagAApJoP/3c8xdyNbdjMyysPYmrL\nlCQAyaSfrwvOqvtG8HGLSwU66SjljLqPtSSQ2hZdMazN/BfZTeZzfq4h7o5A\nPABe7c3CZhLKf0YP6G+diIsG6W/t6xVqbisx2WxNgjNqj4RK5GwE2rFZq4mZ\nqTD1ywYCMxDLa9ExRvmuyptMw9s5gYY8wF99glY7sXQ8XADxY8m7atYZZEbL\niD8YhTmi811Diyn88xRLO8QH/2HWXgQuG+ANhBEnAuI9Rfw7XriiXBcJvr9Z\nUJNJKgzj3yk995ueUYFGMLC5o6AvimwN/aoLgGEzwUGm+l44IUQzpg3u5AnY\noZD5gae8vgvCM7QeVS9lEhja9uFka7oXIG11cywpdVGfG8nHki+bewhWWtH2\n9cU6RppLf6COZZ5AzaTcT8vwcDl9//bKKH2W0lqMn53boGi6bzZBIJJOfGUu\nJETuEApZz4aGcA2fC4Cs70URgQmO/HCIWK3a0pIgIJIi73x/M/g/4SGImuqp\n0tMwwdTaGId0Y0Gaf7eBLu7vHzCwkdO9B6TE6lmz7nWvdBcUlIZOtjStLncY\nmERZsighLPLMwF7+a9rMRQazIcHKshC1M1x0tpHAeVIO3kfRBHz7SxM4WsUb\nBbd7aqCoVyY/8j4o2KvhLK6C019mPAiZk7FHLRMJGmwL22saViPUSE0UOMYp\nZtDH\r\n=L2rT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.afb68894e.0_1607445089873_0.7690856365366403","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/theme","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51a9cd3dad9c1e73d69a498dcc2673349048af26","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.fd88d40c2.0.tgz","fileCount":40,"integrity":"sha512-5F7WwbQZ8O8oTZcu1/IeTHBIA7ZYnNM8sx6JMnylARrmAaxOZx0d4fLNqDWpkslgy6+XugjtV4Hwy9zyKkvn2g==","signatures":[{"sig":"MEUCIArj1ENGl38p0EuAzOgi0HDUT/hoCs/YsNdTGXdw7uwXAiEAtsb8nQmIGeAMkIgHiPeZo1fKib/xkKcyxfelLZLol7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz611CRA9TVsSAnZWagAAl3kP+gKSbXfqvhJr5Fmgapdk\n2s3Jt6CxmyIcyMAeLEzqSCA09PLv4fJ9MP4YHdS8wh1ivwj8/H4r9EGekUq2\nAPkB0r5QVA+wdGMcQB9fdSZBfjQFWHQrlG68b6KKmsbJ/2VS1BnQKXYJLm76\ngW3uNmp8ctsJNHb2b9SeDGEHdkZ+cDo6d5713v6uZvha6c5QN/kZBKvQ00DL\ngewzhPo6Sxiw3NuJIByVWkA7yp60cYmmX6VAmM+HFcWG0vi7WQpypc4z3ySb\nQjhh+lTGB3My/Yk/BIHt9jNPrQafCZ+VatY/xAK7NloVIPViBwokTeCp5PmC\nVsSOpBUPyB9XaSO7GLbQPAfkPoY8EIsBR2q5TFZBL1/3dbtaXC4LFjNt3nsQ\nl2H8yLVKRFS3rPaSH6wf6NLN1daEhEF/tndo1KKYCSYsOBBA17O7kD6pxHb3\nsdEzj+Pm2BX7wEeL8bQOY4M+SgpISK0tFucmxfGtG0hoYQ6NvvBJ+j/Fzv6e\nqEoRowTQtx7BY3C0zuc0eyzuBEDhZFu3b3cC6fpXXKxbeQp9E5QWPQzXCe+y\naC95uEqzx1qzfbZ0K0DkMc0Yn+15NxGSqJTWyiUVfWkfE0gdGrJTRdLvpWVA\nh5SfeuQ01WUGDe2kydplUgeKzUFVqicokx0dTgcwYvSq/ViVBMMJt31+RySN\n/R2O\r\n=9Hj5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.fd88d40c2.0_1607445877531_0.8086630654832663","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/theme","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c1fa0933dfeb83b07a2a8b41f31933700592932","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.ba9e3109c.0.tgz","fileCount":40,"integrity":"sha512-Unlb75RZMd2t966/DMs6yf76g9bIxeB/sqTZUT+PPQzJmJYfgtOlrWNWQtZTZqUYOcmIDoqSLjTWNCTderyPoQ==","signatures":[{"sig":"MEQCICXuYv9EdRyJJ1b8MIhiTXKDAGWflaiGOzQ1jqLAfDZQAiBm34DzQWHOdt/PASXwHDEVLqoD93RSs7V/5KV7HmHYlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz85DCRA9TVsSAnZWagAAeAgQAJXE1G+aoyeqOOOnFrlb\njhMunpi6Zaz1EPXzTBS2A7e83UVp8gEh8NQMVM8cUsOKdvD4egRgprZxXDs5\n6ycJeaDKYGf4GuLGdc943L7/6jQ6epgo3cU0ZWMpkGxBhrVTP4ZGqnkA/Y2l\naCpInwHsVC+4omLJBlkK5Nso5F1X//givbPKAT8MiZTAjYAvBlQfrOZRJAoA\n6l/obaRIUo3A6gXj3Q/3o7YcdAgktT5qpMH3SJCeS+OPf0AlkrPeVNwwedfy\nAhpXRlCrLJHnwzHEGy1L88mYpEXU4fh4DhoMg6gbrKSZ5/7Z4Uqd2j27ysLa\na5Rk8ixlkdWt9XUYv85zxwX8lKPp7gvuRBbukgrqkqFKL8lq5g1za0a6nhsj\n3brLWNQtocr19nSeoLlmbgEmM/WIagSdPBHvsPvYhfj3wdaUwgpzO0IaFmfJ\nPwoGFMoBFCWO1klDtubW7RQAYnQymOvcthsmSBoTpWq423QvbY1zEdKD2opO\n0MUnjPtdobeixb9SSJjUgiWYvId0eWJwWOwSox4wS+MriianqCEAcjaIZupY\nhyCoK78S+qiTkpO1wFsYPU6mGkOxLIP/8pUhhYvJaAjUZjm5vVYxjXP8xfC6\ngS3YUSrrvx3m8D0dnrtKfo5lDDxkyuRTD1H0FnVeuCeiXqVJRO6OWUD3qi2J\nVfBS\r\n=TNk2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.ba9e3109c.0_1607454275455_0.8616023972727875","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/theme","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0521e23445fb187362c6544ba2f3e4ae5052e79","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.1085c3b2d.0.tgz","fileCount":40,"integrity":"sha512-CMJKMOt1S3BgP+uHnMHNmR33w5V9kPGXn+vrUt2+aQv5t1MSSnNTO6tmOMvDvp7GOkBrG7Gb3XOkr4NNuqnlBQ==","signatures":[{"sig":"MEQCIHj5GjQMwKexwASZ1lwqK4Wmr3byUaYB4KVbaUmpTIHsAiBw3ddH9e1JeDwQROrh5Bo7awEmDEM35prb3qUaYwhMFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SEaCRA9TVsSAnZWagAAgzMP/iE3sZnZ9ufoQMccf2wl\nvA7IHUDzfuTesMaVRisTwIyuj12EZEBTVWzX1uzLDjt/peDgMWrRBFSH65FJ\nBHeCurb9cVt6XL0S3XgcteSGHv0dpjr/nVb+Fw6QWvkhLfKMX7l1jJj8tdJ+\nwKEsfqZ6WqgUfeDJRHq5BmdY6s7W5jD0GQrIBbQfjgl7T+35sqJq0zYIN+VS\nquI/NtvOyw8I8iITh0UaKlMwwUDZgiHEgfH58BTbdEYIz9N0z8IKMU8FuomX\nYZ0WHGO+WNPKUPQ641ccUEE8RR4eA/0wPKFwzqN/T9HK64IZyWGlVf2WC+vy\nwPQXu3P3/GPSulYtTLvuqo9LqWiajfsNNn4XHOrghIKQHJlH7pNbBAZwE00o\nhXypN+s41p8uY2zMCh3io1fyCxlJpV2tKJmdS5ztKbfQ13Z80A87x8QS15+f\nTWrfpCFqRpNhGja+jvL6bgiR1m0DC6pIzVWsPAwsat/xon/EdxOdhjuH0pjN\nkNLFuE8yZ86y0CJjjzAkbOnkBxIYNIZlnZgSuFsKxSzcVbAaeXf/fse8hhQq\nxwNNMRl5v8ZEaSysvsCGVFlR9qjOu7XKKPNvmqEeL/Nh3iJkTj449J1H+7t4\nVqgGo7tzMFs1PmHGfudhkQhEbnyV5S9Oad14zt+DVC3kI25+9Q/CxT+eSO2n\nL7MF\r\n=V347\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.1085c3b2d.0_1607541017551_0.9739355605237354","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/theme","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0808b114b6f5d9a76f8f77feeb2b090d502ffc21","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.c5dda809d.0.tgz","fileCount":40,"integrity":"sha512-tdkhtUXHeufWSikL9YVMOwYyEHCQbufvtNxe2A780RJ3s6qqKGIAAEE1gCtoeOoAkPB8zo/1STV4mClPjX++WA==","signatures":[{"sig":"MEUCIQD8nJC4PuzsjYk01mow+7oYAS0xJfjYERebFSGfufBTcgIgdilNi0jsNJxinYnBbrThUsDV3fXa2OPqyABbU3GZcCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0Tg7CRA9TVsSAnZWagAAfs0P/1gO10FuEk2OYcAllbHW\nRaSu8bEZfHd/hvTpR0lGjvuaDmtuqtMjEMpmTE4geBfy22oQL0PB39yoo5Ht\n9Fnhh4cECTNKZCe/nXDSMG3CGK/if7cAxA9mJxXJuXc0hT3DgENaxoPemwxg\nbHvODbYrezxDTc/7td1qOZBoAm/VJOUXVrpFxHsVVU99s6U9mX3zYEVfKaXv\nWi5O0ow88fBrgnWnFn2HwPp8MxDOjNvPlrmNR5X8+SrAJYimZe3qPcZfaF1u\n8QgCgowW0/ckihY0QSLTAj1NGOK/E2XmEzDZYpGEcVUQ03NG2H9KYTOo58ed\nnEM/hsS7no7WZ0ENbeArnO5xVqlqMh9uj3jS46UsfBFQi4nwPYujOtTqJpWb\ntEWdgPMCZE4c/Rp9BXTTl/pF/Wwws/KYijd5fFJpYQrS4/kwvXznlUzFw01h\n4b/jDhtnJqM0LQaGBA00ziYjmsDnmkYhwf2gZJP/FHslZS9fcHAx8EJaciv5\n8tUETN8BCojW9pbJDDOJ/DtjmW82AdlGizHgG6BZPWXPb6zzMjc4WpsLfPu+\nyGu54IDnRrQdNVot452s4JyAebRRs16aBWziEqcAnp6j51Wx11Y7eH1L/yYA\nXbbC9/HCg5Gnr9h7S1uciq68bS8tWjDSjSpxVAANsEdRKZ7CApCAdkN1FXIp\njTFt\r\n=cTCA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.c5dda809d.0_1607546938698_0.17653110673497974","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/theme","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c2a652b22d47bbf0d04042a3a06ca6c501ca712","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":40,"integrity":"sha512-ykcM85iiO/qNLC4860KzNia0p2XhezlaDcmbLQBsycEWpKa9h8aAD0AtTdlwLvp+N4erF2/AlKhCqZthurmu2A==","signatures":[{"sig":"MEUCIQCDlKzFLFL5ccRFURNpXkkWij4zR0/r1SnwRM8gRnlcIAIgRJYV9swwDOp+k4wMX1syAn8xZlNOsfvRgnIWDPmW1lo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0Tx7CRA9TVsSAnZWagAAZsoP/3eKEzLIAXmOgFNx4SBh\nMJ57wQA6SSvsnJm9AR3TkfmKzKY7qWit3Cc1J3DtdBZxVQT/6kMvW5sH14kt\nFHyVsNXu21Oa+gJSy06Q25o9jBNz5MJoOimi4Yea7RELjkQDQJ8mN52mhnFX\nFdsO/mE5ka6i3fuW0rOXs6wwdkbfZShnHcxZJm2BeqgUJJsgsxO2tv/xJG9k\naumENfNaNUPyTKnvhzx0SvAiOfSWdEsgP38ezJNU7nCn1JBJfvV4hidiUNuS\nzmQTvsG79Z3nfNwNm6KB9/1PmaioMisok1U6VYqaARSFvotAqEQdZdsKKSAI\njUPN9oN2yIgRuivFVm3ADaZi1KLSAtUaT68crJLKUepuZJbExnhck20VUx3G\nayViighBN3noFPJRM5roEqeGyVhRDMsLdUovBq7I27S6O/R2Yd0eyDkEzCQg\ngGa0XG9SM9QW0UhFRDqJJgQbMBaEYIBKARqicv60OZOyGYd2RMGs43ZRZvfg\nJ1wFeVemR62xQIEdaDFpOwxMaTlsQ2/+lHOsI3TSinIRyUgmQaRnsf2pZ1Op\nzdrSEa+kgMV19IWFL1m1sjeajmY9WK3dEQ2J23L/za+zSlOeM2bVTaPKhYPD\nm4r1KGH9QMw7e0yqSoZhBm/pjkdnlGwgnJ+es+6cjSwX65wkC1hdKXVHdzbA\nqaeJ\r\n=ekMO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.f5f1bd86a.0_1607548026925_0.027632593793606164","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/theme","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.00f38200f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bb793500bab7d42b56630f359f8845803db9361","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.00f38200f.0.tgz","fileCount":40,"integrity":"sha512-I/hlro2XLVQy3ShAUH9MLxBHL3MN/g5shdRmhxYOBVaOlVzhyTGEPLnnAIwQbjG7MHZCkw8zXbdVXUHanYpdkg==","signatures":[{"sig":"MEUCIQCr6ij6YEN1KddjdO4ABgzlW7NkmzbzNoGK/XkZf7EskwIgNU1cuLB+3fR2+pXgcUElRGZcDyPkt5mzBsbkVC9AKuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05OPCRA9TVsSAnZWagAAI2UQAIi/EyXIlPhtLwKFvI8N\nSGHpv6BQTcqF5z7dYiR0T8Oc+n+IAHtUBUlCi4g2l4+w6sg+8czkG4HzT3EN\noAhY9p6roQojHA0wful1YKhBf3IIx4AqnzdPUX/Awq5zdnnWpIpiYOsCIHky\npZ1NlFrLtAURav2xeXCzP4d7j6J9GKUOlLHQDC6ZFMSTU7f3HGe3HxFqTPHX\nlECKMRH/sUIg+2x+IAfo9hAJfHZu6cqTx0kWqCaaCUVTX2jnLBtyWQ8BTLvf\nIROUMjksXRdh7MnqHtUVxvCuTUyyoIO+5uaLmnGD64GjLedpOVxBkrwAzOQ9\n4ZLZoUY2w5xGnvC1vNOT0fbCWCdPFtN1lgzYyMyLj0r+ejxPbwIyofocF+sU\n0F0UuWFPBz/hhMMuk/yDAqpr9ehTLFQ5xkBwO9IsDwbHHS4TDqNCjJr6AXtx\nmmb4vyLWNaq1kbCf9m4ut9rIe4YWGwtoVIP4yT/MWHC9tDNDJwP4v28W4rIu\nOCzseAMy9N0Sq6JL1/SA3iN4tZKg4e3jHhl4mxVc/RPsAe9Znxwf/mUFxqti\nKFi9r57izlUiOBvV1PUj43LSjZCSEItqMMMZXwof6AGpTYbxIzagP9FFnFJn\nCzkiyNQogPLIi1PmlgP7HARWIegLoC/tgzlRpiH1ecxWrmYxWYqB5MZiu6Ol\nXlOq\r\n=Atr8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.00f38200f.0_1607701390892_0.6069420286848151","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/theme","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b74f71e23615c14e6f4f4b45645c27152bb79970","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.ac41a5729.0.tgz","fileCount":40,"integrity":"sha512-HmnbFEBX/jD87h9DyDGNN4G0WwAWEy24kXd4mZE0gvGRgUjpHl9CgJNJLM2RLVbC9JaTLrNvdI9j/fBpMxF2NQ==","signatures":[{"sig":"MEUCIQCBROqfG9wsiimkWX8Cts/jGXjH4ffPjji0c/QUAfQ2lwIgCSUi534Bwbr0t1oVo5XA1Uq51pzJbOD4Kxl5Hma+qEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf053gCRA9TVsSAnZWagAADJcP/2DXqZbIyHnBhB1SnA2R\nVIugDJNL9EyqpmTwLbVv6ngeT4IdP7GsLtuKUPgmjVygGvMozk1sF82gOYzI\nn3aUYZg3okiWQFvV/ON6CNBT+ft/qQNWWLgXOVriq3yLxHV0Jos8ROG9Wg/5\nzhEph5ZgoAt1h/2GEsaVvI1usmhjVp4yDZes9ouIWSu1KbEMgqZGBRD0+vSs\nR1Kze5ucz7Oh6KndiFpo95L4xex0SNrYXALgtRMitUEusNtzNO41m6cIxIVg\nmOAT5Zzgh5Pjvg8ruTI4bSt2O/M/ZqsMi0YjCSbShw9uvanEof9VdjcOC5Ra\n2orzSqQ5Q3bkRLA7HS2mCCYd5TEguv8WyGx48Hpxkt/7mILQPcBe4lHIRWaY\n3u1Ev0aOOKoZAUU8FoqVoHR3fGcCVG6WduMlsMGfCxIj37llriw6Dei/+ElB\n5QWLifFfwytXfUqQYAtKPL94Zc2i+5dkumt49TPrEGHHM+epj53ZN2UMni9t\nyRe51UWOiR4mOJBEi4C0gVfWFy2dx908j3DKNEKJlCG5ywg56tvwlkiss+ZK\nRzROXe1COkNZisIRAkT+nI+HZVL2Th37bQ0hN6cuZ7pKqpPK55A4pK0/+7sV\nLV6iiDrZKefBy94EBCJ9PoLdbt8ZxpaTDWIK82D8vjX4EZlDPRvpgLvMVtDO\npuis\r\n=0Mjt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.ac41a5729.0_1607704032033_0.6173255098375494","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/theme","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b448a9480c02d3e0d728af711e64e606862c38a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":40,"integrity":"sha512-6du+kDHdKp6srwr/TL1BqCL0P5cuAGMVit4KSgFd9hGEQJ5asUzV1IvRBV4lSqyGwU1kfq/iT44KVe5Ck2YWiw==","signatures":[{"sig":"MEQCIDPVBBsd8TfWJQr1y3okwg/I/EYMeLrY/t1V1DuDYz6dAiAaDwuwU5uE7O/pKUj8NL2JbFQUFhM3uHM8p8WqlOifvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06apCRA9TVsSAnZWagAAVMoP/2FcrD5Gs0vGoF2ZBcdn\nKVS2Bi1UaKsuryeAm+U7RbHOoM08QYZ9IBXo58JFuuvCqNf63seJYV54w2Cs\nOtVe38lBg4U2vn0pQI3RlRqUiHncOC5t0wNETXgbzhZXAQ85cEhSU4d7sb8D\nbZX5Hyl9JDo7hN94Zabugg10+HR6qcpkK2Ex1C2arxhW8x6JeYypPUPXHXcR\n4+GfzT7VaiOVcpsm75JMzY6HwxBP2/iIrRGcVT7dqZ1/pxD3fKl7h+4wEX1Y\nsLHXijbnBmC6ckKwf8jl9xpncl9Ez9O1wf/A3g1D8fuyqF+0Ak2kZD+CNGoQ\nXZez+RkEwrbsAqAYzXqFpBiN/LatNWsDEe4GoUgddR47E1RTBXW1TyqvS6m9\nM9q1sMIMUs/BBzGSeftzRpEuhQIy+lsKlF8FvvwqS6HFtVRKAt5Ao4xQtVbd\nuuWRZbNp8XZp4or8DnLeqDSk+btYZ/ohYFiC62rkDpYHrMhPG0hdM0DFTzmg\nAdZo9hxhjfveqsuEvncdgJ245tcxcTNoYP3ZHxMLdap1fvw9m2Fa/f0f8c7f\niZqooNJadtG+UJZLTkCjgRbpPO5VZK4wyIuCVKMnIb3zP+jPirxcoBW1MX/g\nJRjt/pMxcTkP48C5tShKvb3EGbmZlUd/O7XSa9hzExBVYIL9yqV8GFL7MBfx\nj06W\r\n=TXcK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.7fe0e4f05.0_1607706280827_0.013214315090413153","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/theme","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.9244508bd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b369158ffa6b7888cb5eeb0eb953d0949f598366","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.9244508bd.0.tgz","fileCount":40,"integrity":"sha512-TD4US3CVjHTtOTubPIMBzOA4hs+gA3f7+S2abdTLc9gdAUbZ/zZcD/JdeGF4m/9O4MB+f1snFQtdzAajKIT0Uw==","signatures":[{"sig":"MEUCIDnTanNAdGHj3FcDDQ8a9GoGM2CSZ8Zz4xRzNz9th96/AiEAof3KYDMOGJQIIuqXDbOLEniqtJSpBMr3jV7x8tTqMlg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08MlCRA9TVsSAnZWagAAiBsP/3JWbLzHol9wudXrjSL9\nsNZ7h3gtSqQpOCwHP5V3NIlFcwMdAV9rTJgqMw8YFnV/HdkjCP9R0YLDyQrR\nEbhnTZlZmzZz/6I5F13E5xuWs+vISJIjFJCHwAAYbg7+rmX7K88bRGTEtSLI\n5sXLG5fg2QDZMpG7ZIDlQvQULJJfeu+P278p2PduqmzDwthdGgEE7mH8khOH\nLYeamsIMotxvwdWJyYYRpbkCjy/xtPKFdkOG9DZLsqNvahuGtQUAKG0jJV3L\n+0jNRw0jV09+q4ZTEGu0/z2nURbNy28ajxEB3LdGjlmOrSdqvnaVv+CXQC81\nZCSFvinH+CeLA7bXCjMv6csFsC6vFmxavCFbwKOZ/1CpIf4waTT1VpW/Zjk9\nBoWQsELjK3na6b+apiclKk4mWRgWm7VMGtExN1yJ6ogRIcpHGwvl/gDvnfkR\nWrBuASLiP24qDxLH8GCmx4qmFYyvqKr6VMHNoS2+xXn3m+YwgNiNaGs8orjK\nox+eh6qT7q4N9iqyX05h6NgnJKbfXOws01w4KhrJxhHB2H0myPnS6/tutR7r\nQldBofX2mw+LL5+obDM9BdE/kURl3+IScavWtAmArSL//hb1gPzn2+6k/22Z\no3Sxxnsrku1T2kTtkbSvmK0kafC2rJGQOpHP0SNd6sbuN3MMckdGDr3mslKV\nLgQT\r\n=+Dsn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.9244508bd.0_1607713572857_0.8185076131668845","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/theme","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14a010b525d6553b0ffd840db64094fcd7cd1922","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.384a8eeb1.0.tgz","fileCount":40,"integrity":"sha512-dWjyckI4jNFxz6H+RQqfPhY81zWMf+NonfhXGtwfgia2uvEvdyIdLdor2SYGNqRJftupYd5b961dFHFs0aOZRQ==","signatures":[{"sig":"MEUCIQD5yH0Qrv4Jou4ofIaFxlrROOwkKlwQ53M8FlTnwWWoigIgAl5ZcJA4FbNYBTqllbUcUInXg1p3FQ2Tb8M9d1sTSAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j1UCRA9TVsSAnZWagAAsTUQAIqIwdAM1pl980hvXCUy\nmoK5jWBmm9dG8UT6zzqdp0xNIi8fTG+Vdo55rFrVc9DuvwdhoWswgGHAOVLG\nzuHJNiRj1EKDKJp5KxaBpX1YmucuBq7rf1RyS/oj8zzqwi+6TRwQdn6rlq9y\n4rpl4BNZJXnhTz6pgNG2v7339jX8TsKxnGsmCkj6qM/IHjhrPMfxVXjH02Wt\nkpCD65xTo+3PlR1AFs6hb6O8zsdxc1/U9rAqzGC3B6I6sZPj31tHX0C71MjN\nNVyiclTfeRZTnUG5PUu6eSQTpvPsU4JX7Bg9weH4KETL79vbi5IVX6FWgjsF\nlaQhZmIi/eV8J86NyNkSITEJoL43p4jqnMls3oHLzgfWXPV1YlUr7888Agi0\n0we2rXKP1gIdWGRTi9f+MVIYTU3a4uE7oyMzb2zs+KVZYMM6dPV5JlDBRTA2\nDJp6HE7Qs82UqGjSGuvAxHA5MVO9NK0WrYv9MrPUX2gWfswHAJwQG8nMFgj0\n8iWFGahve+35Dari4h0fvYAM1tbBoR7OYDyeNoyd9P+00igZNg7RHuD6NFwO\n4ZaNIRGIwoL4Ezl7trPKfrzDD9FZmPkFKNiosuvWskpEcjhQVMSW45hrCxon\n0M5pxaz30CfWQmg95HGcNqothWm0IK2FplPfp6OLTBJ4+7ccSDyT9JUpakAW\n/gxA\r\n=BCsX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.384a8eeb1.0_1608138068554_0.25391526632666506","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/theme","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81b5b2577985c667b3ed0c9db0d040127d1f89cb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":40,"integrity":"sha512-FMwH3OFMzqc4TToAHEjNI4tRt85UnqS63qzk4doVsyPbma7SzeOtkUOsd8likuJDd7rLM5tGHS2efzwcporXow==","signatures":[{"sig":"MEUCIFJOEObvH6IWVN6UGVyp1sOFyGq5v3pMu5Ln7URDG417AiEAxzKe4QTFeGZ7yljZT6hiflO6GSAgY0hvR4qM1NBGW6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lFpCRA9TVsSAnZWagAA5+4P/1r0pC8WiS5VhfLKyZl2\nwGZ6eRFDaoZ/4bfCLNB56kVE+mf2ySpqqOb+Xx/mmPEo0JKQEoYOymy5U7gc\ncKcy0dTSjRe8iQ0YI0stHqXXwXJeOix13LHsqvFz5bgWV25CDuyPjIT55pNm\nmnahvCZTMq/xA62v0xp2LFVpYf0lbJdhlGr5GcmkVGGu6oERB3l3wM+G5w/m\nKXKFw8FG0VKsso5L6JnYrLFPvnpe84iXjz/msGCCz/HohsHPumdET/2aO2nJ\nHI74sRhTKjZtuaodq2q7+sq56Yx6ZvpkbGs1RuFB0O4xofp0GjKQJ3d/QG+K\nbKIrLNSMnh3iwddfC42sMGX778fRdrROCblY/ksdOOWz4VZgCACVWN6fjSGQ\nZFZ+QQfeA4Y0BrMFXgcVechvTmIRtTwf8poOuocCzLe4sv/8MwJ2fm17kvlN\nc6ZKKk9VQ1kJBgJloy5Csd+EYgNXzLcRonCcaCqYOKx77wOU6SZZaidoiw1c\nWPTvDvCaoh3tAEw45gyAscRkyIYoLEA/yuroLmERcEK5i+VheEqFaHsXcqIr\n/v4tfoxadrz6pMl/7/kWlL7dCtrSGp7W1sc91f7PKtmyE4pImU/7SsQl/6qk\nmTwhw72xfZm4rzi0k0JXDhH26VtujiJHYtDxoD+8exBxvl2Ljxtun32j58NR\nAoJK\r\n=7x4O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.eabf9d5c2.0_1608143209218_0.1221570137553587","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/theme","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c54845b74c002ac210d119f06a8f2100f641786","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.30fdfd06e.0.tgz","fileCount":40,"integrity":"sha512-MtVc7DTqdl+OtoT69YZtxt8Wy2TJfk5iuw04tEfp2tMCQBuVtIhCFkv9tbBQQGBAqkexs01OEGfCm0NI8qWmkA==","signatures":[{"sig":"MEQCIF7uoH/90Rl2eiDlFwF/FYfC24renmmQ1FxFuxmuKIR/AiAEFGl6Wva8FOgToUvYHpQ+88ZKJf1mux5pxz78n11kkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lrECRA9TVsSAnZWagAAWiQP/0suL4FPzN2+YuePTuIw\nWfBDeVHJqe/tccuw5GFEl0B7WoezaMHeIgt+ACXHW5YMI5+Nw46sXb910Y4d\nXQrKctfZVGYDqJs4S0wThjmMYKqyNGENkRAcQQUZFOc1DkLpTT6bF6Ezy1lH\nIQ/iOasZeyXL1IqLY2CErrlnjC+erFU7ccDUWfuVFPnVRWvRKv82JMgeNLdQ\nj7W2DhczIg7pQZXk45uITZxlYVs/5uVyFbG3zfQ7UvL/547mw7kk4+UbdQ+K\ntz425y40zID7bp4Acm75ZYE4uNyKETNgBNtMBAHXKiFpI0cbTHvwiLp3Pate\ns+Rc9v3+V3eFLIWrS6nUSxq7z3yq+Q77g4sttacOvx05+Yvi9CdcsKLQh7WN\nyTvhRaAClyvK1J+FFaqZnq03prxk85qhKJSxfOIDvpUxl40bYm6J47IqqlW/\n/G6v2mV5GWelR6ftLT27SAC0CeqtDhYhPgoCyuU3MmQRWL9w7IORGhl7a6Lm\nKB69bvCkxBULyhk4fLal/eUC9P2h0kGa/RiCvDR3HTpDsQdusDlkUPeafk0x\nONIINfr+o1H/iZz2YYXVX7FuSJdUKmUKK90N/mVgeH9FSC10JAkHeSA8ZNDr\nRx/o/FbnsPG8OwC/EFszn+Dw9dyQw7G7It4uHp1dCe/EQS2IOVGFQTHtyQux\nhYHv\r\n=BrIi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.30fdfd06e.0_1608145604147_0.2657232758030239","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/theme","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"999b082b0fff23c48acaf1bbd2241749dea955d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.9590a8f90.0.tgz","fileCount":40,"integrity":"sha512-BKvDAEKanvjsnMsqGE8+wzZ8lA0iAlmB2wirnQ04zcPrc3/E/zZVQGDCDRcx8PNMDFlo0oAYY3ZGcCI216KgGg==","signatures":[{"sig":"MEUCIHGL0PvtZxi5vGrPg/F4fm43ePJJSmuL87ehxiSgNe9BAiEAk5s/8EITJEm/2pMP/+DBIeFdVzJyQQATDTobVzYGWos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i+7CRA9TVsSAnZWagAA2FkP/1Dn+cx6hqmJ1KTSBgne\nlyDDk0XkRMZRO/eJIUVgnzuhQ58QyCdCaP7Gg20ui81N5+xC2zY0JZuiy9vA\n1ekHzIFWbxfM6N7bNdhyM36mxkYYySSDYTZXp/a1RQk9xQiQUy4lRu/vQDD/\nFMoZbl5K0/iboCZ6EF/iLPLTBohOwVsWcKC4Wun11J+5+j7S0/bxsObuZMvy\njBsKWibY3Sdp9sdjoKzOkYqFynSk7mBcY7yDTpecrSlJOfJ2fJRfWeSEF0kF\nvgGTxcZZICa+0FPnmMwRhfFK+MZEv3VESCsPPDiz69hISVq0LUPYWPnHQL5W\n/GhWESFk5Sdnab4JN8tPErAmmNSewv0wUxBm6vWC2SpiL9iXXVWLIGziS0Fj\nObLEocwS4fiBa2SmglcCox2frWHCBCUt81xyF5Ccww5dtxt/wutH+jJJISuU\n7LI49TG76yW7qE07NUPAdc0+Lzhw3xNYqt9P2yWl7BxlQXJUJZjEqvr4t6xd\n6L+JlhwHC2T9sKbUWg9trHKJu9/Co4LSdpwA5eGfHSiQA7346nLch615eeIW\nzXSIdL9nhJNLi2eeUzV6VrOW/UkM/q1QkkJsVabs7j1PmWcVnbpA5V8qeSXx\nx3WsG2U141EstM77demEQITNAXgM1+dqz1oqcfLkqGIT3Z8ZMoDXBcszw+LU\nZcs6\r\n=FILj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.9590a8f90.0_1608658875308_0.6082291901253774","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/theme","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f36d981d53dd14e8dd3db2729deb51fa4575e1a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":40,"integrity":"sha512-m0Xd4+Xp364sDt7KgZhzCbQtussvV3wycUWFIRM6UlAsR3S+P8r3kHZTAR5Kf0w4OmkeGKSHikPuJm91ozPb/g==","signatures":[{"sig":"MEUCIDvsWo0MvFs+XEzJiOxNSHg3HBx9ZJzTZ0fFbuvM/C+gAiEAgh0AS/E5FgJ/giJ++WsskhLKVcGmya+Ta8IHWqXlupc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4ntxCRA9TVsSAnZWagAAkRIP/iip+lwxwvBuhUWeK1+W\nWfnqNPlR6djUfsvh12JLYDAJEHo6rETEJWIVt2llFkittaSoHnGk5IUKTNSx\nXKzjhFZMnCgHXfo3eH/0FjbGde+4X2L7mecpIl2TZtXKcLUCkbhX+Ng/fBiy\n208s+lSsHBFXYUBy08tbJaUc6VIhX4dljKKHM/8VOG+zY9k/Q3qhO/xN8Pbe\nfen1kHydaqvWGQ8D16iiaea1xaBf5bPttQqE5bRyU0ZHMKeXVfcsKB63k+jC\nBFwCVld9jDGmPNVPvOKWfCsWGvkf9W9FxrBRCAvLhrojSBX6zqG8IrItdHCg\nyZrcJlLyUhiafdoubN7X52W12cqZWijtG9jvzF2sfq9TDCqPP5i/vMxJ9ezx\nCgF9Lw92vdHTEuOUojh1UFksDOyam0cc6w2Ut8011clGO6JJMm7UWrA9oAMY\nYSIX7ZqAAlHjgIOlooSba4J4J50cWCCdcvRfUt99fjCwdau95dJ1AhX4S7wz\nxf9N5lmG47szrALPXotP1gK4Iv4NwL7e4uQRlNbzes/arJIxxpvgI0NL02ui\nvXwfa20dDIi3RYWERt3+CdQPJfNc6pKE0qAbba6xFQ1+EeUbf8NG9GuuPysO\nRJo7jkFwtnqOdJPmkQNk5MFPOqHj7UPyPmwApJmUg6G3D2eJkP2LhHHiWwP0\npB6I\r\n=sbty\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.f89d8b8f2.0_1608678256691_0.08592919214345418","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/theme","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65ef253a08a4fdd30c7b1d8541bf8644383b0994","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.fb194dd35.0.tgz","fileCount":40,"integrity":"sha512-XnvRtm9zAXIBKG1IzJ605Kpas8S6iVSfRWRvW+sESfg9Ger5dHIzdoMX32SJtVaLwabEp3YvN5kX3SwqoP7AXQ==","signatures":[{"sig":"MEUCIGDUD2zpaztPnSbh39l2vCi5ENVLfBgWh2BpklTsDlShAiEAuk6OndcK0y0WGVz/lLXP5Nonf54iziI3IQlLs11kZrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kPKCRA9TVsSAnZWagAAtsgP/iUjvUoMAPhcuYQ4iJGZ\nS9o6d+RvKyckAJz1iJR9obwVBZKutk1fzHfmcEeaFc3zwUArbn1vXUWlx/a8\nTNsCsubMsHsLrmO0KQrVR6Cx0zDSFQeKcsHniSQBap4cn02rruMnc39SjpBp\nqkpuO3P9cY7oFzrfAPVW3Za28RyGs83d0atP/pp+Oi2xvTN79VnYYeiBCVx8\nv5AzwbyHokggRCFJ8pkhdBA11zhLWXNykXSoqEb/EYcXAmZHFXtuKIWL9PFV\nXJPEdNuBd1nFRh+sBFzommKLJmA3MMV6nYm5XwgjwV4NBraYgp5CS7XNZer7\nEuoElcXqb7W0XNn+p7st2okVVlyqajDiKqSLfiAA/QGTNO+XH7eOqMRmR79V\njngBlk4xEGT079ePs2crmCuBX+hM/SDTJnliB20PrHb5BFCKbDgzm1YCMtpe\nP5XMHknkpbKl+7vw8In5SUihao24JfIRgN5YD1mRJywnhlL0VKoKvIcGBbsc\ne8G5FLSBj91dnfRpkUsWkS8hF9Vd0SYup7BAbbWqSXaTOWMj2H9VvqJHd3Ql\nzWO7Qbh1OO0xdplZe61I/wf5hpt26E6IJ2IS/Am35WW9mHp/mbubDkNJY1Zg\nqfoHNn07g6LTQhu6tQpXxALjzb/WxkYJ4ufleaTUUieVw/obhem0dsx2R60y\niWAi\r\n=dO8k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.fb194dd35.0_1609188297513_0.42576511978330545","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/theme","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.64f36e287.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21f5db0f3f6a649b6b69aa90b9ccd578856c8b21","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.64f36e287.0.tgz","fileCount":40,"integrity":"sha512-4I4o5fbLPGKndeOiNbanaQWts8SkKM1pUwPCTK4CTM2DsKOekg2Ceq8h2bi9VlVOU400A7M+OsJwqPwguJjKpQ==","signatures":[{"sig":"MEUCIDeQVIzu9VjcuXjwMHZVRSVQmLBJJuvFAF/Rv3aNmwnCAiEA3C1JukSvcqPWQn8nLVPRZvloZNALiv5vKMflBDbLWek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kkkCRA9TVsSAnZWagAA6TIP/ilxDgHkY1C4yIBfNu+P\nDNDYYbew9lgbdKZEhwryyZmIp0T0pKAsHlcxMbxbegRywv1bZfEtyLZgD4T0\nbI60/hdfWCHmoaLXQhs9okHCQWF/KYvugIJnIifZJeNyWn1ukYLPdJJXjIhq\nZdE2z64P0EmhjIOd9AzTYyg4y9sLkjsXrF5Bs4QrkgKyBMmyaSMUFZfDev24\nfCn4fzsgoexTv57lKa1lWw+5sKSN0dXDI773PCq5/v/mXz1RI6439sTZ0Roc\nSFc0Vto+EDdlaXtUXsoUsx710KqGUtqysDMVLI/VcESp6EwDTyB7ClgJZ2UN\nBfT5pE6lH0Sc45pQnoNQWxh8VgC+npvLlZTlsp7TQ93FwwXFp9fn2mRX2mI4\nJN9Z8P7QJiLYgA+62bp7VVSdQ1MYF40EVwqMLqmmN8kAT9FIDooHceuZfks7\nWQDo4NaaLtBOIOo4WEasvfHqJuKjJIVQvW0NMbmst5icS/YYPMDCwEuNx75M\nxyQ1JbshrxWxVWUEVYKpGtGRaEhuIPwz2R7fbRGq0a/Y3TI2HCmkCuviLNBe\ncbxvkitU0/UFWUXD4rrzvvsDbiMSQYtaCBDNueqaQ/v7RIyuhytmYycxbLY7\njX4Fk7p2w86q/18oEgRqLPtgWY1lWBrbz0JscdHfyEVJ1rk2H+9zDKT9/QpI\neE59\r\n=OiWv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.64f36e287.0_1609189668330_0.485073949665634","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/theme","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69886ab8be98701d2e02c0e655962f9290d428a3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0-canary.b7bbe7022.0.tgz","fileCount":40,"integrity":"sha512-Pah835/FeUBAinyntaUYxgsKDZ16IRj9KWBzeen4UPUv5jZm/nup+4W387xXpORchMb47k4j5XwgJtOIaJF50w==","signatures":[{"sig":"MEUCIHGGSnkvi85WnjeL9IFYp0kn7F+n6HxUsz3AePyo0qRBAiEAwrzr7/JjImVnR+TTDUVZRm8NxFi50fjKQ7UBs7Qsb8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63m3CRA9TVsSAnZWagAA2foP/imoQ5GqYu0BTTAaiXNe\nlb+xABJfYxA0vymGyF9WHnAmwkGqMMjXpxjiXwl88nIP0SK1db4oGvlE3FTb\n3kMUOy3FHyb8fodZtaOuFxRMiUXM6ibt0hVYX3gd/K+iBcXrpcBox2l6ESwz\nEyXMQPA5D8mzdMfSSjEWf8Jifetw+WOgQVyIF0bnGN+6BnZ47mp3ZcV9bbjm\nmjfBDjYtkwIC5KGdWf5+J6twiSlen7GoDnz2g81f5O8cBUvqFKO5CeVf11yw\nMpiOlxQe28u44L6b8WNAO/gT3S9AYa+Z1IKoN3/lB5bXVHVa6GYkwqgFER7/\n267DsV845PPczcDfcxGm2jKm72g0nyARjKEcDVgKVYqgseGkiOkP0C8Cgdbo\n8vkrAzfpuWII+d4XzzQBjO90qay/ocMWYx6iWNxytw9NCX4fhVpN1j0uBRI/\nYhzhFPDcf5LBdmuy5M4dEb272dbADLTZ3k7fGlgC+QYyGtQAy5pwJkgIshnO\n2xPEm/LZR/de4/+/Zv9t+IRBACJxzsWgMtGdYJvsF1z3/OuRyYx4Q2WTAMM2\nrjS00E9n7bYzfUkKUfsvdFJpFjjg0OCPbNTL+AkhQZKgsjJAMBz6RY5HSV1y\nsKibfIMuYtO9+C95sZlZIpOFxRdJ/CV2B1qgD3jSaBVLGug9BR56nHqGRqZB\nt+I5\r\n=4azQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0-canary.b7bbe7022.0_1609267638973_0.30863946594477243","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/theme","version":"9.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@9.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b168bbf941211f78d518541403f4733a9c26aa5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-9.0.0.tgz","fileCount":39,"integrity":"sha512-3wpQ00Ho6lD3+aRXUkn1YGii7Hg5ukaOkGq5oLyp7bikS3FTbgX9V6pspRiFckR4CKCbGR5NayIuCt8JwbcFyw==","signatures":[{"sig":"MEUCIFPPRa2oYHlB9j6XEwmX62iHHULgPMH3E0a0x3PR1MGCAiEAtRf2MFj8yATP3uBKMnchn6MKSMKVFT+Z8RpOFzrkUJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64dNCRA9TVsSAnZWagAAPkwP/1YD+D2F4N1Dl28Nfqmk\nwCf4pLLLJXH+A2BkfpSviFc2KbSSKexU8w7keCJsggElKL6hOM/hHvaLWIYT\nvdk1/ASUvrb7+2kIZllFFoAizRS4oGRmOjfSJf164JkrhpHKwlyh1SR6ZWe/\nBgzMN8VYr5QWNynNtANQqBaEoH2WhSo+sJMSKI0cd93HM3/iCxysSwsnZoJV\niC0bgrGuAi+l9ue9+jFUydgiQF75ghYULFLA+aInxtKjdtPjeDPtDu+lSO7M\n4cQYSr6wJZ/lgS1uL46ywHI9YS2MCj4qOybYyz2B7cGw+s7+2COlAb+0ESX1\nLWsMpEz9wNqD305k+G59vijSK6tY1RMG/qriNzopSaDh4EDaR0YdbBXhp1h1\nDbwldzqAMwFx44s6gFtp7wEWwfSZDAny0MiNZAcP+Vio8r7OHxjUvfNiDiMb\n+S7lIGDv7MW8fMQmhZ5VqzO743b4puHBE3px6VPJEiuitsuQWEOsvPzRhPyH\nQnryhmKFXHZF81Y9c5unWOhvkvwxBn4vyN8DuPy4XvOxt8/knXkQquiH2a5R\n/55CLpuqLZ1tz4/p3gxNXHW+MS4m9WSepMgYZkbnt8ceXlnkEyI5vulr20AD\nCN9tpRRoYaxhaTuIuaCl5A25tY0Sc5+cNW17sBeziqYHwxJYcXGl9MEQPHZy\nEEN0\r\n=Hqps\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"^9.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_9.0.0_1609271117260_0.3316285513636943","host":"s3://npm-registry-packages"}},"10.0.0-canary.555aecce5.0":{"name":"@material/theme","version":"10.0.0-canary.555aecce5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.555aecce5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ede22c5bea16261d2aab4c57b390d12c3e279f9a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.555aecce5.0.tgz","fileCount":40,"integrity":"sha512-xX1MHdv8zJhjp/uGjQvfykNHCdcqlAk4DLbUDMCA33F7l7MqszFm+IWOG/KilJcQV2Tsp8lYRces/llwdoECnA==","signatures":[{"sig":"MEUCIAVh3lASKJNL0gwzcb/aLG2IqAY5wsEkX8nnFUFrMyevAiEA/6yNUkuiIYuLmS43xjZS8Vw9b0ZGuqt7V7/fbvBLGII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":160291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64dWCRA9TVsSAnZWagAAWpQP/3knp5nciwcKFfrrOjFp\nXKpSdlmmEWBwRMkDhLsBR0V4aH8wdE2leToEHmMbEHxFyAvd28y3SewGlR+3\nD5fTAUPK+8QJcs+VxU6cC+K0Qt9gFYFXF48u47eZhtNMWvTQBQBAQdwioIyC\nXNpVnUqzh3+aFptkvSJ2eeJ82mh4NEs3BoA11a0QwhGVHgpYv1lDnZKONnTi\nuwIiDMXR6Fgs+cXeF1Zx58tQ1ZU7U8RB1kJx/cBxrGhAVp2Fm8Kbtrsu927w\niU8IripwYYw/tuvFDF9jAjPyKzKRpnaThDpNjdJCgNMs6CUvGfB6qVgoESb9\nZaS8/T6RYhnbFgYo3AscP6O00m7wOyXL91G7qqXu/NZbYGiHIWADa/py9IEq\nPMUKVa3Of9FPtSsr1i8ElaOE44BWgra4gwwuC1gjdqx3EXJLhA+EUY1sFakj\n4a8BSBCUzFCZcrI0PG4hSnzNPR44ZTa+Q596e5m7tVwiZi6dC85rTUAQsDp9\nTg5sXEcgD6joMPEYKZ94bXSy34aGKWEtOkDcz0k4wcj1BrKFcmocNkYkHe6K\nn/4F3IP/3CKAZ90Cv2yez7w5g0yM/Ri29mSLchKf6nqwBbmFcIFGhoeNVdv3\nshPSZdAKKDzjcSxAjoW29ZldWX0xiQv5W3oD/1/fkIK/BaBfnRzqYfjgMYQK\nyfNM\r\n=YjV8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e455ee4f81b05c032a5b779ad5dacc2b952e989a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.555aecce5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.555aecce5.0_1609271126471_0.17896676871721295","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/theme","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.776c18681.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d73f5b9cc0e49ef18b3cda10697947b0949ef84","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.776c18681.0.tgz","fileCount":40,"integrity":"sha512-9+ogkik2ErOLpp0Qnh9bK07xBp8CTDgQjEoS6oTCnauqWBTVUepIkYhHcLw1FfUuWW4Ad5RK4j9FyfendG4Z8g==","signatures":[{"sig":"MEUCIQCWPV22hOtKGBkLL8oX9PbQYFNVNRX97rA3o76o0d/XaAIgAUgTr2/NrhWxpCIewQVsja5FgyuCYypvLpJUSitPQSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68w/CRA9TVsSAnZWagAAODEP/igQqV/CrgaG6Y9NW2pV\nRDQXvdK6rUSay9yoZB26K6B8AGkeM59hY+SAm4xBUXc/V+jvZfWR+Is1M1Kx\nhpEvQzm88zt72qGMYGxpAHhbekuZlUC+wnzC7WfyZRT0+KX2GMNXRqNAvZLb\nJSJXGHnUiJKuitM9jMnjtKl0V4OiIQkt5K9SLljnEI0o1y74u/qfcGoMMw8k\n2Rbaek/0hXk/t2/q6s/adW24XLz/rNEEMaEscC9zCAsi9RnPUmzwXDL2xp38\n72VaVyfO/IGEuN4muj55HNWPtt15ELyGuobyY4duV+cAduKV0ExaUPpc7r0d\nzT4h+Sn3IHcgbb7JFVv1IGMe8qqc+I9qwTxbBiaWyzucHr9uiYV1v+DDYDmK\nuJnJzLYH06Ezg2rzYzB4bhFX0fHX0re/f6PmaTf2CBZbJRSnJLmx7AnZWm4d\nbKlHkHDATZs6uba74hfI3yIZBBCD8lIPkJsNG/aUu+3m8GduQpB9Dd5ZlBCi\nEpI5lZ8tWYPMPsrHWQpB9fi1tctC4RNkxxfBwm+ReGEsF14LbPCtvsko4T32\n/yE8PS1aD2GNgkGFfxidaVLKd3bbcZuubLgjx/NzaDzHvhEb/2WVsOHzRx8R\nnW94Sd9NySBdGtdvDEJdpnNn5R0Lz+6sFNQENtf8ulpX6vvwX3+Dwe3s6oWv\n2pM/\r\n=oDhc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.776c18681.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.776c18681.0_1609288767080_0.8510715626531626","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/theme","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.671d72d95.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb1236a5acf22e8bcaf0abff98448242a4b18c95","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.671d72d95.0.tgz","fileCount":40,"integrity":"sha512-VvBW3AUle4vFwND6wox6v3yHXJP7YhFxk7TrsIYzY9c+ChkcE36awAy6VYM477C/DliLWEbwqWcWCo8iVXLcZA==","signatures":[{"sig":"MEUCIQDZuc/kY6STVUWKMenlxTeb1hgfgi9/qAH/m97d3/dKzQIgI60w/BpCHiP53CBnd0ZVV82YHMukIJH+zT+d9I5umUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N7aCRA9TVsSAnZWagAA2KQQAKJIlZhNbNxY70mfxC59\n7tSV07Zm7q+13sHWXD4Vg+5nzHbUyNPXL6HDASwkOEZo2v8mXS4YfuQxdHtV\nWoENZOJ5EloYTwKY5zMAvysUHo+b2nAryVTiAZH8ogOQT7LPirvu2zWpP1vW\n4bABrGyXKTWC0iL/y0IJk1dPRU8/G7cCm5KU0dWjn4a6dXpjkgfOyPKSs3Rh\nYuL6qvVZ77WgE4Fmewo8mmjuUJcnmMPOj7U7rw9NVn3yUZk16Yl8JlFhNIjs\ngLLabVykzsw8p0YubBHamDErDL0tBEK1LF+9v6L5r/pjsjTPMUMPMOybQYcV\nmKiqEdS46G9aFdxFKELONnOdY46Lt3xaim/CMU/9v58DY/qCbSzFYCN8pLAG\ngzwuVzDcYzGTiu1XGQqrUeZr27qgX/ztXo8k88FY2mRE7QwqpIBr/0tsK15f\nGpfA+wrMXVtdgJ6oHPnsU81tQZeSFX0iW5TTSACn/opa9V0p6+03Y+aVhTi3\nL65IAshOVyWqmsxkDUIN6VVcZLGXx5OzEe6XzntS/0zQXKmhT1wKKp4ANTgs\noticM5wtxddTOvuG36FQMB3frwL5ru7nAPiAWzHjcBqXc9giocJtC3ZXSBzv\n+SNO1xGqlem9ZcSnX03nmYhY2COaEzFnla3o4QlzSUX2tEgE98YmJPV0l/mJ\nVDmr\r\n=c0mj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.671d72d95.0_1609359065565_0.3655981837962008","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/theme","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dfa60021b706af8c2e117499355bcf6d3babd14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":40,"integrity":"sha512-rjE4K6bneLxqKvnPnuhVyjX76jvxxiLo09JbTKdrgfm3tVNQEbLJ2l4q1yisfJz8iq967IsuBJ6IV83EEJVeZw==","signatures":[{"sig":"MEQCIHPvVYS9bl0gsHjsZLUxdX/nl7j/hRjlS9louwvYUfKvAiAOFE6bfpmifBftaZdwq/dAxOuRAmJueEphXEZu5m+0eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PULCRA9TVsSAnZWagAAep4QAKBa1+dAgTURs14A2P/N\nwqLebjdhi5GbEOrWEgnE9feJszaziSBavYzGCyACaF1DX/jSsMf+JYuyPvk9\nRxjdTXhlfZvTI1ZHdSE+vxL7CcAThPFG8i3K+rfDlQZzXDgTrEmewYj+Eg7N\nLVSy11VG8GQ7cqUayZE56jYTHujSkLIJ9BMeugniGuoGIFWBj1Z7lQ4yxfxM\nB6cGd21XaRmRJMsLEEYvgpdHrnhjPkFePxC42a1d/ijWm5odIyFmNNIcPf03\nTRjj/QpLjgczatvtZAX+CBTNp7zh0M/YEXNN7If7BIJTd09vToiQS+cxebul\nocn+FA2qwH3T6rp29ih1l/6gx6aP8dSLrIio4dgRz42HXqd1PnOA57DMNRgP\nm/8I0mu4c5rzH76E1WD03URj8dI6hRaWdBsdb9aF3FDl1tnV5J1CYcqKAauo\nuOV/P5P3XeJX6PJ9YRGJHZd2erhhPi3nxp3MwchW7iyBuDdoSdmNH+0sp25U\nhxDIkXH+fylbmg5J7vIJlwQyIVQPIMf9vBmmnCAmcOaSIi+2fxWo4R8KOZsk\n1PZSOuCy6cnS1CXWiFWRg2qtrORarOibjPAb4Ct65lwFO/LrYK9iGZa+DCeP\nhWhqccg7755xkdA/3/smMv3CoSxgEC6YIEIjyXzwC/CinkdRqnvFab2CjOOQ\nyAtq\r\n=Shjg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.b4f5a1c9e.0_1609364747014_0.58552261193953","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/theme","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33de263ca9d5925df33f4ec490654c80516b0594","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.a94bd8deb.0.tgz","fileCount":40,"integrity":"sha512-swzqYmGW/i1nEQju98tTSkvAuWbPGbHkjfVaqL0XwnNkVClh34B3CzFs64iUe/xAqe+m85a3zUw+fzesQTBLIA==","signatures":[{"sig":"MEUCIGHFQ8cKVYhVMjyyowuZ0Ku2OWMoTAa40gVbhZoIWNAZAiEAqUDhIGkqtQdLpGjwoRdcUJkGOarknhk5sRdq8N5Jpvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Pk5CRA9TVsSAnZWagAAZ9EQAJRAmP+z6f6z5U7PtNlA\nPLpo0ISSyfXkpEGD5Syshds2F1Y/wPYxVeX/+JvvxDjjHFsn9eBg9VKDBEGT\nHWXwVgyIAHUyzcxONkcq+kBlm5yqPb0INP+qCrQlEYbfFa8uweBeILfgZYz/\nQIdnpjDyXYWZ4yP326OQ1JWG/lg9xLIucfCT/fTvPEDXkg/8K+A3wI7n1i8U\nenL8p3XNRUEwGw6ZvwAl2JB6/gzQ+tbvrvUvyPXhIXvvC070PD0lL1fEXkNR\nn3ig0TiZnkOTjsRmxHnz6LzxzI8tz3yW5zBQyu93o30ghcRQRmGnMVRkS+x1\n5a0CXsp1p5VXB1riT4WjZxYpTFGep6Y7xJ6V4hKYeakuyWKTHtZjNe7+p1Rk\nUO+FIXYBptBtPoXptLabd7C8/Ug2hzCWzRtsLco3XGgydYDM7gCPHflh2ZrC\nh6FhJ64EeHtXAUDPE9g2uGIAZ8DOCSZn0tOxbDWNJglUMiwxiQ6rZ/uryROm\nQTjL/yBsw0G32dLQTJeMjbRaK+WCn28TpRqebhpBAV6miqPBT1ZYTrmYFoHh\nWBKWb15TH9tESI16mzCGfk6GD1zsUhUYT/JEsQQUoG7/mHA85WQG+LY+EasF\nonc7QuRv6pFkyNR7SbmIBCdG81ZpAoHEs6aHCMBd2IdmKXtrmhpZiueWgcys\nW8Tl\r\n=2jiZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.a94bd8deb.0_1609365816934_0.8234814629564735","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/theme","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.5d128511b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8433f01e2f3d817ea1947b3c56c9b6d023edfe1d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.5d128511b.0.tgz","fileCount":40,"integrity":"sha512-PdzuB7LMlAFsiMEeaf+F9AUJdmr0TaRCqglo/SsxFbK+TcrwHrx6HCzL6+CLe5Bw4QQA5UMFtRdjHtglLryqSA==","signatures":[{"sig":"MEQCIDSyHmemOJTjlAaIBTxBWMz1mWU7MVZo2rTeieAaWJJoAiBPQnM6r2vS21MTlYuj/5sLEmpXCPqW/VkJqlnHuWJvXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Pp8CRA9TVsSAnZWagAAwLcP/0nR6MHN7364mlPzIfGy\nu5pDS59ikU8c+H8vuv08PwZ6ngkr8Gz9aHq06eC05QDQDDa6MGfdPN22wrh0\nftHfpMpFiWL7ce/ESzaO6VeRBOn/Q8riwMMzOI5gaEVdeO9Kd6BBuk3R9hMx\nS5BiL5ZdqbhrNIONpAi3I7Z7ligOzjufRs7v9W1ts1LpUwbc18UQf84kJKEk\nAtgYs7G2Q1Gbdg1j3S9m0ctckjIWaLtYHBDLOuAfUeeuBQOQMk9WFmfGb1px\nen+hRECQzyNfNDJ5gurS0tTg+52S5tQhcuRj1OR+pHhRIt9qs08Z1HMAFEct\nCy8TUGix6IvldNzx/5p2cD8ldcxnD9l9ENEs9L05tMAgO2UBxyK7agkhJ089\ntRkbnKSkFpwSTCr2Dl735UdvkumlQbollk3ldISpCS4+XVrnSP3ZPySyFdgK\nFxZNWW/TPM2hTaN2LczcXJ1H9UymC0DAGwMTrgQPDaZANKjjhZquVIp2Rlp5\nHbz9J+O9gITIQxgi9WV21USn4J23WE3fsuzLcbxtiIZfksip8gQtqytOidOn\nf6cUWpShwlve1P903WZ2U+IHAaTC0uRHYhClHNaicAH/TLj2SmbwcTH+iZCM\nrnBSymdtnUzaNhEq9j1BD9S5G4TJmyLC21TWklTqBKSopvy/YYvti36dPeQ2\nKzIJ\r\n=D21T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.5d128511b.0_1609366140416_0.9605617361105623","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/theme","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.365c69360.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ed5aaa966fafdc73e7c787f72ac7c3af644833d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.365c69360.0.tgz","fileCount":40,"integrity":"sha512-G8jePeyXrbqXnhnJ5LKHKKLJw8H5BFEFz6D+Lsm44pdJL7Ia+JXH496Vl2fO1cwKUKzhncS7RbdP07Jo9umIHg==","signatures":[{"sig":"MEYCIQDujn2A6rVyGpwRiOYoHMFbACvqzDA9j7ZpF9UpkqJ0ggIhAM1lIMlbYltagoaAMEkvXS3xzYe8bGTK9hhKCPdafpFm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KYxCRA9TVsSAnZWagAA99sP/jv+LwW4zGjVq+xPDmeA\nKNhbGaWhGT4XBM3jA7mAp/Ci1wJkQkSzbgzlG+qUdP7kofHhXkSj0c1uB4yj\nbDVrv7yJTFgXl3zklPsELocS+haE48wqHiAU4NrnwxifQoAiL6pUotP2fln1\nuCvoA3xummn64Dct3/5g+JSD7WdMb9KQWmsmsorAKgvQLItqL2VxCJphJ8V8\nulBw6GWGMYs0z0Sg8IBLFNOWPvBh6kGOHeshBLHPLt3vIloqnsoVg3VRWkBe\nDODCma0FcRT1XN41HhWs7xn0sslSO5FuN7ieGBSp4FtGpk0IvERblbH8X1YT\nsUjQBe02/15o8b2l2DZdp+db6YAw9rOA6pR9fqGBEyiZTnnxH6edhsNDS+vJ\nF0idzHBAD02wfzxtZuumLUjSGmEidRzdMFGukcOWXQw9yr7xOSAdLa03trmr\nNMV3fl35BRpap6LQ1eIXtDH/cWJ2rO7aQeXpTLrw6alqHsYid1umtZoxNXqQ\nBzull0sCl7bTFfBNfs4nkSmLFjkfHWvfncUIe0O7KdKPa0dYhg0z4dGTmzU/\n5REUqZeo9r9rXxOU8Peg/FJkYh6iDFMFVkhese5uUo2bktmJclS3nkMtMX5f\nPDaTtQ7E7M4DKcGmajmlT7yWUWB6EyZ+Nk3gAdtNM5PB3IBO5dbRI7czQ5cm\nQ7av\r\n=Djjv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.365c69360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.365c69360.0_1609868849386_0.6490145033551733","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/theme","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.700a8261a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d5487596874d4ae21ac6309864d81363b986dcc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.700a8261a.0.tgz","fileCount":40,"integrity":"sha512-of6gtVQ8gGPEwFaBmuJFwudwGZImkdIZnUtaFajDLENZnNQUYN4STWpfqCQHMlmVfLWZRbLE1BWhwvszHCbvhA==","signatures":[{"sig":"MEQCIHZ+h0nxxnsUo8SEXy6yCwhx7hpo9PfTg6RA8X67/xEDAiBDCM1nOlpMu5Axg+HPwNpfSjwuqfdK2NNIP4ClGl4ZWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NNBCRA9TVsSAnZWagAAtegP/0zqNf9BUXM59M+hkHXl\nJNY8uCrBdadN1BIcFCabubej3yllENp/FwK5qotttW7ZJDVO/jz9Zmu2r5nf\nBPf4KJpNx6Aq1e9wCka/kSBF8UASsKjhjTg3PgdGPM+ziOL47MMnBAsumCx1\nsQEn3vOEYnz5OFI86H0KXmHblMSCoR8B3AsfBELBfMJMySYKS4IDq3XGcwHD\nne5ycntN9o/eM1GDunb81TUFZ0uGKy5C4sji337PRENM1jZTTIFQRaaTvzn0\nDaUyhX0lbnqj8KcPIlQR/x+d2en+K2jafJ7Vu7h2gUkxSzk3KGC85k2MIdh2\nK+63r/HSyrdKfbnyRD6GANjdRrNHOIi95P+5PlWf5bk5Q3mVbg4w/SPSYvzD\nsH2jK0gtgpI/qfmaexSAN0PeBTj37St05DIyuuBTrE7JNeMXx4RKe0fbANbn\nweiVzlM1LZMpB0Jm6CV1R3zbJCn6PwIQQ4hkOWZCOWCvoIUYk3PnMnm08SqK\nO5wAaaLTnyQxCun7uLR42F2O9YLllj+LLxeqL5R2sdTeS2yLXFgiZ2il1Xvh\nngpgLEqwUOPya4YOT6nq/JQlvD03NDRuw+9iPUesrkjyRI4/VjxFsrCRFHj+\n/zlphjnSY4tsM1e88uUpRsaRS7eCLWEpZ/0szXHZvdhw/40Ie9DRCAkgLoTY\nO4Cw\r\n=E6jL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.700a8261a.0_1609880385256_0.5903266208800906","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/theme","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.766981c15.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24200b852069cef0d0410abc7a2f9d630926f7db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.766981c15.0.tgz","fileCount":40,"integrity":"sha512-OkdhlT/Kf/EaMKS7i5n1ZW8OxQ18l05Ip5uZUr5uoAkbagt4v7yDxu5P2tUpUhoRREKb6l9GHjyZfs5UIlqo4Q==","signatures":[{"sig":"MEYCIQCq7bGVECg6Pv1nvNhiJ3IdlR7oCEd9hmI4kYlB1tzpRQIhAO7SdMhTzL/QtL7Px/nXEh4qoWc0ESG5SLD2X6iaR5qi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OqeCRA9TVsSAnZWagAAvy8P/2xuYepaUVUvppAqVB1W\nyWIAD4u96aH+PCi1BkJN6ZVMp/MV7zHywKsS+C0i+rwF0yF3Xhnn+Ln5mieU\nxtKgEnIPAhcuW94QMzfEsHuskg/ikMYeE7Jh3UI3WA9nQ6pFTrzVL/2FDsT+\nasCNM5O96dqnc65RWPsoMdn6a9UxzZ4WnrKP5ggFdi4uL+kuNvDp8nrSKMBA\n1FtgMSiRyCe4ODHW6GK3jxNkFMq1h8FjMNSvoV5qLINrOrzxrJZEFGxDh+hV\nQBPqQa/vrYWUSsC1IOAs2DR2Ohjv6jJnc5hQlxmLoa9yxWlWgcoocTTVsEfy\nLsHTPIX79mVbGApyC/DfLBf7AOesxwc7NZ5XF8vW3eY23AtbsYYAlRJ8cu42\nmBDyldmPpKgmDzfP0ep9BJnXoSgZLHVUxLh5ieVFKugVfrFMTcA4OWEBiFDA\nujEFdz+XI2AoZfDavQ6KRway/CqijOCk8z4RnDjNefIP8ph8ZqJvk/ib2ofg\niOODQ3fwkklvIjAp/a/0DGGDqsXtQKh+xy3c7M9x/Vnlt+Uhd6MyhFJO2Age\n3V5OXD+No2qwQLM3XuiANf0BEPzZlcNNQvwZZ07J+KwW1WoOgaDRKO/xhwLu\npCIq12YSA8zF+lSqzTRFZrk3oYRCcBwvFVZWKci09EMMcqbuH6XqG9ymoFyu\nUnZ2\r\n=yEkw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.766981c15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.766981c15.0_1609886365862_0.028205806934405997","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/theme","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c75b9c28a794ed8929a969ccd6a3af6f33b375e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.b28c576d9.0.tgz","fileCount":40,"integrity":"sha512-hlLMF4PqROoZrhdi9H3bW9wz0HctfIhM1rNkS2AAMc6MwI2Qv2YfSFdy0KwaortXRcXSHQRXqwvgwtFWEMEDUQ==","signatures":[{"sig":"MEUCIFwQK+ACGq0GCvM4qdTkoBgkF2wVgi4UyT8/1H+mgp/0AiEA6ZvmDrcN6+fcR9QtGC/GynkK17Jp4Lc3ehzZrgAYitQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OzvCRA9TVsSAnZWagAAEMEP/i6mAuiK+ECzH/iqXJOM\nzk1QgU21XS54NgTQ7YfUljfxIksx41LecuqWLgPoQXBbyGFwD57Beffg2qtK\nnhpPKCpdJc8N8H3TS1WJuwewObP7VBSO+6DTi7NXagmCiUKLBe3U0vtcc2i1\nsSm6tWIAqPEDZ0lqAT5UEP7rwiGI9bInMVJetesWZ0cD6BI7XGcSUYr38ukz\n1uwdvpm8TPUtN26AtNia5iLdSyhKfQ68khwiz7lRsy28QmApUbHFjYisaiT6\nEnPBdKzooojf1fyZ1N6sDBlC5ZhU+jm++SXu72Vys/5Q/5ejYjSJvWR0Le5B\nQ6qbIxtEAZA9aa71Ux1jtspic3gCRab159v4SKTYrwtRsfVjPc7Od4/IrLh4\n+v3Fb5vWLM8tirP4kOGo5sMZ/RtxvGryZ/hjpKHnFA2ZS2LSNEx8igG3RrJo\nBhioCDruhVz2TLoxmb2b5ReqIZOFZN6YZNGRT7RFyz7jowvwkNPdLlxwjEZ3\nIdsUt8c37qdWfW6QcgRrNs2dLDFYP8RI7GPyup6s9ItEw7neu87L7gdcyz/o\nd9pZP9hNc2qthpyum7sndcItrAkE4a4UjEw/I9ZrdA0OEp3piQIzaczgUKOX\n2r18ZSeJUZz9MVOHa40uYx1yke924A72dKr6VCuoZbZSd8HZ6poPL5rVpQQG\nVquI\r\n=291t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.b28c576d9.0_1609886958641_0.4829366476483654","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/theme","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.968735356.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e7bfe06edb304cb5de5610ba8f83dbea2c63871","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.968735356.0.tgz","fileCount":40,"integrity":"sha512-ib5phaNMn2/JRdm58MEbdKjqdOl7PqtGk244Ov3s5O2M464tDPgclCWo00t4pbOHNXqM7kMydTfnbDZFT3c80w==","signatures":[{"sig":"MEUCIATxyO27BOhUmkAVoqGM5IkNrUfyd9ETHaJGSpdbiqCiAiEAh9FjXV17ucCpkqaTiJpzR0uGzO4TFBJwDkM9Jxhx0wI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dwlCRA9TVsSAnZWagAA6IsP/2gGhjqWdGpGh4Tlu7MH\nUhl8IXGuT3cFfeIxHjLzcRH9tsqyixEsMQPbe41L9i0r2vJXIn2wk6tasJ1S\nhfA75tUhFIy2/qSA1MGMXSqYcbotfrKadDycPGd3AXrJ2p8aWejk2buGkqgY\n7m17JY5lvr/WwDwSnWppF6InP58x7OiSZSHLpmpLW/xiMfWurZoLONOMrcPv\n+hOY7MCG3vB1GN4RRUTi3ShpEADtuLCSb1S2qvg0w2oVchNZj5JffpvncD/O\nFH8EsB6MA1ZUVtNhUheGr+D63bJSmoU6IHfe1eRPggqII1fU5RRP1CjVAgni\nUJP80PwPTXnIqN/7jhjycKMRA5vYd203hO1zjkWblGLMAZEFW/cogvByVY8g\nrd1kVqyoW1sQsZCK+GF/3xduMqV+hT3+bYKGJKkNkVln27YJra0H2LyUeAh9\nPMLwUHMT4VlzVSnf9+9Ws04mBeJ39p+/wFMPPi7jOnIRXtXc3w/q3rnrvYqa\nH724FO9mexYAyE7ZS14qPXMtjPa2uk3Qv7Gc4+geTGIo7WEUQmpE2xxc3vfQ\nsmKdyeBpKS+wPVGA3G2My+k0w6VjfkzYC79ZeCm+DKp9GwoPltIYyMAsRGdT\nA7SX6DgWxVJLE2wkpoZrnS0YztdWhIRfOb1jmRcdm8HLuovlf7RRV3RUVonH\nE6WE\r\n=TwMC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.968735356.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.968735356.0_1609948197193_0.6030170181906371","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/theme","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"328c2e7763259b47f8a7d47ab5698aacc4f3cff9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.c5e18b020.0.tgz","fileCount":40,"integrity":"sha512-g7sD4C86epeL94m/ulcJqFVNJcQikUjdKpYMuwUh5iJmcK2Rw3z0xMXmNfIZiHSiqJ/tbExtuQgL0xZ0tkcfRQ==","signatures":[{"sig":"MEUCIAQyTAfpBYBxFJuXO8yusiiS2xvCGaJZS8Z1a8j9PbqzAiEAi3XXDvrSdBwXLp/iZhJdGkM5kqVJcAsFTw4oQBjXkvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hLcCRA9TVsSAnZWagAA+0UQAIPKAR5DS1yKWS4NauQA\nU96cxcsVOADlpT++/In5BhBgUi8h+0c3cmjJV9QzIRHOUDOXSIkVocO+18Iv\nK2Mlst0PszVJx1bSCQFwjq0WyMFy4kCYQZrpwrJhnTezhfvJ0lgMoQgdMB6R\nLNFZiq/n27GnvZSMlM1bAZOGBD2oxfaXqqv5VXPHWbmIypPuZezmp3KpDY0B\nuMJC2m6TrMoUp+HrTFPh2UBk1e/QIpyxL5/ZHYks6p9I7rOEgsXZNvIfkYJo\nOkyg6odufaMrh7n8J/6HDu0bHVD3raNfXY/P6tfZ5NDV5VZWjvkoh00BuE/8\nvGun9bF184h/1P4ECceZm0AOLl7xaXDfW4+2q0WVUsCIFrNr8LbGz+HGHTKw\nCW+ov82cb3uMvETFDAFnEjJjsb8ctd/MHoStex9KXdiHHXFQWKwbuGCvl5lz\nOFe+rmSmrQt4S4ByugQe1jz4l2KCT16edjgZrohf9MSeQxcKMcxSvVaFyVnT\nKQWYIWZwc+O6kN0uVyqSWk9Mgeut/zQWtFzD+zevSIUIZ3ZaOdcoW3cjx6ft\nWToWx5oaBr15EkQTdqj7Mb7PDdfKN3Fx2Tdzp+yKi8w76FwMHeDRsaR0eFKE\nbzOmctAf8znJCne72b7hByfNuManMoB39Mtk6lJtxr7PQIhNimz4g8MR3rAX\nDz92\r\n=snyw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.c5e18b020.0_1609962204176_0.040289379110097556","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/theme","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8aab072f6ea365d2ffd890b50d22386dd33107e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.bcff8a66a.0.tgz","fileCount":40,"integrity":"sha512-ZAeIy1Ll1I3WqfB1oyGUG3dptinQ39sqt2A+S8LmZkSdPZYVLOqD/Ro8KqLtKQsceyG/l2c2j7yjY/CcEZNLIw==","signatures":[{"sig":"MEUCIAd/U4X527X+UTNJl4U+mliCjVLA0jhAgdUfm+ZpIoq7AiEAmKsy1RN9fs7+zCq/RqlzX3esV9iCB++KeDvHk7g/qdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hy3CRA9TVsSAnZWagAAlooP/iItb0GCeQ3FaAQ94v5y\nRCJP7UgiT1K7B++yWRi4YpJW+9auVC8frNO0NeTRBgmtZsAD5n33tfrQrexY\nDnpEdBRErwnw4LQ4oU0WN8iicTXvdKeMw9RPRY5u5zGB16PutYYiyG2IUdvP\na9mwx2yV0D97EKS/ZeIn4dA8c4z4f57YOSXr/+yLfIvXXBXxQmY6Fk+BX44m\n4m02V9kgVVBWKD6PovbzWETN18VI681fZgkgj9st6eK9bAVYNT++8bx5NHFe\nJ/3LDXTfDim1y04US+qV1g8cWfamOyby56oQ0qX4ZYq8B21IQC5GAIrqDNvU\nbw4j6W9gxy4Nw8bFabw6gy7Wo9fnFKFR4TMBNQda3BzQdZ1Hzz/eHL3idHeS\nyOj27evjFZXUu1boSgPaJ+oDSEFAKl4pbByoMm2ySHbtm9N6GePvTzjuJ2LX\nPzjVO+EyB9qwQSVQl54ax27GOXdXu4A82RZjZmJHU7f8UYdj9UfR1bfF1bfa\nlIdBndIKcOTKPx+vA0uE+DPtea/XRsqwUxqVYjDFq6+BERChrJEmuHCvR7kR\nCZsVawxHDsAtQ7jR9iB8mq1CXlLYzpCvm2EjJaf6v8eeKRLYBldwIvw+94yZ\nqAjK2+DBc59OG43L1o1WayUbZJ1hedg1FqGDFwfHkd6dCHH7r+Pk2zKRoove\n5r//\r\n=Wf4U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.bcff8a66a.0_1609964727038_0.17302984345964623","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/theme","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"741e8c30d14b564be5d96bde6a1b253e66bd939a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.79328c9ff.0.tgz","fileCount":40,"integrity":"sha512-bJS5D7Bbci2ROIPa2ELXR+n4Bac8F2EzXlRlpG7cWGBIrx3zyBTCC4nU6J2NnE3G10v68BZCcyc0l7hoOKboBA==","signatures":[{"sig":"MEUCIHgyx+ZA2wwy4ORAjIEQE5xjQc/jGfbjj9777Bdm7kN2AiEA9hIL9wdqERXxt5CwJmZgqX7N+CVcbuXM0iXdyVriNYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nL3CRA9TVsSAnZWagAABUsP/2CYikk5Xru4BKyU0m81\nx1TleHMLFfYsph+QP2tS4LmhKa17x71Vg+4jMWaI2cCXsa9AzqcqwYo3PQ1I\nXpOiTbPf/oyKuXna9ISY9555qXVhrPtM286YzKswyj6FNB6Tzdk/v0cYN9ws\nJFxTwy1113G6p+7ttMwRqCBdSC8Bo+TRefDIs94mTcEKciMkF33HQbO2u4fO\nOjFHY2yAEab9LdlDouc91w6CiQrTwshOiOI4eThkEcz0tfhM81/TviM8Jfec\nfYepzlSDa5e4HfwO18Z8ZKjatHg3++wfhp05JHYTUXRqvjOTBPJlyertFpe0\nHNxcpKBzzFw+yw7icn206621oaUnZ/IrLF8h2LUlWz3fL6j5MNNDRJ2LHr6r\nzgO0yLNgruU5YUcfCrlWy6xqId3jy/2eSv1KVM1dMjcIi05dReb78JSa3n1U\nIe0a4fxtz9zUEIVuvRHILIU8vnWF7zcUoczX4egzneO6GWX36P3sc+COcFvf\nlm+0hz7N72HmQhBHwWgY/fCsMQB9fyg4OPD5NEGUGXihLw08dIUFZwH8XgVV\n+wA76iDa8kXhCOnuWjZzpmaoG57pBMuCIqyeznGetBpc/ZvIPKe1Zje5FsPa\n8myU5O0RKaYdsgTYnGXodsYPSepEMDIeKYqMfLGY701ef69W3ekAyA6pWAbz\nn+Ty\r\n=nPFa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.79328c9ff.0_1609986806668_0.5349965028398902","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/theme","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.121e1f303.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a07df737a83afa6be6b5d01c66ee25494787961","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.121e1f303.0.tgz","fileCount":40,"integrity":"sha512-UlsIX0HNNfMSm7AZhGs1/zdmIEWerQxL21odGzsKqjiI3MM5shmzX0/459tOJPX779S4e0NnKTNpdZuMdRS2Bg==","signatures":[{"sig":"MEUCIAnq1cM1ybv6kUYPAdHDK6Zvhhokk9tIif2Yv4zsFad+AiEAolZGsdPxeyYCwc67DdWXp4064UftOsA+3wRJIostw/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95brCRA9TVsSAnZWagAAkVAP/iHZIcVmsGMGYCOC7+9p\nZiX3Tu+uYuUU9/VCsh6p8lariVOJWZHFefueyzdlw6luVZDtOItXZJdoFoWN\nYWgRUtgzFvsWrq7O4++CAjQD3N8eAofHDgs/NnjQu3M+LomSCuZQoCceS+Ja\noLu8ZFccXU1VJu33MU+mZCuPq3PIdYvEwi6ixmENjAVBZyOeLRNIEv9//VJa\nmQAJxNqBL/Q6QLjYQxsVDBxmux2p1+7W0W1x+0ujAYvqHEJ6kZFEbMDp6ZC4\n1RfMJDd/xgHKRUoB7DpSBJFRCc/nKRnsOr1okXEPSX6Mnhk6mqhCCUCV80eG\ntU3jR+czz5X6KTVAwpYVFSIJjWfM/0WOXQTdoylzbxRfZF6Em8KyGtkHyoNP\nIRUZk6I43Pd1ngenJ1enHzIMf4XU17rnhO8Y/94vcpJj/WIVFeNAn1BYJIPQ\nxmcqbucj+KY12sQblJ9QZKUGSoC4OzwtLb652nWkix9aFllBmOgbdYkhXJ4m\nCFn/le1elXySJ5ouyFc2cbtvAClD305vBblu7wLs7MKryZ5mAe89fRr3QQYz\nrWrSqUuVCqVrrB8Wv6R/o6IoHqAtuHJm5ec/hQlxaBCtxQGSzhGzxE5Z+aUJ\nxQeOGGztOsQK5z9C0f5MV7FBlYJNt6j2PXqD06i47Sl5SagAgldRjXXMHDfA\nbNSi\r\n=llGi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.121e1f303.0_1610061547508_0.9124627448680902","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/theme","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.abdd10065.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bd56251e33e193f376fc06965087398023683df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.abdd10065.0.tgz","fileCount":40,"integrity":"sha512-iOD0NHUhAqYQqMTJ2lb+YCFaivZ6QHAnuZgzEf9f5pOCtnET8/Ep6te2pQWLPB2fmyrzUX7iMpVkHNUQWJ+SSw==","signatures":[{"sig":"MEQCIHaa15rv3J8wQFv5oTsC/Ta5rZ4dQE8tkqo2ygtUUyplAiAgGLLrZ9XWTu45UuNytMU6OZYQW63rmXSSj/kgkpxWrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Jt3CRA9TVsSAnZWagAA6xcP/iOu0Lgd1Ul5LkqgbDz3\nIg22teu8ovbz2TmnPFYqDdem72QdcR/720NzAxuDJZPjh46YMQ4YcIJnhHzk\nxM8uS0g/Utazvr++Gy2u9P4bpB9IhyF8VX0HbVfv9zeSA5/SeG82RsOwCmMV\nUGsjyvdQfYtEYgtVazZuYbuECwuAMD2uZQxLoRC51HnSOyBKo5pLxzK6JhLu\nN9LdaYp5VxF+VN537il/cIVhLFwoOzJeUwG874M9XT0wjBWoissU/gE2aAtB\ne705n3mb9QgCxtk09BjYh2FwjGPdrAf62oR+I+FdOumukHMEq2aPE0qkFKke\n9SWUGLuxtRZ7biV7q+AnDy+rql2qvdy6DsqZgY3Mu8BhYWkN90jBQL8guClZ\nhPUiWCyroMjmO7WbM27AxLjCC4yUi3fi5BX0YUoJxOllwkXpVm0TzcT/64a+\nuwqUCLVRbuN2Xcv0TQwJBiZg9KMfceviBdnQL4Otw6+kxCZCAx3dYFV4aWun\nYgosvfd2tBfZT4JvGdHkFvjxb4UU1fCImPBg6hTIigxtRmq1wdrJLhU7lUJp\nBfgVOiT27D/jV0sxtg41Nphx6gjvUHYJGFl6V2Xof/BWkQom42SesZt1X5NJ\np5IL0P721i1FqW24AQlsvTWMKxKke7m5kT5gKm7ulOFYh1k571Es0PFVVTv2\nIwNN\r\n=Rof1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.abdd10065.0_1610128247498_0.746865428780157","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/theme","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.089de519c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33f1944e0614e478184cec22d8d76b3159e392ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.089de519c.0.tgz","fileCount":40,"integrity":"sha512-WXnfhkqQDRzCtG0LdeGZMpvLFMwF9Dr0UmiIIVKgc1IhFHxQQlSA779Ziw5VqcJW1ZtjYnF0CwvvtAyQL7mBGQ==","signatures":[{"sig":"MEUCIQDWmqNb8WCZFqgvMzgXQlwat4lwsZOMKOWd9EeQire7nAIgeB3L4Dbs16bnp1SOP/mTk2kaAPgr1ivmZIRv9sBUR2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NqNCRA9TVsSAnZWagAAEOUQAJ3fBh4mfEsTAygOexV0\n049v/GW8fckqbEGHkxwXhQ72qxOvgLKQTHECi5RLCwc+QN8aY30o3wpv4JCS\nb4qfJsyYx8Q6uwm2xGXPnVYwJF3diPZvQeGT/1ZXeUNxzoaCBwCEs9TAwjEq\nsB9sQpJTAeBKSPyo5KuRPzcg+B9OpVmQxhqBIrEQGYhI01nFPNF13hkFC55t\nPd8KEsU8flCl7T4I+nRRS1l1UlEGN13jNsO9+0BCJ6neTYeg8odGD7kJixlb\neypVG1QTrZhbWyFjg3/DbIMfjpX+4kGrSCLpuHI4NCHUPd5JAnNVBUCoTDV5\nR4rES4PBbpRsHZ0Ds9Gw0/Te6MUCDJM//BysU+guObVjI9OG/E10wrgBapVu\n2nBtMgZ8UiFgp6VDmIKzE5MGuCDjI86f3z+uSrhVWSveP7Y0n73pBu1aXAMA\niufPOoo49G++8NBpcv3hIntLSxrwI4LlERX0pSywsz8/Bt40k8uAYxFw5LEd\nVnf1zTnsehiyCzloQGDeKUXLl7UCTCgV7XtIDFLuHyExPFJlmYgQNS4qpwpR\nwEXH4pd962/cpR5TknUlT+tkMBuvjtF44l3zOD7iKGye4iBlE1iZOdLSEE/d\nSC49GYygGGF3pz6FnDUNszYbLEuhUzf0PQIe0zgu20MPSTbcGhXP2RPWfBJI\n+Koo\r\n=vje1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.089de519c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.089de519c.0_1610144397368_0.9858146547321522","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/theme","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.163119837.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d67155a3e3bd7f66e4710b518845a067813725c2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.163119837.0.tgz","fileCount":40,"integrity":"sha512-g8UN5ywnE3f4c00o5hjRSHRPyfD633sPe/4xj37pW/Z++9x11aVhVvHoXZh1b7l+mJUk8w0bBmWrlGcgahfGhQ==","signatures":[{"sig":"MEQCIGQCNQdNrqoQfVDPXFF6q9SAznaodM7PSQZWXuwmUsBnAiBNgsTiUs6WC7deIr7CxOhRNsEAUyCgrN/k2aZa4Mq95A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O5ZCRA9TVsSAnZWagAAEMEP/Aj1dgp48SbGkzJoPHJA\npOp+pkC9JrCknjQoaoa8PjKR+VNoTRi06RXdAS96mEkYwGkEVqSh/omN+2RB\nWoRR070DWp3T85OtJmTelMqL76RooUDLOySNhA2ZhpVUnpxyIUXuOqolMGX6\n1XEGh+aNA4s4eKKpewemMg44Yga674IJsfG51tDGp38kfb/TX9YhrTRBB+qV\niY47C5YlvngPA6+4DYlSbKtdwX5zH2pXrnzRTk4tPYo0A4I9xVlApy2lvwV2\nh9Myu2VVodidLIBJcbiJOZRI2YtsLRgU6hrVbJD9ilpMS5kO4z1ZcjuR85CI\n4ReiRuLB7fg2QuhTm4A38TBD5vJyPXLwPv4ZBhwMjIj92Mb0AZXK0RsDgWP8\nHd+pCN28nZskGakhQQ//NMFMkRYL6U4i/jENOOq/aXHwiwVerFhJTxJHDU3S\ncPfEoR0Wi/eTEnFaF6TzrIDLKazac9DnrlJaSud6BXGNutJUDa0zqXIAq9Sg\nM5/NDk/xfKDO3vCzWTTph4neKPcyhN64wpTbKYxifK9H23gUo0Q8iXvLauIA\nVNQKjPbOE5gF/Zm10dCAGJ/08R8mN5jCfgV8I4h2nsRi/aPPE/LjJ4VLKX76\nk0TRhNzyqV6TuS/tPHEtFDtE5UJ66eeerR93vIwekfGqiz9SmAicDaoITraq\ndD6O\r\n=KhXZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.163119837.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.163119837.0_1610149464887_0.02752986473864838","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/theme","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4189fe00ec64f1df6fe61860707e93344b18236e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":40,"integrity":"sha512-5N0plt2zKqWVkiFmrigHS0/jKsJVUIkHD4MlHNZvCbyNGftnjXdJQtks1rTEvmRVnYXnE7GiJ7EIAMFwQWMnCA==","signatures":[{"sig":"MEUCIG7RReAZhvfUt/HuPqq1VGL4fmr22wzn326MTr8YU8nVAiEAhO0OREOQxw3GZMbami6tBYZ0ny4WJ3pSe61DpLflhjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Ht6CRA9TVsSAnZWagAA2MkP/itDPA7Qmc3oVDZwImHQ\nNAWco1kq6CihSQ218QJtRblL+Ujv8Aek8ibDIuFW//1cisMHNN/ZjqC/FqOG\nY/SaUhUOBarrWbdwygP18H7/0JXs86qd/T1BG3XZhyO/6XVaN4MfvIdNB+6u\nKcRh0Y8qF1tklqt8sPSKry6Mj7BOmLZ+ERQCKlnolny1Yglx/5SBYXsjJeAo\nhmhJTnfRZayGDpD0j3WCmIFsyRtH/VGChqEocsI+RdJRmszqgTE/zfXhvBpP\nsykbpVPA9qMQXvcAUeQWPRTOE+a26wkvFiUxoqE6BOQVk3Q6xXwHZEYQSCwL\nZ87prgOq55ooNP3kcp8Tv6KJMUPOYEhwYJ4YgvRlNIqTgdW/oJ2RXjJ2jI0k\nIN0UsxOxxCPHvVhz+EFtQ0EoYqQZu6oZ7j/xVIjmISiUHGBlH2el1ieAuI9d\n7AQPm1rgBBGtAWuAjlRWwRxp++0slnnHfJiz9nvJMkvDogkl1H8V5imqnWMe\nqJ+qWzRRe7VdCAuoZBjxoCQKOPVSYXtPz/zf9EDmET0zP9uU1Rs1KDYX8DDx\nLQ7RGGpwn09i+NmEBSEu7K/FkclojikEmVwSetfL68V3BfXy7zJG7TmgJ99h\nPl6fifQzD/QErCeK+UYM8AYRMfOEcm64074AF8ahwFSGmRm+lfNISEzC7J8f\nfZSu\r\n=l+3A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.b8a1a58e4.0_1610382202238_0.6203164595189692","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/theme","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.7584267ff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33351c843d0d7b98a23b208adfb3aa409336960d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.7584267ff.0.tgz","fileCount":40,"integrity":"sha512-6kBuEHfDircj387y0KAngppB8rneBJFV3O3AIY9Y5aMHOhj9mCaGCjvSqnr+tU+u4hy+w4a1r3JV8kTjyqmmTA==","signatures":[{"sig":"MEYCIQDoO8efKnjIB9fjD/pVl3M/xFqirxQeYID7YhcMqIsoawIhAME/O+zCD3xdVxvuehZ/ShTB/esZmbHclch+6vJsbMsp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Pc9CRA9TVsSAnZWagAAGV0P+wdIhwy/jtdcjPZuaFnz\nVbbM1VNPasTg0l7PcuNgjCTf3EeIWz+XNjdxSPrk27ohxd0nStmpFWvYhcaG\nECLjAqtrxis5C9sbLZAkDwTzXvVhSX21iTMnAjsxex3RII0hr5ZvR463aP/3\nu/ya4k63IpDIDIZa64RO+W3n4WeJ7agopsCyA2fa+Rb9Qe6Vi/ZU3R3BKKPA\nYOlhUvhI4hucSlYhJDJZxuUN6HLrUtiUDYp8K700RKtlit4g20yfT3NiIV94\ncq62uLSppeWla259w4kbba6OpBJxG/qdHyP3O3ZBP45wVwoH6PHcEwES40dg\ns/+CX0vfDd6/4GrP9ANRC2ZlstIQQ+8FcIZvTQsUPgaqOphLwOJLWtzIxf+l\nYoGBmLXxWOaHS1GkYQfYIcrjvnCFkjaqdnxMLMvgiGzWswJcsjqfzG7OMRVD\nyE1S+8csb7dva92odZc/ZV9t6vlrn+yiGfDnTL1CmwQH64iV76p+kk48kqCI\nxg6D70lkPu3lo+gxjeBFrQPVHV/iydRoQJSJxixAwERMqU6kXLdTnyCBrltd\n4UR2IbksbNBXAHDQ+w4VhgA2oKJmFfsNRVUy+t0q3sYvnOes+Q7NckKK0QSa\nkRMhWnd9P56kwEw4Ylyl77A/4X4zHZ+IxbrUP628A32cKnqrCGicc9I4H+6e\nUxGo\r\n=CBTL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.7584267ff.0_1610413884584_0.7956877245365905","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/theme","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f98241409ba057bce2799d8c7d0d92f8e61bb7b3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.251ac04c0.0.tgz","fileCount":40,"integrity":"sha512-CfD3qNSuMF42h790SfJu76yCTHNG0uSOZ+nhurt04G2WMiiGGzRiZyscf31ppRkjljharHHYHM92DXyZyubHAQ==","signatures":[{"sig":"MEQCIAEjuV/VcYaHlAp81ft1G8E/JR6k/bPARiPHNaOXgvZpAiA//Q/7EeCuM/pl4hgHeX5LKi9MYq6y/g1o4heAcUQi9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f5mCRA9TVsSAnZWagAA7KoP/RGyveXyhJqnPxqroRCP\nWvooM54keZPPcXw3dmL2c+ZpIUJi4xXHX2965+iFwRr/T7bMc/Z+vYkOmIbU\nEfFmBgqFZD2R1uIq8VXOS+uF1COh6438omrDI9ycJYLH3s/Fp38eiJLMcjYT\nlG3PYmnrUylXwn61ob0rMEDNB4i+5DLT/ud0iozu3UBKYx7Qc6hijL0z5CM1\n6JzjPChYmi7jXBCxJB5L1ihNIwUQe/7H59GfoxbIwGNk5+IdnVE6RBXqKxL/\npyaAe3PQrNWeQt0EjPENAdPfgrgNq1hwVuwo+1qd88bTldoqEPi7xVn5I9p0\nBCHU1UICx8ErMnOpN0BD7O4yglovxj/IiTSjzPG2ilpEWJDaRw8ywaEjhAQJ\nFIvUJeK46xSiDJcXyEBZIKSjRDNlNgw8Wx6vw8Jdb6Y+AJbZskU7/Ds91Dej\nOx61Nh20mHujtYm4CX9kVrb7DD5j5mfIh8y3GCckTPdfAoIPl8T3lx9x0sPJ\nSxJqrXTdy94+tp/On+PWK5N4HGkRcI33lwlRcDaBKaLoVZJmninaE8bAKq5a\ndGNw1sIkHJv90o6aEY9d4mkKGkwh+zf3lqLzhWJHdLFu5GC0S3KeZ2UrCfQh\nsPugpjPEIvKmlzp2FOp4LZ1tX4UXMQ8To4wFBqAd94oB/8lw3wjvEHs1cPwe\njSL6\r\n=JYa6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.251ac04c0.0_1610481253696_0.88520869004167","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/theme","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.772cc1068.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd13a954d7ed12d46ac0c0c03811fc7f00c832d0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.772cc1068.0.tgz","fileCount":40,"integrity":"sha512-DnRzm5VCCJ+FtWBU6n2GLXeXronRrkaluMCks94rlMo/paGhqiKASk+I3GvEnU3Xq9cS5SBuPHAyjPK9WWlwFw==","signatures":[{"sig":"MEQCIGuBlQNCDU9p4Z22DAnshzGyGtWuGp1cUcPRYr42GDyCAiAxJc0LDz15Rp9SPhQWNNBDveNhfS3hy/mfs9lqawH7zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4rsCRA9TVsSAnZWagAAMYkP/3JZkGArSSakr/qWdAeb\niYu0234Ce9Byd4iHE1D6gE7Tb3xVfXrnfLwHXuJOhIP9SX2zLf+oAvnzkWHd\n7cfl0u72OX5FGiY/zs1yuaw9beYHqNkUfW43+4v4jN1xaveP0TYwuVJoWhRj\nvMPRsyey4F1D+DoVjB8UbeFZoGN+Lxa316QCMO9b+weGthA66YXqatPa8hCi\nkS5XmLPWZS8SBrBdqZIf1rT4oP8wQDbfDWjJmyjb/KpYRxc/3dZtkmD3cIIc\noD0Rxv4JQcD0S6Tam9N6XgzTgUNjFAyCpin/TNnoqGRVeVPg//9XKwuUbJrl\nBnJqONNLBsHOPyJAMWRnU4I17LnGYMmMT4mTzAcATA1hOuRDJ1QIpHAlsG9q\n8o3EHWjnS5SmXxB67nynoYsH3idki0wHKNVNoR1NYR1FkS+muZEJ8KGqPKL2\n48gtBPQFLswmQwVTeDmH7WcTT3kvgL0Walf3Z+wj4yn83+MW3mBjWfCOJAS+\nGBPOKDXm6KnfKmV+BQld9HfSKMXmsp0AykdF7TkzruK/Lifd7RoDPpM4IWdg\n90uC7W6/845x7mk9SsCXlZH5qYGHELVJzwPoi/DkPh1ALPbD/BoiH2DcAKhM\nf1Xw/Qy1d/fnMV0G+Kh3gghvDA7xM95VSumjJTod/GcpIJL497Spef2BGc1P\n/QnQ\r\n=qUva\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.772cc1068.0_1610582764055_0.7267812774312097","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/theme","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b2d90a4e41dbae429e3c5c20e342977bd28d7a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.fe13dd130.0.tgz","fileCount":40,"integrity":"sha512-jXGXVPRL25CddkvzTuWDQAnD39+sB1wa4uq65kH0rDSo8faQY1LzN+zguknsC5nWEmI0hPOe2hh9q//VHFkhzA==","signatures":[{"sig":"MEUCIQCpc3oE4oxVGXeuy69Zx2x6hMBkCzvlgkXNiiUJnAwrXwIgWU5CCLrjnGPts8w1VEE5shRH3C5Q/oR2J7Z6wHc1i3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5nNCRA9TVsSAnZWagAAD3AP/RtzEGzmYDADF8hu4YUr\ncloq0FHA3171mTOVQdQ/9sBptXG9Q7f4xAOgiZduU4P6zXBRX/isasfGvqmG\nXFj4CuRX+MQbV1RIE8TvewI1qzNzK5EGvjmiNxNYnRsTJNQHA8hgCFYLq4z9\n+9mQSZKQtUOVkAd/K2UkFjYDjtF64v88Zr7B9v2CC43SPVzH8VhzTZx6ThFa\nTSpVPL90jfihfjWNir5IwCCOZD1+ao00RO9UzoGHpMqdCHk+MlX1QZVFCAVV\na2iPw7plzShlOsVdrxGMxn3+lOquoqMQplDcGTBaa6c8wqqUH1oj4dAhtwbJ\njQ+k3BDRZqcHnvm348jp2E3fRjNKdAMb21zXaVhJb5yeKUMVWK1n0WS6boka\nAxrevLjRFuUtAiHoba2WFTMysIAohTtk5eC01t+TIOnEbDIZs5R08Yrlria4\nY6vqDiJ5sLg+C1k6zmsa6y/WRP3gExildu01DvRvMXW4OAC6m4egmp/WP04Q\nkDiTHRZtIo3R7/VtLXU9NPNF3VsoMtnjOJUJ4B6r8oo7/Fl5pzSjEhuRpdyp\njDTEUDVQq+bYRAWmc0MaB8/G7U9r5avo6w2psO1LrX0Mj97n9NTdgnCDRAym\nbGuF1RWJXIr6Rf6ZZZ9dOIvcsL0sJED4ECyB2Vvu75jHwC9N/FrUcQnKqKK/\n8Nb6\r\n=INL8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.fe13dd130.0_1610586572494_0.7330053412942152","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/theme","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25d8c336e0baba419d8d537722723403e5f8441f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.c7c5da28f.0.tgz","fileCount":40,"integrity":"sha512-kqxp4rCn9TZ4MaocKowN2aJ9o/LIj6ubXk/taKjTMPBfUHNQaUXvVqzsUnT+Zvf8TqICEhqWcB811yEPBT/mVQ==","signatures":[{"sig":"MEUCIQCIsbdEbokhjJsaWNevAd3PpZb9/jfVGWU9Wd2+49/icAIgeaQKSbgWA/VP8l93BHOgpcdk2KID4nkcvQPQwTWipiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/59ZCRA9TVsSAnZWagAAbrMQAJO40uYQFKWoluaArK++\no5hhvKd9+qbk6CzVZ3rdn0PzqAvNRKtEneXDcczpUw6Jkpt5lteeLjV0c5Dh\niWRj0r5e5qf95RUSQ4/dcPeXuajkFvl0Za4tb5ElO8iDvneuiHGrPE034WqG\nj2T+HGlvhfWXveuA5RZfADeimLI+Kxj6N0aDjro1RK0RqqevnhHsv7jmevQM\nIoUToJKJooFk1yYLHfPaEMeDLH99PMgSWipT4trMnFIvTF8GQgJiBZXQ9yRm\nvx/daFjniE9ay7/yLpJasF2Nk2lI6VFM95j7yKLL6oSztdK4Gt3XmQflaAL7\nsbF1IQ8eJUTDpE56o4Mquu8uLdt2550LQ/IVUqON4eBbwZ1KpwVVv/ynq6Iv\nHCSdwUJifc1BylD2/1NQPS0y466SmnfVS5wDlAcQbN2AcZr59BKaY1doZ7TU\nPGGEiJxpC5EYWEKbzA+MEEoJLlj0FEAimeG8p21R7A0KnGHas6h0kBNFoiYq\nR4oRbA5X15GPl6OZH0pYUSJNOOE4/4UB5wQFwOSGziHgTjierJgyygX5ZSv3\nBXX5eu+zwCofCd6CUB+wxPPQ4UP9A9Vp74FACLXuN49Qz7sKetaEHUa8M3dZ\nH/B0CKlXYXy5I5do4KDHzqAjfXP18BO7sZbOu6KJAL5cesUc3et3F08KTpna\nDJ4L\r\n=Q6+T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.c7c5da28f.0_1610587993008_0.9784520028183934","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/theme","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4999eb4193374f63329a7ab67588cc28d109759c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.b2faa116a.0.tgz","fileCount":40,"integrity":"sha512-StqrQSxbT+7hVNdqrzR4D80p1AcSnaqmLyNo8YiplDT0TeKvNrUrHGCxYOPA9HmvrFtrzwVoheX6sw9smh/HuA==","signatures":[{"sig":"MEUCIGyw3uaaBzY744EATwW14dtTIvKmRb+OI8B3WefxWqMmAiEAgi1m9Nq5ExwzXkxURTNs2XbmJrHz+Gj8Jzfcc8XKWsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzI+CRA9TVsSAnZWagAAaKkP/1aT6RDqoS5jGoq7NJv7\n2geEAXfOs8g+X3bwO8PvbDK+TBu7Fa0+NfaxOFLk8isSPjWASkXa/lfRHo2a\nnZ8l5qRK/nOUZFLHOB4ltmI3A0DORnlNHT03U2WU1kCchiY3/0IvD53aMQFz\nOnc+FP1I3u3arESyZqQE3UecpRASfLKFocLTM8yS6okf7q8PgdekB2bwJ2Cj\nR8C0Xo6WVtC68Xc9Jf1LdNVibWZg/8r0tjMsiBdd97dfh5fSC5MdhYNUflNQ\nm05feC7FgpDe3Kb6csyo0RZWHh+fvcPmN9ahB0l1mvMu8cc7E2Sj2AA38C21\ndD9o36lVAkn1m/hSgDYYIujGuP/CA0m8rI2cXOKDT4P03AEUDfj7vS+DPiXn\n4PBbKSzOKvIEA1LszqMtMvstSAZsGwUI1Y7tFdEqykUMNETnEHrChDk/QgmW\ntHoHlFtId9yWobuiPjQ27F7POPKwATNQvDCrBaybWxfZc7oe4WVwQfORr+oM\ns0DLG77reghQ+JBU8A05lYZ8+STKrJy75rcErLefHgH1EMtDX2zHrboiBuPJ\neua/8OEqufaflkLT2qYdlUAAUz8jup7Cz/4t5tdJEu3AZMrMM2f6PCy72oHm\n2SHNEsrYLTFhf+nT6JpPJeqSLRpqoSAgOxinRB9yXt3Qc1/zsijdLTW6iLPa\na4YJ\r\n=jYP3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.b2faa116a.0_1611084350088_0.36453599940536474","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/theme","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6586851cea22ce3f636e11c7a8869186b483d35b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":40,"integrity":"sha512-rxIZy8LCiT3PHq4PTrXBqDfS9Ix9LiTEalOmj68mJ09VYUgFRdUvkABJeMYj6zMJe8DcJTVLYdEmsWRgQ6BOZw==","signatures":[{"sig":"MEUCIE/1DZAVNnMnC140digGxlP6BZk6ErTRDgrNXNQ/Q5a4AiEAjW4ahbA8cj8Ci5LSNAnb8OelYh8Bp4IjRVM7spKBKfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2LRCRA9TVsSAnZWagAAWr8P/i+MZjlH/LkZPt8+LyAk\nr3xxLKkBi3CqkUWWuXK+S2xEtWX8mIPHSuJfB4hQO85P6MuE4iq/eM1TOrqE\nRnu6Tq1JMz1q3323teJBktEGpwBvhn0HTRAyWSsn3RIemetNHg/nboBhP3Zf\n897dr+fuZz02ZKPC0kBO0xYMJCwoi1vigyHsQPZzpXfciT4JmtPDXnU09QNX\nKjQ+Tiy2nd16xcpWc7Hdn3MvksrEuBdKXBNOGDquxop/5TcMO3O5LN5UyhgY\nkEp2Mkrd1XHtDJyd8mMNJCYkGHuklTZQF4D1InoZ2AUuq4Pl1+aWk9ypF2hL\nwPmU8GOcNKihdGIVNjXL0jKEU6l6MmbmAyWifEkkEhGTYKa1kI23KL8Oeo6m\nD/9QwqJdxyXP3MLqDWFLgU1BJrNrQN/WagL3MxbuiLZw1kGuC8IbjxxSQHxH\nN7nJ7JRNpQ8M2XfDp4v04c/+6Ky96YwsgXEaoUl60NMbQDeqp7oFOil927S2\nFuomNlT1O9l9P37bU2w5HaZd8JW8VxE1RqBaL9Pzps93Fueagbt0kFbCrg9E\nSF7A7jNwDcr1mFeNixeUjMhOiYrzo3P03hKy+F0BL7RcHyxZBbWnQOcSk9zx\nwQQQ/NibnEEEwkCviG65BwUyowskEuxLRtB2p+ivptTAN9Mhx5Kt31NuHNcL\n39uo\r\n=qco2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.0c95c9f7b.0_1611096785116_0.014970720713933572","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/theme","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.5268222c4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be4205d4d1742d6fc7f53414c312329468f29b12","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.5268222c4.0.tgz","fileCount":41,"integrity":"sha512-116WeFVlF2aEiLJ0TNcA6pYdR2GGftFtuj0kCdgrFklXCrJvYgpUu2zgXZKp2DN8oZNvSiIWEzZAnQgCuPCKyg==","signatures":[{"sig":"MEYCIQCn+CFMl2DCljRk/2+nbpxb/kjOB3wAnvpth0vBT29WAgIhAIbffse1W3d3ZN69ReHV+AIPZfuHqOVvEafMcm8ALROj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIH9CRA9TVsSAnZWagAA/ycP/3aZz0DPNRw/fnuiB55+\nnkpvuNaRNN1suM1F0m0fVCVJAlIcWhEYnwP0GbzCvDNkKJcj5vIMpainSTFd\nM8Km2ogpamResYjhFOItWy6HkuAmrkAuaHBZQrxIHEdVLuIJb1rJwemA5qyh\nnuIquI/hxlEMy9jiSNgZ3r09zkkUSTlY0ZeinzZ7zY8TWn0oLMroV7QExLP7\ni8I8UrNZJDtg+hKFnseznFYhTStV8OqcPjDzNQM464H4oGvqu+Ek48rEUXET\n5gKjHuFAg16eHd43cwwT528sJfyr1eoCEUya/7Za+uyBkK5XJ5LpnNFpbctH\ntGPNUWyyxl2rl0VO5ZcHhOSu/7CcPPQCBIgw+kG4fTrfcr9QgXDfyRwR/LTW\nCYUhzmKC6VR/yh5KWLvROXKl7tCzyKUmaPCiFUdGRFmBD1y5mwmSZAKRU7iH\n9X+LQQRlgWhlMB4+khC7dPEbHk/Z3EEeewuDALVHbkw4bcFFjbTYisZWrstB\nM+5PgRi5CBqDa1mYgjxyC/kI2oLCiMKiP4tgGDdgcm36mbnAZ0f4uCYDnJKJ\nr2ajDWZmaGdtb0BdGPVe2DSL7AgAijau9ZCABkH/4oMIlfq4GECJrLKV3v4M\n23RVsZ3ejZo8LJVrdzos8RIDF5kRmE2Dlyhk9w6I2vdNY75BoFZpoMQQY0p8\niBuX\r\n=p4/z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.5268222c4.0_1611170300857_0.8423276860015563","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/theme","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b883c93972eb281bb314d9ad019e08d8481da7f0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.2ed2d829b.0.tgz","fileCount":41,"integrity":"sha512-J47zIcSDUx+FRVxZviQa+7s8Yfumw1YTEorvegV5n0l0AslRgt5ZFCVhrnmgQtvWMFSTufnS3It2n53HhzdK3g==","signatures":[{"sig":"MEQCIE1fAf3trN+wpCgMBhmtMNc+iXD2qblXLe/6y+9C0VnGAiBxvzQsNPKMyBrhxdFx7Rf3S/3wO7PFD5n7UJ8ROmmAmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLejCRA9TVsSAnZWagAAfSIP/iKsI707OgeEwHxt61ZN\nJLLaP9lMZ5rOpQCTUEtY7p2M5iN5fU9n2q19aTJO2zB/fcPTmxekFFgYse9g\nLxKMzqWgqlfbR+EvfCA1yJ7qxRmR7e6JbTOd3EldcKNbR+xcU9IKt6yqnWU1\nEGzeCgbCuQyHYBiufl63mni/X4COSeCJYgBMhyWSzPLEJaZTtopksTNVIM++\nlQlofWasPFxUuCErgyk2Y1jLBrNjYRF2K1/9+JjwTnZj77PwNXnBK2lzSoxC\nQpgOHo+zLqPus2Etr/hKACeXI+6/LjGuk0r5fZ1/huMyoomkuJjPbk/srFhW\n2NH96H3NsHpvQSTnFbaEc/1ndVYluoAimqQ9HCsVEq1wpIcj2vpUbUsZ8Z3L\nLmq9Lkh3TgGvsd6TTNp5unxPPi1YOBmfMKFnzPwefTxmzzz0adwLIZWiJkDW\nYCDF71m3vQuSdPWn3db/PdMdGD4CVVafayN9NCcpCD6QSQz5CzfcUw5knPtz\nSZ/oOwezhLRdcTtCvonAz9kSlM/MrG0xNizL8dkP/RPN4/9E8FsbklxQfbFm\nBqC1oc+jMXZ8dPyuGWCgVLW3cyASfAg9CcN+FwkytCrEB+hR911N8kwU8Bsi\nbFQ3sL276cLow7Y6w9DxRfx1HlUafY+5yvk3x0bRwbhe2v2JCvQDiy+wxva9\nPt8h\r\n=jVUw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.2ed2d829b.0_1611184035492_0.9003382091847478","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/theme","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1ba5d722689b453701bcfbba400a93ee76d993a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.df00c2b30.0.tgz","fileCount":41,"integrity":"sha512-N5TnBF8IiZvlmdzY91aCYUKNZ0fdF5Bi0a40BlTCEgpzmzluE3QUbnaHT29mI5uaKQGSUXJaSsaefpoBKZiZpQ==","signatures":[{"sig":"MEYCIQD4kykiJ+tyr0Are2wC4V+SAxaraXz1blHgY3vFMvAf1wIhAIcgfjXZYaLrYJBRS7CykpoTdMZpYywxdnZvYR9baNaI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdvbCRA9TVsSAnZWagAAKQ4P/2tn4XTKdVbG27UxsOdD\n0TLDEleK2QC6vN7+zxuBuIgmW0E8988m9Ch/i1h7CqqZnwGKG3Fggd8+bjCP\n/eRa6secSpXWFyIuGpzlttGJ1e8j7YxvX7LMFwel1SntHHxcFuRRR1Ry/XnG\nokUlm0V9mRFTHrFR4Khx2XVRqjBiksO6IdfvYoBhTgDGwf+LdWrkWA7rqSGs\ntrOo7CxVZgQZzeUYi/SHlrkTx0w//zJVhibWyazd3bwAWBrfMINq7kJDDhJ9\n8bF+zhtgcP3X1Mp+/QyGeYtOUMd8yW5MqEZkHhUmAUaxb02AGjcFB4XUa6NA\nZPLK+cLWQ3nmt+kxB/kzXnVvlNPqCUbKpRs5zrAaZGvqRuuwFuRVsIlaTqZM\nO/Jx7T5qU1XhqSsWo/8kQbzH8JGxUTtGZZsIN4mhzzUUbzAeef5i4GFytLI9\n+7VLXyre1B/reFAbjIMQHhd0lC1bFvH3xqQS9a9wnCLD5ZLXeXD/m/F4IUMJ\nAZmKmGoOXJgx6NNTGOwe3Y8bxD6pnTNmILr1dTGDqfzHC2IgCjc3BR64sbjd\nLUM7bawf5Z9QlKl8uejayfRZ+JAoGKwWB8LWqbl9Zc826mqrz7U5LdjZvwp+\nAJBKyd9YFMngrL7C/smgVGojNfrb7jK4B/DWkdlZGacHoazcA8+n3OY5ZDgv\nqy1G\r\n=kW90\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.df00c2b30.0_1611258843174_0.9047114395205607","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/theme","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fc79abecdf1974d778f9c9f452d8acdeafd55b3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.fd61b0476.0.tgz","fileCount":41,"integrity":"sha512-29H6qS4DWvRFA8RdT8edtEg7fOdH1++wQZwaL/Rbxe8NavKt1GAReaQrw4UBjJFWZX/sIxIkyqxu3ErffQDHUg==","signatures":[{"sig":"MEUCIQC7FRsOiqTKj7ykRzC+7cPOEtZqC5EKoWAdU+sBGRNIAQIgbcVmE/ukmqubxt5yAUD3eJ516Z0mq16sMizEaK33l6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd9PCRA9TVsSAnZWagAA50MQAIPkXuvh5TxLVGgp6JoP\n/kgk3naJA/JGtn66y1yeAq+TSe0RAHmgYUvENR5/qQzLxuitEWDrOwvvr+ae\nLZMnXEqXJFZMQ2kIpSevLT6weNp0yAi4GFiIVCCKyLI4j7cxTjekjVs56yMV\nZ6Avdvq31Ae/Yzdkd2Uslf65FDxLLrbNP7OJucfVHi/Wl+GNnmKvGPBZa/mQ\n8QTyjW0GJDJje9PTzZX76nEA4iB7TZXicm0Pp0eQL9ZSDMDPX08yrKG2Q6em\nPRSWrexqR8813ntrQyQpnXAt7lY9Zt7zvY86xaFk3nsvjPIMB4TnltzrO1F3\nLvHvykBFBXaQ+FjwvSN14OUmik89++LfyzbYpGHlLf/n6q73Ecp23oHkF/BW\nCc0ZHR/jJRhcI7Vfzn1bCm5Fka+a2ML9mMVinCZ87WPYSTgZDRe89OXUHnmF\nnvRNoOdXdTR0E4H9D0vn/2ATcx3tKvBiHD+SKNgN6pjRvq7JGcxl9Nm17aTk\nT+7EZI9oWcGuUuJxTo2h6yy3tOGbcYdc6wJ7pZA8wfK1Ib0dP8RHISv74/cq\nrZmXyF6NJ0EQD2EZeaKTJqGc6FizJTwJPreuiXk0yH1N5p/ci6rDZPvvmmEv\nBlv3zzzSJHlYbvC0hW82os2tplovAYZgHqVnfPDvqNL+Wlk2phJiBLNHCuhZ\nGjx7\r\n=3Nt/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.fd61b0476.0_1611259727122_0.5567227801424808","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/theme","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b970c25376607dd28efdee47580a57edcf21b14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.3fb3a0265.0.tgz","fileCount":41,"integrity":"sha512-Msn4iUfz8xrYrG5gKS4J/PGY3Ef+cpLsV7UOEiamUdXjdPCWpCGb/y3R19W6rYisrk9nFidVWJBz+5LtIYcqMw==","signatures":[{"sig":"MEQCIHKeoe8ye84DX55KPV39TeX3Q5261q8/48J1JE8jK1VyAiB4vdIQHw6LVXuDrUFwGob3loG8WhvikS8PXRsRuU87SA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChZwCRA9TVsSAnZWagAALzIP/3E8k0EI3XJ2yWu/kuG7\npidzD4B2IJeTH0BaTs14KPrlIf2g1Cqzjq7ihkKU3eIyvT6BtLPBrA+6Vl87\nvXnqhviViYBoZAyzHCypXzMnTEgzNw5s0yVbDsGHU+VUGiZQpBjxtINzdIDw\n2RB2KT1fdL/QGPmcSmxqgwl3UdQgrZYhp6gDkZLqG8DG4Dv73sXMJeP5tBKx\nMT9aEa1n9TrdstOxBp/W0kdCQCKvly95ogk9zS/ttEf3uI2cfKdnRtOvVjpx\nFYtU7P+7fnbYIXRVuNPeQB1Z2HzanoFr+u+H45M37adtZxqiEf77Fj/L8rsu\nJ5xNZT0tA0QsG8FzXzVNJIFRzELf1pq1sXJUhs20ze8XmIMVZxHjv0FcmNkS\nXwMJnKnT07vV5w0JNw6vnblQkzxSCeBtgZga2PoZNGOfX891NRitXB4Y/v+h\nPuKtrlLb4XIK9tXBgN8sZm/fmc1KkYzoAvzWXq1qdDdQV8eS+Yxq6iO3LvI5\nzJ+f/YcnhT87uih7vf0fl3rSa/fhiL/YNygd81TioFRQeblysGTIbvTJk+xZ\njdab9mcUHsQTpHsnHlTPR8j0H4ei3Bmc68MZs40JkJvKGCazshSxd2MUIvLx\n88C8cxQm6QsUxO4YTk/yn6obc6aduXhbLPt+tXSD4XnLlfUIUYaBu7DUmcZf\nJh0G\r\n=Pahp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.3fb3a0265.0_1611273839653_0.3688071545331759","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/theme","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.07deaec27.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fc1d960db5de13aff7b98440993f574017dfb27","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.07deaec27.0.tgz","fileCount":41,"integrity":"sha512-Ccp5/a+OpRTrbd/jddwfNQ6kdRNsQMl6KzW2VUdqwiAquxPq0FRA56JAw4O/k/GPTByW7MKLKek9x5gLch54JA==","signatures":[{"sig":"MEUCIQDv23e67Oz532uzAwEPogBC+sJuRSVtO1eZAoYcB2QrzQIgfD0+Ja+9MbfUBg3qMMeyOz3dg+AjnDkDirtFzV9woAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwOGCRA9TVsSAnZWagAAXD4P/38pSStTsHNSsCHrzKY9\nLrJYm7py3B72LWBSVmheqsEcB70d7oBpEbu2PsKyeCXnxXboCrzXPH6kPgeu\nnucegiFFS/0IFDdim324Pn1nDpkbm9AXCwDGDz1F/otvsKn5bLgQVe//O1BC\n7rPB3TPAYO5eTrV+7OODv3r0TjsgkdWDxaDd3ewazsPkLZab5pGYpyEg4Ir3\nHdTYDQG5P0RJ43Ja+yCrbuMC4N/cFTMuCbR4NQ6hBNPSWPzSaLSnuzOmsY33\nA2I2YJQsN78r0Ahm727K/CfUMMWOmEz1l8vkHPgSe17Thd6xzADskdTXDi1e\nUlUczD6Br7q0SXYUAyQuB/J85dft57arFEW7xqkNg/OfQJMF6qIVgwmOtStM\nkdO9824zdT98wrDPJLqqox2BIwQE2ciVYTPgBTLcJhIoHNzpuf2WoHMJLleu\nLzeboRvJWVzO9RnTIfEq/CH2qQ/sJ/b4I6xm268ArnnOpex8m2QG59nJzfjb\n3GkNo2Um8J3Cx5ZWgk/LdBu4g6n5CAhV3HF4uaEgFdyGmzquk3bCwxYgGGiS\n36uVhCAS/7BkE095F5jdJAIcwMM8YUXLSScmlIsjsUNZxZvSDijc8DuJMns+\nhJiFJC6+TXyn1DF2VWG8ucgYdANbopBaYWJ3I73h3Z32EfswNRykVw2lEkiX\naMtb\r\n=LqpL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.07deaec27.0_1611334533637_0.49325417476893674","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/theme","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"874ff993852291c2e1cf88b911527d88a7cfe020","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.d2959b16c.0.tgz","fileCount":41,"integrity":"sha512-7DpX7NOJbqAeiGM+6+szxcW4A/P4xh7aWQOA1sgxlmub0f5I76czfovO6ywOJLCb2NdoPaXScTvEJ4leGsrDvw==","signatures":[{"sig":"MEUCIQCvuXLv9/AwgzWYA2AvES72qNnNSPUatovSzABDzJGfKwIgaMRoV2e0SK2sLqPWhxqNvFJt8Ghz8phfkUg6K54CLE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx6rCRA9TVsSAnZWagAA6VAP/R22ujaQ6/d2kUzhCw2l\nrehW0ScRoQ0EcQthLoueBtNpr0SoT4D2Sw5+DR/mWyIi6IJfZP1IF58JCq3Q\nrJK1A+vIbfZvSTV4CjKKw2lZGDcAIueam3LJbar3q3ZSRku3mfjNE6Xwwbne\n/YZBHnZV/sNDe/vYxGQnI4L12rxJaNvh5bIkzMH7V2k72+6VhHL4ucSQnj85\nqXyKl/jj+QHIAj27SfX3opRPxLhHpCATyOKKR46kBI2hsF5iqvUtlF8vjTjx\nimkLocKyRF/k/YI0Y8/D4UfD8cP/2LURNN4EVJhixKCnjH9/a7pfTcpmtZ8X\nzjTkSPu6Yp5/KoPH9JJrjJ9KK3yaDOTxDrsdGR9ml6UL67pGyxBqHmT5bxhH\n/zcbQj29JaCr8uS2Ol+cFXtNehL7E5fVKW97zDbYXT4UiBBLHpYQbQ3T8mHt\nXMN2Kb95gGpSntSxrqFkXnFZyQ7sEl84cAJYTHRrNUqfmiSeuZNzC5G7j9kS\nElMuLPMLNY/qrMZaccHvYplUAJ/j2YGNoPPq1s1C2OzeMqnKXVnUD08BoshR\nQKu8FgB+egrPSaKUVsQtx5kmn0ehxQ5sGwUCn9lW9u8EFiDZYEpeHf87lw18\nSO+piIrmqrPw6FA208XOkmcPwMhrGyw8DIJunEHv7rBzkzayjBSC2B8HbtpG\nYjAs\r\n=/yFB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.d2959b16c.0_1611341483279_0.8036040269322484","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/theme","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd27d5dd90da803444326a02d94693d6ac404882","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":41,"integrity":"sha512-3jCLJPaOWNuKALKprqY0+BkHFJzU2Us8goTZOSiXMD2g0roVmRvymIhYV/hTEbu7KYfYj5aTr4UMs1ZoeJHVKw==","signatures":[{"sig":"MEQCIBBeKAfeNbesQ15G24jFeRiCGLEIHSD8MoTaFsUniYy7AiB8rzP+pBaeQtarUrWQy4UCSolo6flCblJpqqty8v5V5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1bBCRA9TVsSAnZWagAAXSsP/R415a5vx6B3LuiHVW27\n6pPY8wzkOiPnWEi312TXp4s0fTbf6LVkvECOeQZjkHtRQSJ4n0aj7EkZfYd/\nU8SuGEIC61pH2b+9SyDOKbGzaMLxNTYAopVE8yDCSWpYD++2+Yp33fKQ4pP/\nph9HhgsdsJ9qdrrpZslBt96cZuqz2fCx9ESpYKw+3BmYC+1Wx9nt+WGA6mnJ\ntlpSqSIdVBKBrj8uRNA87Y1Q+Jh4phQ9jgTgrCZpVr2fjmPU1+YVnvvJoNN5\nMKblcSK9VzD6ok9TZ32OxfFIXVFJ4cy6QxeCfwrna9K8PQLDnZVbuEGpXOn+\nJ8PeHvjmY7pxEWuBCnkVEpctelYIHMS+GWSrCc8L2OKaMXYU/8OJezF9fGqL\nb0BUSw1EP+REdDh+JlBHGlMOZ6HKs5IVsoVGfOyJ/SC9FIAlBjLgFk/BzSBo\nbtW1M6eTme6FWuhbn5DXAXKOXXWhxw+NLAQT8BKvvyVzHVjnCTHGEno0NFRs\nBbBDkrvpU5mOCe8n/902E1ynrFkV/2AKoVgNQY3KHugtrcFvdKbcwDyj4oy8\nNTox++kc1Wz7eLoE1PTaByYU6oXVV6yeJtFZQxlbcqkaPNx82WuEt50KEZm/\nP7Q/wNY5lYapvnJN8dVuUYPc1jCeJdTVYE/BqcvS9u03RSvV2fd9eWyTBwPM\n7VSv\r\n=NC5q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.75f3bfe7c.0_1611355841047_0.5399038471585667","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/theme","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7cab8748f2896926c272bffa6fc5cab41b6fc64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":41,"integrity":"sha512-ZfHkjuKmeyyktt23WliGEWvlM+kB3vJIWE2WYLGwn476v4j1GIZo/5Wq13wLu8AKuslCz4MPmPwRQF+J03h73Q==","signatures":[{"sig":"MEQCIHHdjEQVRLcBY5OAsuJ3s6SVxFT49y2CQ6p6otWD45vCAiAiVuJW2BK08UYAApNqAyEd1lB4qwTysSOqKKXltjgMRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2ELCRA9TVsSAnZWagAA96IP/A0gFf8rE5K/biaaAxYh\nS5lxwoCxVFiO+AwwgrSLBYjO+r6BUNYzp8ef5mhyw6R7MnkCIU2x13+Iwp32\n3jpZJ7Mj5yBO6JN5bX7ycEjEicji5YPAq3w2dtu3Vk0hnFgVTlWIE2jO8Kaq\n/tLOK94Tstb3O6utvP54IpKHeDiKEEp3BUMQ5jk1O7uj9FBcL6chKNZxBVTU\nAVbsTx0bxhj0G0Icyfp4rciBOKMLYCxf/gnHpaKdIBVD8YjHZpoYTgmEt8lv\n/wq7qVE5N5rlZzboySAyvx2/wfFBlNSFY1crNrf66SQper0zgOIhwIwW6MsH\nNzQ8DqKltXZHwl5w/3BdJi8PCxXQc4eiqFBHjWlOa++iR79WVIJKMTa6EyUW\n3YFS63pwlugvv77LvRAPPYGzjri52JH+N4QUWDOfYj0K9D5bCjXEG3HXlvl3\n5EFREQcx8W3uzHnzqNqFu4QLc+9FBCn+Ao+LwF9jupAQqefLLEJ/JOfwi5Hy\ns5y3d44vKjrthxvSj1/0qS3+QcR1CDG9wXu0SKlp76H5eq+yn1808smP2cAk\nGT3GTFfL7suk1aSyzRkAKF/0zaKcQKeJsgzhyD6g57HtV+HCWUuOk6sBOcvs\nzhp5cGH9Ktv9A7b4byVUKymVv1suZN4AzmOXqP4IShliNDP9VsK+Ri6SKuXQ\n8WVk\r\n=mp/q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.b9adb7a0f.0_1611358475287_0.7984550336935681","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/theme","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6416d3006265b246f2e8d485af0767af81c3675","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.d29ec2862.0.tgz","fileCount":41,"integrity":"sha512-GeNxVyP7LdiOmGtO3VhQv6Yjyyby5p7Je6P47tcNh1XnLo69zpQ0EYdZCFs0svt/tYHOlynIMqKVcBgtLUkO6A==","signatures":[{"sig":"MEUCIQDK2vwPx5/VZ3ReccIvbRa15g/VD1IBG5PtpB4jAc7vyQIgJAF7svRxdai6u9yrkrWA+cOIfQrZUhg2/gipRc9YT8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvBXCRA9TVsSAnZWagAAvZ4P/Arj4Hn1hkg1XDEPvJNP\n5SjTOuDlMMAfp+naGxUmk0CVeZIimkNkbxRiZUozdi9sYDqvnWuqg39VQtV5\nQy3v3oWuSsrmgbgtB/83+zW8OliDSaC51aWjKwsRgP8uZRfXI515Jqawo06a\nnqjvrVJypbe9bVIkMOoV3daSTKgZ/TlI2yoxu8cLU0WcBNWYWJmiHWgeS5xz\nkqH0+TLqpQArLF4iV6XK4AN3C/15NfldYXnceQ9SzVjG1ypeTntKnlJ6+SVc\nNo4aBZY4Gyu3iFKs1F/2Oz8MINo6A+1RkELquSSd/r9lph66sVgIEZaOb6Op\nsk7X1KJlqEBzhezb2wmnpv/Hj5WKQk8ebIVr/ay7n+q72uATpdzgdwZJFFnm\nzTZJKEeXSPoLQ6IFkifF9z2YcW+9kP41Gx/veSM8gY2X7fFeVwAn8eC3DHgN\nyGtiX93ODEyvK4MENr7m+hXZtY3TiZOkltP30lHp0KqXeMEZ2Ulbsb212R9d\nASsSnbad/2rdGcpzwpl/IJh97VQ/71A4WWGlE3mmCwZoumIVnM2C1Ma+fpWk\nzXEv9Rmz8C1DjFAARcfvrVF6pg3aILUzNq4F6ne4JK5CRzjGiNrx5ZKrlryH\nU81mNW+v7ovykV72++ybggjDx7TtefcsJC+5FnBpexdhAms20Da5CVVUx50X\nANL7\r\n=cF2m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.d29ec2862.0_1611591767257_0.3453156830744133","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/theme","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.96be07c68.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e71a3248a4b92bc7f867f13c08eee74494e72de1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.96be07c68.0.tgz","fileCount":41,"integrity":"sha512-KwU9DuqkIMY5CawI9HHSxwLHUC/eXHF7RVzeZFLXPU3CpH6GSvSvWF+2XLp5Um2MCQhaEVqMcgtxTNkvINYDUQ==","signatures":[{"sig":"MEYCIQC0ZU5vTE1930pY0ifcZzAK1NbFDhUq+6+0sBuROarWugIhAPKyVkJ8DFsvjvYFkxsbOh3vGy5SaTBgh7+ZJl1WMoC2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD12kCRA9TVsSAnZWagAATG0QAJ3xpYaSfHO/cCjZ2ivF\nT6SjxM54OWdn8eYL1KbfPaNFi3bpKFNGNI8LZL5/Dl7y0DzMlOYW0pYw7Wtb\nBC52IOb9JMMhppGfXJjIMJjta/Hz6ZXdVh3hlUo5jQVLI5sbRkDsmnGtojWC\nQiILRkAtlceA7zbFUT3jK3T38wd1x/sEYL6dTgv6sztpJg8kSf/0tld4mq9z\nab4MPkSKuePvo+uGBJ5AAnBYF9+HA54WqKMd4jowjlcvE2+/3HmQqb0d0VzW\n39GoHT8vYstmI2HNLKbPi7RHVMlDM1Z8U5ykTtnvdW4tNK1URwZ/Kqo0TUtz\nOOm7Q8zjh/++maC6aiUGxxWhm6QqQf6HHbTfwMrp/esNq8Ne2DQqfzdych9q\nnZLgffHeHxoFXDECvkleQ9g89t0chIkgrSYVEjld31wizzFjKr+hXdXTCdXw\n45ZJ5gZ2cs9BZ1ONrP3PAfbzOqxHRq4Dyj8rA62yBGfPkNl6zdkhHye2v2mn\nygXAQkHvt5sVJGVz1dhmJesvrhCIDFA95Fnn725R0w0ETKmHSsniw5FNvM1q\nyBgkgKaSktMwmk3q3V4g6FRYiToZjt6nqsNR4T/FM3ES2ZuaOCUb6jQzL8AQ\nda3GMd8Djre/WidLlFgF+WhptodgRKgrQzfMv+stAhEjqc/0Xif1iH7sMzAv\nQcFI\r\n=A55c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.96be07c68.0_1611619748328_0.30046916179520444","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/theme","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.e383944e9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c87a0be3ccc52c1059954ae302eddba44b97d29","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.e383944e9.0.tgz","fileCount":41,"integrity":"sha512-LanYEZNNUIC1o/rsB4plksTdEkQKQEMQp3wlMKhq+8JIyGxyi7/6PjTesz8jB+KXU/MuBlDMYdX+y9jVVncxqg==","signatures":[{"sig":"MEUCIQDiDppne53PK3SaeeKEhadQhTDpWpj/cAEjpaq2SY/5KAIgJLOfsM32cMq1Y8lXHj8uSdt8DX6Vl7Vi6rzOkigKrnw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3PvCRA9TVsSAnZWagAADkgP/RPDwo4s4pHRao94Vhde\npI2jpv/MjqOBm3B9vwf0Z2ovLT3mj+enjodYlX3Sa+C/lq4kTApapIRbSxg5\nsN+u0QhFGQ7LMEruXb6RjSIIbdF+Lql0z1DDcgI+VPqUZG+5rqu4OfMssURt\nV0R1Ico5/bdJip9WOjXwY4s3XHlYmMRTZ/eQnGWeDDL0ipFoMMGrH9wdEID/\nqL/YUWecZruXUGy4egL4XzkQoYrFIj5S5OXKbCk9jpeelJhMPxPvvmz61YjO\nlrDz4tLNfpNkB3/HqBZ0NFdDabXkO0KkugEW/FVNAcLXdZOh4Wwyko028eMU\ndy7qU+CvA7qYpEIbQvWsAaoWn3TS8grjMNz560tEV7QvUdMfmTQUEA1Xm0XH\nDasEOY19x2rgJVlwyI+cCXkp4U3/TG0/bGvLfNCRcd0Vc2Yssxz0YaYrbokB\nxOKSLPdkgvaF3kZqgqM8PHwFFSqvqkh85NwZ0OwIjwMcZS8aEc6fElKMYBM5\nkLwshvIXryJcEfGKWXIZP6N6uenolbgbk49tYGdSVU9OZ+uH1NWolXi+o9r4\n/dCHnuroW7Yu7vFIsC7PQ0Bsi7Fik3GFzB7nzz813ExMlzwX683NkGpwgoiY\ndDB6mB7j23jIXQ+qluBqZYhQVaTkrtZiiJ5vWFeDsSTiH6jbkzsTa9IOBf8n\nHAqf\r\n=C2n2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.e383944e9.0_1611625455418_0.0008474883993132565","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/theme","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.623af861e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49c09b051c6b5a1771c6eedb17df6aebd01060f1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.623af861e.0.tgz","fileCount":41,"integrity":"sha512-EdYHuXiM3mmxXf8jQmHGJ4oLHtDa72454ky9cB5WhYGpXaW7goU+Fim6aQH+jHPXek2xbiYRB0UJRUwHINSdBQ==","signatures":[{"sig":"MEQCIHvje/uM2dnywXtvfpFeS6HTp1fntAnnWpD7dLMuKR/XAiBWIht8KU0P3zeazdcbSX3fBYVEbV9LkAEaDHpIUZjVig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5AgCRA9TVsSAnZWagAAq/wQAII+Yb4wqZ/TKj+w2Ccf\nKJtjJY9hT2IqrrxNmg0hPjRcMxS3islqtbZBjgtdAWobZpQ1O5W9sWFNr8RW\nGVjQiqg9MEtiAIC+wyrpYEK0UCZwZAju1AttOExpY7k8Vp0Zg75w619KELN6\nFo1TanUqPNdFXQ0t4VDlzZBh5sjRxPrs3z/pm4XL6X5NruGm5qApGpU4dNdB\nA73czR53c3a7ZHXA2lAujiIv4YsaIpVP3g/FRsENJRz9q1bmQ7srykV6MNIZ\n3yW7o+8Iz2Ss0WA+NdiwHvPzazeRtc3+MC7MMioZSekgnRXknSKQyqcYnykR\ndpy1zgjkpbAgvq0Xgtd8yl7wCxi27YfyeyFkMf/x/1muL/SEGZuwIKgyfxe0\nMXPHRrfeuOZYErHO0jOstkjq49zXYdSvTqUsLjmhjgrdF4vAgv8C/py+6vKS\nv++kPV8OZP5ka9Q1apSGd1YwtM69hiVKz1lkYugJbW7DrWRXt/yGXsz63NqJ\n89jrYSZVxdRN/lyQ/M9XTcxsaMQQc53bEDAZQHrGqkMlx/QebwKqalJO6Zp0\nXA9xVLOeu+tTJCbTQU64ir4WJ0jSFXWnIj6RZIIWixl3YuVBG6hBI+P+eF9V\n7GZj5mHLuatcglWXEz6AR7x/UKEt5hDZJ1x5YmPWAeSMsVRGREUf2QMrhlN1\ndV2l\r\n=TeF/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.623af861e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.623af861e.0_1611632671609_0.9258477594979799","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/theme","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a71e3183b4822cdd7c00d312f8c03593e1b5d89","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.6863fd43a.0.tgz","fileCount":41,"integrity":"sha512-E68h/W0Ji5UHq3Txy5yGl7x1B5gIqAzruXSy0AnS66TxNA/Hx2Z+7hP2kuX6qcSJKhUmDnC+uwtqdqRp+mWUcw==","signatures":[{"sig":"MEYCIQDRV0uVP6M0lzcK8InaGaPhoWvWWr4kBT3Se/rWL3kQYgIhAIxakdUcOae6FAOiez+QjPAcuJGa+4FZ26pvbLGxBMe2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIpMCRA9TVsSAnZWagAARwUP/iQwRK7tWgnNOd/42JbB\n6iIuQHZx8St9Wtvd8QgapgcDrstBygKIdMBUkxjPeyWZkX0JW2N8PuAmTyDo\nwswNVZj5xbP8qzoGt3Zbf1ggNjW4xTYX1FrDgaoY+THjOVpQsXsFgBmjBTwn\nkI/nG2yYZwQDJ4+MZM+RpL+ad42Rmym1v5JGlhi1823W6GeGkio1eDN8Fvoa\nAe1OSHJqsZ3rQswbdMvjxgo8Dl7ruYnx+QzEZFupmTu6aG1oGuI1llizlM55\nMVbDyJZxLH6uoOruQtLuZywDmdbv2jNqxnY+tlLP1YhtZlUC4F/iYpBKjdwP\nnPqOCrNpAurbgT+BMh7dWIJ+pNLEepdBoWJ5Pqzau2bymMOVnrXnwYeCe56R\nvsy3JhMMqvhQXmpOyTMct9RKTjttT49Y0hbQ2Mn7RyuUOKzZmg8B+RzJaPCd\nHT44RoCUC4LXED+lJBEI5jlRWYPnHtQ5fX/X2EK2v/jhNPzQl67J8J2ShEUG\nAvquUkkFiMw/9Q2Uj/32leS9aHnkuhi06iQaglFrBMM8R40hIFLXrPLYjrLL\nem/n+WXdOSl9HUYjwflN4Dn8sSbI6+S4joQFJuB2JatoRHEBaCgiRuZ94XWu\nB9b6nCryiZDUA59R81ZNO1F0OlFpRxjdDiJd12yyQO2MwCmF/eudLIP0jgNj\n1LyY\r\n=Cok0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.6863fd43a.0_1611696715583_0.2567095506083721","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/theme","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a761dd37bfe007654d420f27e99af9e69025107e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.ea55b87ca.0.tgz","fileCount":41,"integrity":"sha512-oBs8z9Yt/X5NZpWJqEEb3/F4JBE57NhEUnr4ySdbp9jWneGQh77uOLIStS2P9x6KF3fykwKlF9h22OKt7hdwiQ==","signatures":[{"sig":"MEYCIQDtWcopEHO/Noobaio9mlBvYfe13upYqUSMfG2LpdrIQgIhANBjZlWfj1jl4/W4Iy50TNtsCTylH+UOBxk15NLY0zWg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKl/CRA9TVsSAnZWagAA6EoP/2/JdhP86Yl05FyEuTId\nh0I0Oi/MotGnCU3doGEmDGLuF5eMjnEv4r3aqM+AMD0plUrHmyxOZhhaGkzd\nlHMFUnOw4Ly/wRg7c3ued/druQCCgEOcId97CbTQOw3anMGDlEc2P1TFz8wo\noqr7bgzpNmh0eXd7cnut5ypmkRevoSWijgfmn6tZ72tXkR6IRD6ENPs8cYQ3\ni2OvGt57JM3fTCKP+UKQKtt+AlJ7dk6z4DWG8MCxREzYYTu+QPG93nPT2A6o\nPF600bpizGkBAl/KrbjGUh7HtJlRE6SN018hSXHwzPPkWXvxMccHIz3KT7eL\noc3phwMPDGxYLBwKA4Fnih9SnF/7d+O41NAse8tPffj8lEBui4llNKoB4jPB\n1r5+vhaf+GVB3U+zX92dLeAzO/vHju5KFNO3y0Ysa27lc41vZvwGRfsp2Vm0\nyEENlVt5aDLUkwQeUKctMgKOmDlRy7hUIoRl4R+48ss/SPzv5E4W3CsqNp6I\nEc+Vyz+5cqUeubUwbkX7FnB2+Jq0B2nPRKjne3xZCMcrZGxjEGqowfae52eq\nusCc+gNxguORBEug32zVRCrogR0A1cazP8Am/0/2Q4patChSiV7yi4VteTlF\nHVnV/vRb0HALcRB7eGEdAlCQOOeIJ6CodyuuzW6WVQIbYSW6sLA8idE8LzeM\nzy8j\r\n=/z7B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.ea55b87ca.0_1611704702763_0.8556468909130952","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/theme","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1926004a6307d84f66c7857fdff01321b84837e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.e902ff05f.0.tgz","fileCount":41,"integrity":"sha512-eKJsfN/vF5Jc9HO+3qLdzbDnhIosQXPjfboTyWA3lXIHWmW1RmOpxg+7PF1/2E8spFwP5hDwzLbZBozxNMBeGw==","signatures":[{"sig":"MEUCIBwWvYWx7J5r57AKLs/Pj0cVH4cNRsLvilB+LIF5XI7xAiEA6HjAQHWl/GPUXIBFBJzZZiVr9iwFb39DHs93Muz9uB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK3BCRA9TVsSAnZWagAADswP/3j9Jt48xNusLGPucxTm\nnuJi6CD5PgJJadVA9KNX4sscvhvCSwbAhmTINkwfc8UYFqWSVxX/Cvt6mdTK\nizHjamNu0NoOkZ70c4V1Xk7WP5eWyX2HG8+n1R3CheeCkQbWJyLioIHnmEQ3\nJY/g8P09cuY+8O7PqOHeEC+49fABn8tT8ugSAmG1jSHDCt+P+zFTmTYP/Rn5\n3GtF1113pJCadsepFKw2ARCIKkBi5NUsgQymrFuPNCSenIfoisWReuQIYLqn\noxAtvCfp/CJ1IuqZd+g9Fal47eH2M93uIzE6EextJP4Ii7Km9E0hsecv+VOc\n6xyobItbBa3sIAz3KZRzs1iQ9MRynO7FHNpsv5F2KFkDqlWOBLMdiLyb/CRw\nSmfWM0ga72OUxLqwNe+O6qb4BV+/ZT+psjkyxR+ici+X5R5/rj522lJrz4gc\nHF3oQ1/SqytTK55biE6qFlL2VYT9/ORjeA9SrehvCFt33xFiOmJQemTyqhAS\njjbebZPbViNF0JHQNFG155PhpuvtadIiQCT8iL321UIEoyJGEVgrJW9wTxcA\n+pVkjhnHXzV7qm/yzMKpm+eimF20QkZzv1hflDD6nEBBMIcMSAjRZI5i3w7x\naBUI7ZriiimMH2B+9HAq62SwoH+RxILgGGbE1FxCuWZrUoK+/5IWfNkV0gfR\nefWj\r\n=Oh3n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.e902ff05f.0_1611705793446_0.9980760561910373","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/theme","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c6ab5652201a79ea3b86ef9ec0930b628d329a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.2c9fc538a.0.tgz","fileCount":41,"integrity":"sha512-ql78+6ppXAViGZLWtNj/TmgjduSQVqPC6IaJG+zt4jL0R/Y2FmvxztPsToGVu6lAo7AuupH3ggjBtf7ahYMXOQ==","signatures":[{"sig":"MEUCIELnb7GZuOcOTmakcOxsjysOjA4+KuG3fPst6hnARDyyAiEAiJc4gmFs87ydoH28vcGB8qfyw25HQXT+FvfhcenfGZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELMzCRA9TVsSAnZWagAAY4AP/2nxB040fLo45aIcZGmY\n/qJBKaXYesgHamBREy0ZtqqwJrlyqDDW22iBvlha7y5yr2jHkXPYozkjyjq7\nHe5USaOfWtSMjoLhgktLWI+R/5vTFiistS5JofS3GC9sufaJpDemWcwxTY4V\nHCiN0N6BkY9iwjI8xsPR/nh9XEpsWSF+E8Zn7nOplYNNmCuvsWfcB3bLH0vS\nTH063IVQl80OjqyjdOnQPqfK2QitiZHEMFNX1bIbXU5vKSc511YWNEtTWxhW\nkuv6a7z1HVQEd43aukVvz0/PoiIAO/jGf3MlWjYEzcFgkaIS+dVSjtpqn94J\n86tUFZUUnt0SXaF+GyInvjwGgpqNKXs0SidPmW/7IkPWW9fMnr8LFfAJIwHF\n1gweHXyDV5k2PeXmnFDRpxFJWCNHAO0MupGZTFmGSeS7kTzLo4Q3zcd9juxl\niuAsyrocmGlk9MWgzUJN6CVIK7Am/xQ85fbD0KeKskDpLua/bOODkXEdmDdB\nkmKyu1R2cq68NLjsLm2bYqCEyaMHqTPzA5jK2mbGse7vCHWjgD5dUdG2up6Z\nbXwBnLGzrd0rvqtzhSPXGvuG4WbMojo6jLfVNAWg9wBy7xNc9bRdjvWXeT7o\nvkuDFnlbrvI4aEB1DyEaJ18VlVScRztZrkTOaDgqkVyAQ/PeqXCrAtOcstCn\nkPsg\r\n=1VYv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.2c9fc538a.0_1611707187059_0.6110718634693906","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/theme","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c31f861f57fe37e3662b61ebcda3a622daa127b1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":41,"integrity":"sha512-opxwB+S0mGJzaksTWuANAmmrS3gtXD4ytxgjSYCkgsxD4R/+BLOtuGgrewO8KTJsFn3tpVkPBAQAo5e1lbqSXw==","signatures":[{"sig":"MEYCIQCLUibMrjjy2VksroJ5kNvI39RccKSwaCRVYCkk9IdISQIhAP/Z2i+3vu4wWf0PBECShsTGYgfwe5HVLLW6OIZRthxG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL+RCRA9TVsSAnZWagAAJPcP/3q8Uca0/gi1owbRJEL3\nMejjHay/0pY1oQayznUz0+UtTNVuv7C/1vMCMeP7USqLWCJ39AdIJGoszoOt\nTGLE1otNzp97dmStJuVa2uoNjQ8eU141ZdhqxwKAZVrts/vvWeCftKJKBOw/\nCYSEZdU42yNLB+cE3HAhjkrnyC4HZNQRyLAj9d5h24HLF/JZAJ23kihkO5py\nhlv0Pe1Fvz2XYbJSgckBK8xWdP4j5bCi/I2uZecU9d4jLysDgq48D+f1hWgy\nJkm68Kq/bzST7r4e4KrTaF7ttkjPKUbszp1u4n+ethm6ArC69RdLAqV6zzeH\n2TYZKlTcFR7W563+3IcWtRfoF9fR4zE5H7A2QQOHnNFNg/PQuu5L8XnAdVeX\nkfVQ7219hsxSwA2UqVPbzwzM71kLphOtryggel1tnyU8C6YqBC4R3/COmMne\nh2Fl+Ji+e1wn81AU53+k3ehAPlKAzasCkwfFtnMrpjKyoPmanMf6bfkMjlJO\nC3rNDSKfZd1BezNgTuWux7GsGg5l8JjApwHbCL74SOO7KdUM0v3tuJ2lhZ4H\nOLL/hf9opj/ap/YTUZiEzUBOIkQBojnJZ3G6Uf6tVdTepm1Do3hbNUk/eA/D\n8xxpCFWFkY9gnHL566TpTi5FVp2Rp2/nt83G7VSn+XxcY5YzigbRLoQM2pa+\n7icG\r\n=AHHP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.6bf56aaa4.0_1611710352608_0.9199322575461941","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/theme","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.994873795.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d725f3157176306dbfbd7ce1c55090fba97a6f44","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.994873795.0.tgz","fileCount":41,"integrity":"sha512-saTR3eSB3p9forG1fgd59bU2Mq204rn8upY/lcKN9w79wehK3GANa4MfQmqG9A7iLZ/z3hkcl5X6v/8nKBkNrg==","signatures":[{"sig":"MEUCIHbWQjAglIq2aV3wEAcT08E7Hrfsx+blO23G5x8diAZ/AiEAwKI5/o/eJx4gwdXjgLJc68QnGlegKWv6zvd46qB2gq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX2mCRA9TVsSAnZWagAApxMP/jPux/2F4RjcZuAm8Akb\nHwaabc3B5SP92ohUcX3GXihnbkithsRwk9wOfIHcwgMuXRdaVAX8qO4xlyeH\ng4LSRs4v4Kr/3QbWBo4EzNNPNrzl8TFIPvm+4kTgZAp/PpQ/9nqaqvoKxoTv\nliQ9L6mqAOYa1K191V0tN3TNniuCKjcrxvgIs5+tr/XLGKTtUMNtxHz/0+wl\nZ/XlpZkd7YFq+mfjZnnnzSA0zHBWdNFTQXJOKE1LykMPvfak87v+q6XZ22sb\nWPUqNILHFkP477Q+wFzY0uudiiiw0JEf/f4XviIMjrAg2PnHgPTyjkvUmx9A\nB3ImwX2YEfOKIk4da7mT+nwbYNt52f6ZDhxeUcf6d8ulY8ICFvnPDO/VZugd\nJ7A5vAuYE7VCGytzxRZtqZyYCd8yNeBgw3HMtrmpwzi+OJPJdJ6k0rZE18wo\nhX6rqPZ/w3WuZKt6P4WNpCj8XlyPWojNtBaFcKR93QmfaFDEaWNnYpHuMtk0\ns5PyoGnVjyeWm3G0vr6y4UrFJyenuaCS5KW0bNpksrHF4CeyazYFttZ+pPE4\nxLKfbPt7D2D4bb3S4PII/uBmQj0uYxUeUhIhqEHtfj8jvN6wvQXUwDM1k5Q4\nWQCWC+4hHeQxplBme6TTWl3HpkyZmjptKijiXzHwBVdXxGhjtAkGf0YVFO6o\neaL3\r\n=rZvW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.994873795.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.994873795.0_1611759014011_0.03446252222887969","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/theme","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65f311c895683f6e3c7c49478505b61b0748c80f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.96878e1d0.0.tgz","fileCount":41,"integrity":"sha512-WmLoswcWVEfPUOoJCL38ACKyn/Z4SqH5YihyuPo+ItjBPPXiwKONBAGUVbH69mH5rDkMfwD8KsUBEG3qnMzrhw==","signatures":[{"sig":"MEUCIBQbJIiCOUenR87iAEU0E+v+bsUNvDyHsNoiYY6w8r4MAiEA+5qMOA0CUpvrDAAEuW2GsfTaSqszLyJ5O9W1ygFy+x8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEaptCRA9TVsSAnZWagAAA9wQAIUqQIHu5c4GwzzvsUE7\nTZmnbcwnfm7fwI4RjCqgCTvm0arwhH70IDqKepEwtVZVk3ARyDtdeagO2yi6\nWOSKyXtuyT2m5xShBEW0SjlewvxZw1pjkQoSbk0wfP5fIm5rGAhheiPFPGRj\nLjwDBdUJfiEr8Ts+JMlPRkKyI+maDQEE44fBWO5HNg0tBSTMgrRE2k+khlMk\nUYompRfjWuGTxB6NIv9LvKZJnhbsSmIq8CisG1JdlxuN6VJZcFQ+Hw50puwm\nv4xKKNGrc41Xu+XTWUCaBPvuz1VXJe8uDtdZOl9rdGcrHHpRUMY2Sq8/L+02\nI6SW78qIk8BKrhkjQufA/9wswVwM5hlj/7Ank5GiXINSnXxC39oYZ22qblwJ\nTylKD+PrSSFcOZsSZSer9kha2s67y85Onts0WKRvRweiPa+qDA+EJXEzeFn+\n6BUFwRhf2FvXZkEJ4T2g08UkCSDrzGc3w+xbhFjBCUcf1+nCRCHF9yRR4/Ks\nSUNEwnV0uBHxTKAW3A9TFhbeojR6jj/UPQPaZVbE9CUE9bnHNyh8lm7m0LKp\nKCaU0zyo5jWbkYRnzXcFWyjVQqJwhPCn0xAzAU12dq/gxQXgjpeecR2EeTaT\nouw3q6EFcVB5RlaPjY6/dClJaHjOqgfdUc3YKeMyPBcHpPfOgQNFt5BntMzN\nO1T0\r\n=5Ch3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.96878e1d0.0_1611770476973_0.023662177765268133","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/theme","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23d0e944e9200a454138581938e6db4771a83baa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.3c117cdcc.0.tgz","fileCount":41,"integrity":"sha512-akj65tL7nwmHMvUnf3/QQhiTOhyvHsy/FyFBvYcYGRy8J16NN/gZp36UzLrrCdDcDhvlL2m1RZXldCmAzCgJ6Q==","signatures":[{"sig":"MEYCIQCCzMrBpguosm8oI6WijrCN7Tejpg6IMYuF7b1l0UMSEwIhAM4acWRMBI50hxXrb7wKukA9f/Xf/khUBMIs9pT7594x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbGACRA9TVsSAnZWagAAn30P/0HhkNTkC05LSXKRmXOj\n7lnLDdzKJdzmfUYSxna+QbwyhVtnFgZRJ4hCWLPhVRsnSZnxL7iNkyW9ZrQM\neeol2MxGmFR+f7r7afg2efHMB337Nj6QxVUMqOy+1AsNgLxBgk22Sw/4P7Tp\nwSQFoY+XWo7bhPGbK0aFVfRgIkfsjLcjIKoRFfsEIJmGOSqAu53/SO5G7xDC\n0eabt0Ve9eerOCIV/FF5FvFEa+v7dpxHPivH/N1VXb3t3ETa7ma/+mo7+SWR\neIqQXr4ZGF8ZApmZ0cItU9mFCiO7ZHcJ/noQ8eUrkZaLRVy4aMNfHXOl1eaE\nLGLUIUlk4LpGM3iPsqmpk+ajSMyUBJEhoxzssYrqyShpsSWHHnA5HOn6o1ZO\nN17B1HLjedlmlpnvDy+PNmJfW+3jotAaPdmnFosiRvBHvgpJrFZh9oKm7z3x\nQiunpT/4VpDsXV6thYz/csIft51l9MPdaaDzzmoGCURkqF6nayIdzCwvk3xx\nMmlTuvMVsqQ2Z6jNM40GIC9yhhMrvcXSYkQ1e1FM8NP/UiVN5EbI08rY8hqE\n2TneF3M3lJFifw45ZrvR6yDJf6ftVRlA2jDg0U3263Dgf7v19DE4CXlmc5jn\nKiWOOF6ztM8XLNLADf64nNNdF5msl8l3mP182R3wvF7J+1i5s70LPtRHI/hO\nnRmc\r\n=p0vG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.3c117cdcc.0_1611772287691_0.6199108535684505","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/theme","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.b411e7033.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9456855891406c6408d2c8fac440b71b4ca8ba1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.b411e7033.0.tgz","fileCount":41,"integrity":"sha512-tJlfo1TJ/T90RyyP4ANbw34Jmeczw6gHuZR3iWdvw2fNilDVZ4sLryr6/zYvwe+iPgQKzR81bAu5FOqUu9a1VQ==","signatures":[{"sig":"MEUCIDaPnvevCI0YYS5ljguyHFhf8GiQ/pSK7EPDsX+Tn2sUAiEAngdPHhALlYoYLi82qto2s8PhRR34h3oQBTAz4dQymRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeMECRA9TVsSAnZWagAABW0P/iYpLMq8xMyhXLCNjDm6\nRt+foydZ/9r5Qp3hF3yS6JyhOLdwBrjVZh6J4UVOtiDINSgllW8wjC5M8mes\n8KNRIjr4JJu36lNNIzjj5k3kiGljh4r6b99qKIgv+KM6BObL1dePf5yjQJdh\nDq+IUsDKiEFqx+wRZpgHPdP2idp8r1GIidH/56/boLLNoYfdnk48zXX0Tycv\n5WY4qt+gQjT8Ay+heSQLrmqPDHVK4QcX1yinVx5JOCy/yINKnyxtN1Vp63/x\n3NOAazrDLcMx8fG9Tot6HzbLbadzHUzTTIOUwLhYM8fDMVjDhmyK6+/Jin0T\n8pklKdsE+w08tCcabk7EqcXpCW6TGXvs7ME7TfegFQCOcCq5rz5sIakhCTmt\nOW3t3BGlM25fEXmqnAfDWMUtSYhPgMuZyyy5YayVkR11kDVDSgyb8Lf/sOhA\nBCV4v2Xf6tfmyyeNCSthBzJDgXzvHC95jvWhMNp/S/sLHeKqYYRxfmFGaB7y\n9GZ9F7TZU8puIjLKVyu2ai2NLpQXTvOLv03w8+x9mbP+oreKaUSh86u0r+lG\nYFrsK30aiKSbIyaSJt3PzRQ4Db+YDoX/2bZ5sH8N2bhdjHDyQm+7tzBeffqf\ncrWIMAG6ifsxuVZFs2h+xVyrqvABFzAJ7ozuPYjQI71Xi/as6hQBV7qYLLP6\nQlHz\r\n=TQY0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.b411e7033.0_1611784963197_0.19290169115610745","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/theme","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de36218c6d8a0c882922d44fa0897bd944fad950","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":41,"integrity":"sha512-cAKlJT3VKdr77KtQ+/raq+D2fiyFUG4bDNknVBm6CZ4xmsUTksYy+g7kLanbvdCSA2F6BufnrpwGL05FgksZRg==","signatures":[{"sig":"MEUCICsNOn9lw+zPYEuwGHPcaLcyrKVXw41SABSUeVZzpZurAiEA/5hsZxUm9GH3uc5SdU02g7VXNuy4C69WRbhZi6tjEhY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfEOCRA9TVsSAnZWagAAd7kP/2jSS6a54KQtmPqhLw3t\nC0qH6itlYUllI0kr1bzouPnS1eZto0DACUByyN0p5CnX9v/On7ki1YflboAG\nJcyaBpQ/0B1WOyLDERn+FvkaqVTB2rJs5NMVl/XZOyUvgyDIBiY6bm+k8Wvt\nhl20aVOsNM8SmK7GV3fvriEefAQdrOmIukr2CZKkRyBfym9BDo3JfkugSg18\nVVIktoto3CIkCHx5DccZelLHelfnhm+PzWGP301Ug/4ObpRgvuk4mq5FsB/s\n5UWHu8lBjeJ09pjjxVponMnHtLks7gkJBlTXM8X3QWoaHzi2zy9Bll1M2puy\nI96+ADTXJZfU6yFVFaHmhPK5FNPjgGz7VrplkOedsu7QfqJUArZzlnRUE27N\nReRbl2dhdAca7z0ILibE2GgLuJpCGW7IEdmV3QRK7hcJ6yrrTxS3K9vcoAeK\n9WfNn/KGBQfFdfcA5p+eBXCntRp5S+FoSNy/wfIhSbisdvFcuHfOxQtwHm9H\ngtjo0Qf34LTNoq3TyVAV+59k9Ek0NP8AKvvNtV8jC79aHwaunu17pDzJq6Gh\nW7br5wrw31MGlAXQjF/pccwBYz1DKzdacGH8fWeB/qWTlQ5Bg9k1tl9bDRXc\npfUm2duWGNCIIGY/6gBb6M6zUoAoW0W2PuhxusKlRu34r0fnuSaua3DMLQ2p\nsqgh\r\n=TGKP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.a9ac16b4a.0_1611788558009_0.42086467060924804","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/theme","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47ba4eb9a97f80d32f4de0b9155e58d62df174ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.fec7b42ca.0.tgz","fileCount":41,"integrity":"sha512-A5KX5jzW1FUPdcJhR0a8EBLj0U1WWq8X0bslSY/Q8AURLFdFWxvZaeAqkw2cvDaib1j0QzpU0At9ZorQxCpI8w==","signatures":[{"sig":"MEUCIQCrAc9hMXAvsuibTI1P1OUi7lShbUH9acboVmguCdFTNQIgQgyLbYxhG51eWKvFXWFWldRd4VqA0k0xXDCtVQhJ7no=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEwzuCRA9TVsSAnZWagAAa74P/2f+ecE3cG5oqcZyc/Xm\n9deukX3lLfcL9xrxTOgeWm8GVwg+Jm6DWtUSoLQlpEPx9aoQz9otTPfrO0k8\n9GrRa2yrj9SA/SdxzYMizHT4TGOg3R9gDCZYW5JDyvljt9WGrCAdX3Ckm5qw\njcvBxxzAJcmS1nPR0ag1FNSnVKuNp4CnEhTluWHwOu3P7D5eyOzRtjOBnsqb\nZxHAQ/ssh4ojEE/HfZxJo4bs2Zx8OkrCFDGWC320KfI8lBUNkqVtw5JX1B3E\naiaN1OBWswhQKMgrqG0QP/3I33twfOSf7CQAKMWH/+Nuo/6swCGHXkKOgc1M\n0TNBvYhb3GyipMjf5uphkK+CMV9fVfIR6ftWCh+73NqfiZsGba150YfdkxLl\nVLz31TsXSJZDQQIDUsMYGatSBGR3hiNeBR61j56FmAJPM40j1PRbKK4skzFf\nzSTsjkZGf3S7XVSbyBPZKHC5FKOHTXNO3W0JeoMIm0VEJAp7upSCMrnXKKUR\nZa851aeikAEmcHdzdRVYrioK1YLGc/Vf2GYw9ZE6EQVdE1pC5vIyJvUrho+b\n80txozMfoL+T0Vp4DlcnuLTYRDgv7slKHS6861DWmVcgNdaH7qgPWQv3ELqZ\nfDkcyTDcpnwKOE8NWfw2tK4O/wQGk96dehMvvkrBaw7BNpbiPwqt2H+HLOUP\nvBQ3\r\n=rXsr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.fec7b42ca.0_1611861230438_0.24510864147487266","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/theme","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50407e5d42da7fcb4551cd7985e52a803d65a8eb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.8e66dbfee.0.tgz","fileCount":41,"integrity":"sha512-Cx+uDGUrHGJolMlmOu8LHjbsTnz1BSllak8zPIxZpl17Pz1F3HSe6/peuKmOLnHYvwbix1s39pCTGiQky0KGCQ==","signatures":[{"sig":"MEYCIQCs/1QeF86AgLEmJNuLKlFiNsJ1nn2nfEhraXFs+qjy/QIhALeEnj00viJtYt2batjhTCKTbHg9JVq3/COgOxj/JyDM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIyKCRA9TVsSAnZWagAAflYP/iJiLbf0ZYMG4JNUhn26\n3v4s+50vlAIawuwogeO4vEJOuGVxFHYv5uTpojrFDl8kBN39rSBxdUZLtiUu\nA8W1R5SNr+i2tyR5ko7VCQFLBPEDhIfMPhQnYtLGHDbPQFt7+UafqEfQcMLp\nOOO9KLhKtVsDzR7z73HHKDpxyf8jHn8cloj5mqq2bMKboB3DgTnvDBUmBi2J\nHK8xahfPrzU+3Q+wjiPQjR18lI/1Bu9M9w+JeosogcfB1lgoTzfvJ9nDVpuS\nPVTfmgZZffAF07J2mbcccVY2Vyl1zPSj2kVyaWAoi/mvjyfg3sSiQcG1R0Tw\nVprpg5pHoqZMNcVppmg+ucxSQP3zs5dYWxfguyrToUyJcuZlrk+Dfju5qJr+\n2HLZMyfw6X2Co1htGf6+Stpt623NDaXaDup+Nc3U7z/IImZweV3nWnpJNUqo\nti0jOwvLtL0v/4W4uqXjEPdSbOevJZ7JDsz8bUpTT5hUDpTfk/W4wTy++g/S\nufrKHwm8IvymKM9TdcLU0dinM1NAZZKfxiCXdpBhLIrBsyK52XGguzgVEaor\n1Y47O4/WHtQSSOW7kBpSeSLZlh5ve0dZWL4DUHE7NQ2tAwihYApSDy50lwtr\ntwp3cCPmIhI7nK7vw8zCXzim3lWKMmjs/CVK7p6Ig2WpaLhXJnjoUQeexxD5\ns40u\r\n=XtR4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.8e66dbfee.0_1612221577607_0.8016271322321995","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/theme","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.637d15da6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00f4e4727a66584dc0af99bf190801b2015eb870","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.637d15da6.0.tgz","fileCount":41,"integrity":"sha512-4Pn2G5bil0w7C3FNOkYvMqlIfb/jbUoZzo9URel2MC/yR2PStv9McjQk8JWxPu+5MpuOb/p4KMabBmmMnoHPOQ==","signatures":[{"sig":"MEQCIEWX5hLk7MmMrV4aRwlPeSGcIgprXYEAoZTOVu1x+jhqAiAaKTdF7Hg/J10+OFvqk1LIU4E+5vccJ4pdArL4fUPq1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ5uCRA9TVsSAnZWagAAlXcQAIOV3ieYPxnh+xpNCrtw\nbnq1JVdYDDH1P8v4qXa6dnCI6M4zO4usA6Zcr/EiSiGnC6/HRCcpxEPjFhm8\noSZlE5hOWR0eqfLGaEtb+rNamN8sZ3HLlU0Hlb+9H91yXOQnihe4HP9MRgqV\n82/RTnBQdoNSqauBOdnB11YnJ8QNRfLCnB4bFbMpmVEE2Ky1GtW1HOs+7wl1\nARhrLultCY4S2GKfUlrHYPt2YrMu10eGTVcQlE6QdxU+/c48UNx6h/skVuGw\nYpNRWXpUvRUi0XZwiHvbGN6aPCIa04c8dT4bT01rZUcvDPN1/A3B8RiF/Jv8\nYLDAtQSMrtaf/oImZBqYv0ShxDDd+1rfy1bQ3JLDh8DMqWhWkaAumhckn570\nVwAAi9mNipsPKQO/fZuAbdMpx213LzZMWCSZbsO76KTNfsTPBcr/VRRFIF8j\nLgjONmIp5xBSrrqk4ajygYBXgTTef+lakbsEsUD/i9Nm9YWExjnZqW4w4W8V\nWxzJi1+dIJY0fZhFQltnOdIPPaKW3UTZWD3XV3tdJEXwOJmlLiEBx/NV0/nj\ngDDBiYpE8Pl1F/vI99L9dd5qc3QqX/kE93hR1YXzpJFJn5mn+3DPPq7OmiHZ\nId9Ipl0p0cSav6L9umN9aCzirdcgCxqV6aIEPjmwofEVj9S1SbsVFbprlmuP\nEGPq\r\n=RN22\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.637d15da6.0_1612291693717_0.05271611364309203","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/theme","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.fb793939e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5a329bce45f6be94e09e3ee8738800008d1a7da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.fb793939e.0.tgz","fileCount":41,"integrity":"sha512-v4BbI2CS8cRa8WCHEdGLllnzRPjyjUAgR0SLWXY2MX/JlhYV9SY8QqN4t7m/LrPKfGhN0dCDXzgaAzeXQE7fbA==","signatures":[{"sig":"MEUCIQCXkKX8uzJDKrjqqgY0wYuoV2BI1g0Sy/5InpeV4NEvnwIgEmWtEkshK2RyVpatLS/3cmN1SxSRn7pY7kPq86ojQ34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeM9CRA9TVsSAnZWagAA9QEP/R2doF//KPFrm23gUX0X\ngFHcn0bEenqYXb4UwMHp/Owxb7sd/Ef6gOWre1mOj/7mh2cLC0ILvlWrn+dT\nyWhxydQEj5ce/2VywUrBunqiNR+iwWkUc5TV/clYJU5zvvTwcwuW5013nKPN\no9H9viZ4Y+YKuTjYY5rApT4w3+hGVP6q39fHX2AMqZPMSHZpDnAE/tog9Pyl\naUT5K/ygw3TVCAt5TtDc8bn2LtHxfnSFVgguApHrFNeQZ9QJ/N0zG4Zuc5Cp\n50KlJgTfftzgwBEv8f0aMZ+fHXRqOQywV6q3fr5n9BMWHqjo9AF/wqj8mm+0\nMpIu8Y7F1UOrRDzi4T5aPzxxOdoIDrYndr4SR4qgVmdaNPa40PNybswdZFGN\n/P0nJRhF5tJeVUkr+/Uz4ifdeUAXHCUDR85l6/ftWRs9Y7WhdBBaAweJ6TBE\n3cvTxGnzZi8Og5OVSzwM3ofr8g+RSsScYGlKiCJ3HfK2vfFWrVWej/sKey5Q\nrYLEMkKq5DcmXAM731m9XTPiJqkd+DTiCIXYTWOHsrNvBvbzwu6gICKc/oUo\nspXbzPICbkYJ9f4RBeWOm0njE056m+KFq5EP92bKhoSIMFuHsbFyzSJRvM74\nYOd/rNQtfNMeBLWVQrJ3e8uftg6qrM4O09UUhftK58mqbpm/GGpXqufUy1Gi\njBkH\r\n=Dr6n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.fb793939e.0_1612309308905_0.11947593577357107","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/theme","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"186a8a600eae5c6f7580e7ff20577a7ad8d56903","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.15a4d40dd.0.tgz","fileCount":41,"integrity":"sha512-GBXXglbutk9pjrrgSLathycC4YvHoK0rJuCKo5R0H+c9A0DxB9tggbPSW/gWBlu2NBF536xXHo/oVK/sechoiw==","signatures":[{"sig":"MEQCIBv90C/bc7TsAdyiXwhw5pg3t0GXb6kqLoamiKGBwSKqAiAPAat3qMx8uTiK25PZqA7kZ9vdTdiOfDyxOVE2Y/o30Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgfNCRA9TVsSAnZWagAAOf4P/AutHbknflecxVZ1FEiE\ny6N5hu1S9E3Hy0cV9MatEMpa+UkeXovgg5dBJjt1AZqHeYOGHMKiVIWDcSyG\nvxJEWgnm7KfkPnZjg+SN8+xBo7Qxx+TRN9dBW8rhXKgRoFCNXr1dGjE/85OJ\neR+Zgq2lXJlH0kruc+g7C+Fb9Uk/L/EJ0Xq2JrhWwm3GeSlYHJ+zDXHYhjBO\n12d5aKH+EpYQVW/iwhm2QoNdMxohzPnd5xl+lEvWcKaoT+h3ueP/sBXhehgb\noaZj6mj3KeUCz7jvwF6Be5XsuHnqtC84f+Ws7UAW5co2QvZcupXXUG+Pj4M7\ndooybeM3GtDesXAqc5dHLXXn9fs3caVmqKPsujnI5cMHU6wuLUQda95V1LUQ\nE7ARqQ1XvA3AnSHEsSg3Fqa1KZ6BIBMPaEVvBV/PK7mN/0iVZ4akjGAmZ0oy\nb5zXqwVZ6z0kO705RF+cKSAZy2PmQ3yPvEhEx8AJH2Bpn99fzxueK8CanFgD\nF9fv63+/M+XMyGV/G2bIWh9Gzrni4tLs9tKsThN6+TXkdy0h5t69Zf505X++\n7jJV7/4W55vOH24c4TVtn8Le3b1IuITo7JgvEHrIUG+IG/H+bE0DHSvMdw2l\nlmUCCW2MIky9WE8wKOq7RvrmEdwzeCdAtk7GwXNPEsqo3lv6QqsulCOVTfBe\ncCK1\r\n=TmsY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.15a4d40dd.0_1612318668538_0.859394424765231","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/theme","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"029fe200df1e938ead37468fad7a53177f4b35ff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.7a003acf0.0.tgz","fileCount":41,"integrity":"sha512-Efy4FbGcbgHTKSrgUH8waS7DmRkjHwHKp2uf9sWGArKByHsrOCGKfDZ2zKI31eOPiIulEUYjfzOyouFwT1rInQ==","signatures":[{"sig":"MEUCICmGh7XDDc3wIWl086YMOMq6r4Z/CTVrrSvsJkbV7livAiEA2DnISZjuziqCIx33rNX+igp5xdHO8HbIt23w7IPUs3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG1zmCRA9TVsSAnZWagAA5BEP/R/5MkwkvtqNiObsQsMd\nXzatQk4vgUBIzk4khITpZn8WKdtg4TKkKeUENKSiQZQOBDXYr7Q0llH38NTy\nf3LjyFpP33tFpdlD3P4hVLoF2dz29JKcD4hhUGnMnW+Lao/8JAd50vpTcbyS\nXwVNfXaD1+Ky4EBu4XYcpqYit3JenVXwWGKTg6EP3x/+zfr1VFLpz1Brox0T\nj2KT8ZXJ1U2qScTkXEDSwJWxusyN+7nBtBlz2sZJa5Kx6fmu507MU4EQFypf\nbV353lLxlfU1MATGmQuG5lQG2szFN3zrUeBXfITyNZcWZJz9nzujULKF0FYP\nCToNAA4h0fiZA6XcWi6mxnN/Pj+nM4RRAvU6wMrgSLFNoDEJUt45NUGUEbOc\nubJpqTwCARo7aqmt/+kOLL27NixzP9IkN09OucODJnoO7rSQJKbW9j0uE/4y\nYx7C5ln29PVod6rhdGPbErGeIjrRv1ZPcpMzMNNKwfQ6uzjsnFdGVmLFXjM8\nU+dEqAEbhZ1OGhLqNNCVHAVt+/S/2q9fq89KaBaMiHkfKqKPdQqjpkqmp+ms\nFu6DY+6kgds/0zEGRBduIii8b/0LLrvyHZRj8JGbqzqmB7TmKXA2IUY8w7kI\nZET6fM1+Q6OY1XKAyxrzQG7kNGYD6CcZGVA5ESETSwckbZ6t0WNl9h8D4Trs\npUZA\r\n=zY64\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.7a003acf0.0_1612405990022_0.0022578807034514536","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/theme","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.05f249666.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fcb2e449b97e6ef113a4e9ffb8de27a4955c980","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.05f249666.0.tgz","fileCount":41,"integrity":"sha512-xtNouNS/7wD6NRaUXGSegg/7F9XRGTbJ/w/Mq9dL27jCYifWiYdhT4o0wYBwl6EO27qidkOk/ay+0Bouj9MZ7g==","signatures":[{"sig":"MEUCID6R30ZaSR9FeIAvZ++SF4Q9fLn01Ucfw5x3oX0l1Fs8AiEA9R/X5raONyVgotjxEVwHBeHw1X9ZsOPpxJAXAMtBXIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDOfCRA9TVsSAnZWagAA9ZsP/AyFCghX2Do3TOW42+k5\nD14aiR2A8HA1gALehqeFDopDu+iehyiMlpzUHZ6Z12l4LI2415W8MhW8XdgB\n7lNljTkTz+CWXrDG9mqDAkzcfeROtuoPvgvljBiyvwsho9hr2Gnhj6sbk9t4\niWf/AAkncTMXOrDqNtz89lKPlOnNMzvcBLMnRIinSQZ9fWBH+qpRL/ey1L05\n9VjTyv4iidIUsyU/yVKszK0RV6MHcrDEEm/Iq6jWtuawC4qS1cHw9PuuKlvQ\nDpsWuojYbpCXu2/6XcPdsRRAx9JooQ6aRtjq8O3EH6UMgDUDR9Z05L4VLcIo\nXl486JFa8/9/YwbBuVMka7AeDtmNGlmZuo3NwKqM6wpZ1GlBIGMJsm15eLNs\nCLC/zN7Cu2zCJhykceyHcY+8iTR4P5FEcL0cwW7X42WZiW5FUMvl8l13WCt7\nnFykRVSTa2GLxd2OJQ+5D/jvK/OlnBK3/mPNkPjBFfG6ddoMIyOHTutgn6eb\nFIdKki8e7HTJKxE3aZ8yqPkrFTJ9F1dz/8h7w0dx0JxjfgG51zZfxOCxMKeB\nMQphO2k7SWbqRbXyyKmBJFnjdsZlSvkVfQqksusm8oZQn6fXLD2LHE0G3YdI\n5v39u7BkuNR7XGR9BOnw7g74jYmPIn8rU1Mr/i3zElJ03Oc+8j3ep3/ZZgvC\nN41s\r\n=2JZH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"10.0.0-canary.05f249666.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.05f249666.0_1612460958913_0.14973439055525772","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/theme","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8969383f687f11eef9dfbed9474652687952200","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.1a3a39629.0.tgz","fileCount":41,"integrity":"sha512-akdDJ/+rCksE6F2UNKfqyRpJSxZNORWy7K52fesN78Pvt4rx7AbhudTlB1LYsJT/m28KGhBt3rA3e2AdcrSUtg==","signatures":[{"sig":"MEUCIQCkgo7+4tPBsD98xdbb5qr/uFIIq775ciOjrmvHXJ/6+QIgdehqDB8815Z4MYSzq314cBTGcDzuL0t/6a8neiI30uc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEALCRA9TVsSAnZWagAAYiYP/RXTRp8Fvb0PElN9rH46\nn7b91ZANrv5maNeZqcy7LUgIt3A3r8h4LNTNJw31yWGlRHMNjLDDzKGHvPxS\ntd38d62BhX+B1BI+0Zz+hqh62Ji6t6zsHBYXMZ+u3ntBb2Wv59Oa4A5f56Et\n4YL/9NJqUIfMneLEJ1cUq4uVgvptaf2hPv89+YS3RNnccuHGrBLQ/QFzRQxx\nWic6BWto0wI/3db0qRJBSIIWZciS3LeVZ4nFA8WRWUDWIwG+x22Qi/bdZ9bV\n06gdymfYvOFaHgvImyZHGLXlbX/tyBm4MvfTfxrdoODC4A9R8FiFi6UG6Xze\nV4qO4xR4Bhp0J0QqGaCQKsI8fHhl2mBfj/aiIAhRN56EIiRMJoiG40Qa9ocr\nNm+Ci8B4kYUyXIReZCW0SrEGmgIaO2+CcjNUDgCKKLYIUUWyDV8HD6LGYUHT\nSHYbhAc+l82JM+RWnqTBmn89ntxX4y0qRU8thCQt5l5IpJPsMP4Izxz87+VA\n0NFxFdqXyuo+tvcxIshyBY+3yOXBrdPPt7q3/i8DS0AgcciRg/8hivQG0Yek\nolF35Rdnyd05IQrX4dpuFgxMbuVz+cn67zUIpUTpmpzna6KFPVauYVBPwE0i\njNl1d535jGqqwyY8ddK+panpqsTPTCIxW3ql14jNVz86ImSM6WT0swl0Ct55\nSp0i\r\n=ZCwo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.1a3a39629.0_1612464138923_0.21744988777372165","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/theme","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0576c716d1e909f177bc500e3a3ce4b1f4c98e14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":41,"integrity":"sha512-rIBmfURvRU44dX6ZFOK+jmW/c+9GFdvEQ/X5EjQbCVF+GrgaW/JpUnvvLqJfVKbZFZ142uBV5Kw6MOzh3IlIHw==","signatures":[{"sig":"MEYCIQD84sVCzTuGfMIC26S607B4xlikZA3O0tAEpd44cEA6CwIhAJFlLpYbh39yg2gK+12jn+aiFnm79MdQmfUb/gBHFE2f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHZRCRA9TVsSAnZWagAADQ0P/RaVLD2YUiKzW7Ub4IiH\nACNP4mBn4m2K05DcLTqKetnMD1hPKYbM63GE1sQVfi8agOtAOepjYNRimeCa\nMJriyIouu7nWdlvdg5AEsu3xuzs4V09XZ7UVMqtqRKUL1tTaffsAupgvW03d\nSX7K9omNzGJlqqKOM+4HVt9LGXTuLWQs4ptxxdvqzWP+eq0fOQ6b5B1DpTya\nyqUVGzeVsGAmvjyN+sQi0NmKP+7fzQtzTV9zumYbJBbBWQXUGDaHohUOvHvm\nR+603h9y9+ubyhKqBCIMefaOrVKqkVpTsEnewkxZkx8LZunBs65pECtFWjGX\n6k4hmmTfAF3+0CLX8kYfAjAXxg+5VlTh/cnNQTjvkLCM5XFRQ5/iSFBSBJ2o\n8JyS0S+nBd3aAG3ax4iCAdz/0tEuuTvTpPl7o1XgtFQOicoRaZC83+YZMDqY\njq1BzIw4rSVD4OWZDnvi+lOPG0THIogewWRF2aZxiaAjGZr0ZsFMjGYzNvJo\nJMovSMyv6Y94fGHPh61Wbr1Ba5CPtvk4BdkNdwAPFeERfMFCVAx/IXUB+i0q\nC710bknqtWWRbcQpmxdhmhkRdM48OuxR6wuBGVQIrSVtPZjKOynLLvKjmkpr\nRZeOwrHD1H1xJYVp5/GkL1bsqgvf4X+o3qmHpUQaMWF9ERi8aOAVDr8jti/m\nfCMV\r\n=KFii\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.8b1cdb1be.0_1612478032740_0.9628008915192603","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/theme","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df7e9bd743f6d82d17938aabaaab2927faeff86f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.8271f00f7.0.tgz","fileCount":41,"integrity":"sha512-qQpkTq/LwChXn1jGzxFeNTtEoWMaJG0jdWDbbnS5VnuZLGI4yiyftG6AiJXehOv7VRprp+NTqz6WO7EqTWwYDQ==","signatures":[{"sig":"MEUCIHcNZnvsj/h9kpBCJn7NJzn2BzhNZqFg9Q3FwNju+wHbAiEA/sKL+lRRMw8SiVCoXCnlhuS3vxppgzVsDFiCmiJKu/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHxmCRA9TVsSAnZWagAAfY0P+waAnv31n03LC5RRutSR\n+oOnPk3wzSJ6EOzta+k0LqvAyus2zIlW7fHXpecMJs6+c5b09G84FbQ74wRX\n8etJgYqkLgOgNZX/sVZxmt3eFomqLs0LRYjKER3K3Jad6fwNeje+yLpd/kPy\nbwWZCMFLPhu6zGYubN0I8cAuiS9KSwDPb8byspLCpf2QtnH45XDyIaBuyuXU\nYn+EcvIOAZUAUR3MmoWU0nJBCzLRaZ3aMGpMJTn9E5q1M4yIR0+7KIro+Upy\ncAQjA/mgSiUPZ944KYAQWNRTIUUui/UnBBJlR7Hufn4wr10ZICXFBpL/87u0\nGJ9D1JXgp+f2IJib8foyFHvn5SF7OMMwM0MRStc/grBgwlOPFUu7GrqLHU6V\n/tKkilGnARl0twnLZzBmk4XpaPvbu1DiUBoHgP4GCm+Fb6h7Mg12p3Jk3vXF\nGLAapeHGsBI2nSdtZndJhLDQrDSI1YlPUKkxQlgSAnGtSqsHRFMSZcsxvzir\nvh2ymqz84Pte5to0znEFRjRZcZPHafBxxVSCxHeJY/Xwlutnh0F+TtAymrW7\n7Qwdr6N1KRwLugOIWR568NeaKoSjIJHMalBBPmyEvzd6Odc8MEsKleLY+TXP\ntJKS9neX0uEZoL2bPv6OPJ83jkEGe1WFQl4YWtjq73azKCNhvMArreMDRftk\nolIp\r\n=7Bfq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.8271f00f7.0_1612479590023_0.2710582556636538","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/theme","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0-canary.533092a90.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c40df7f3e83b697246818d061c381e7c085fc55c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0-canary.533092a90.0.tgz","fileCount":41,"integrity":"sha512-DjUeyBSfoXiUQqHOjRohMb6E/7ApBfbWSE/ZB6NfNYcubykaS4qP00xzHNRS9hy7u6B0ZmF127o4yTWUcs9UEQ==","signatures":[{"sig":"MEYCIQDPohZTwtwKhMC6VlHPomKGV4HECVEeb2mExy23fJ7YgAIhAIPyxYOUlwe2UmUcS80DELr9iumqPQMjwQ7fBPQ56+2R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL94CRA9TVsSAnZWagAAnwMP/1VWsMw1tFKc7eGWx4WA\nXRemlTUCnfhNBhTB8tfFpcjKbFDzprjC4AEwHK2/KiFacwj1IbLYE/qGFiMB\nYk9sPQLhZkW/wPc0AirCz/DSQ+jqxou08dhR1c7+M6645cK3T3EWAOhKuZ0p\niDP1iCbM8bnv8a1luyxMqotL3NQBqHsjXwKWi6F+Ef+csHD2oLH4YvLQbCgL\nDGIkbq5F0sHG4v3ZS+zlb+3QWzTFNanGf3UNkZGCsTn8hkysoFLA9VFMJWP6\n0Rt+YrHMRq25HTuu2tZBWRWB8zZ8qJNBuhpkK8n4vmRrlFBAaGVqPj/mvuYQ\nxcbLcQTh8Cpb32WUs/f9ob3Ane6GEtvXhIySUfpnJHiRr06I2YyiUaDMlwqY\nFzfL+jUvTUpZV+vKlKyPJdqGzSARQaX0YOZ9tnWfUEWu+qd0angs/2fdtsRL\nscc9diQRxKBaEj2yqb0/dni/+VtAeGpae9FUFvnq8WQTFRKdpWtkj9WgSBrM\n36XMEBXxX9BR/JzfPpzIaKHZ6FgZsuSs/vPe1kAiDdON4WsA5EbSv8nSUzCt\nHAgUj2oYoQmH4sdR3G/MHmPZUuyEqk/RB2CGu7IG35014VahCqYIMPpqxj4J\nV1kp3NBV/Zu3wkJUrT+L9BGUHbcy2akxyNT065ASk7ebq1km7myyQPSfOhjE\nvrbc\r\n=ZCg1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"10.0.0-canary.533092a90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0-canary.533092a90.0_1612496760149_0.2641913722295608","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/theme","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d10c5d8b889ee3ed2fcef23f0ea1a185bad4d3be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.633a9fc7a.0.tgz","fileCount":41,"integrity":"sha512-r6UYuooJfWpRRFQ/EaqXn0/OL2a0m44j7bbtZJv8RD9/R8Ox7gM/y57uiL56+MQ7dllc5pQ/L5SNxrtY1qtnlw==","signatures":[{"sig":"MEYCIQCpZFc0ilOfygruNwxIw5g9fZQ2Alfw3rs3NeYsdzeF1QIhAJN7xj7ZGw6QK8mLHDcqkoF+5KRWk6csST03m0x1v9Wt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW9fCRA9TVsSAnZWagAAS5UP/1zeQmk32VEp3Bj4tnDu\n8uM5u5/i7bHrUzymEba3gBYpcdGsJIHb4xoj1SOa6+3GRN5RQbDQRe2qVBPW\nN1MmgOjgyW4RLoyhuUFqacUe3PXR7TVxtyVTB/Y+JDGTQL+pXWMKZY6hyKog\nZLvJn3R7Nx/RjQcdgySaW3ZEww4k5j5yGMqgY59pCTqOR999iiItoK4b8vT1\nUtgRMWt22V1Fc4zm0Y3X4/L54I5PN/Tjwh/uHmf7fbRRNlMNbkc5eFSj8vTX\nXEnx/CiA449EvvdHwaMHt0DWsGCKLfrmBUuX0w9sPaj0xHpQvbJAbQYNdlNY\nr8sUMHBFQ0QkqyCY4nXIDQ01KHzmZHpKRO7ua58ey6L/1pcbZ34YYkr8/8MM\ndiYAYeAe+ApTVilAtUz0gMnlnl5jKpMMVaMBmqRgcPlN/orzjNSwvaWsBdzR\nucjmq6O46rNPJKg8ornaIUc9n/oAEO3MLuDHmsQOwJDlDiTOy8BhZAzQ95ee\nKSqdEDEW1/t1o746dHs/EIlloNZl61euFEnXmcc8ZzPBhzMZdsexODniv6TR\nCR7ROgCWTid+ZKzdSDoWAf0mlIw1ZBbhf3uWpu91hkzByrYfMa9uuwuYnjfJ\nkJ9k4v9U6KlvsEoq/mkLIdVZTIId4KJiGvQM2uZ+o882x+tLVWHYPBDPVFCe\ny71e\r\n=7QLx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.633a9fc7a.0_1612541790595_0.13754207241385097","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/theme","version":"10.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@10.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0207be9356e85e07b7d86ac48c7ca75a968d2dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-10.0.0.tgz","fileCount":40,"integrity":"sha512-ll5UFjPR6np4jgTzDQO85VQg6FgLM0Vy1MlyJVRr/kn+2adX5hDxiBOnuC9fTeVhIBBPjbAMOFPa6VhNmAmkvg==","signatures":[{"sig":"MEYCIQDPRFTtlKfTk0Cw0/UHftZyAevq9GYMTRQIPojggF6TNwIhAJgHmUfaY98freMhUkvXNZKTs+Amdpelt+/RKBbIPdQc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":166909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW+wCRA9TVsSAnZWagAAVo8P/R7te4YdIu+Nkd7MYGlH\niup0XzYai1undwZCGcgWGyLkkDDBy936CBQlSgJ7lVM8hk8ajhQLSg7rR4aX\ntuujW/f+KeMRh830Xs2a5ut1Ez3AiIQvzQoaOuGJASHBKzi1Xddq/B8qGCoX\nEGnfo0heCHqYXQBBpAxcvApDSr01CQQOfv+LvsERD70sXWpEF1sEN2H4bm3G\n1odBpJvvyrEQCLzdqKmSJAgpup5+swVZfexmdv4O5cwklCZowvL0TxeFiUQ7\niWrkjkGYbCiZx+m+21ZWF2mRqRIa6wpZwI1tBik+1xyM78SJ+OI+RXyygAao\nXe8tY22WeUIQWxFTHDMfnxZA+hs9EfMZdsh0Ruj1UsavFT4tQmIna9PmARPD\nLU/y+ABNihlW0NjZ5dXd1leA6kZfqXEhlAcWDtk0KIiBJjxYC2aEu5083jA5\nkpeQl+nZaFKLO0mmeT/Hid9iCUsFL1AniY066qhCDyhwYfUuAWCzAKI0QFcU\nuhgG4LqtmJsU6PlDeWYQSC67ms7DZsZdfFBSnA84581MfcMvM1vZkuACs9Rp\ndWoojoIx0umMcPI5MgU3g3xydK0yvssLitw6TQY36x7By8r1ESX2ZCgyP2IF\n3vy0s4KnpuGB57edlXiXjJwjjSfLc1YkMTZCF0s9q+88IpaJqB3DPkrGSfW1\nktsp\r\n=2Rk9\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"^10.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_10.0.0_1612541872014_0.3273202744515642","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/theme","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.b5227247d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30a9471cb908187da7aec3d86fd81c7fdad048f8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.b5227247d.0.tgz","fileCount":41,"integrity":"sha512-I3QZ9JWoPd8MXP+Sx5e9AGkIa6s4wx9azJoKUuLQefZl6MTkfDIWsEo6QoYbnqNzviOczKKO1+JT798784ee5w==","signatures":[{"sig":"MEUCIQDkh+wSh9C70rpWVaXgrq/b9o7z4EWYDl9y2SzflF+7JwIgYzCeMH4mMZ/OI8r4bDayd372meBTo0gei3k4fEW5sbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYM3CRA9TVsSAnZWagAA5LkP/jVkcrikXpGc/MDaYJGG\n5GFmGr9Ckv2cw0XF9RzdAp9asxdARGocIQPdx3pwqBdO3pReQjpbQm5ncnrB\nH1ZiIXqgdYBh0e1kCEaVCAwbIPnqCZkoIh3/4RDmZ3e8r2+ZMpi5/QrLG4Qu\nfiF4uy9nDkfRVfVyKzs4cu/8ORe1daqMj/uciU0jYn7RTsz/ltvoQapOWYnV\ncopVqj4Hc/sihHR0YQsP6tKMEXKLj7+f93UX+BpLoSDP38gaezitX3mLDXX7\nZeuyWaRzng+SzUKey/PZQdtzd/PLINqeLpP7EU5UzcaLKn3c+tjhookdeLzh\n2yycuAq5wadqYnL+Gppq+b0/nFpW7EJlCmGStod2Z2Etckgjdh63puRVGjL6\nuyOWnf3s1xFXR12n1d4Apor6jQY3jNsvlIsahEbCoHM5TCzhMcICs+CGSOYY\nVztLPM246MBxQ3Rsgmi0sf5ow63Nfm25fsNbTd6EpZjdDJ7A7jHdQBpGAsSi\ndbHKQ+7pX/o8FAfFTFT+SinQyayZY9hctoCBuRjA/u2TwVMYjyTQtiXnQfb2\num+TDEUTMtpP9mCM7o1tegCWPf8UZOfsgMH4kZX29drLfeR0HW9SYiY+YivQ\n3bbVP5vkoA6XflKOvrOW8sEFFBdHCY1HEQHIyaFvsTimLu4LIRCw4pVwrl6j\nP+rJ\r\n=mOed\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.b5227247d.0_1612546871061_0.37448075453968577","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/theme","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.95322b11e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc6b8b168456b8fc3a50abf1a27750c1b31c75fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.95322b11e.0.tgz","fileCount":41,"integrity":"sha512-qhYBRPW644jfBKiA+zzF/q1tWzwHFjCTuUwMJ0HK1t7Uzs1gPibSnbRa3CDfd8VPPcJ4qImlkHnnuGtUJiB/Pg==","signatures":[{"sig":"MEQCIB2iRFrE1cZZmRqXKUJ/YxysPnyeFuA7xJDmlpJoygQEAiAvvgL/KRrdNOZ1aRpHUW4JR8/F5TiHGMgHz3gQf4ymHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdUtCRA9TVsSAnZWagAAbVsP/RIR6l7QmXuXnG4YkVYX\nbh5hezGu5cxMQOI4TizDvN85H9S5RQsE4CPvk3oID4RLx+J9hzopyVXR9GzO\nueUzEJDbTvWtxYYr4R+WI1rxcWAT52xnugllIQ0R4vlsUq+rWMEiPX616vyk\nh3lZfQqJxAn+b5IcljXkrRRVMqqj+xY6Qlsf7xjgVhzPgZ5nYoPmE0zI6k3P\nyR4FLVE+oms9qVLIyXNOoK64funfOvBU07ubxZaGTxWJxD2OX3hd/3Ud1VoZ\nCkNj9MOyyMbVQF6/9dVFz24jCCZ0m+7aWi243KRZyBXixy5h5tDI7t36F7QE\nOLRZN3pRY3rXIxH9X2TRFzc9Rh+3VWUHG/ByIAlsdLTpZpk69tx9FhmuSc1D\nz+qHPAg5NYsYg8dy6MJikOeAXe/m3ScRMWwnZMnmS7pgt6k30Iw+yTraexTp\nkBzKpIj4C7tx1VUfYYCuhIAEiIVvwHNP394lhDv6GLJrlTvLGqGuSFmEpET8\nL0bP/9Hkw3wqyFy19zgiyAZNbk97KxWudATJnhxiB7PdLDYq/uD/pVz8hYub\nyUd4MIEgZecekSimtH44BlLs/osq+b7QVRHfddF/oRmBWuWNUmIX2IhhrcHt\ntCVfPdgCcfTeVcctQs8gusDLgM+n7DozWyoQk5wQJ+MJRyJs7Cm2qiO2TVac\npi/9\r\n=WxQf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.95322b11e.0_1612567853052_0.033847761942531696","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/theme","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"877b079a4d84da50db4e5633da883ad5bed2abdf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.1f318ff0f.0.tgz","fileCount":41,"integrity":"sha512-e0XJe8R4aTs4qlvWOkzFe7we8mV6I3MdPwxClWKNvXugkO1PkFdWSsISiYaiI6s5+4pdEnaa1EVDndmWoguUIA==","signatures":[{"sig":"MEMCIDRQLpJAjQZW06w279oFo5h7B0F5L4ZA4naN04XLyAfwAh89PhSWlvjvlqoFLLJc7XbNKSfIaTsmyhWTAWvobVLz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdz2CRA9TVsSAnZWagAA9aYQAJMPAljvjAl2UXVqFXsO\nn+Sv+iQKXbFaViKw1zycx95ZPb2OxcMMpfIEat6XLO550IbywZ7aOke0MPVb\nDvW00N3jzIZSSIvU7T5Ju+DR0/djC/eJapoAJzzCBqgHItQr6WBU8xW/TSIy\nR6l1Tgi9SKukefrLIoJzpu9yhyeKaJSiSm26S8nPywf1RUbqcpfDgK/G5pYS\nrn7ARCxxBzU8zUhguj0mdP67xPPKdv2ojrArV/18K1+giBwoBxa7sU6zPrK4\nQU418nTBEfsS+IBwUI1YPEEo+UZmzemzWghV6sbKYvOuaHIPy9E8P7sUDK70\n/fghA5CuCqTPB5sj7UPiGeihwxHgJ/U9wsKB++HOWvwYptnxYrh07sJ8LzfP\nDUJWr+wkEQWizGQl/OY94JqJmzFiKqwA//Enj9JJlBe8wthNYRp9QYUcGf+4\ngostNEQzx5sDl2pK5Uki6p9ds+DFkCc6wXT3FgOrkUZghRZfCiIGK3kiC0Sq\nZJT0vEM1d6mNRje1K1ZcM6R2NMvF3FEbhZ7gKjv0wgJDsPomnlFHmxB0sP54\nfkjG76QIxnKD+sBi6h40WfM6Av06W5IWg90xjGuX6ubhhkCZ6t0lHs7IdBCs\nqfDCHCA8iBAxStaBInnNKDBXhXG9izFWn3G+gpAXLyDkuZMzYks2ETCGMm+9\nH1cD\r\n=ThX8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.1f318ff0f.0_1612569845611_0.6961244710024401","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/theme","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9eee98a2e72b504e4c41147796be04c7ef70715","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":41,"integrity":"sha512-UTP6/Tidp0bNSGr6T35iyALff5yy+VpdsFXaGw1LZhLmf/bh61UbS79I79lNU27p988AB1iH351IzVr4J6hu2A==","signatures":[{"sig":"MEUCIAogK+nUz+b3OeitGSXxITQtf3kpYBquE/77nst7y6r5AiEArRWZawG0jNRiR60UwaLEON4/YClz5O9fudENxaomOCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVJ+CRA9TVsSAnZWagAAbDIP/0d9qhE+woaG8gljQ6XE\nbvthHhwNBkxeSMd/CSR2fXbDEsQlrBJeA7E+g8q4pq28NJOMTO8gy/kW11q6\nVC2Z+Yp8y8xSRCAzqSs1f52sAXG6HKVJ1gNuAxZzN1IlmXlggqBnxOcICBYv\nlAmXfD+nHLztK2giXuXMKmGwYnmpFlyHNkcreDGpSDTs38qElSImGyH+jiD8\nzH2ZNqVSqnHOTnyBP1P46HOqH4G1vaIM5XVGEHMMes1JAF2FFYuuOhDE5uBt\ncKZGJfGQfBFZTkcugcb0xW8Hc37UwX8vwlY9U0btEF4i9WbL+ngmS3nGlthu\nc0bsUf4Fenvv0tYPWrf/KiSfgTil/U/gWWVAOx6MgjFkDFlw1ny/LucYWCyr\n7WnO5mKBB0ioyj14gpJHApibBuB2oWPB7a/VjuJp8vfDtnlUQ8xiSIat/FIP\n6mFHQMvul3qGcADMz4fSU+xZwCR09RmMrB/9P5739LNwdrc3WRENHhHfTH1P\nCCKuNiAODlohqMjhXDj1TzCqgSx/SLwxoLuJdMUCZ1H2cObRfRmYdYf5YCyY\n1kZRZGExGQgWo2c4mHtU9/kddk96YNnPhFlM19ucmtTVpwvQzC13UUEz+99o\n2JnH13CluhQE7Hey2IK101pAwh4C4jjCMQEyDEPf2FMFYPTB0ljyFZePcVsA\nsHO7\r\n=D8+/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.ab12cf7a3.0_1612796542302_0.3979364671743453","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/theme","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2891fd39f0260878b07bfdeff8aa58d36680295a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.98db2c5ec.0.tgz","fileCount":41,"integrity":"sha512-FQ7iJszea8cliRn7xpz4ybyi9ZKv79F4Lkd25IU9jm3OQvOCcc9FPwPEQx8KWo9Dn65Hi3eQgut0o9ZPH0dcyg==","signatures":[{"sig":"MEYCIQDR6EfAvExPpQWpsE1rrN/lyY2e8vqr4vcdR4tMjHI3CwIhAJr8eQuOB+x42x8XiJwkkWOvRTNReNPGrQgyxFyTbRNJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVm4CRA9TVsSAnZWagAAQMYP/3c0z+KOQUFvuYn/K6gV\nMxSXfYXFgcYHWhPpHrDOIwle2XSDiQabLOxJhztVnADSMJPvm1+OLchus70Z\nCPFbqILsVyfH0zvz/H/5GVcOxZohmGcadNGSfSEWp/qNKPbFoDLmMXKacTeH\naF9u005lbf6/sdWDd8hZ8fyXZEGEx3XaYDqdYSqIlo7rO4fzQW/eDvV56Hop\n/PBnuNQxtoZ5jGmc2Nx+1qKWjkcKS/G2A/md7WSKkeo2yVPkwoNUkLaDZVB6\ngQOSyXOxlO/uasC+N4IuB9wOF74MOQBiWI6vxYkmaMdla/Sz5Tj574M2WPIx\nJHbq6X+RFVSj3eDbnR7l4XmET3+CE00j08Q/oA1gCFhh4cFJsLXoMp9AiQ2Y\nPK2eykBEZKfm8YM8soi3oKHjpaEmvl2p2QyZQkCvy0JJZJKy8XOLoYGbqhgn\n6R6lyhaasmszAfawG+lbUvvizeCyjd6B2f790V7O4OyE5EOr42IdSJF2g/uS\nMLzx+eBmS+4+qh1VkoiitEmzdsCZTy5cz4qLEgMQyNPFNLi4Vb44mvnzC+sD\n03n5FgCRXnEKhf/PHdtLC7re3h+1PnYBIGDVqMssIwlYohxtbrmcCoCqj0tE\nzgLIwhIft3Kl8Kg97ecKVA/dwXHPX5AXESPmJysuquLuXSDcGfSeGBBasS8Y\naw8D\r\n=eTlU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.98db2c5ec.0_1612798391897_0.8031958043740315","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/theme","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5621e8ecd8f83e9df62d4e67fbb6d539a4146b1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":41,"integrity":"sha512-RXXeEXkMyXdx2iY+rLJ2I6JQvX7Eqptl4xZja5BavDMyTNQgoURfgi2OiuZCHG95nLrgnteE1PvOqXQc/N/fNQ==","signatures":[{"sig":"MEUCIQDRrlpRS/tPewYUKUWK9bFEMrRl781izZ2FIzNbfmV2owIgVua6mcAM+P6r644qmK/u9vZjhSbQPe9fmUJn1liTPEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXHlCRA9TVsSAnZWagAAxKsP/Av8yd9Gx/yuslVD5LUb\nnxEgPJT8yG51Xu+iiqh3yGhgZJZwkAH1DWG1UhsVS9B96IzIXWL6t7fYrGKK\nj2VLeHY4GQIXd9Ep63lixz+gd2u/0o8VVskZQmrA6SQgcULveBbr4FQ4Uv7B\nZS6ELLAJFK0LK0TTUAUdroKD2aWEO62XD4UKom773O+WiqqOFeGaKxfNLdJy\nY00ve+MUorsFcEFUh7AfRpe2pfwEn+DhUtAmZENyx2y2C6BmY01QM/Q772zw\nepDYKOSzu0ZeK2ytnPK3LKDaBIvzPhn9VYcaJVqHQxpvHcrQsZk/5fQg02rs\nisHJUSQV9AAua7YeHIMizElwLBhb2FT85r06JuD2tIoQxr+NjqKxe2Dqm8NU\nb9i3DiLntO9pyU+37Zp2Fxdt4HGWfsFOWAaaK+USog29Iw7OZUknW4kVOr7I\nZQIbBSGFY5JhX3P/ScA0FeDMnPNw++seNWEqglszb3hd20L1u0LtH75pXuHA\nEbAkUvKv3e8YgkW7au1qsqBK3W1Pc1Hf6QWb0eElQ9aSxf4pggpCgG46TR7J\nNbNdBtNuGTZjsH27vTpHU0yhpiQLWRRc3oiMkE8+lai6WpdHjFIEIv8By2oF\nkHuRXiYPZsG/f4qQPOwYYoQO8fOuDFyca7d2e7xdnhaxk02Swp8EgoKA2YeL\nbV+D\r\n=8H7v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.1f86b9f6d.0_1612804581084_0.49101713016462933","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/theme","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff19b0866f5e913167a0b919aaf8d7c48226ec0b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":41,"integrity":"sha512-mHvAf6dVnV9RBsVsFlpUMlU/FpoS5LtWaCCerCXMKIJDcoEUDXSeOei28Rz1Zls+EvQdTpIvPS96+yKwMHKxFQ==","signatures":[{"sig":"MEUCIGn2uruWxj+8Wtg+W1vaDckoxyS6/T5x5rHcVn13WxB+AiEAuq3jjT/Pa6VzZ68RwaP/uFPq5U0ZzZmgRrNw2VH/NGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXv7CRA9TVsSAnZWagAAwqIP/iOsOKUgr2TRqlRLtLb3\nJSC3MT+M+kKzVadCAL3fw2nJaH1tz8WqLUeX+dlqqZ3U7SeVXxdFln2sABIW\n2mKDj/MCeTgXKnwTAbxZ1g+Fuaqr3Ma1TEC5dOfi1YqrOZBPTY4WDG9ffn8X\n/7Lf1qn9QPirAepZNxe7VbIailTFNprK8yQt+YFf/2PQbTCRMeA6ptaEWKcP\n04UrAa5V+TeLj29lBLtNbu9+1uKREumdFU76jW/emDnUop7bPkpf/AbGTWDP\nta1XwAW8mz7DWnq0fKR9GHvijZ4Oty/M+XR2EGoXtiwRB4XECuCsS6iACvDj\n/H3NjV6Dwi+6oT2m65Ggs4raxkUquxxW1/rsWxBcSQANqACveKbekDulsokD\nkpZEkhLgXkeMR0K0VQ0TWk3CUfK8ScE32ENp6imY5FXvTpNeli4Af9TODzjE\nR6sq8u3zTcMDGL9QmUbVuaS9gL8MIVYfsMAKWKBzctfUIxIPoaCFWV5Kwm04\nOk3qK3CK2xOAop1yJnPT0vc6WrD84alp9i0BdCpTRjQ+rUR5BrE1DvyBrZ37\nwfeiEWGETOXXTy/e8tOHqzA0sVWfKVZYsMLlCFMYNek7ymFPTh56r9eQYlux\ndTOPHBI1YlGK9TrpKYG/1iXcU/RjYEijSSh0tsTWMNNlT7YlhhwTJx8KlJqI\nlv5U\r\n=5kMz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.aac8f5d9a.0_1612807162852_0.342789511946058","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/theme","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9ffcb0ed115d625399440bc7ec1029290ab08b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.750e18fc7.0.tgz","fileCount":41,"integrity":"sha512-rDET2Vl9jgIv9+G21DEGOsC+RagCUcOhOshQ9jQ3S2T3q8KpI5pMCZphlgLXquf4B4l5QrUQzje0I6ORteCvxA==","signatures":[{"sig":"MEUCIQDfJG2+PhZxo4Cotz6zGonA1U36tOcDW8bGDME3CoTTiwIgeVB/TrsXPpibNqHZaMPLcg8o4QBe+NqqQAdEEQbLRbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIa/PCRA9TVsSAnZWagAAqjcP/Ro45GambjtnBP5AIZqc\nNPhEYXQpgiHYQYpqO0MwwqTXW20TE1/JcqTcTf+DO/sKqVtpAHfcmUMILJY2\nWBjWfwvheaUkIBU0ysm/vdmD3RpYCH299U8ZJNDHTZnyttRbJCitnhRNo1hF\nUtmAGiY0iRPyZImxnzg/u+bSb7gV9XAZxMqOsMIMqgxYhYDyH4ErQTN+Sj3o\nEQvTRn6jR0PCNc8b8JWNMVZ7jqnaaNtRed8DrYrfmq6B47u/d1UCAuu1I2Lj\nHT9v4eoQK6pSN9zDVdzCcvRrLesFrSciGso7WCIJfF8VAiYwNqrIKB5yQpsF\nk33d1wXYTGTBpGLBdLFYqUmopW87FtybQUH/gI3MRfF4UTcJIZADIPv3KBcB\nGBiAVNmn45Tmjg2wiQ4amMtA39F5miKACtLknDuvPrUf0whppHeLf/Vrghtg\nnoQ8oE/+qZS+EDWd4rjU7mUphGpSM3M+fjw895gTSUahHE11PVrvDxjPz64h\n8TNhFzAmVib2GHPHI34NVEykAlTHxUg4RF/wCoa1FapOX3pL7bSwFOJQ/PKm\nPmYR+Ycwyxz2vWcQp1oMng/v0oddbbYdqX1UIJGcNJNLIUygDhdK6N40COTg\nxsPCgDL1OjL5/ximvKtisWuV/Dui4Wh8FkQrHR9mrfNWY8kkp9eBskMblKqk\naCrc\r\n=riKg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.750e18fc7.0_1612820431369_0.8755426764491829","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/theme","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e9484199c9cc7ec923daa3c84f1304d98f9b207","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.b62b1266d.0.tgz","fileCount":41,"integrity":"sha512-GMZPS6RdjLzCBaUoQn9PU0dgIh8EZ9WGQ6K1k55nwe3ssan4OJLL79I3/1qLgcWjLrbh+/aZIn1OcBLe8r9wiA==","signatures":[{"sig":"MEUCIDx5FYeWriDPQDTu9BG1OTvFMfPztGM3jzzxLGDhVCmZAiEAnh4WEOrNo+2iRTDizrAzaxmvTAIGPnPAVf+ATboSps4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwPxCRA9TVsSAnZWagAAh2YP/1NNR52+35OI7p8SKiUg\ntfFXT0m1jr2YgnHgfoVJkzyV8bBrzs2oeAJfZc2dAoFWCELyu3Xd7yDFQxSd\n3ZOnSxgTKO7y1LsDsC6gdDdVSfcg1xZZF6spDcjzKMJ9sE8poGfxn67dquh6\npDty2/1Owid4g58+hZK7Uapy6nDAU11oyTWW6N8TQgrTV1pVRH3DxwFhzJbh\nLJRCszuiVIwkvRznTx1xMyfyWAh6MEC6hf3UktmqzRHXdPYWkbTuFhAqCXN7\n8F7WnLu288LKpqsbFULlWyIXAUXWFFjmOCr3phOTY5yYvsHBFMufF6/UsJmr\nrz+VvcQOmGqvQEzOBjBv2evUb0E7phXI6kT3+civUHRyJsS1Cj8X4qbQtCyi\nFod/GgImUHgN6BsIq+2TZ/jpUvSHNqsOLe4D2KmdEV2qDisUvtho+tZJ0wsO\naEab4uQq/5gx8LBns6rtLkTl9apfSORZmjB/aTAx2KL5oAZXVNkjFXXpA027\nh4YDKAhY1IQ+dJL6wHTTU9PcPqBi6Jgu/87aWx5LXyVr0hLbC4LJAwt9jNgR\n1gW9OO/G7HODrCfzcjZweaqu0wBzyktr4+XkJleSe6ou9mSNFnQyipVh9EPl\nZsHrejnhIBrLZ6pgefw8oWxHfSO/dJi78trgukrSswE7AYVTEuhnuK6OYcw4\ns4kC\r\n=AKBx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.b62b1266d.0_1612907504540_0.9816398681958731","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/theme","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3908e1721d1856b6ccdd6140ce1cce9f587526cd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.a6b3101fb.0.tgz","fileCount":41,"integrity":"sha512-u/04stW5jvYXJXUpP/OW1EkzmFlEsjtjfHJ5MhNm8kp4AK3UaZiKRqByd/yO6CAsYmcnpN/Oue5fuJnUBoRRMw==","signatures":[{"sig":"MEUCIH+zTRYBJu2kLmwOQuucDr9r+oJLae2eYsQbdCwWIvVkAiEA3DE2/Bm5Zd5BGD9MdrrJkDD3ic3ri/Nv6JJ72Ec3Tqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbqxCRA9TVsSAnZWagAAiHMP/28+daubcgkfoe5UNMTI\ndjbwG4/iRsXQXcL8OFnBIbvSQJTWRouMe6IlmBuOHVstkpyNpGbj/sdrSFmQ\nk3lN+C98UdjOJVhLPQBJUbFL2vSHu7sIE0ysPTSZvhU9PhQwAN5D25dTO6d1\njxdqCslA9p6+z4YLBecsKGesASqeGNQwHzCa4fsuDvQlCLMx+L96jMPTVqUP\nPC0cGm3aSh9VMvap2B8am8G60cF0x89GZNz4xyIXR29GMNuLuwZyoP8+v/WQ\nwMpgv4BgxileTDq1JNl7zCMf2xWZa51oQCTTqKRFgLgN5E3Ks0Exx47J18vY\nX2tPeWJSPCaxsB9XzNRs37G330FaiFineZDsEvkZ321oZCMq//v9u4TTwVE6\nmjqiiqvsy1WBiHhZPkCni8UE95k4bMjC18ftBsXFsoAlkp4AKQBbhsB2Jc6R\nHFVz0RiEuhgxxi0rLoT7toxqGyt70k9fTwEpW8p1rc+EtK8aJUaneOoGascB\n6PYIYFs+/koP8OeIvxf+pTgiuKG/rEE8fcw24upTR7b3P/g6xCj9tyvTva6G\nLz9HlL6OwNhIT7BVq0Jnz3QC9vt0n5VO7cmFSZByqaqvdkAbl6ei40mWPJkM\nbk/BxI00kRgAnSYJdNgYoJkkUBQB8bPpqzP8thY+TNSTVzTOl87Ws8a87Y6g\nNPMy\r\n=HpOW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.a6b3101fb.0_1613085360680_0.8456369855724573","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/theme","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.ed88df700.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"496fda910d83b2939d6d87f86b57fc395542525a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.ed88df700.0.tgz","fileCount":41,"integrity":"sha512-xLB0XWr1vUOrOSB6A+O3TRYevX+aWwGzsfjrCS1n0Krc0pZDIZyWQ50XrI/awQkdEnVGTsEWeFl3ShP3FNOcrw==","signatures":[{"sig":"MEUCIQCcz7MZzzJhDDRMLPIYVQbI3PKitj/l2UPV01WZ9bjwOQIgWsPY8MGmShsdWY9kk8FPC3NVG37VdkTdYnOcimY/7BM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcZeCRA9TVsSAnZWagAAVGAQAI7W6iuq5HTkx2ayGMGZ\nKi4/azAo7HFI6iKWpCT91q5z+6QhMH9TZJkn+IG/2scvD3gC0ggEJAIx1L6J\nvyQkFyTY71vzssnN3HGw920NioH5DRdit5TJnmiz+w3zhBMUTIKpNFsxKEdr\ndHYrv3ieVLYEsXi1QPLFo9Di9sNZJd3Smo3IdSftqQRu32fkIsKsNMspmtvt\n7KnUIBlfuL0tiEwBqfq8WE1Bfl3PSG7VlZUy6EfbqGqVkeE32BbB7FhuGmhC\n7FY8DE5AjLZnp5SkQlUiPqs/+4Zju5gLcipoFKzuirMGdiAw01NZiLaZ3ois\n2WrhkVMVxHRGcQS5A5hy6T0lhwYwXYeZ/C/0Mwj/eocismf7oEWQFN5NDCIo\nbDU5dCcA5a2eFU2CJlPJ/CS8uNlKoVCoQKlf9SbCGrSTLtvytvt7YJa51Kqf\ns7JoWE1tsDUXOfn9MvvNtNf5q0B12pn2op62UkfO1g2VETjRKcUOarzkQWGw\nnL2E7wK1PdsS68PHeZX0QAeb4iVBVZ7F6GoDP4ldNkTEH0MviVD+GyBlXtzv\nM9Pc7d1xrhFltUl0i9nD+Snlemk0Ku7IPMlrj5QGMG4oZimL1ew3b7+z5KWQ\nJQ2bObOfeF78NkcKYi76AyNwuncBGlmsVn0YGs69gviAfHk74iZyC3vo8deL\n//uv\r\n=k6oK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.ed88df700.0_1613088349569_0.8633657189178647","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/theme","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd22a13507024e4ee7181f2e5436c3799b4d20b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.d30efe6b4.0.tgz","fileCount":41,"integrity":"sha512-2aBK5lgsgBRqlLG+xJCs320KqNOujIusLV/2EE9DYqtCcrpmhLGbsB0vxXJsHoDsUyFDax/OMbOVNMIUCo76VA==","signatures":[{"sig":"MEQCIBfFEm6oVVhUas+o2kDQVqjuGZedSbtKAxfpH9itvlJbAiBzJjAOSoJkXpAuEBwWGHm+tT7Vgk4VcH4wXb/+eaUugw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJerBCRA9TVsSAnZWagAA1KIP+gNfbgYUNHRCggYozkPA\nDJtpw/0I2cWDzZA9dIj8R0Dcv543bq7q3oWER8Xu7M/RHaHskiDDTzhdYO7J\nbD7O2k3XsXAmrePv38MnkuWHG+sGM6Ia+2aMzY4rMY1+iXuBp/T+tGxo4mXk\nZ75t9xTNIKajoqnew6bO12pEq/BAcYwfJ5TSFfsFfCpZ3WoS+H1AdBHGKTNe\n0Tjlv1jeE5V9y5f/fBbO4mrrbWok7iH/BOCnXURAjrRN85JRcje/qlKE8lqI\nz/EsTH2CKoPuodbDynJrIaoNYRQcQj5PsO9rue3kz1/ejLrfc6P5uAFKBc3z\nk0ascKB+WDJ2xi9bUcT+VTuw1npP8DTUX9TXyU/R9MbqtkNBIwRkYPvbAYO7\npi5vlGrSO+cjDvvIh+egJxnkUbj3pkHHqtftfKGklcovd+xZEZsx899jbVn1\nI8Xx8nXDoGBrSu9/5YCS0lFpM19oUejJnHodeJ0HyArFja8FzEgteGp82/3c\nVZ/5ip8acxQ+jfBhG207cUJLGhvk8UlQ1vVUbpiksxnvmOoxlvQAUtFrsOr1\nZfYftKV1UXfTeirMmtLOpf+N873EIhkzpCE9bhaG3rrb2Xe6CWmc4JoxJxpC\nbWI3L1CZcKJ1lUfe7PP01Y62h4BEg5VAZ+is5RwnfRQCq2bs3zGOfwWLNidg\nBiar\r\n=QFls\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.d30efe6b4.0_1613097665016_0.23345791910662128","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/theme","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6822d6ecffd80e667b66e74dcf3822a60370fa7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.0393bdc4b.0.tgz","fileCount":41,"integrity":"sha512-ZM1nsdvlXHRkoD5ND3MyR173/UUr7ayNAtRSBgRQyFPHcnpyECjoggoqs4FkPc0V/VWUYaXaUQWQm6COXBViGw==","signatures":[{"sig":"MEUCIHqzVzx//5A59QDGTC2CkczotDG7ljwUAE97JnETCK3wAiEA/j+xxilRxSGFvm5vd4LILBM7i4bfIkZ6vj2+Se+Yz0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgRGCRA9TVsSAnZWagAAcbYP/Ao9erHDCGV/btJqSuXZ\nOneiVjjnE6AUjhZuGd1Gi8y1P4mCBAplUpABNQcWTnLer38SGfWDQ1MLLdV9\nnTxdqf2rpVQerUPaMtk4IgFU+9KXMgE4Wgy9JJyex+q+gJQIpQ3OYqN8I3rw\njY5OVE3Yb9JI8BNBimjkCEy0dKXLGHw15TElVhS8uIzW5bcWIZCvbtdZeku7\nSShp2GYzvW/ZEWXgK271lX8MCbdChdT3H53/FfYPHimZOOge5pvuy8iAxXXn\n2Sy6kaF/I7t6OFLLVQFZ7uwgTzKFIA6RCoEgG5pnRDb+D98Nv+xZwQ+swlYC\nVowarc3Mj25T623lGPCAZyv7kFZOXp3KqWNpugs6xyo7hvt+pncCKqYswx4u\nzgRsERmnvePoP7HwBCAbTfqlEtgXG+HbF0L68+W4z/sossmf+26eeUUisHpT\nKov/x/6BH1mIgt3oRbrqBe35slyrGreo+Yj6mw9JM7bjW+UJUI6/25RS0c+0\ndEaCZkIJAkf+kG3rDKCtYywo3ldJZbsGCw42cS0RSBEikqPIILmJIc0Qf4M+\nbfiBYDCOS5Af7CoSCKtVNgM/grHidQhzO/HbQTtpGqlRHPWf7QJ2KjX5jZke\nV4xS52HZvk1LFG3VICpxEIjxT4fk2Oq4DYTREKE4Z3Uoe5MBSFRLs8A/k0g9\nBCcV\r\n=XxkJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.0393bdc4b.0_1613104198437_0.9728133669788961","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/theme","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aabf7335b896569f175dca148a348ddc8c7e5b43","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.7cd26af4d.0.tgz","fileCount":41,"integrity":"sha512-exRappRGCcBOmco9hpjQMvBbDpmh97TgEHaV2J3PeFJ7tnFv20rKBadt0tiVXmJPT9YgVhd9zw8tykznbYNCqw==","signatures":[{"sig":"MEQCIBawuoyQVuZMXwESvXICx3/F8EfcQMo2sYBNIZfs+CoxAiBo6ldbQcGLyGPcbWbycojsUOXYbdv+J8PJKOOgswS5/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqWnCRA9TVsSAnZWagAAFxAP/1TZmDP0+laK6dtv8TNO\nDQCNGQE6XsJS9320BgF838z1I999mlwztED+m6+IktgejQOULbSuGijc1yhV\nXyh6Ez5RAaTyC8ktEX+OYGU5czDU89WLEuRG8JzCn3XbnX3NCNoboyju3vAR\n31ezWY6zj9mzmNiR+j85ev1X2N0cTHoTm7e6Z8y2iBA7EmAG9vtfUSHakieJ\nKS0ocy1EXOt6SOiAcuuUxf8UJUl+HR9tazkZcooh1UzmgSC6y7jL6Ya/4nta\nt8irxCDbJaC+MmLABp7eub/Gq5aS/5zpTP9whS50OVQ66JT9NeZN3LKcotKB\nu+kEkNyA4pMxxTg9XxgeovX1eck2ZXQX90KF9JwlE4BN5IArlkoDo7dWnOQx\ndTQsLAST/WEqbgbnCCtXc2YPe8XFmPxnN2ykUW3ZjiJVqgyNgLDOF8sl/ZI2\n+ZUPhQABXaq2tBztnFIaCnHciVtFjjmtZ6+OBS+Tk/br2hWanAj4XaWG3WUc\nTdmUpYcX/Qu/zbi7HMylKV0u3DlcGdqh1P43rg5fjkOrYNdjt+8u+l3uY9uN\n0KtxHJbnUy9z0PnxHvaq0W3GH8/tfPWgWrbUuI0mIk1KBl986JZAkVsopb1K\nCVmDLaSuAV1iM4OfpHy4APLTof8FnqYvknLJk5KaTaCZ9yYBMf3pdDZA+1J/\n9diS\r\n=nOq7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.7cd26af4d.0_1613145511212_0.2981139542223168","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/theme","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"514f6e5200024fd803e2f521329381f0176774ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.71fe9a067.0.tgz","fileCount":41,"integrity":"sha512-kI5ruhbciiUNZEFRjv4LABN+A8zw8xKt3wjL6ykr0WdASC1Hkdn2V7Kj9pPnymA8IRP39BM+UgEocEbxnwt4jA==","signatures":[{"sig":"MEQCIFUvf5STikg/gm1oPTyMrd8ehAxcIU/2QVHNEreeK9cgAiBjujTvFe8bt8p77YNwl1inpm0rLZh650QHflD6tN4tHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq0DCRA9TVsSAnZWagAArckP/0csnFQmmN/o0iaICyNm\nbox33OS/mYg1tbXyI9UTjQGy9Pwi4Y4oBJveahWbfO8664VCgKX/kY0tqxuQ\ndivJBHmxtszzIVsAmKM6CsnKZSeovq/gPXqvi5jdTOoLQPphTNkuCPVETP4b\n9iR6K/VrEw8mrmy9RbXxZtPOkFIMT21/00UikR6VLwcitPzzRQ77YclVlqPs\nyfJ+34byyy024pa5hMfzmKHKzkK7bjfYGhIUqGUE1+KHgUCLtBk1d25Nim4Y\nArs2X+tAXMNYuNnR9qmXGEgzSjhM6lQIlRBlsCi4FB/LXl6nc7ie7WpVc9+I\nGv38I1FJmqQiBRAoSamQRRWzGF3lSbBIWOb4w5SIpqImUnRkrNRnkxK1ZJV1\nK55ONzrQ/Ho0jloxxHXOALf3ot2/BaZQ2JNAbyd4Y4XtKHNPq9yLPJbNLlhs\nsxazHVZtne2vQdhEFJUadN5g0UmFX4nPSqbvLcmdCrZQkaGlxr4Dr3eb6Qxl\n8WV+U0yKurcdL6ZEKwIVt0tGU+IYvrIt2GbqB+j6sI+1kvm71uLDdpxIdTet\nHuXYNH2+3LrH0McVVJVVRZj7i9dUw2jLrWNL4XpzzM24G/YvmlFqipoXyUQ4\nVrDNrXp/g1nsIIPgc3lZdGHdv8HQMNAha2VkU3h9ih5ID+bivp5oBZrBta2o\nc99n\r\n=T+Mj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.71fe9a067.0_1613147394606_0.008641355041540066","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/theme","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a8d0db38da9c4d230bdf2e54d0d90ca213af63a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.0fd56a86b.0.tgz","fileCount":41,"integrity":"sha512-wa1iT0cHhPy+8fYFLTFHD7fu9Q4fS+ytqqvp49gRiGmf5HTS+IQ0EJ6Z3XtzX1WnPp8IhR/KO70U8K6w8V7nPQ==","signatures":[{"sig":"MEQCID5pGANpC3VcSQ974WgZWCqhA41WgrykVk85gHdwD/1nAiA/G4ra0d+QWRytpGu9CupHUCswKVMPYM2m4j3HRAxyKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxkOCRA9TVsSAnZWagAATFsQAJvPxlFwPHOOZGZdiTJN\nS/U2KT80tuBUF2wYsF/WkD74iwQ6IJGIoEh2iDP6va3j0Zotk+cEtAmXkwJM\nxeN3dIGryf3r7r5P/Gten0uE9K+Q4kqN8F4z2P4i3XptDlXtuyKkagp9JbaT\nnuyZveK13ADx2DJO9U9XZgZaHytEvmIo0sN4L7I3StfpW53lRcvPQ6j/Jr08\npgWrb6HcpBl8P4EKKDltP17WbkUdilGe6NCdHbiJvl93hlBSAb+Owfn1bj1F\npVA/t0zTRoMGN/DzjXN4gIuNrlPJkD7Ez4B+hyx6Dl02G/HvWZhMa2HLelfp\nl3ETn3V4AZpqMW8mQs5E5TBngdinFfQa7IHdo1xnlu9LCEqppcWQmFV5sDi8\nRRZ403sjT3iHGR90g5cEqMvWoAlvZtobPW47YvdDyvw5at1IcbqkDVfMVFoV\nH1v4FcvoHGYKv8fWEjrWwomySxcCO7kk9wE/T3CjCLcrc2X1mOPugrJ3GpWo\nNzoaXy7aGPkneJfkr2YS66ZsWsNpRig609lbf4Xzb4AEcdcb225ZNRo7xDWt\naDuQesEE63gKnNf8x3LmPV1j8azhODwMW5xBkpBAsPAOstXQxnd2HkTi8bK1\nR+nnNT8fce8CHc2hLHXE69ANy1zm0lCc4/ZSrTwbwyHAesmDRr0eYlYdnQbd\nBnOO\r\n=uS8c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.0fd56a86b.0_1613175054445_0.6067809658276591","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/theme","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7572c374f478a5842d53624fbc9ed2b0cc46e53","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f19bbc4af.0.tgz","fileCount":41,"integrity":"sha512-2R9o8ozxVmr3eLPnP7BwKnlsS0hTkyr7tfAL5gcHsWzHnxMVdq7Wez7ANUgnCq2A6P7ApznMV4zaiNfY4SeghA==","signatures":[{"sig":"MEUCIQCjSDM/tqV8O5qq2p0Tq9zeK5cDDd/mBPPHDSUCKAmWLQIgKarnGHcdfI+E0vWBpljBqnOPpSashHyjUGzLsaAs8/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLEP4CRA9TVsSAnZWagAAgZsP/2Cc35OueaBmW7CixC1j\nPGbuVSp4PAp966k1IiJ/knUuH+pxa7tqzv5Oy33bw4fxnW6/WLpPEpK5mKi/\nhwHeupX7zHo8wulj8onLI+nQRd3h4t2pClBCzPpdqEy9HdFboDn3lpolCJbJ\nqHSKS37HvsyIp6ThUW2FGN+qm8+kbY0o9ano0a95+LJF1/SokrawBSjN9qHT\nthGY1VzgUEKdKTQAdxBs+9axZYzlykq6wpKNYPNqZozM/TmRYJFUHYne6l6M\nI6kAwgKypGH8uQQUE95vvY3C0AGVvIgpbnHtrJcqEvExuo3kAb9VUz5RTlOg\nZq00pMKqsWPDQnjCrWHN9/G6YWhogVKUYbKEbPY11ZUIUNtlPv3CMPWoU2Xd\nXfBnKqSJ7z/Vh9if+oUK6z2iFYzsZuy+ynC61gQY4RRRG5MOOdUR+r1k7UQk\nlkuY6oRPdboeT+1l9YxmT6Ft0EmMdrQdK+0CEYeRoqW6OPU4JWmpt8Gk6P/B\nWNAZHmTYqqL+XVKPl1XyCG3ZDQNq9SqO581YBDb5DhASj9rsDjJphYngpOO4\nfxJcdeAKUHBuZTqWCieyPvwsDb8mzgcDapffGnCN1CXVawsfe7DhiUeSNpbX\nQAVhUwhaEF2XKXr4xXiUotDkikYFzsLJuSYLqgyd6vaDwYyG0RwyHJ3zsPA/\nSJNG\r\n=CSlS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f19bbc4af.0_1613513719505_0.8826168284998241","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/theme","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b3d0126fcccffe714fff67b224715e42b967ea6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f9cac96cc.0.tgz","fileCount":41,"integrity":"sha512-6Pcp9FJ/r0viMJo/USc1CT2wRprDTV3SIxeRIMkW+I5S65bUw9W9rClOUOkupxrBo0w3xPcPz3dCgM97KUhmnA==","signatures":[{"sig":"MEUCIQDUYyfjF8MRfyXCWrlcV4Syq7QE7ZYpEjlpi5EOcBJpgAIgIEEmPafja55W16jcBlhRY5guyjxcH4QLRY9dS2blO2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT+NCRA9TVsSAnZWagAA1TQP/0X8nu8jsGJWXNSTE5SR\nuQWjhSL4O3siQn11Pi4zYEqMQFadx8UnWHRgumEcnS+IMz68R7g4FE3C+ZrK\n2/HQKWGOT96Lk4w4AGJP9gDp/waUD3heCCqwSmHgzUrZivXNVntSyn2pN6r5\nQt19zm0Ou9zUi0Hz9MlG/ABCJN0VligryMgshAf97pcg4yTjiquLtSKXcVSO\n30tykXm9s3kXYKJ4kY01N1yGw1L1UjAQoRkNU53a8i5fWybZargvQprgz5XZ\nLAsikBv8ObfYFEvJs7ljQnR2SoES7iM4E3M41STzm/0JIMFrw1LYAym068fQ\nk2LVz939aG7qWQ+o4vih1Vlc1LPJZVBPFO6m/uDtzLyt86WaSzaxxH5vD1mu\nUHHMd/OoW1K7Ns3fb1JTUjZbuf3mHU0UzNfbPFPh7ByDWITigY4UC4tqjd4p\n91j++uvZFka8G9HBVaToyD6vKghJHDhF5qKoJNgM7Hn+ws9F7AgPQYWKw33O\nuyH1NZlg6OZHzxPJ05A5KGS2kQPSGuNZTEdC0OPqjOBiQe6vAFrup3cDRWqv\n9OV55Fy1jz5aOnOlDdq2BHWLpxSdmGbgmrbB2fSTVksEjsXda3zIbk6wAxkP\nBELSWiUYhi+27m8duJInrleLnKQOwAISxSTXX32rN7YNXlXb/ADHtb/s/+wQ\nsxQY\r\n=Cvy9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f9cac96cc.0_1613578124371_0.43131605539614015","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/theme","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6fc8004397d9ee765b868e7cc6a9784ba326506","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.79ce0878b.0.tgz","fileCount":41,"integrity":"sha512-0ztFjcxRS2UNo6Y9vxKpLOcSBC8W3eH1DC0c8YOjHXRjSOnKfkz/iuz5WpCQyq4ZFEuZvz45zCLlOOUyco2qgQ==","signatures":[{"sig":"MEUCIQDcpMYVSoatZ7u8CIisWiYJ6V0VdiiqIuxAlMhx4qULNQIgA19FE2gWws6h1E7qGTuNP5Y7umWrKT9r6kzadqogAwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW1VCRA9TVsSAnZWagAAxiQP/0AhCeasNIZknld6wS38\nfExBcn1IjfSC/qDrSlm+GHChBpYtTRzbLcsRCVdK5LOfOjXsdeNn44tngSOI\ntoc4Wpn66qquMHzYAJVUdLPnfUvgFQo5TERHEHqt5eBJtpHs5Xx/Moocy30s\nBym11Y5rNAgV1lCp0nd1fSKQlnLfW5+2/b2HLX+7gC5kgJyLFRMhw7iIUbn3\n15OLRGYiQNucLaWMdzm/diGPGd6/LfbK7Rk/BcBB5SLNiQFbupHBe7GzU4/P\ngfv22JFEu2hsJC+msgj2+iYQqkEIQzYIO945KXGfnsfd1G7pLXA1A0WU6sZT\nLMkVQA1vNnUx9ljaxSnV3QBC6hjBW7le0M/uJ9jjKebrhUAMgOrdC6YUeOI3\nmtpPgyaq+2FvXjfl5Nk5RG64p93F+/kWL38jctJanakLDXoIFawAe1ssIH2n\naVkYPq0p+q9nwV1yT8yneRmFG78iN9HtcdgjVGRI3FgeoxdMPCr6KIFXEjz4\nMVaF2TYA3DoFojx6J9TJAS0R0QT828dEE9MYSpOW2mCa4jm8OaBzQ1PmzD9B\nX+Rj9IUzRagubY1Vqxi2ExLfTvZ9j0e8c6fH0Et0rEGfT1cvz62WgLRN+2S7\nkrf2KNcPnHyZHJkJ8EYzawVEfbfnSdibH38qEEea+Y0uD8mh+PKNfABOi8P4\nxjlm\r\n=/Q6n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.79ce0878b.0_1613589844955_0.90169507565941","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/theme","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca43b0b8a6fd1f00073e1324a9532264e2058d57","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.d6e507b5b.0.tgz","fileCount":41,"integrity":"sha512-K9iKQzut6Awkk9sHkQhGFJAwaH0Qbs0oHZOom3VELhU/QFHr81mg8OU4eyEWRgLGQqS2Pji0tFgrBMTWJYWO3w==","signatures":[{"sig":"MEQCIFAWa583V2F2j4wzzF29c0rvaD3OtGdbto8KeztP4jRbAiALRfxu6t396BqmdaSlJtvlOcxq9JTxAYRpEvPI26vFOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXUeCRA9TVsSAnZWagAAyn0P/j/n7a9Uz/WAtswzhqY+\nIPFjEj5CulWpq2LC99dVLdUgRUO59wBu4IgVLkqxLjHI3Qa1whDaabDOf7g4\nhrbVYJvPnauExB7zEo+Vih+0mxbHcRbZY67cUR6SVjPbbDak4jggRs8/Biis\n5MqGykXsBZ/aMg41YXvZHj3oEKIhMfTO47t05J3xGC7YjO1YvOpr4jiYkYON\nAzSMF9NFDBLbpb1Zx6iz6Rluo3k23tfjpEcPhBc1Kt35PiTcrHvvGYgUsBqi\nzNZqlYo7tau9bHT+RjmtUwAh2nm2QXB3JaIWOFe5PMGXZ3HyOz6vY8vKoS++\n4EUFcnFd+juTlsvTK/4DeKKHEBZ/14x/kWomohfueZPK8ZHmmyboLz7+Ir4B\nn+oG4ufEtwEZTv3M1zGH3UcwQDovG37nAeAE+WNNiBXsk+LJsSFXHqSouEgI\n2V7dZOK1+lF3VUQKgpjY2i5EhhBv4xI/crv4lp83VgYnDiGzClVGAztXvjqd\n0PWF+2aYBiCud9zhELm7qI+MZt1A1L/lAv+Sb1uEHmUU1NsHNDmAmEgXDU+t\npFItlG06h0reWyBwX2w9ZTuRBAmxB7kHDT2GQjyytOB2CqNX6hfMM0Wg9YE+\npg5aK1Jt62wsDeQuTgg/Z5Wa/46RsCvv1lxHYFQ89shx30feDB+GPIm8cx1i\nwF7D\r\n=tZv1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.d6e507b5b.0_1613591837579_0.004789492231930703","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/theme","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f2658381b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6ed909a2d1ad3f7f9147746f82d01430ea45d25","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f2658381b.0.tgz","fileCount":41,"integrity":"sha512-FYZqdSxK2PklMRRI5JLjAz7ApBQB1NsIY5KMw53fYddwV9k77GTmhKVrwo8xswwSr6MmwOdyEokn0e4W+K/txA==","signatures":[{"sig":"MEUCIQDbCcahxYF8nAOTe+j0PmNw5FdpOkTnKQaM3CLwLzRBXwIgI57hfL/guR7EDZiEWNO5ec0akrb2Fe6JYtGnsh2SMNU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZwjCRA9TVsSAnZWagAAlaIP/3UYvWFckG5f89Jte9ia\nDsQ1xOcD9xNM5PxPpGKpDr2067B3eEtkVtuWvOtliQ7YPfvq166MmTTr5FND\nhIuQeAmhdkAWjo8eo/pQhleR+ikxv9dP+7yiBxsGi9mtrFGZd2X9WTvzsyGN\nU4dmJxFhgsvfnpvyEJOwUPsm/SHPyNnRJQmpvhb5ipR3xWqPzlfPQvC0Z+mS\nnngmChYrVFiBOv6d3KYcWzRToE59Bxq5uWqM6jJjVYAZ6f4BiKlJPY5LRjkd\nOdzufjzCqQtl9wTIfkxW+y6lNXPjc20obHV5kMy3HhVo4yiRpRM3BIDm8XDS\noAC+uwtW0rz424SdDOPjlmEt034oj2qES8f8x4nwthCCug/v1qWuMWV77DJM\nDlPxA1tJ6N2JXCBvRZa1cWi8yiHxeV5UGyY9mGPvPed3cmF8j7Z8J8/xA6ag\nW0ewCeTiMg9v3/FKwpEPb/lCcvKiEhL4+FXF5kMbDA8RKtRgZzDgXfR6ngCn\nU7x4vn+2r2AUSQA+HSpFLpd/utwv/pShfmneMtgk95I2FVjeuHq1KRluTupY\njZ/Wvs1xAwJK6tvywKOR0JO6x5Z7wEwRFvn4wVjqN3oDaWBjv2YLa0/Ru7b1\npqo5Sjy/ARYDC5qMHdB1rB41XSvLYKHEBOv6nhdmwDl1WIukwXNyygBYsEJE\nZi+P\r\n=G5g5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f2658381b.0_1613601827412_0.32973197427346945","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/theme","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00d426153a597e37c0525bfd87c462d77fec1ecd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.97c4d4035.0.tgz","fileCount":41,"integrity":"sha512-+c4QszxfcOPweDSUb1MgMv1z0D5r4pwRkVYaMU9k+V9YAKYeddvrvS8JidVBK5icZW9mcj0NzJEXRp3eRM3hPg==","signatures":[{"sig":"MEQCIAMzsX5ZwYT6wWGPwkagj++u6GpwFiOyKprDH7+H5OCAAiB0tCAUoTaUdSy6Bsytb5u5K92uJBGyBJc59DE2dkjsSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdIjCRA9TVsSAnZWagAAMxUQAJ0HcN1w/DTN7RxpzWBH\nologKBMhLisG1DVLoLZlNO40wVG+U/9+hTV7nLdyXr2A7Ln6C2P5UMCnCr7x\nFicZFhijTHJHTXik+NMtTBRoX+OB22BZOMU+fTXJwlG5hcpsHfet6x4rBx/W\nO1e6FvsT12SD+1Y2aqT8S5kRC6ZmpmJQHTHo55RI3YDgmYqijwgi0IRDHHsY\nl2xH6wSxSK5AEoF1YpzsazQNgbtdXGoaTFDOdVVOIK8JURe5D75CokiXclu9\nM4JPOZ5FDpifw/o/43zf1Gq3z15MWdMn1qO9FZTdg1lTsu2bcyjRq62QYLs1\nXUIa2ivqSyyVrtTdZbx2iJFj/Ue9j9BE9tFQdcLnSAGVvZ8TtVG1flUEWwYf\nZyw1PZsdsiCpjFDVe44pKln1L6ht42GWJuLz1pn9DKdgszdX1UM1E4j+KoqY\nbNEj9D9ydK1115byAWO4fLVQa72W+pkvipLxBz4w9Dd+5AettwRlunAlrYfZ\nvNWXIQ1xiaeIVm1TmIpe3aimaq7O7ugj0boCkUG/yefN9f9H90/+/F4NS23A\nTcjGn+e59kUj4XxI0cFg9LUTr+egESuoKloKw70vJDbFNXqV/1jFyPgel756\nkv9F2ukpOCqSSbobe6WABjIMMJ3RWQXgfDoj0FRE5uEOaFzzaFL0bnhd5tNb\nlClK\r\n=Ah4C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.97c4d4035.0_1613615651452_0.38737605148098386","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/theme","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3f66269b5a33e0df54bffaf900303a7666c8912","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f5bb4648c.0.tgz","fileCount":41,"integrity":"sha512-baRI1RrkhWB0beMxBwg06gLlrYh21gD8r9+LfeAeJYKODtaoiEE9du0XfKlgqtbcHskhVDE2GAMEqNL1mMElRw==","signatures":[{"sig":"MEYCIQDK2EOUJGIpg4+k80CYTA1QEOEypjSaBImuhGSS/nLVFAIhAP5bFolp+NBfbhCz2fp7tu+RH5pk1gf6j9MQAJT1QQhZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLo/4CRA9TVsSAnZWagAAe4UP/jKEkcg6L07y6uvtQYd1\nwXTmv26v/Lt3NUKMBToz4IpoI8WbPAFIFsoNYyvQn4Z3Cw69ZmuBUXPcXmui\nbWz+NLwY0clTvKGbLgIn/9KGt2SE7nIHC6LG8s8T3Dw6zfBnXg6VUDELjUkm\nW+MwJ/cdVBe6roKyLR2rpNRDYc69Pp0I4Jfo3PFVoGibGwOx4GcOS7ZBjRlM\nQ/AoaLXDROhHz0ozxKVfQkDZC/SkcMLRQ18mCIwlfDkVeNjGUTX3uccKDkx8\nTQMrNpshNvgRTMBpbcYb6JPSAsX7HM8SoiZRXdyvZE8SceUrMH1dnaLI7nOY\nMSDg5OeKmHVyGQT5CfNGXlG4J7oRwGaLshVf0E7Q9pRUDgCTvFwZIAYys7P4\nj3BIj9wvUqdwf2rlYNiRsddT38J1arB1h5oc2m6sEYpQEHDQ83HZw97lxN0A\nBxU3Y5oOcltDcPn4zUopmCQS2v5TWDAQZiEl+qoUKiaqXULU7pzi1ffz95dc\nyKWY14tn+6utIAFGXAcjgpP1DWLkxYBWuhrmFrziUKkSYsiDAgkg8eK/HL7X\nVJK234L0/0ZrVW5dCK68CaikGbcvJ8kscw7QKkM/pjrjobYxql312LvkIV3l\naWbolv2x7eCJM8YRcv2G+9JHV027fbXuaZ8bKRGaWEHVtoS4btiz6H6qywd2\nGQGn\r\n=bCxt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f5bb4648c.0_1613664248134_0.23311259724894406","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/theme","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.302c7a960.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d42d370c8d6541637f9be528963873ea0d022e3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.302c7a960.0.tgz","fileCount":41,"integrity":"sha512-N9/Yjmv4w1BvTBXtEtF7jh7RfNwUEF/5kq1QFp0sGjjS52pEtPv9ke7YX3/tygO6iFgR1Gc3QR4+Dt+TdxrItg==","signatures":[{"sig":"MEYCIQCTXL4veMMu/jhq5n4LtqAvKo2snnDM8CnGyVxYqgEX2gIhAI2A4CT3yCs60nBqeIvzO47dTDTTp0ifiIXohnq06N6N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrO9CRA9TVsSAnZWagAASF8P/1BiZkcKXs+dwi8LXEl2\n55+Gk1YZz9XI3Ne2JdyyKOIBw65V8VXWE6uMfl75kiIP9rzqELVDeMDFxBfZ\n8f9hGT53aMgKr9kpo+GzGb3geccnBTMUXL94n132wxTbtXF3EAMQQvtt/rKu\n9RmEPblML7nt2BXTBappE3D0qAp/dhawydKu8EDx7e6euh1JueXbP/rBgCyf\n4s6H8Y3F0w/tlekA6VSJgar1FeS8zchVTxGKyjOLe9vS1awfLeu22UG0mbNz\n+bpVbctP77pfRebeZWsuSfRAhnAaLEoQOxoDT09QbSWyTpzt93gIKFrulwPC\n51OsgstQ+xeFfl1wo3TMX2tUzNHXe8gTl/cBRqzHXOQJYYAhMP04OK2x4ipw\nAhJXI747FGCNAFzUBf4YJ1HpHYYNu6ClGn7wVT+HIGsmNp+7uYLwUR0gYOUT\no5wocTG/VCznxIzYpam98zHa8fQi6Uc/nWo1fpT5AS59jrMOO1OsUUaQJmdh\nsHkjzsDUvEb93954j8d/B7B1VoOotNTJBbmAsDNvKlqUulLZtk6mBdgdZsit\nGSnn3ghPJeyX2bUy0T4AFXse1SFcttMQNVyn1uHx4jKl1ciNA6gUWJtU9Epk\nKe5aI3ImFvkICQ8bLMgt2BnwjBlgTD/xDridvQ2uj7fvTnZcrVFTQHGv1rpx\nL0uO\r\n=xYr6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.302c7a960.0_1613673404747_0.00888810609820423","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/theme","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c59bc7eeadcd2c32d6181a8c12cbe47431c8c26","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.aa0aaf026.0.tgz","fileCount":41,"integrity":"sha512-PozgtiO4XAswSnsqHFwCe0yXwHVth1w8+gO7a53jiLZSpWpykCvYOEllIQ8ACtCiuN4oQuN8UIkMOudflf+cyg==","signatures":[{"sig":"MEUCIQDqkAMwqgTs4A+QAa++rnAZ7ICIR/Va98fyg5+hsbz3HQIgZzhROyRXCnFiBTW/9hJd7cYkzhZXlNxkjZOdsySMpGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr5nCRA9TVsSAnZWagAAJZAP/RQeKnONktAdQDeDNGmF\nrSeWKr7qkQ4wfssimRhUhj2r5DeXiEg24W0NtKQ97dbBkdKctINU3dr4vaMV\nsVfUw8+QRF8NdjeLOBg8SUr28sd7cJN58fk+1fUF6LaBKQVKDl2JQaIEWNju\nqIlgte/1yMl9fYkR/Fky84DZYTpx0N2U0UM5QQPafBnyr6Vp6a+U1pJ1QF/+\njeTNw18YNJRaE+d8yacxpZTU/k7f1VJ81DWBvmE8cKZAuZB/QmPFHvRP/5Hf\nL0x1TexZF1pg3U1+3nMPdetyUuuY+PPt+R2+TmUHe8U7u59zZc7bH2KBrjsZ\nmEkWwE4gntgrcggNjEnzqXEvFXedPmf6V06uCQrTIqECJuK33d8dC/fHFepf\nRJLTArD21aPwIM1/ri8aS5GGUvQDcCGNu0V/Bwxcvi8BWGBtBS+pO+B29jen\nPs1Cwin1/cZe1prv60rqdOYFHcdQhNQ9JD0PYf56GFGIUK2AioFXYXxQv22P\n8h8gN/roBS3JJb8VM7jbc3GYMuNVhhp+QHKuo2bqVtPppZHqPn1Wjia4Nizs\nrfYave3epnkA3tm1jgqyL89MNzb237YSqH1kpSIkAhSFLHr0VMhaR1VedP9/\n3/fjC210k15jMXzDZnZhZIMa1Un/WSJe/1vieGdem7Ax0kUqOrhGa8H8Af+b\nzov0\r\n=6C0d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.aa0aaf026.0_1613676135088_0.39861650884063526","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/theme","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ba8f8cfc9b78fc0e89041d6177c90220e0f1e9f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.07ff0c452.0.tgz","fileCount":42,"integrity":"sha512-JsjJNQFllp6EBepnbayyiurVGwujFjK5dT+7AC1DYMxkNrIaXqxmcA7CHXT2LayenFV56l3VsK5gIarVtx8h8g==","signatures":[{"sig":"MEQCIH1iGlkQH4hGvmAwu9fWkJKEbUk/fLZLCBRIlNZL9nhFAiA4aQpkTaaI3AobSenjCWdhj/DhKE83K6r6f5bkOGqqUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsL3CRA9TVsSAnZWagAAt/sP/27Ffik5ba6GryhWe1w8\naLH7d7Q6PfHQ8uZyVS8sHarf0IruJ8JaaabogWdhoXhviMCJl4JP2aoQPP5I\nek5BVckZ9DP0rMOQI/uXpoLvqyIGJfrG2Ca1hMudO1uv/ngMhWznv7JRh6oy\n4RyosRZ/stdTTO0sgtt423p8V7YS10Ib8Hb0kkQjzUkgIlWZwmFRgJFiDdMU\nG9ncI1knWhRgp05uP6Qjd8Gn3uQjbYaPxl+W9BQk27Mi/8G7D27/gMzy/Mly\nkWzmLmixOXdzMvDi9Y5WUuL1ixIeZwNUPsbRnKi1IUVTok7Ujxznhv/9nBHP\nZPli5E3ho+0L+yUAM95qKAaePTnFKqAqRnDxY5y4NvOt+zYsduGLWAyaPJyH\nF+xR84ucF5ajWKCpu62huYxTMX7EBWGCebO94/fYblGl0kiVbeJU+U1PjcZk\n5GpOkv5+oImhYKcFfNHvTUSWqEKnoBNCrcdTVvECTBL2fSxAloeCtLfAgWtN\n6fEZ9JSCGupYMeMSuygbvBmd/Xm3KWf8cUwAFG0JT8Itmub4QOpACx6vsh4P\ngfOwWlV06PbWMY0JOxlkI0ClRtEef8V5JSo85t1cdVxRD+Dq3DIN5+hTyHYh\n3O0Xfr6eZzExggwihUJ4UnUQP4uXz55g4u9n8SiMM7aQz04kzzrqdd0G1ykh\nEF1h\r\n=TxuX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.07ff0c452.0_1613677303185_0.6391143648716229","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/theme","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37bc7a5760171e2566f319dc5cd3aeed798c7e05","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":42,"integrity":"sha512-3h8N41KaxWKOIkppqIOkNgS3r1LiupW3qcA0/fnnyf4sdpE4LPfu4l/fZ8GJ26opYpFhhjOwRjJOkPsZ5mBwFQ==","signatures":[{"sig":"MEUCIFs1OmrJ4ybHqWXL8frY8vLjIdE0XRKbhi5gaGAFWfNwAiEApkyuiWWh+RvRqcmMOYbmdI2bJzn4sRPdqLarB9V2DyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLve0CRA9TVsSAnZWagAAks4QAKIGxC3XvQWHvLOHO/cN\nNz4Xratsj1C4ZfZZJ5KAML8Wy1dNrxF6V/8QIITF4qRxcqHRnYg1f3K81mep\nVjc4OdL6VLcru3Vzk6Y/EmgNshKfXiKoZpgYUMEhXNcgdt+KFcEOtKVwo03/\n56TeHTICGyzVPIznV8mM709p/QrCXLS44oLbIAvaYtGwX73dc1fgxDHzGFKs\nMGDHXaIE6m4rDaDUNxQsF6vXfWLU0tSKOrshWpQbc3SdiPzIcIJPQfsFtLjH\nApd4/XL4jUrOtl2iWpFd1EETiBKasDT4vytpBEF1AssFH4Z0ERoZnn4i/5mi\nfg2SNIPHyTYNamt/7kJJk3AibpsBCxeDpebQjPd7mNk6fbXf69QDUhWEY4ud\n/FwMw4GGXe9ccKto9EnDOKJnjN/t1KIqLQPK/4ayQj6+FMtETzN74w32LrLW\npSbNoZIfbg1WFhi4wzfEat6TkI/VekZYtQK4u6SouURMYWmse6U+wP2UtHNq\nipW2AGES9JWrlE7cb6hE6/58EAYDybiWIY+pJH/aylgJcq/s1V8aHWGsgN8I\nrMg5KmlzJiYHe3snySzF2TNfOKQe8xAs9UX5JOGrjQ5O495mMoG2js1SuH7X\nPuQV324Dr9jfsfvoiwJ5+upsWQTKTsW/+nYmm80DVBvSgO//QYOzdnwYu54D\nSMfC\r\n=XOEW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.bed7ecd3e.0_1613690803893_0.5643336679721978","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/theme","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc2aafd458f9a8111d0985339e71f37e5cd8d1ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.06dead2d6.0.tgz","fileCount":42,"integrity":"sha512-kLVkWp7BUeTDPpcruF0sTVeFOoQ01CdAjsOuVhlyNGRM158w3n8ifJpSuHmkB+piZgcCpPaC1+EaT5QfRysEOQ==","signatures":[{"sig":"MEUCIEFG2t5br0FvsaWSHcu1YLRYFhptLGhMvaeAYLU4+Lk3AiEAqyHI/0u9J5/4i6V4PPrsnhO89JNOB6fuQzgH/HL5p/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwf2CRA9TVsSAnZWagAADgcP/0WA/DQi/KH70IyRqCwC\n93pzRpgc83nZJV96WdPTaNOK6aGPI8zasxYUw/m/p5Ivk4Wk9uR3XYfVrpmw\n0wYHroqG5qeagaEE1yzQAP4PvA5n7Rc0chrf3M9xIbriTr/Xt2f0xGKrcpCF\nVJx6cGzYqZSUif2w7hS9Hn+5fKxeX92GCd43629OlH1PDeq6sxCY6tKM9fl9\nGLaqCgLCbObmeZuyxDsxea90Y+iR8sNlVl75C2i2TwJdjUlDbehhTntM39wU\nfcqeMh6jBypy07x6Mm7S1t1b4md6LyxAIBv1QW7I/cDjdlhtOXtyn80LQ+yZ\npoMPzif07Nr8mwRav5QSeW0Tjg9fopjBpb1PizYclJByh9x7mUN7iswW2eGx\nWgvBlWoh2h+qS5pCycxalCPDxIn/RYxFitpVIhw4UhHKn9WoQwqgirVLFjaR\nj5rCSSQf5J3NL3XeYPumBqrX9UgYa0aTNwc5TMKm6KfBKU7g6GCZ6vMwyWTE\nD0k7f0EC2RAirs+arCa5CFc7ro4u6fquTRAeY18pnU2Z5tRymKB42H9dtXQa\nzWsOJafZeH2fneDALZ/B/ZpAoYYLAInEWa4Qi85CNQHjei1YJS4bDhzBCD/g\nwzS8hX1Dff/h37DscSZgNcJ8S9zy1aLBWSu4TpOPFCEMghQ97k+wm+bREJWw\nKoHS\r\n=PIXJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.06dead2d6.0_1613694966218_0.6997770152921221","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/theme","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.cddb03553.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45d7cca48922be0a9c26ff3d5eeb8a5008ce6f82","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.cddb03553.0.tgz","fileCount":42,"integrity":"sha512-TGQXWK2plRnK/QyOq6Uzd72dHrvSzeBt1LDZCUwlqBQHvVjzSYiYD01w1u5crRwbcsap9JdFKV20yik88BVUZw==","signatures":[{"sig":"MEYCIQD4kxyN+kvgERLK6t5w9swfsQApbPdXqaX9A5i6tkLuqAIhAIWeh4SG0idq/5C58K9AeCp7WnE+R/Z/d6M7D4z35xA7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyyUCRA9TVsSAnZWagAAgOcQAJOWVJsAMQ+FeP9fscjL\nWle036R2S0yp1LIJdWwu5f4WHoEFl8jfVqdqLruaTqvNZPJUccqGjDKeVURZ\nLyaeOZjBffCAC2BRsYuNicyCbG6NRPs+TnrBJi3n0C7aa+joDwQmjbQmN7Jb\nxkSWiJuH0ihThiy1DeBo3hX0o5uAC67PqVA6eZ55F4P5R3niY6mc2737NMKY\nn/DSuQpkQd38xjshcmAFwwjIzORSGpF/rDvX4kJybx8BO5AAIs3VXz/EUPcv\nY0PxDUOWOnKHQ8izw5mf0p0OiZBNH5cjpJ+P7lBtXQkFdxsWaOeFDoJPBEkC\nLpwniBKtSISUi3E7Q0KRzkOerY032T9/A38fQh2hxZPYbBnETsnNAJ5AcO06\nVO3NntQIY35DymUjmJj+Ro6LdcaPzIbcLJqrm+M8EGvgEWSomddzdpMii7Os\nPermixqkTPktx7JUjju9gXk8Otg0iQrO4egZFTgmK3mP8sKk6SQS2SMC+rMk\n/eTNYm/AmNNGHb0Ha7z7SN5T4DmOJ8+yWnOCz3euyghnllVSVWxVW0scE+51\nXs+gn0Op+OUFQyAZmUf5dktos2qkrgeWdJb1414qpXXKJxgUtzx9VoAdcRS2\nUa+8NitJg+9cFYvkIPDAi3oPYNAiYQ5f7wLMyb1Nyt8CwI7GWIZ3ELVR1MQs\nGWsd\r\n=6Sgt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.cddb03553.0_1613704339750_0.7722893427764466","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/theme","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e470a10facdce6afbbff7290808955c6aa69bd3b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.d6d8d0476.0.tgz","fileCount":42,"integrity":"sha512-9wOiJR5CUSGeqUWzyp1Zm9jjDMPIxrY2lliiWL/uthNAMFBTfeEQSrE9+1rM8oRgkk3v7S4VUXiDYxRjuRA53w==","signatures":[{"sig":"MEUCIQDNURr25HNW07Ui+tdy+5kftyxGKxhnE6QZmwsqmoHV5AIgDtCZxTp5yE7OvEnPN2hbW1ekaMZCVZKsfYw+Y6kH/84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL04qCRA9TVsSAnZWagAAb5oP/ivTvSRIFYTJ7+Orrplh\ngUOq4MYZro0Z91FpT0708twvS2hYWASQezmNB2mbsJljZ8kTySl8/YbZKaWN\n6mk2w2CuMzncHmwpQPbEE/2qzfCqjCk1q+VZW47WMxVzkgup0Li2/RDD/v/+\nuTyDiR2Ep7u0W4mN5kWCPgGfMPL2dH62hZeF+JQqpZjyg9fGEXNr7TtQb26u\n3whYEFkSmsjLeYFN9qUGnPS8Fw751ln0qLcD99MxPQD2qLIn562jYkZC9DPS\ntaq/IYcKDFcI+u2RgTFFV89YVv08D3x3GfarfIWYVyFIjZtH1UIW9trczr8t\nxf3dr+RDB88DHYXlVvvrjfVpJxlZ15UdvAx4YXz0aP8EZA+kioto1Hoc3CYI\n+7/RuJtI1KttUzgNpPWcqka1AUZ6um4QF0EdvFGjWnSHLAitbkPx6w9QktkE\nbOr/qffRu1UHhLnwn3qtKeYcLTJbnr1pxm4GsfIOrZHUEC1j0AIAauY1Soo/\n+BiT+UxJ69S8INnM0kO+h+AOM+nIlWlgrkBhmE9QtHs5PgZYP9kcU/pF8DvJ\n2453ZjLuNOUF0nbky9XKdMm6PAOtjJEN8q1JB5llGcZCHJjOz5MiMRBPcKGX\nIz2LuBRUOmXynQDhOvV+eEUKEviZ/H0o2NI3klhwZ9mcNAngj7s4qOzS6dhk\nDndU\r\n=HNao\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.d6d8d0476.0_1613712937755_0.8883270951387416","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/theme","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"916b0881a2f255f7bf09f0dfc3ba85c4561e9640","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":42,"integrity":"sha512-hU7i1dMB5LIKaXgvyLizpOJ4idp8ZqXcZglRmo1r9VId5L/nshxSbu/ThBMHKnU1jSmj+4oRgfe8YU5EMhLuwQ==","signatures":[{"sig":"MEUCIHz7oBbKKXUlYs/Ppj+xZu9/1RaJ1VFVPdfhuy/VE6YRAiEA8ZMXH08RzPy4UCoIuCcePMdN0Vd+efQkT7YW8mX/1zw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL9zvCRA9TVsSAnZWagAAk6IP/iC/LHYY0Y/h+RZJTyx4\nHrDf7b0xHNRzVclA9ei9W6WsVVnRnL1zA1B/XlQI/RlmZXqR4/ZY+O0FTQcL\n4CxxDQmpY4i7BA3UcSePP+KavxPEHgEAzJuQBeB0ROdFmWBTPeeVWl/M4kMY\nv/NyxfIxEwKm2aTIKGt8xkPxfRDKcal6gIk0zQkH6eES1iId047IFnDBvfCa\nbMihYxn664sehaNQRlAA/36te2tg0TQoEJ+RrxI57m+GLUpaJT902xi6+4oU\nBi2qiTlKPrvHtEvbIiRLYrQTGh6rxlXs/DxtBmBEAnLN1hqzyu8IhozRIniy\nSq3i11fL7B4AYQcBuedLeeutZ44jHR+6icHhOXoARz0qhRqAkTSS5UpFXTdD\ne2jJmxf648iNqYCdWhcK0yy9s6uHj+yt4rYXmBY88ZOaTG4d8ydDHDEfIHPa\n2IGiCX14eM3FJRJWNMhSO5fAiVXdoOJDWO8BbKWx/PWXXyuLwDfSD1z4Jp5H\n9RKAwXwDrh+9RPPRnAg+bOlySSUC9ldYgFrC1dkj15j+DDYTIkVZ8MDld7VM\nMTRCzsJq+Vw52WhNHGrmGJogyeFgCN5VDSW/nEVkB640Eg7D8Nbs+x4mfJ/J\ns4AKJOPGg7rWpQgaHJ6ODRIZOXbyxokBLpPpinkxYY92jzemycAs+nAZuYAN\njnW5\r\n=0R6C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.0b4a4b2eb.0_1613749486758_0.1368808062936877","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/theme","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.3201cae47.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f37a14e6ea7fb7516d51c1f365b21218688a59e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.3201cae47.0.tgz","fileCount":42,"integrity":"sha512-XP3eI9Vbsz5JfvaTQkWb5ReE1WtAqOgqMrcZrnEjy7QyfH5NFfjpdRg17SpzhLHarC30qBXhIAhqKibVxmV4Zg==","signatures":[{"sig":"MEYCIQDoMgfS7gn1FSze7U0D5IYmPZSzHMzjPVtyvXKUE+vbFwIhAOQo6hry0Q+9FuobSlRa3nx2q1nOK+Un/r++N2JnDiB/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMELgCRA9TVsSAnZWagAAffcP/1tPJq9pmCF55TOgjaBL\n/oiBd4eQ90pL3ejpdiuy+y/f/QSzkQaztFxGS94hh6E7Ytf3AVC32qi3n0Vp\ntGe97pwOT6Q1bMkP66Br5UMFOnKYgLqeNnh/lbS9XW3Dfcmbw3mV0HNrfPyo\nLQj2SnPdkjTEa0q+CotIKsKmVrDrAuH4XYrn/PCJsZt4HgShtzmsWVshgF2b\nL+VZX/8dwNORulfYTQKG8u15geXDo5xyocPmhhjIk0dZpNWCLyIzaxLpDkYZ\nQCzMeXPCPeWQ+Lv8vthj0frds0xVsD95M4qcrXNQqHzF4iQ4Af5ZNO41Isvp\n0F3xvNU374/Y7P9w12G3b2wC4ZwmdvSjKFDyivHQbjTHFylZBs50vJlQIgls\nnfAjwcvdAR27JCIld9f3lwqgxViJi5LIvIOiMooYKFRBha77Rl8bIPaEp/1t\nC8REyActJIPp85bPA05LkWZ3qaDd3QxnZ71di2S0cDhJrlfAy28flazQRV7d\nmpQcB6t8be4WFXHT6LRMNTZ7bF0DV3gXuGHXMXODf1tYC8GkmiNTqkDJ3047\nHryii97YKuOZWKf8Qgcbkbq3tlC6BJpEaOjLcjfvGHjeCI+C7FoVtWqE2hSA\n3AZUUdMBhmDbUei90o2LK3R4YmPTpJyJo+FjvFDVW2eEOsoaDGX1BVdwSdtt\nkVpx\r\n=VRpW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.3201cae47.0_1613775584258_0.7160506470956001","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/theme","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61169c7747caff045365e9439df1afae8d4973f1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":42,"integrity":"sha512-71Ro5pfZPkQK70Dgv5Wgj+HPz5KO3nFJRhbQCg5N5DEJk2UNIIRAvT3Cv64bUqKkiNkgaj1ePUICalOtKBW3Mw==","signatures":[{"sig":"MEUCIH6rKnIWRLJTOHz8m5MX30TA4GnJ4l8FPJbr3CNlP4hTAiEAlKcqBd1FzGtm3leHtOqEQFSIklQbI4ZtgKJylGAQdKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAqPCRA9TVsSAnZWagAAI4EP/j7GW0fF1YiNMRUpAx2M\n3uKKCeykrb6KYQQuVz3/PJ/WxbOhXzBjzQ8ctuyNpZsC2YTfG6rkDki8LuNq\noq/pw9nv5eOjhhZf7FVyt0eC0yQD+aHUtkBuDyY28xQa02oj0RiJ2mkqch08\nANwlMm0BEYC7vlaOLChnKTO36gXZQt3+l1pDoPv/jygb8Qrw4nnsdST52pzn\nEx9UG2t3JTKZY/8eNklggqDGd4FtayjuEqQgF7PNJwL0l/uZL4u8dTWbRP/9\nJAHhWrvUvnqLTKTT9yNPraVdHxv6pOU2mZIKQVGjEdqBRvlocHObfc+5Ildo\n7eTgMet6EPjfCR5nvGY1JOb65Hbd9kEMcaDguTA31MgWir/06FsrPC3MqSMT\nUUiumh8HxnQT811EV3JTta9EAZ/OZcVa4L8VykK8PC2Z+eg/cO6MgRldQmFN\n2ML59eezshjiQv6iQI0PEO81c0dVBZjGXGcZaCENS5YGEt5gdmwIa+Bd5t+h\nywvqYO4NZyyygf4ALtrJYyM8aFK3zGXUEoPgDQN5a8Ddw21hMs7riS2Dj1QU\n9c6shhZV+25yeu2j+0iGkeOpdo9vcz+LYEUw/LXngE9fp3M5h+IolKl7QcId\nxTN/TV6mjn/uFpqd9F+CGaRv+whJ4F+91lhMUftA4OYTCZVU4oj4TWSBAB4n\nWfsz\r\n=aprz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f1b1fd5d3.0_1614023311111_0.04878149615238514","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/theme","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aa5adb3bda244c22080cb21f016e8cb96714513","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.7899e0fe0.0.tgz","fileCount":42,"integrity":"sha512-mDAMbGoNhEgJ8XZyLaEWC2/UoWCOjuPyyhjEUrdaEFVxveQghadYm33TOdRLY84biFYKkt9YdcrdLiPLISjuzA==","signatures":[{"sig":"MEYCIQCSwKdWDJv+HAghB65uMrWVjcEtria6OIULxGwG33kLkAIhAJWmFKFQyraYJR9mcA4AxLlWk108SbD8BtjF0/230/Jt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDPsCRA9TVsSAnZWagAAvEMP/1/lCgv1PmyhZvUC27zk\n/0rIqHBBAsjkJt401IsmEaaLz/XBI3HcFV4QTNgqIy5tR089zH9i6VDRr6ob\nMhk2edLcziQZyAWS9aS4Bs6rFewewHBT91X9ljRIxs/hGj4sTq1faIQ2XXoZ\noVBUpPPxG8IqHVKUjVEiiAe0XGEb6u+Nc61TQXUzgWo7TQybXcAK1DljNpsm\nb0WZEAILQ9ikkH6OVamt7IthGZ8AX1ZCBjTH8RK5LveSjZZLKqJhpOwtLudM\nZo+9WJsxBGep9BvTB7qxKQxs6Pt+ir3Dh593RKG8kofeQV/Zb3EBmqfkYsd7\nghNrEUwUWyFPeRmGc/EMuxEZw9MB8KUkNc2/hAaq8SpE/kXf32LtS4k4919b\ndDul9ET9+2KPtl6+/dnOAs1v0wmN5QO4qwdwSSQNYFXGyKKZ7AcVB0UoH8iX\nnHfImw0zBZDzVlrEPzhAw7J6qiw7UA2sY9MiTFbw8FgUS7pnc2ZC5wfV0KMZ\nQ5QhdV9FhDOuBUYAAefO1Oip94i6FubOQJDaLz/929o1fxDuGwwLFjVfE++7\ncEejZUT+WRff+1T8XdbZGovvThDZxEXgOFgriEc43I+e8tV+WJBlgk9kFuSf\nE80GyJ4G5Ei6Oa2B+dsCaT2MHcAHnG5osd6KSMNo+gTMQvXs8rNO9RJ7kJmm\n7Ltn\r\n=nYWo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.7899e0fe0.0_1614033899770_0.009346152971858146","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/theme","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40d7d8e2c3461d0361cfe449d83a1c2075b7e586","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f19c86d13.0.tgz","fileCount":42,"integrity":"sha512-ZxYNpQ1f9WtFp352iHKmyKQ0YzxKqlOtnIHaWw6bqsFcIQohH7PXMvFLjegSX8A0IDwjoKgSNvghrSclLam0Yw==","signatures":[{"sig":"MEUCIAYFnwkKvEqCn3dKfahTqmv8wHglK6t2a79q9XQ3HRFaAiEA7lP/u7XwKk+qxJaPK5On7BGfAaaazxq1BcTOdqhx2NU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND5oCRA9TVsSAnZWagAAsAgP/0pCqe8B6PuCukKbTCwd\nQanuBC9v55lGZB2eZApp3t//j/MOH9P01IYvuvsDsBv1rNMjFIykrPNXrDUh\nEECDVkhnqclb/HMa2kUI01nbRHVVU3X+OJXsHhn+D3duhSohTMxOSw8mxq+z\nCsoSHtK40kAm4Xul2dnNZWmIxtJfEYa22QLdap+yTuVr5mW+5D+7zA5ngQzJ\n3JwvR0Qqo950gjPyEZD6z0vz+SipXaJyC/6p+6mlaByEFwPxSMSk3tpGnvYx\nQo1uHMdedIQRwFkOd/LVTjYOzIRW0PRhNHK2muT4+56ejR5MxBV/xZqdCarB\nrgqmqbjEUlxgASNv0It1AgJY/TFFU9xBt71SDQ+uekfvXeZ9GD49gaysJAY9\nQQFU0iWQzH5RejuxXYJwyK7eJ2hYpHwAAsSX039fLUbgZjJkWlvmewKTE+lv\nncwuPDJMZuu2Q4nt3AF1sd3KTwbZekYDvx3Ud8lP8mU7ikTMIU2vgB+t3+XG\n5Uk+9zQX+be3+bl/gDqk8AOJilMDSJIKe/InSZttzgdAokG9YRBRF+ft+dSs\nno+tFQ4VkK5pmsJEj01h7MpPnnZDPLu2RVUE0NnPVLfAYatnr1jllD8wyKFb\n9tfLbmDPKjDWOXswlLeiycyS/RUo/HzIiMtRp/0hPxKRupGmqy0Cd/xV6hna\nX34W\r\n=kReT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f19c86d13.0_1614036583736_0.8169529826076865","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/theme","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.60e892d79.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66a5f4cd462bdc5466750ac879601d15a32c9b2c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.60e892d79.0.tgz","fileCount":42,"integrity":"sha512-0CWlxDFlwUbYsCQXBEPUI62yH/7/xX2Qx5IH3NXC+vEY4rH90t0yvTLIaEt7tB5Hrky9ScKE3iqvzg7nCf4MAg==","signatures":[{"sig":"MEUCIQCeXdDURYt3Ff5vgp6pFFE03zGb8SxoAbNB7RBHn+BUcwIgVZcnKtSAguvPMgnzEFzAuD5PWu0IiHlrt9Mt2VUnOIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFaKCRA9TVsSAnZWagAAwlwP/1Zb/OqbVlH5Bv3gZV3K\n+0LEDo+NDEHUiej9apjWhibGZ/+G0NocoLCPAcT7xjtiFUJuB9rH4oNnP8v/\nfPQDasguU8oakbDs83vt8jePlNfauHdFcRrJjpculuOmr+J+jupccM2dlM0f\nRSaR0uh9BVSnyWmPVdzrcJfKoiIb/tpmcVxpCtjnLA3P+f7a0LLDOkikuZsm\nyAcsYBCYakm22O8z3kCxQm9STbuyJUojDjtR8p3x/cYT+EdX0Cm/eORUqrep\nm0k0guNbUDZmW+knU0LM/Uxok2VcAk7NtRYW0fPsbXq6YqmVjPhGkYDSag7t\nI2nBUA+cHwXOm7P4k1CX5cFkbty2jCxj96+ZLqEqewKbx1nE7JpBnjjMPnr0\nTvVEzzkWoyiqySzAWVnTSWaguSMYmoHqKEpsRoUFOL+3YxX2DcUa3rTSwS3B\nAeLptcvx4otmSvJ+WTXJubo1tddGi4XFE4y/Z19gQ8uW7hAyMIJaGt+VgIq3\nGU/J53exdP3/Rf/fXakLKVB1JewGL6xU0PlfWhhM3OT1I1ImP8it0qqn/3tT\nw6m2xq9F6bJRNiV6o0edUCTbOP/DXCepzqamELlaH5r4Zx2pTsqIDClqblp3\n9kTz9gq/Nsn/YNkvfWgoeC8yfaMYUvNN6C5nsiy6LTytwp2xep4y/yqFu63U\n+Ab6\r\n=IZHv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.60e892d79.0_1614042761723_0.4211227848252823","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/theme","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19448d8b02f405f4c08294ea421316324c6cf064","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.c96bfa495.0.tgz","fileCount":42,"integrity":"sha512-CqOUrg2ZnyoX4PiKSKghVxKsuG1wsm1pOO232+PyQunbYCr5WKT65a9IDrEHYZj+cqAzhK9OLreR68D7iCbZaQ==","signatures":[{"sig":"MEUCIQCYYXJZ4H+Ny3XJj5CbSLtvLz3Dc6FDkWFfduInVnYT4QIgKS/5sfnnv9JjfdaQS8zPtHZ7PQ9l5IQTRhCB96QW8Lo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVgqCRA9TVsSAnZWagAAo7sP/3wBk8xja7ty7QY3maJq\nwCxtx7EungxSRhBhl82ERsmau7oY8omnU+3PdsHP4kkOOvrlRTS6wC4OT4L4\nQHwN7IqrL+n7Ve8pI2Bv6uKaOFs3+Ti8aoisgTWj1uIvjVhX2zGOHeTTpvT5\n8+F4n21rVkWcoUW5b1UeM3VVnZn2NEAf7/6fiCsm97xl4J6cAywUsDyeBYXd\njHJnp6YWpvS74V7RkSfgQo7KpS9Q4vieOIcox9Bsc/t2o/Db2dcc9knsa65T\nyykoio+Hucc9XzFzlmGHMqELkYq6fFlEDXLLZbLU+XMGLj29PsahIwBzehvo\njXUoHuuUDKvZD7GxjSAp0IsmzUVLuVumcx6/oB3HECiEMbI8zRtduCAyeQkr\n5Do+SnOHwSLMPnyxqi0nqQGhy05NqZuGX2vLMvmjZjMmTMRyBjrEDNL/clA5\n5u0b5RGZBVB4Pohx7W6r2/CGgTGHppozZQIMIhaysp4aBkz36Rz2XQS0pY5o\ncvpzBTICnbzUDVLzoX7FtWYDXo2FW10eU2PdHTgWs+EBVMCF0lavN7juRZqi\nccA1Tc19N+F2gKCIyVlagXLTLQjnVLW5SqeawMkBofYiM4S0HyNUyubHaD+2\nl70OUC4CaO9EQToESm3luo5LHq/d8PKRDzthXyp9SbbCiKFX22jOE5FKdYr9\nAraP\r\n=T6Vq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.c96bfa495.0_1614108714055_0.28130117960838086","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/theme","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ab2922217168b3542563cecf144815fb3ecbe1d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.fa9b59f67.0.tgz","fileCount":42,"integrity":"sha512-xqTioIuA8GobLPO8SWiUDagj4HJyzw/yYpgTvNCk0Fy4j3blVAkrGESo9orf2DLzuPzY1v3qK1FEnHJm/CSawQ==","signatures":[{"sig":"MEYCIQDJAY0wIYw979z599jWxvrPmj9OlxhqWDMb8zUEKAKTcgIhALoLv+sg8YMCck1Q3SX4TYX8LrPhi3EsyvfEmEaamnSd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVhyCRA9TVsSAnZWagAApT8P/iBUVBuZhf3jNb/NC9up\nFZf4KvnKYnaGyu+iSBTz8qjHieb5pleYL+Sd4RiyAGLyM6viwmdkIx1fyHjf\njUzALGzK3pRsHZMrEcE1xxB6GWbsZKk/0zevmgUyttKeafN+Sl3At3oIniPK\n9AnCI5XajPfRI6nB+glTBVCChuAjPDXfRqmhv2Ld4EHoKmwP1APP8Z7kOukE\nqSwcAerBjK0NbBYd3p4ALjHc6229Dkvo7GmcVGfPUr9jij/lUzl1THXjQipp\n4d5ow/FlGL2QptV2w9Mg2VlL1ldw+W7ofY3J/yMLFqzCBZ+Qyxo+HX1YNGL+\nHNN2IKhnpkzDD8eacGd2aJjI7GjyDtT6uyQzPEKMxpn87m5S63K/TYjdZ9AR\n99qD8C86sMgdz78C5mABe/i0Re60zp+zmb05Lfd/w519VOLF9ElG8w1ejrgL\nd1r43NmPWCCP9dKbzTy26/4weEm385LP4KznCFaMtl2HVeqhe7RRcIxAx4aL\ns/4FM5eqGq7aNTZjI8ZrEi8BU+qtjurVHcDQvqUsIsx7VVxRQOuE6dwIs03D\nMDCqR+8zMGpWWG2j0zaxIc+wquDmFgL8NtfEzjf85piSdP35WccyR7U4QNA/\nBJi8kGKtRzPrb9sQCrzO/hMxtTf/km12lcF5AqBAIyTzzqYdkihaM7UU9dhL\nIgId\r\n=AJEo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.fa9b59f67.0_1614108786405_0.5124105935009904","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/theme","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.869e3497c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45c2dd3a3baa3988dbec53873e3aef24b55b3c14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.869e3497c.0.tgz","fileCount":42,"integrity":"sha512-6z8MaPqBDmhZHPomXbv3i+7a7KOJDnPcLJby0LoesRsHxPGdbqLGbGIOcJ3TvsqdTQpBJJu61Je+FxOb5e+iKA==","signatures":[{"sig":"MEUCIQC8y5/+2NGpaaFr4ypRF0hmfO4x0vOuctlPBc/Z3vVS4gIgfZL3xYSusUybiUnwvIGsppM1W7lmQgUWyNeEhvKH7uU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVibCRA9TVsSAnZWagAAOksQAJTV1YGuDZcz5E/3sutm\nIbKNTJrcz10FjzL3PO0KxvnfcdN5h0dahNd80uI8GJ3P1B+AHa9lg3/r7GiE\nJcKssq9khU63hrQ6LecNH2mMmG6GIiUUuq3U9wD5VKT2BtGy58BhGGxhDrIg\nasHN+BE6PZ7dTqbK8aH+qFS2vItCYtiy9gkXrfnI80P3yZRNmNeGztZ7cVWF\n3xzyttpWD5Kj142qBnfV/t4VBWgwFNGtV3X9+DccRoXfPKY39lQ96uQQAzyK\nWgwvZkEZhJ0uTBBWGRUciAYdiGhglyzFkjnoUZjZ0rMqLw0TKeY0EvI9Cn9N\nswn2dJxlOE1sXnDcuQIayOuKwmbDiYTcdroMuTL3+Yn/f7b1ZqulmntlY59L\nBJMpJF3dknUpnt1wC8Kb9vzHLrXb3kojJAKW4uS4rDBdkf4dAzpoxl8FdGWZ\nlx674MBpbxM70MaIFRTO+cBnVXXajSjDsporNjYhxxbWXr2Yzrfj/H03gSx0\nID9iZOdd3w/7j2xaa8OepY/Hf151JVWslzSPJUsNhN4UmpLdpp5aVoaqMT+7\nnQYSzIqr3BVihvO88hdafWvX1gHzL/i099krG6LntCmx/inmHDOgigs5U3Tk\nIfGu9i2lkayl0gbIb7GgV7i1FNTUyCacfQePyhsD/KheEj0fGVRKLhmweajU\nXHTt\r\n=mG2k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.869e3497c.0_1614108826531_0.010701624588569825","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/theme","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e6660e616e198f5fabb6c35c9cd95556cd678bc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":42,"integrity":"sha512-w0jZpVM+l9/Sf//Ce3++OtU1MUlbjwkOS6NrEXMAj3ysjqTGATlocf4+010Pi4taQM22rdkNGPxKUpFEsupsWg==","signatures":[{"sig":"MEUCIEdzd80MiyFl5wQUQvOc2ufzV+PfRLOeQLsoZsiYMJ/7AiEAxAWd6cFiDg4zrbilUMskB/C12+6cQqt2wOEAj9MxdpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVxXCRA9TVsSAnZWagAA5NYP/jUxv9G7hRzbfl3sBREx\nGaXswu/EWvs1Als/ybSMNaFmp4TRCxL/UenTUvqx4tZkCwvIumQCv7YP2sQ3\nkSJT9CQ4WoNJII+Kf9KFUd21r4T6s3qYSCpGhBH13JPgWizHvXbYOpzBnsGi\n20Ppz6JmShTRCh5ET73jI2L0+hJVGFuKzMTNyHkizNfWFt8HImwoEXsh3LVq\nydfNXREL42T9hJ2cDrlqJEVFuap+alBjgcwO6Bnhkeh3XROdRQavMOesNbxA\n3nAQq1t4GfT0grVWniB7JKVXODIj2OJ0nGFWm6u6zDv18vQRqqRAXxeLu4fh\n53fRcIoQ1Ci+ZwNEvJXQgsf4gtO2InUgaLCnBZ0Dj15HgYm3RUhVNLCluhax\nVkgadK+3gm7beCseW5dSO7EIbZZTYEO49fJ7ZIbWRPWL4N5px8SR9f8Ur0FM\nB4Rq7PtNiX+/N2BQ677dyLq75QcuNYD0WNsxlZY0ykrjuIUBtCG4WPTc7Z5M\nEdwjfIBZmaHNv7Yv7Mv7dxaZfCEtN1cQ0Vpwowh2fKrdT0b3KieIzhPIKRA9\nsjk/uMM4U3Ng/vDnPXLGrLWcGjqXwZdKbMhDMc1iV1gI5tgU3fwl7xEYYEUV\n0pTGPFUBqWsPxVLdF2AmoDLWM6tbFIypYvOU0JTaCoz+P9lXgLSo6Uff+fbg\n5W6V\r\n=d5n1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.8ecd7c9a9.0_1614109783388_0.0015057404764720062","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/theme","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b6722a8030b1e40cc9954a9f295c65da01bd7f0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.9c85d505b.0.tgz","fileCount":42,"integrity":"sha512-IBXGMS5uccIfN3+s0WwtTrlymOYoknZWguTMem8xnJBHBOdzKmcUJ15T+sa5176UkruHf/9uVilY6ur2zpULVg==","signatures":[{"sig":"MEQCIHYhOSLmCSu8DhocxaupB/3FaCzwNxXLmMF2LbQIeHxOAiAZa8SgkzlUtnZZ91dog+oCR5eETZzjPV5hm6kw/zT16Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX5MCRA9TVsSAnZWagAAhvYP/ifqldYIKTxeqU1IQ76C\nzU0yewnyjN4iY51Y5xoeLJ0QXMbkcHyCfcjRUmGeAfx4TH4YBokYbk2T4Gm4\nI4f29zr+grKYKsxPgu+sjmStDO6Pej1voNAkJe3BH2U3XxrodDwDoJAgpP/3\nkfFsIHCy/l3Oalerw4qB+cuFGsdqLzYm6mbRvVID9JiPDem2COj2BAR6HAZV\n1aYLVbUIBzVB8KxALu3Vf1WEBxdZrjk9nRIs7LtyhgSZLzwQethLU0dp3lmW\n6A7SiC/5+cKsNSoTo/1uNhTGDacrQc4VS/bPT5eFULER6g9mJcrTaEHxZy/r\nUgTqTtuSMKoAQi06M1k1IW7GkTUi3Jj6X9vVzztXFPFto1mx+b/NIosoEA+A\nxg6gH9HfUOgiTkKgRDZR1qOKoGbmvwyT0FrMBf+cRI6DYmH0PbU9fH2BTaYN\ns1kcywSbtpdSuCcQRPSD8IwG6jbhVpkJEHG/Q+RIuvjbeYEr+JmuW1kLrDzB\n/pK+FNlkSUNlzEhSCi12PCM8J0aGubUjSCVjR0Y6m0+GmIrUT3+g/ov73+eb\nlj6Kwi2SbDwwGoMOzNZotP7hIeWT4SYLpN8SZSfmX3iz+k7m0ctxOY6D65o8\nDlEfg+kH8z9U0ighWEWYRgEUBqCYEXXbr5yV26meXJnnYiFCAJ1lLi9IasCl\nTe17\r\n=M+E9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.9c85d505b.0_1614118476229_0.25141861496841744","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/theme","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2efda11800b2326d8f4f01167c79b261d51455e1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":42,"integrity":"sha512-KEv30OuQ+Q9TdwMHr+/xIl+nDoBJeIkBW9l3H24urmThCO3ZjBlVtcxXPNLc/WhfSSo1Rs8dqZVsUJbvfCNhaw==","signatures":[{"sig":"MEUCIH8Uwd07YxrblXnHXSJZ4ttO4nIR9bS7WnlLujmfJz9GAiEAxsdbTPooYJm39j46so0xWfqIUEqCWGYZmtP3lc68k6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbAHCRA9TVsSAnZWagAAVscP/1cLRlgwFc+hFRa2PzV3\n44JzMTOih287knCdnT7CukvzXVbCT2THdCL1JZtrDxNPBCswNT9UpAHWPx7H\nC1BLpnugBdQMfY1yWce+MMJgXS1wKumaMi/Ml79JAqSkblGtNRXS/dQdbhuh\nWIbd5oZABLrymqbvWrz3qc2VR9LNqB8pPVT1anDxaObl3Tla4s1I/uH3jmOC\n/X9jNmaVrfN6qFTbmpVlgRV/bB93homnwo5+39xNIMGJVNi/GQ2w/mNi1TTu\nap9a3x1zvmTYCt0LnKDd/9d3wPgaNGZpwKLO3oyueJ/B4+UFsumBKsv10FwN\nlgmm/gFMHvXw29AI44g/fb5B+IBkJ7STvEvavj6Za6bJ8154lOCd8CwL8jPc\nBfDqdmaAfl7Y9yiDCGS/oBGseE2aGo6qHnDvm8b5s2hlZatOZqNtYxg6hscr\nBlJnRsfwIbxFyNrrY7Prs6OUn/kqxcWA5GCDfHfYbTGQomxciEB2gPza7Y4i\nGFuTByuB6J53JIr4TduoT+1rNfGg/elKKqpwFxNf6uT4NuN3kmeFU1cu0ejO\nEKyQX5qClsUgHKEkBQKN6LxibxgrOO+tEVivQWuAGy7G+My2Bk9sEJimjYay\nxZj2FDwl8pG3bwhdWQhKIjek9yF2oLbiZhScHNAR+TcXmzxS1081sTTszkAT\nG7gT\r\n=UZp2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.9f2e85fb8.0_1614131207005_0.36620240874924637","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/theme","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42e975d6c9870afc5364615ac72812822f09b7ce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.19c4f29ef.0.tgz","fileCount":42,"integrity":"sha512-NwzlFax1YYGAJtJaa3t6y5jpJEdEptWEwf1PI5OyK3myYDfvpyjJQpwCoZW+6xNlAylBxzYVAN8KiZ9kSRt7yQ==","signatures":[{"sig":"MEUCIQC/JLpUwsTdLLKNJldGuCpTLRDWuIrS6Cs8G+Izvvz6FgIgG6bG95ubLTVHwe1BGocqZM5U1zLT0ePKHiSRXZPz1Hg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/i4CRA9TVsSAnZWagAADIgP+wYjcCbQdODtYEj+hl3v\nm6l9JUOLAQOIDVkQDvsPxEdrV3tH78EiMJC8y7/95bpDdSrP1BS/DiHd4MR3\n+ZWIrv3lwHunFEZPyV+lAz8mvQb9WE+iHwqE4zw/n5UcSrVYEW76YMd3Q9Fw\nczK2ldTLL+ukdaqJnouiM6pxN54EiqXn0gj4V2lgDS82IsRPABrjbjScfnp9\nU2/kENwbmJ0dbVxER5Nx8K87gf4+v6IYcqeKGsCk3zuq2jzay9mFy2TLzlrT\nN9eFM7jOsOjCP9H6clj11G97+8tFnDSb1W+7SRa+xRty/qQtiObwiAyT6Ke5\nCrKFjhmM2jg3a06vao6R6zY3M0dWy5SnQJWehnGg6GPldyZwvAPaGJoYJZni\njC56cl0i0M+rLp4247NokxsaZQlbbiqhQHrxs25Kd2oSgQYE2OZyEJkGwKln\nyCxCVLDXcqukW48PDsVHelbR1g0RlXKYbH5b17Vd4z7fOOtprq469I20QSyC\nJPTtRYwE+d2pDFkhRBXUdZnH39pEHQn1gq6njNF6JW8xVD7KbRa88adjNTiD\nU/afjlhP7mIms3DQ+3y5VzJ+NVrjMLzNyFYKbKOrW/48QdCVZzlWufo3g3FI\nkET15BbTkUNeP9SN1DDAp/1JW+5Iv27HURDHeR53sYNyJKUihTAIKMqKbuv5\nfxaE\r\n=y88i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.19c4f29ef.0_1614280887498_0.6935701076944001","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/theme","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99a1e9627a77a8ae13fcaab78d8b11dcb074f611","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.63df6e9bf.0.tgz","fileCount":42,"integrity":"sha512-jOF7L0FoeWJzg8eT34z7icFi8dafcgGy0Sj/YJZwprqLmE+CzQLk/8nG+IM61f1ydS6Sho63OhMq4Aq7ry4LaA==","signatures":[{"sig":"MEYCIQDRnP1vyfrv4oQmcdPio+esL19IvUEZzMan0NoO6zzY8gIhAJv67oNA0HlLPZ/80FDAYP8m2/55YGOcFqptrbSGk123","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/w1CRA9TVsSAnZWagAA6NcQAJJKviE9l1N0xJKtq4q8\n9kExw6L4tubZqwqBJnYJbjWRW7U+4M63f/of9u2Lb7Uh7tiwmypANtPPGE7W\ngvwC1jFMxeDxkRfNqLkXsyHxtaGnbwapSGPMztJSW3Hq3Eins8/7ySGXGNM9\nTga7DDF8NUxKs75HrswBFNGkFx6lHt1uXHf/wA9S9UzCYPQLafeUxZYn6Alm\naZj8b7FYzOKagonoWFdXIGSB6QmUK8TRATLw3SUWkHl4f50hEaTl7IsW5v6g\nl3zyk7+oVqwqbSEbxqIR8jKP5THphSteP/5h3Sfxu/9Zg6c6W6kln/uXhD+U\nVRQWTAO3ltV0WZXqC3k6jRY+MTP+x6JGAkPmnkiYv1gOgw5QpUJujd/NVboq\nPwBXrfYSanbhxr9jYRq/QEk2e21Mk1/ezkDR52Pbl83xODsW5dyGuGUaQB5t\nTOLPkf8cf3iZ+ct+XPW0L5Uo+NNKAFuuMoHoE84IW5ScmTqJ/atT4wT5LfgI\n4loihPL6YvFXqXwee9fe3XHPvm6I3jpMTlppKzroUnFBjaVOOsDslCT3frOV\nrdw3/Ry8mHHKWSsfDrlhw1XQoPHUh4PAh1lFU4+u0YIVAP8alqxufwMeosI8\n8bKJOFjeNd35Gv0ONk4HQifs1MdE3KFDn5oz3pwBr81F3zlD2PNnoE28X233\nzbJq\r\n=+9us\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.63df6e9bf.0_1614281780464_0.8382858947762333","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/theme","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.981ad970a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01c0135477fbcaec23709e0f7a7e19d2331c1a7c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.981ad970a.0.tgz","fileCount":42,"integrity":"sha512-ktjWUDQwQ0n9kSxnm4QKob3AIP3k8K3iDfF/liS30N71LPnYWq75yFw3uspFzz9Xud/aDWfL2ZSi3pYwbd6bOg==","signatures":[{"sig":"MEUCID7rcWib3lkEIKHy1SEzUHk6iL0+auHIOzW1iutzBJLQAiEArEkf0jWXBzcP0b81DfnhmXG11kKv6WCkbuyOW0bPiqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODuBCRA9TVsSAnZWagAAfUQQAJp1gfddRlKbFNKAg93P\nHFp10xYesWfB7lEN1u5rTlN+/pGEttMaVHGzyJ6Q0P2hTYnlAlh0Ox3j6pRd\nYKrqtJGAaNue48s4yTLjYyovxyQqSfhYsd4LXqMqR+swnMNYMjvjsZAw6Jcu\n9vdDAMOQzt4r3VFHuCDt5oVLWsNouX5duYIGUhEZYhRmHWNaMfjUIVn5S9G5\nBMfgwBdGbKou0afeCoqk9be/DbiqRRQml9a+TZF9Jb8EA5omdKR8UWxxFlFs\n9JxtPTm8UO2zDHW2Be7q7Zv1aTeuPYZc0/2zAn1/lF3bAmsyW2DQL4USJpBR\n1lTn1o5uQC6VvFTnrMkXhSSCY7Y+eqvni7zO9QD/XMnMkTE3Lz4oad/hPK27\n3IWymsElfNPHL1XWrtQ7+ObkZ+tgq+fQqXYBd55/DfmntY/h7Mvza11fw1LD\n1uW2SHBj9Di09INXQAb9kUg51pHLu+ppcK9A1Jctj80O3xEXwRvolQCLp2HP\nvgSK72U310B92s5C7aWGJwqPpdYh9dx+MsvWLT8OujrcZzZ1+SJo1Fx6bho2\n8gyE3dyPYHo1ImnwkeWV0bq+fLUXhnofms82tKDgtwuKoMpNkqCJn8e500Vl\nqHlG1ad4Oa6SFnz0gMMXQ6zOGVy6AFmWUHx4Vvy6CsN644RgeqPRaXwMuc94\nLC5k\r\n=Qhs7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.981ad970a.0_1614297985081_0.549820191280489","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/theme","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e40bdbc68b414478e7c1b1962189907015c87d94","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":42,"integrity":"sha512-Xp5+yC14u10wrLiBm+wQq3+DHc18LcN8MlfrFHsKwLuRHHF5qrOItMyl+XcaQTQ0BMC5Zmzo8WQVk3f/sYCcXA==","signatures":[{"sig":"MEQCIAQVnRpLSEHNPAeg+VEB5A3mg9QAhAEerXXy5uwpLrj1AiBQHqZygXF6IPp9GBPz5uW4OTqzW4yMNNfqoDzcrNTfOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUAGCRA9TVsSAnZWagAAVpIQAJcs8RMcWGvOgQllgovq\n+LpaErQrbfuOs6Lx0gAdYL+t+KjlJbfBTzmkRaZUwffc2FBKjJhJFFlHic6T\naJD0DcAnLq8KuSVyNnLTOb2Gts1kh2H12T8RaK8wkqiRCCL2z6hAWrrpEORi\nW5wzpsfUrVS3BpMKfk7MbwRDKAldn702nF8eCAsg1008UtZRDRSF/DNSsh6N\nxWbMWIQ6TATWAzVuGmxeL51y2DiBan+NNeYtBBv6ddhVth5UHHIktKWiOyyV\nL8etjpoVI0a3EbF7+Hh7iQALxioTrIZL4D2irQr7EblfK10B7b/oVlreS+qm\nMUnayzF9hldQEr3CURJIuO6fR+AmAmUgzpSygd5EOkcYgWQ8USFglPp1SNco\nN3NxSU+SVeaVIKjbz1060ikae0G5Ym1CZRN2pklKJcPT4vjxPafzSv7owE8Y\nVtlNRJredrmEvlZdAtb5Mxk296cfRxt5yXtUSIkcste7TbErQGd2B0r8rHdX\nydUAxHueZ/n5D/Gglp90/pGfkjyrpm/z9/yuETrJ2W9N30lCrcOMLvAOu0Ei\nhNzDLUsyUWy0OIJUnJcTlo2ve5e3KefyLAxQfd/oiV82Uq0Cb1P9PbFsk+gq\nSiYMwa3hOdN246GlEtEaopfx7t+KXAEYR0I79SIf6R+htNdWpzwjbNGKYIAY\nklWq\r\n=AoT4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f9c9e39d6.0_1614364678247_0.741963401402371","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/theme","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c79966ff0b893273943c76fc7789a7d85845419","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.c97d7d881.0.tgz","fileCount":42,"integrity":"sha512-YNKRfXXpHGlWGDuzkwO0grlQOCiJJylCu1Y9pI+HLsojfp+yyFRuuG/I4FdnyFV2ihAVM6NxwJ25tuYQpJF3qA==","signatures":[{"sig":"MEQCIHVBeqEo1xsRGBZsG33WcNkuZ0VPagwhkl9aMU4wW1mhAiBnX42/Xp78cKVt5khJbnxpv6gdr5xaXQ9aoi6EstUK1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVQBCRA9TVsSAnZWagAAbZkQAInqbnWWLO1Z0vpCKicG\nNawHppIAiN+Wfl3+9i+f2NVuDFR9owtkOpuzYcuW14Vpsh+aPzectsNRGiFM\n8yjkhvSVNORhhyTPCUDpSds6ATOrHfVMtna87P3+X6m4KtKnyFAyLPeBzc7l\nTZwweqUcJYQlpR6RAALtqNTJDTrXtNtJXG0NprxqAjhz9jxP8QWgS1Mfh82r\nDWF2pxLNAr/c5MdUAAZRfgEmSy3pcB438vWzvEdtpmn7IjA19Z2bKDZo2Fvs\n885Xhc56vCNu9UoP9RSMpLeu5eZewQVHigrgUdKJOhaXicm9eTNpzafZALHg\nA/jJMA897tKas6vG2V3ygN8TzsNMpfcBZI5E/a6Qy1DzpiEJxtB1JAYzixod\nf8iqUzj0FHYPhIc26GlxGeBJs19sZc8oAW6z5rDxAM29xIKanCuU5ez6N9rK\nLTSE3KrBz0C0UDcJmMGHRI42nR5msEM9lM0QpLsVXbS0Ec3BM5qH0IBRzG6v\nxj3k5KU705u7u8aONfVxhMalrMV9wCbpHYGN1Cg4ngWvaOwXMmBaQpLepMBx\nb6TAz+bAZ/K27BSd86CIN5M/hswdLwVP6YPhCZh7oqLGYX97+HfrBl+ZUZsc\nKyn35OnYElbxDTXravh64u6Vs6d0OUyhv9SZQgTmIU+/6NGkPv1udR6MfUIj\nSae+\r\n=lK0E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.c97d7d881.0_1614631937095_0.632240356532332","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/theme","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39b1acb93914fe01c7106bab55f0f3eb08430bfc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.bf670dad7.0.tgz","fileCount":42,"integrity":"sha512-U04dYVONlWkSk7JHlnBqIQbLd+/cc3Ge3N93zvdraC34fp2lpRr4XmAaRHCAyELjYowGoZqA517K9VTmkxxsdQ==","signatures":[{"sig":"MEYCIQDvkY3VBQdfhv2pbpAoCqI8wjkVc01QNOJimp3/yiYGPQIhANgsUGWPiawSH8AxYrKlCkUmsRzeeN4M7/agdPpHY/AA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtYvCRA9TVsSAnZWagAARtMP/36kERnIsa/VGSCe0uWY\nvR1B2ADXdI+eBC1Yt8p3kNlvN5F0w6NK84pMEYUCE7CpgSuthRPjDm5Os8tx\ntXXzDh0yaLA72VYFiL1YNlKbPg4nu0e2eDidwhkdT1fvUiQfCi52c74QojLb\nvNokVD3RAqVH+7JZEUYJSNj0BLTqXK3QqoNnq5RUwL4/GmfqfcO5gsXhMFxN\nlwyJCVc+xstmEnAksw9MEfIa/obQyYUucAA/JSO2KpPN/+IKysK2ctMdyDfv\nJYdJf5TLdHahsIhJmxkiKPWLoW9lc4Xrka/ewYTxbwLoiA/f7GnE/fN84O0U\n5oBH8MM5QGF2R/lppb7Inytmzbo+bjBJbiGPzFxSBAx7cMB0cJAO8cuV0kA2\n24lvinl0A+3H0L/9oPzVPe2ne5WOBKkoHb4WJPZ+o6UsICslZfmavnVdeFmQ\nR3zJs/tsOL97FNFspqe4MEuUdq/z8tdkPVqQhMRua9knhQLB1RSBTaejiizq\nZwGV3gORuVp5KwottrUW75lsxeXDm9BDaf5QpwdnOZnfYfPI+2vfyQz7tAcZ\nsKshxZOazuH0QQbKUgUHLUVA4roKJZHAZuenQUxKupkG3N4QK6KhCVJb/xGD\n45vouFv93T5koWN0aHb+1vaAXIpkfjMfXIE5sSyihhF+2cj6IwOxcU2PLwJ7\ndLEw\r\n=DKQU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.bf670dad7.0_1614730798628_0.1303146528160437","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/theme","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2d8e47ba182667db74e386d3aae44cc2757aee4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.c7d98fcde.0.tgz","fileCount":42,"integrity":"sha512-0uW+O8PGwTPkTP5dl8nQtQHNK/o7QiNzfXKq3bm18NxGVzPoWJWTk+dizWKBak/YanFfH6vMKqBgsUn8p9Coxg==","signatures":[{"sig":"MEUCIE2pclwub2KP/v/wrne5kM6R2qEWr7+nzD59xvvzPsHOAiEA/Zl6kfiihKw8KDSZe8iOjs+3j/tNil+SMmOWASxnCpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/H2CRA9TVsSAnZWagAACe4QAI4Xc3fjnBm0rTLUDIcc\nVLRBFaN8o9mnarKm/Eq07QJp8+gOeEdC7mBcMrW8dZPDkqcIVRxdtzgiGDe/\nlwhEN+YRO8pfbF6m1Itd7PTvN4zvlc8OVjeoV2HiBolhRGGxJlMjOxvThtbU\ni2IcGsx0k96P1WDoyV6VDJY5XonhDMVkKG9HDuKpBMBfXuM0ClIdfkOE5DrF\nafdrv7aAMLChVPtY49GRoaTEecQIyw1cLmAs1GRHDx3H4co0aa/fGaGDxLwt\nwFi/Ls+7n5tPs1SdtZ1nlSmhWCVizLiOCanu2QryxC2uUXrDbKmAq5RmogDs\nTb9eJudU4yeVzQQHGns0fkF+Rdsvrhl0OE0ptP+CwXaupR/AWbDC2Z/HMY1r\nKsKU+BKzu7xsD7sCMAZMTBEnctEd2FD197VMo4oSLaiKYD3hLP7jaWq8Fvv5\nH4rP5Hi1QTxcHZqFsQxb4qD0XfY9TfNV2+fhJrDpFs36AjadkNevsvAbECm2\n20iDtn0ZQsOcTzS2jwjMafbzswqgoFjDlZPawwCDA4YmlhzfyIkoUEdGV4aQ\nVsDKIHorPJ1xFgTvw5ABVelO5HFfOU9v8B+D6BhTndPHxgHVgsBykRhfwKkx\nsO7SjXr3C1e6T9ww5CD1/bOu5y0/b5pUveYsXLGqBIRFmoJUl1M/XfYpFLL9\naeNp\r\n=a6YC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.c7d98fcde.0_1614803445779_0.7623017991083718","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/theme","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e632f2fdd2b352365f620d21292cb188456cf01","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":42,"integrity":"sha512-LEl2Hcbv8nhivW80vFcZ5S7mNPBY+v87M1AqLNtFUO4WjXKAgiavLKbv0rx4h5BubHQDtQzdUv7XvynkbUb1LQ==","signatures":[{"sig":"MEUCIQCcffjeGMBlOlEnI3ZDoecWIo7dGE9ohW5ajFj0apoCSgIgRmgq3Tcc9MUdEdC+tzkzxwNjptqtUloRujTmzveEpFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBpmCRA9TVsSAnZWagAAzv4P/jMpxcQtM9jIPhX+Xh3w\nmMyUbqaFnuUzYsLIaavQrBe8NWnxpnjoLfkon4z9DkwTSWCLIw1DZ2hcZkWZ\nPK4CdczKYFE/QU9EGNMlekhIeAZ/BFIGcb7CkEmeuE9xY6UMB2W08bYdghic\nw1jkVoviaXK+hPxmrLx5WiGTVFyhE/Y2nBLqFdnRctrRXH9ESiK3JAhioIRd\nyedIV3HsWgiOPX82kcBOh/uUBtZoH71BzUYKJqLG4MkOzQ4dwOk27ygnvqED\nJsFpCrh8BFLMaZzMSz46Yo9Fd4AgURNtMUvpA7wughcGzpKldruRy91HX1we\nLI9LTaLXo1Zk0a1HURrpsjUMd9HF4OeLJCgZH30BqtW/WMO+bACq1NQ6FJgr\nIBwXaKsysIgYTHPsjwhR66wsvomfSVH8COhjUaLrHRq+o17cPzOPVDb/0uJj\nHKH5zxifymdL79lmOFu1rW3+2xMHSCgvGjSB+hyBP/3sJa+N7jh9DNsXszV6\nEZLN03JY62Po9UQqsPzTByuUWi39DHgvsatiOHOgIJkcfxDxouG1t5yykwvq\nGphoYPM9iqYeMJDeI2wZFjCLOLuOk2xkWSjZ+A8LP6s1/TYHvCmuQfH/j8eJ\nhxQ8VR3lMRi3QDZJ9YS9RQS6iyDzi3VCOCw3oOVfgxa/RTlp38S+aNKnx6yJ\nJQa+\r\n=A4/z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.4fef8bc1e.0_1614813797890_0.0332407833398205","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/theme","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d2ed5eaa5ca6859acfcffc65cef7be66991e432","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.afae3a3ec.0.tgz","fileCount":42,"integrity":"sha512-hY2AfaLoMFfoonG09Dze8T4yzZFg+d8MJwt61svnx5QFbtRjzhWqI/oLycCf4hicqc1b6bMw94oHvMJafcJOfw==","signatures":[{"sig":"MEUCIQD+P1ZfCJ7vNpErVcP/vBKFA6ZkGVfwBV3BzM8htiFNmQIgT9Pflg3+GJsuIZKpwePNivPXRLSeV3OhoZ1wXzfy8A8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB6mCRA9TVsSAnZWagAApz4P/Rg9yd9dhcHkQOr0x5IS\nlNuzYXAPAhzeAwNNuI/YBm/jfrFTnClh/SyWyX25BJ6rY0q6kEKWzn/YuIMW\nle4iWzjgfjuM1gamE0xqeyq7lQIM3M7eGKF0eb0ysJmUQx8oI+2WLJeM1Mv5\n0O31r2h8D8d8L2158kj4Hzmi44ItojUC0YFYemI89VT6IyZMK3Bm9PIGvL6o\nU+QvE99B7T/pkTsuQ6acmlLAimJSKlO+bo+asChLJdHSX2utB9a9ntIHu+oX\nNWwKPB8EL5Fi66Y2AjZR9kvPtxlUdy6WuNYysfm658ATSx3sMPmaih7PlXHo\nOqfuDGG538gU/HUyV3V+k0t2e7XneLST+aDJJW4nAF/5P3PpdLV/IENwcnEC\nJB/Yy+Az+DyHayGZ3oRDtMkhhxI8qcpt2ekL7K2oBB0lEdqgA0BoRrsT0r6c\nH888nPOZ6NHVjI9IzepyRb1cklf1Zczq1oku9yiZ2XR5mBqXbffPty1JvJod\naQbTGynJT/YBogyMS5C7hbudkuGyAT/pN+jlHTOspbsF4DXfYd/CL+/5ro2T\njrA1/RzazSP/XjhpA/cWHyuT6c/xQdCCPdNwvy7smUZaaOq2xe2+vkXgEZOA\n7B6GSrQojGpMcR+S47bx5T1+VvM7z4oNidjyPlFUuBtXiErPqnRD4AzooITi\n/qsr\r\n=qzR+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.afae3a3ec.0_1614814886159_0.25789686340159945","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/theme","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50d59584d637fe8ec338da965ba84f39053e2827","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.0a0b10f22.0.tgz","fileCount":42,"integrity":"sha512-7zNyC8zePzdD8qpdPxwWNYPwEeoMfinKBihYYIAGdQADyvYpJWkst10sNjSVCaHNAB3rOlEbVRMvK/4OSaE2gQ==","signatures":[{"sig":"MEUCIEsUSvuN7Bn09nxNDnjweqFxjlyI7q/aWCBpTcGPU5pAAiEA/mS5p5bDYm715VxmrNlVAsA7Yp2ZlsZIQIRQ6kLOppU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCL1CRA9TVsSAnZWagAAwV0P/0+Vc/YeEhc5ZI68MpmX\nMsIEdsSPoReLALI+f72T+XGUZjfT0UPEKoohdRo/EDmsf0jaidv4TdySPlzu\nOamS2EpzQyEKRWOHmwCAKuxWj1z7D3W8w4o0kGQCSPpABz7v72lXUsEg1pbH\nBCoonp5Gjc1EcQ+Aem6WCPIMmEIrF/7Zp+z6PUfZC6J5pp2YmyrQojf7KzhC\noZz+lWcOR0Ec/DM3HTZ9CJsKZuj3T1ItBQC9n7CdbzNaYd0yUhWQuj0Qz0oj\nVwwvvn/kvJu0pUReW53dznJXbujXyM+LegBUAMLJIqD86ZzT6bx0Ll6h/LUr\njRdi6U6Gbqq69+br9kh6M+JgRX3uRkTQV+3o/UNCJCX/Pg8TOqvKCG0ywUia\nWCFq6B+C8xoTQUonORrMG1t8tNAgqxNS4A1uO41YgX1AOAagFApxAsOd9OCR\n9+IqcA39G+1a7zzJVWbr6x/EXxQK91KUYDrleXNkvGjtN7igEfTbRsYiNpHk\n6GKQuJMtszFaU5sVxi+covl6hkBDwLrf4KgrpkLiaM1STVdL7flyd2A6aKnc\n/F1j9E24umvvzS/8OsIy5n81LntT73qmStt/5XGtVhYnJ3k18rL2816Zw5dK\nRvxX3sbIEd/i1czqpLkSukWk5JUPEbj4xyWE/48Eo1QLk6KdCpqsuXHy5ROy\n7YGz\r\n=4OjK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.0a0b10f22.0_1614815988831_0.4036186851098751","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/theme","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a75f4b1f5cf4d522252716dbfa91c9413a75eab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.6f678a91a.0.tgz","fileCount":42,"integrity":"sha512-5YNMYS/PfqSPe5OD3/GxZg/+DKvQ+mKZ+T4noPhJlHHzwCfSoZERE2f/dZy6H3sPN+bpfSvi4bzvqHJqMcsNEw==","signatures":[{"sig":"MEUCIDa92+gKZSBvcuGPbkMEtiPUQZ+SMWbOdZdi4bq0OudPAiEA3/W5DO/HbnK8eDFXRamGkkIutq4BzPfnDPzOJSEzgdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSlKCRA9TVsSAnZWagAAPrgQAJJkm0RTG/m/sy3KrDoJ\nIuULGpcO6Ig1PM5mbLy4Sq6zsU5O7QuElwSjqlaA5Hc5VGx5khDNGONOFIn9\nrITa5c62H+NtSMDIyqFM1cMVq0+GTFO0wTGxgJcadHlI3C8a1iWn0iqA0lPd\nIdkcNPaaJsX5L8dWqzwo/JKRJI3Lf0H8MXyr8mCFvrJ65HkRJHNGG3gKGhH0\nazS2CVRDJpOrRPLW/mN6MQ8aw5ACEjFudrm3vDJRU/CUVesNNRQnHsRLVqTa\nurlqrtE+0TDHgQgLBHzuHnP2yrfDbMFpswVdVagoBRpjO4YI44O6UpLDprML\nmwqSXUOsObG4bNFQFMJaevxi6pTU9TsMzGlIVtn1IPl0H9xcQbX08wAcSzjR\nkpSQuvrAgdG7ahy6FaZR08DAoP31ataORprplcQACGEhBu2z22NPiOEQVO9T\n3pecI3BQ+jbu7d/FCJiS+PAGQ0VC4AEpe7cK5Sgnqe/V2oIL0WsB+AwgF+wP\n+r69lnUADTRlxiA6BcGOXf3KRk+WazXCylNFz6fuA2qFGnvsasPoOsqdyGIx\nEEQue3pjEAB8dFr1QfOnRdFOIJrv9nR1yGfkBEZzx703StGzlj9a0psVo8pE\nAfkUsXHe+fVw8MyYUu56QUc+DOqnNW0YKiw40LFQ1nbvxOBkExnGKXVdjUPt\niKjB\r\n=jl6m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.6f678a91a.0_1614883146431_0.49262509250332864","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/theme","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a51be80daa5ea1889bef5c1e1b0d148008e7d16a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f5f1b613c.0.tgz","fileCount":42,"integrity":"sha512-QCxX2SNcYuFqgUpgJZENGFLrEa2GT7AACsjcWe5xbKuUXScNXsa/52EPGGY2U/vUlU4CTBY1FsovkY3m9G8eew==","signatures":[{"sig":"MEYCIQDurlOl0utmDKC9dYyyfHYPU+ZhNA3qHJUPHORgGxh9uwIhAMqlXcDJHSQRK8D0b8uIef8yriR/xf2oFh6zjmUFpwuw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUebCRA9TVsSAnZWagAAij4P/2chjW9LgfqPH6F7b7E0\nBTbQdtzvouMvzMQqEVJPtqDgINwzE0bM7p9SPdKEaP25GzrfGl2dlI23P8Mv\nM2n1isWOCZjWOl0Lq1TX84J7ois9PgLVSYI7M13uqjNsmxAGJjk4okdzKsXu\nWF2LkKmSwppIFiDHANT50f8fqowh/537mwgmaV5Jw625dBneaoZheS+2+iln\nLNQBybnrJxVx7DkAweglTlDEbw8bv5UQYOQolGtereqgvg1gsxFfu/9PYnAP\nOXc2SNl5vOwoIQqEpcfou9eSbm7PmFjvI6ucTvY6LG7ps/dhliveO3XR4hUT\n3sByo4xoJ8MPdFdhT1Vuh7mdBmA9HRSwwaLOwjvp/xMiegTTwj7HuvbHQdbI\n+jglawwcHKNgHCGWPlJHhYHW36Na3qHTdzFHCE45A+AtuIwUxkc/5fcBZI88\n4Ff9rzTnKf7DDTYaPAEmJekc7clr6d1gIqAPF0bVKIW1N4fRVP8YBD0gqlG7\n/PIkhyxPHlCc36oPU0Bd5IRZCpzk1BAlacaIdXXGQRx5bjruwJ+lBTtxhKnr\n3q17f21BJybShCImLIJW28pyYZS+hi5vJCC5MQOLtwJ64W20hBXCOQJKNZrQ\naE6px+JuuTsraYJhT8YT0xpYHrgBMjWZWGby7Hst3eJ5BDFsUL+tIC8GhDHv\nsAaq\r\n=bt2e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f5f1b613c.0_1614890907174_0.3126536434014149","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/theme","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.606e767ef.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5e06fcd6ba58987b9282c305e35ced1abb2be90","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.606e767ef.0.tgz","fileCount":42,"integrity":"sha512-Trc+g9pjVNvAqxLJGrpbAQ6tGqQiLYZ4xdfg951WPxTKyowCO6xCI40ElWWsxPBtboePtFEQmSm6mjl5RAOejA==","signatures":[{"sig":"MEQCIE6CJTBaHeFBpQB+AM9LuoY4rYievcf+25vtRVFqSymIAiAUz9NEmdlpg9LMPDo57Ycc5RDq6peyAd77hMY8qp5v7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVS3CRA9TVsSAnZWagAA/SUP/0S5Rt46+8dDDjREtvhD\ng4B5l1NKdBMBXVMvLGguXwpVC/1RsQFmL6RTbskWfdnN+o6/JJFGkRgM37uj\nf/J+VCfqDW9Cf8Yq92tDBz4P7izaH0yOqtkM24P5Pb44T6JRVHZudE4MFiEV\n665zaKfYRqzQRg/NBNDxUn9Svk4psEc21ldffjewvIPoAgW4WbL9YIvbkUDJ\nmAJTeRd4XT0UxowbtryvYW0okdV45Thp1g7F/RlT6iKQVGSD77soBU3IApoW\n2SGTb/vPdIU+9vb3QSqMMRiITG6Hi+w6j41JTtZ7qEmlJ+AMhbuKL1U3V1hp\nvxDygR54O8s8bPEEriaFzruwAzT3B62xTN5U4EUW1CFcgFlQeLZ8Q1yp811/\nNvLDiCRM85UYx9M6hTAkEla1AtLg0nHpsT64niKiAtHbjiGB9CjWHw6YUBsY\n/ZvPZwblzAyZxPakxPlDfFwYCn/Q6C6aLrWURYC5TuL4yiAgNMj/+u+v6Fnq\n5sdYpnlyVnS0euor8oC0VtVjNWX8lP5l5sFNGv01BzJuo2LOWoAOfKvs035L\n0AZqqXufsELuk2Qe2MkL/LWajiv2qhzYBDg3DcCfXGWS/0FGYbSk1MxN5xWG\neoVU5iOqrXRMIUr8DHFykxZ1LEHQ8pyJWiyeIo6eDcPOIF1wvhu1l8VcijWY\ntZnX\r\n=+RpM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.606e767ef.0_1614894263017_0.9373658154779343","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/theme","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e61c5c64095c2e4ed31365928ac76fab5a9f749a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":42,"integrity":"sha512-iRtyjdYT+K1NVqOx51J4ssRFKGYvJpNQTf6rBcjgQSUp5sBTDmo3EBEi0tT778O3p5ZBLeflN6ZuByGwT9ibhQ==","signatures":[{"sig":"MEUCIQDOodL91ITd3bm9zTt8/9Ncs8299g/AgfmqXNpUOjs6XwIgKzQmOEOAKRR8QUrtDIEgjqv02h4Q4tigyRe32s4fvTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwdeCRA9TVsSAnZWagAAJSsQAIt++fgL1A5bU1wa9dKM\n9tNlxT7iRbxF9WgH51v8iqwjHGqzshdZ42pc6milTfbbPGhY5/p5wIsPxdQt\nFVVyV/pwiffDL5w1HhRtlC9k+57smaKl2VYD5h/HviB3+c3zw2tNO6tVYBwK\n9a6+Q5xgUVbVTvS0sb9suerlZKOFYQ2bMEDAIFbVxHrTGrbsTYo9ABGi1aHt\n8I2H4kAwjFjsgZ6MAuad2sBElxNl70zFDKwIB2Ff6Kv4C0eWzgEt91QGajgj\ngClkdPegrmeLT8U7nlgTaSfblfm+H8LFH9C/45qvfsnUT4tk0RM2u7tl4bMU\n0Ou+GjE/jprN7Z9sX63jTcGZQxhA81B7pDPuR4jlQkiAxDaKTBLtzUmb0TkI\nA45ENtdTvkS9oKX9o9UyYByaZi3+FaqhjLZLt2NATWxoRJluhK9UTZosy2I8\n8QnSHEaYmJEA9IZzFdknYLpoOtimN8KGlWNYeS366igS2yyPFDSsxefoVFT2\nSrkEOmrDTY2UiFYslv5sPYSRPa+g5LhPz4DlidZtRLcaC1b/fo3j2nNFwxTm\nhSD0WWHW8Sc7RiUBk6aaAh9tt6Rp9abTtUR6pw1FH/U0gpZ5Z+3pJGJ4v6FS\nw3ocGVwbymBtvqWcsgtTwbdpI7zpNPkAbiDsIJFTXWQD8VlsH9M31q+kkZKl\ncA8z\r\n=FBYz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f77a4dd1a.0_1615005534223_0.2555148204131752","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/theme","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fed5f0d997470be8d9d4d130bb07876c42b084e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":42,"integrity":"sha512-CT/eVRx/Vn/HeIH4lhDy5TuhxE5r9MRm2zDqWw0+Vlu2JWKNeBzwAEFVl7O6iTWhL5N+QbtATQw4mgy6msqqzQ==","signatures":[{"sig":"MEYCIQDPRlD9rHMez5P0B6fe4Hadhrs84hJCh1ms99DeTGoA3wIhAKxI3+ytKuGV9z23wXIS5F5JUPMGj3o3LH0RQh5hVpRr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqiFCRA9TVsSAnZWagAA0LEQAKJRxszL6NYdYnoR3+yw\niYkDeDKGBisSZ2DA9iKA87BalaIidylfCPRb5RzKo/Fhi+DAFPNuh3ynxj3T\nQB0eFHbL7guc0YY9oPI/JuSJkw2KmkxL1OlkvZVooKKryqnUmdn0bfThv+jw\nLpdUqK2uR+1LPL213uvvMVCYNNHPzG2FzhRF3bW4Qc+8EwEKIolrTvzaf3qA\nE2XtuM2Qx2NU2tDEoszb/Q4tiD1e9umF9tL7dRe5pM9dVk5kQvgjjCFa9sL5\n3tjmlnAtjdVIscXGrcgC0lWzaVyFKy0SL3GNipnGvRumd0KdUs0fmjBQPsjP\nGEiLZPAEjFwT6VK004OiJDIYc3DqYceshIxaeaB4aQdNTDJgRPIqyg6ZJCzR\nyUwqeFk450wWZO1NJetPGl0tixnoEMzl3yZwTBDvE8GuArd9PsYt/DHCdo8h\nK9RRq7kRta/5GG5KwWJfOiYZMNeNeLq60UucNx0XN2v8foMV20fTdN5H2Ged\nSzRTG+VbKxbSZ6dJ/IseyqTi1ZZ//7nY3oBncWRqEaHhHICXlNrCpX+gOGF/\nCDT7srDTy2gukisV1TfI8bA5lgRC0qSKPJxLF1tuURpiT7oIwjBGbr2CjmBv\nuDtnh/TVuLH35KEyhE4eZ+UsguYrgSGpxSlcmEMcAUvTBwgGzfNTMAb5E5c1\nkurd\r\n=BtOU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.2d6ba2c23.0_1615243396893_0.5960655489381819","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/theme","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6016a9ae5968d63016fb33d393821dff21b45d03","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.7522dcaca.0.tgz","fileCount":42,"integrity":"sha512-p5MGs/4esG9HLY8ZzeiiZVGnTcFFYTRyzdx4k24mXY4sltV8ab3Tv9UtIX8TIX6lITimaOcx2da0V/ZDh2cfcw==","signatures":[{"sig":"MEQCIHtbdDM+FLD370sN3b2/G3BKQIZXUsT/vawhAR9LdkUtAiAEbqU4Tj3OXY2a9aqZch/qvHTHp1eDnuWuXLlD1W+YCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsC7CRA9TVsSAnZWagAA438P/1qLcQL3Njio7WpB8IKD\nv9AqIV+aRQNHvqCtsMhwGAMMIPHnZZVfXIXo9rNlMggnILd2X+hXkAho78op\nwAXaSPmutfTyKWPRVSy4ebxcT37ShhFaWmM51o5vsTKyL31y9nQ15TAQ8K4O\nz5m6tdkGvBX/Q1sEIR5jSA1YB/RsDqk9QZFMy/wyVUU0lx4CcwflXiUgMRPJ\n+p5jYrSvbrlodMFy6preOtrTNpgRTv4KnzWdgcsKIaJ24pHg+px80sztWOX+\nG0Jum59b+JdRDoVWpKgVtntQlzWbDPmzrJ+S9H3Wb10zjcs29pECAciYZTWi\nOnJ3miFX3a6zPXa2Li9C1GPDqFZBtENgX8hqE93WdkSUfBKIjiP57CeTxADE\n9svKPzqiHBokH0OiWTBpGUMhGz1fAt80z+7/CHTUIwB8uG1F8vVhtijYFkmL\nMrfadtcq3z1o6aIrHRnm+zQH+0ioPei7brIYiYmm7K3QRBKrTHJPVuy0zSIH\nW0iJMTnFh5m6awm/mN0DGXQp3mwUDffsjMxEA3mb9nDYUwC9Jruf5jEZyca2\nGnbiss0w3Dkb9aF4jE3Pnjj2jK/VEj8ZP4s4VxTltg3jrtGHUG/Eb2+cUxxc\n+AammnlLVb9irhuryWEpNfsbw3Q9Kp1DRrU4IB6xtzgHHLbWR3o+vDY/1xvI\nBLc7\r\n=77R+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.7522dcaca.0_1615249595447_0.7262827415230622","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/theme","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1247d21ca533a226889f0d6f53fbef9020b52de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.5c0ab7401.0.tgz","fileCount":42,"integrity":"sha512-gyqHesTXCTdSYMvbz/5bMlfpgjqRrWDvOy2T+c4Hbyotmr5jiw6Ixm5SKKOifV+pLRcXNZre+2cWOvqDIzA1cg==","signatures":[{"sig":"MEQCIHkOQG11YNsAAR53TU3SzEAgON/ZoWMdDgHC4+wg2iYvAiBsPzLoO9tfIHkhUl/6E+bxaaspHZCNO5TYiCV+S5OK8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/vvCRA9TVsSAnZWagAA9/YP/AkV5uSaLreqUz97okhT\nvX8yXcd7GCgwNYe8/gCkwkMP0tZ/GMUaryArPYrZ5Rymahy6e0Ps/Z6erNKz\nRBmEjUBWJ9jXfRpPvlVFXy424LmogMWr3im6RYNiqQUDGopO4K2WME9+TQGL\nvX1bCpqadmsZqX5fhbEYX2DuF7ZRYLtPEeXJMzl0+0vzRhvA6j3FTU+axDzA\nbgJlg4HzI92oIZwh5S+kskm2piwk2XSUZ3RyKq2XdaM/ihhGIAAOiztbWhSl\nMqTj4LSFTMMjlhdBIl2dKqy6LyTicaHtOeoSV8cx9/QrmymijMghNFt+09tB\nSaJ1/iOwHXIWh34G6YHaiJKYVbkNA+8AgXIa0Ee+e408bpKPLz8VtqLEf+kp\n0+WDGxWLHGoZm1ZZNCZV6Pp+Rz+Oep87ZjBaQBSrnYIOFXDW9ousCUv8mpes\n3FM9DKl/bFQBarF5EGsHLnQf8kI8yJz4KwUG77Y1lawRRBmMRxoliRRcez3u\njIm55RpwOVUqSrdW9qXoCIetE+cbcddljwVn0yIyD6bVTmoM6WcqQhA1FhyL\nUkzXBNM+AGqfUbu/FOVO/r6Hp0Q8N0IVJsaO1WhxLO8Lxg83XcEKddQ7/ikb\nBWQfuaSOTLHjz8+GVST4BCJPW/52m8DQHUg4ScWu4Vrg0mCpd6jORiOKqXrW\nHH8P\r\n=GxGT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.5c0ab7401.0_1615330287370_0.6977764989615771","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/theme","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4aa75a90f24a7621331689af21e4c47cf3d66db8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.59010b6dc.0.tgz","fileCount":42,"integrity":"sha512-zPVhGgpGohfg/FJ6K4pKDhZHL6m0pJ5pJXLEc/WpBHb75sRk454i3UPjZT13p+YkiRCPyFX7LklfVCgwSaeNbQ==","signatures":[{"sig":"MEYCIQCzqz+o4CsBgFk3RXOOelP64dboYkm+xXuR0g+vzel7eAIhAN5pmoFFyHBKdT2PgL80Dn+UbIgug9gaxOgiScs0zfzN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPonCRA9TVsSAnZWagAAMm8P/jfsQGaKpb2J1VkOFrgF\nkGBtKO6iF32pcKxi9F5wDktRu6c41cErdLU3FFI9pxtOXeEF7idm9drtQFKg\n+eS/tYLPMo8mg9DtPBeh94GRLkklzQnk7j6XMyXlfhOI62j/OmlVe9F8hJRH\nQtFLphE+JZxIAVX4gmmfXVQX/Yx+SnC/ePgese7DvdtJNZlZgTqy7NPcyJVt\n4+E2OvFOirmodf8Z2CYwExO/LoJKqIJfc6MzBrYRO88R/0I/t+Ntre/vOuf4\nx8pA9yj8DtMY3AQcSRQRoDffaCExi9Lj/DITrjdgxLF/TQcRbIVy73s3lqVU\nz04oBn7QOryP3wd10mHKFTarte+WGPRyppUThZLngS9fE3pCqZnhRLhULldS\nsnrwyD+4u8It/HpDQmeweNAvXviqcNM6bkMlWPUMHWLGVlTtp9Z3yRLAmeB2\nYthCilJd+dUzkdL731BR/E8zvtZivmPxfr5FWTqrcQYuBLkpIb0v825Cp4wA\ns0YtsDJnWEFrIPYol6anOfBevKpLf3IUr9PPwBrTQZHrOTneNykQYK9lV+vG\n2A9TLbfH7A/CAK2CH8wCyBYtLafWURDB3YEpsILvag3ZoMukmYamfTJs8Tfu\nKHfrX10rvsKWdRTJeGsxxbTc0nS3Y2SsYD/kKdfXFYKXUWyWgUihtAlw5zGn\ncyd6\r\n=UxPM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.59010b6dc.0_1615395366777_0.21733983491542386","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/theme","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07ca7c5b4f3aa318493cf8c92f4666b627ce2b1f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.9e52f5544.0.tgz","fileCount":42,"integrity":"sha512-GPv6myhFPJgoKeDE8lBzWSSBDvVZ/lymhCn04r7SmeIRKc7d5jUJNZvas/iG6uOkTMWTBvDEIPb+5GcmMF0FXQ==","signatures":[{"sig":"MEQCIA0tXBQlfMnxiKLm+FoMGUGmyCXunkNInJ8cJ/BBW3V1AiB5INZ/vZFpMQhxNXSOS0GR3CHYNUl4jHugMV5rEZhjRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVUXCRA9TVsSAnZWagAAWtUP/3j02kgGLBN5TB6wdc4m\nr7TSF9n/kkOZQ9JFnizXBIOQtJUHb65FYB5UtzOEcZdGzFLvaw6kEnEMMzMl\nTwDL8WgPXDKGQtiSk9M8AhmkeyyvQtGAXvoJxHrrKipFMOSQo8mtXck65/Xn\ntjnx0J0qmZz2n+fEZLVqjyAZ/SOhYCKmrIQGQwJsnX8Vj/ZTnuNNdUTyyakc\nxRw0wRngOOcP607ccBDPGyoxJx/C2ZG1PMr7gFB62uVmLwyIS4S377aNF35C\nGH9svAgFEz6mn4cIqwyKwkRFJvLodhqzLe+t26xYQqCyexCWXEswpwscwpvu\nN/J5VFAxMZLo5xku0QgNPKCUqPvb4MQHGtj8fLwG42ayHDsKiXWSwmmO8294\n7rU11WfC9c5YbB2JRsMvDhU5eT0gyIMYdX1CI3SxI1S5IDpgvXbftCgobjmB\n6R/9rK5CIacpV5GTq/wGe4SJN8Bz2svsSTSUlNOYKUONYiNVuAUZs+Zv4bZZ\nrM5HUwUae65FLEeh9ql8ulL+/GvyfCTNJ16Drkwxr+sZ8RVQK3c8/UEcdnFO\nCW+ZbKCdOgJrXAu7VLvtfba0oz0A656B+U31TthUurft/aH5rBrN2NGLahqp\n443oJ1eMNqcx1mtQZWgnQeuzzQTbG9Ehfha4OqukJQIXTSsQ8+OUGQxJl1LP\nXYmy\r\n=6S87\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.9e52f5544.0_1615418646421_0.3699240292766792","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/theme","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.a678806f5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1698d1344f320bff98e5dc70136ca27b1904ad44","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.a678806f5.0.tgz","fileCount":42,"integrity":"sha512-Qyp9mDJKTkY4MK8NE90yvXYQBbmdNk9NQzrexBmg5qdQtbqsoXhqWoZDPY8jTx8lbybtTorvHRr5+a88a92VIA==","signatures":[{"sig":"MEUCIEcFBK/Bzvpn0DlDYBBAkP8J2S+e14dSkqlQ3bMYDPALAiEA4974bzum9ykWfZH7OUygUvhjV9zm9I/AfYcJh1WBOQE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXcJCRA9TVsSAnZWagAAuRYP/2rHoO9jPmW3hiQlpLrN\n/3+gkYB1CGQVuIUsqExQ59CdBf1swfjIly54qwKhird4+FK2Fixjyn4PS9Qd\n61yCDD+xvna2QIE5S69+SPGJuCheYuPppwcjuJOweLMlldq7HZwqODiu5MnU\n6ZYdFmACk+2LBB+IAA4j7YxXsk9Ao/nGKJItNJtrg1PhYuwIAREIUh0AefU+\nHM5xmpqG01OXYl1B2tDkLiNZSWA3/qWuX5qseLoj7KnSkJdi7UQItNP/5k/g\nx3DIx+gCuXtSsVkZhCm2hJuZmGcDNU8y8Y24y8bD5C0j+PAcHBR/5MghAob2\nHZ7sRMicfNVdcyCBzNhyXPQkv4Xxs1F9YF6tbEtGPjScDlI8blQLsogvT3zE\nGpoF8mk1EkBMcWRkBzigJZLwTUu9zLPPk7BRBJHxpQGH8jj9rbO195tdedTz\nGsptHAiEtBJTEbUc48FA9Leb61ylIyT3+/C68DY/0HWP6QXf6PiKnG6FHBB3\neg0chLzgZF3uT4jIus1EZgedt9kRpzokj8Z9tRj70KYBraUAikYOHAlF17qZ\nq/AvaHmty8TY3afZBnrdZvh5J9TsoB49U476J6bW91CN5D/OkLTnae+ZhjLu\nVuZ+iRQx2OmdMjVv8e9IZ1L1EykSLsytuCqXXo/AsM3xcH7dIj9kDUQeHzFo\neYGt\r\n=mCAU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.a678806f5.0_1615427336699_0.004091942231865486","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/theme","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11c4da1f2626db82ea926bf2fe5526ddfe7fff6c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.b2d22df5b.0.tgz","fileCount":42,"integrity":"sha512-+zEm8s58q13VahLxLVSHM97i6kJvCkdBhGAMu/x6COEJTj2AkPg7qtDzVEmIxRIQY9QZXE6ZpCiDH2ojd2Uc/w==","signatures":[{"sig":"MEQCIGuWcznWVaFQmpCSxJHAhLjrSgUOpu5Rfz6niAubHNZtAiBGuOZSJZG+oDhyffnfkPhdiINxZmnywgsTVRTTquFAlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSkz3CRA9TVsSAnZWagAAf8oP/31jXJ2YuTU9cY1v4UZY\nD5vRidLR8YlQEY8praoIR5FMu8TY8zKoR5PzgcZC3MKW4JuiM0V/PF4mc4hf\nluLINA5G45G/ByaamApIgRnjjnN6KYelCPpkrEMDiftBbYrTXG0pVJtQWrCO\nOhMY+P2rHs2pD95Zm/Gws8EmJ9gKRxR3VFupaBzE/G4j+b0/CGoksjkQzlBM\nRGbbvT9n4sIhzQx5MtagLOOKZlLRjLFmYoGbN0SqgcXo9gtg+SRno8B9p1Ki\n/HmhpLH6hzV2VxR5UV5Z2ZFrJuSTxIh1HnBhf7mPufNLao4c5tN+Ohz/QVpV\n0EIjgM+FUGOVLxp5oFFD1sSZvbJqdKxK057xQl3PPJ2YKBGDjt6hoTGk1wFQ\naFgweEp6uhTh4ZJVeO5Tu6Mb9keM08pXHhGrf+XHsMRWJesF1CgNlfP7NR5N\nfMbptJoxex2xck1sRFGi8sp464Q9H8zjgRyKHFFmCac5ppzRSm9wISyHn7r1\nuu6WAMn91OQNcPL/16mUYAT+GtwD4u5eXmiKvVh8oFraHtbCatMyLY/XdvPa\nuhy1OhaCsE7WpeOr7Q2yGikRyZ3STrRJc3R01p/Nk8zs00A7vb+3pHZdPMG4\nlI4ZaDMMsxIUqAdiJLXxU4nY4A476184jI+xV2WhVppNoxmjB6DER9sCBMr9\ngvVL\r\n=YF2z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.b2d22df5b.0_1615482102897_0.7662088003094365","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/theme","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.81911b707.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca5219ec15cf2d7c5741bc9174cd014c98982511","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.81911b707.0.tgz","fileCount":42,"integrity":"sha512-FnAdaAuhoSVRoNXKireCbuLn0BOSEgtnpxCv4ZBT0fVf+0Pqu1o63B3EvbitUdRVoLL04hj8DK3OxJBzu+FIkQ==","signatures":[{"sig":"MEUCIQCvvpUB07WyP/U73SbtrYzSKIjmMqKEbGPNh60fhcDCJAIgWV+ycMZVKBf9ivApiS4/URvPnpSJfDVO7JzIz45Wuuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSl/UCRA9TVsSAnZWagAA1nQP/3anvheZKat12eY8UqM6\n4w6u46ov/oxTLaTV2YK322zDtA8R4Ng7RI5vbrnpb1DjwbJ6us1gqSjI2RWz\nFVBftXnvZcyGeN4c5ev4ksvYZ+nzXtpwhynuOvJLjPJEPXJpYL5bOb/O2dr1\n1MNli+4QgzYVsimIBxoPt5lgqObHVjCh4QhBG5Jl/aV6qvCt1mvHTxaej93A\nMJmfJsxlGIxBBvOkMXW4Y0t2VsY9tV+p66EaduK/QFzcxj/Wnb4x9WdsUSR1\nN/tjndXyCEqCnHCnXdgKXZeSst+dcqweXlbJBSKP6CXv+DYVBNWSBBrnW9H/\nkI83344Keuhf6wqWZRxRzJ1wKDf09kBzdbZBopU9JXBV5ehLptuUG9RwzHlR\nEAHMZkrP9CBo2fj9bA70KpAZ/C0ebAQc3xo2zJd3Uge0/vIuW9B3YJqpvzC+\nJeExJxUmsOJiMW3dGIjHODyUuNWLvG/jDOupbkcoq2ciNdbHuCWbX8CMgG31\nSTpFhn0wkEvtn8dWgURugE0O3Odqd2v+BFWAYYOeJ4Y7xqBe3zuyzvoKdg5Z\nz09eGRRIop7Rcv2XypA0/GUKEsiPxMe3OcjZeDFtucRbL4FjvC2pmtIETB3T\nAeEHFTJD9KGqbzjOxOcNf+BhBn3a9ZBXwymhsQF9gNjq1TOvQk6qi7BiQ7Yo\nZBp8\r\n=q+ER\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.81911b707.0_1615486931964_0.9064567713246867","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/theme","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fcc1e061b0c9c07b4d1c5a12bc75fc91958b0ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.9eeb35c38.0.tgz","fileCount":42,"integrity":"sha512-oQLk5hugmhabvhp2zo0vF+XokuZMH5RI5BfeZcZNfr7mk8hfEsTsi6tuRUzolYHg9KoFAuXXVvqRjm9aaCQwng==","signatures":[{"sig":"MEYCIQDM0hZghJgvCY3D9dPZRkgdL0k1pSc+Ilyo4wJAyt9X1wIhAJGwO91MEEqUaefr51wMVQErmU2PwFRI3a1Bww4AmrpN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnESCRA9TVsSAnZWagAAJsAP/A3pV2uF2CPMh9nFcS5V\nzFNR3KFHGUvgIO+xRcTlWxwq57N73rGLWzLQeNt+VaKoXvYzE7ZQkK3ZmyP1\nT5df1vOrp0W7wqbCCUO+lK+BI2rXtndAYN/Yft6ZlycI0YeuvzsTXfQTgZ6S\niXCBCbgZnhMkQcD6yeS3O97KJ8ECpEiH9RzrBt54TP76Htfric3sf9vdCBXD\n/GKsTP5wFuUiCv7Z18hJRVoCsDZRbAhu0No93z6ZwtRqH/HV/zPxZFtQQW5s\nao7mM5uOku0N71/cdrl2XKZ51ijXtcK7bGUwoaPO9qAR4krjCPKU26ZYYEe4\nk/QWOTdv/zLKX+L70oft3KUDnoG1WNHIIriE1ZEdzlT7LymGLMdRHElDG+VL\nEA0hw9L7s2PLkjRA+rqqcplJ66pGW7LTTaNKDprpvootGzoK1RYX8aihnPIg\nuFqol+8AWAy6M9hw8FZrKmslviP6A/nIq83xHYXbFVcI5dNKXwYFkb+pY4p+\nUlU3c06ytXpbMxWuoZxGwxXRdpLEwcQAUCU5L7gAqAs+QzGulslIfobh6bRa\nvQuSLU3q3E85caZBBf2GOGwYEWuYKp+bb+NljOdkbkT7YXdc6uYM6kotrbl9\nHpPla0AUqqMX3vowHWy5H/mVXox4DsYI3tk6Gk/s+gQlpyOtxpM01C6P6Dyu\nswXQ\r\n=oqfS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.9eeb35c38.0_1615491346316_0.6274600438198181","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/theme","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ca2e030762cf947ec450cb7bf75d98bf2969529","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.12be3e95a.0.tgz","fileCount":42,"integrity":"sha512-bDXQDZwBne3HxbCNivncRd+2GaCqY0vi5TegzzM/jRjgD2uLWA9FZ9RsK2m0bSzVVVNEZhKBR8D1b/O/K252eA==","signatures":[{"sig":"MEYCIQC9ks5a/y5AspqQCDBAOkJwC+faW5ATzeZMBK7dNKh0SwIhAI4iaIyMDzEFr8uKMv2G0hsNuJT8NxHibaikemHVVlGy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnbdCRA9TVsSAnZWagAAj50QAIoa1LxYeMSiVoS7fCTC\nxGaPCGMtA0ATb6OmBo6jiRp2lUa+wrzNr8yF/OidVQBu25KHaDZUqRdytCAC\na6IuViOV3B3E7PmX/r6Xt+7hrlA+h+BxlGNIYTH+d7Bd4yLjiwm4LRmV+kTQ\nsLeDKSf9J9uxl0WP8hFnWCBExg4phdWn0t6LGGX3j2kjY0Qlgb3dBS5MQVwj\ny8KGz9fPnwQRuXNoMH0vRscTTN+EtE9A+ws9n+p94zc137zsijY6/z/ht8dX\nPVebNAac5npEt4s8rGeAZyQBmIV/RvanAL/ftgBGSmnoUkxHBNtRKMz9WgXS\ndMkWlGNZuXJsr/1s6BETdnYTRF7L0pdtQRMye+Qjh+xYkdwyU0cuzyKZxW1G\n/OezSsd+DOCTjRvNcuCaudjbV7fCz3BxFXq2pu21g8Y6qKjSgptJd+yvFo4F\nVBwqJJ7S+sGnbb1OXj9x4YKDcu/5Xmhkt0KMTv6qYtBXZpgg1ZVwbtwYd9GB\n3ZRFirmKko3UzejTOf11pkP8F3sfpgbOX/a8Qy9ERR4u7/42/kMokd2f0L/o\nuh5/koLyqILGa1p/vgMEszMHM3JIKM1ea1dhHxBJqzvJpL4SZ8rq8LKIQ+fb\nOqSSLarO6E6bWZfh4HMhOP3n58f805iE88drDSF1rM6sHIVoPXwN7PbD0y3T\nymOi\r\n=AfK7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.12be3e95a.0_1615492828449_0.8382025368131758","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/theme","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e650750750b658946f4513bc47dfa7b3a0bd1d8b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.e683bdf4a.0.tgz","fileCount":42,"integrity":"sha512-tdOrSmkKLUNKOSoYJBdKAxfFwbYrz0cIqkA/y/gfy+H/lGUhLSvoWFN9+PrWH0fsK+wYptTBpJjKjnVeYnnT+Q==","signatures":[{"sig":"MEYCIQCtNDs5zbuTUsizlWLlJAVRxLLpkPi3Gkn2ceCn3EWVxAIhAIs8SRdYUK/gvlDc2ksB7LjExdBRNSfypM0wEtgMu34S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSniPCRA9TVsSAnZWagAAM/MP/0sFkdoRzBvQexlbmuhF\nN/hdbJ5Xx3RyPcr9bh3AlPdPqOYZibJzE3CwbPhLGNdIXfepcNTW0cc7ksoS\nHQtSVAM3QHQSNYPzIgP3CRfQjG6fDI6rO7KOWSHkgV8v9NzT3EzNS8bUZMVH\nbFhVJ5Xp1QVSKwOMVeCY/9Rmxj/Q38LWwwAE/yPM5ARafgaHc/gc7uQipijB\nyePAKFvBqjZfLdQFGSgKJH4OPrGiJsQESDLBMJeTamGGhdepooOX4dQxuP1z\neWDa5kzWv1vrBVVRsDKDxH438kLg+jzxZwekAokTP7LQabPd7Gvv7DFbJX0C\nMbtXatP+IKdnA2lwxR5GcCijCP3fsEzD54CFb33r9tFIs4rWCK9TIQkKkPjU\nXP632wbKMNPTfao6SW0w2L9ZRwDqLbcjs5tDrXNu+PHK2ef6PC6BJ1ch9eYQ\n+nmkni4dcFTp4wmBqX5ON8RIVGukmjIFVEh3PwrxFqiU18ahdCt4xa2KdZrd\nCJO4uw1NPrDrShB2xacmQRnOW1qgCY7Gh1ytbPibfGr2ILr9jC/u8YMkPFWG\nHFfMCpwnUi0U5wHHlyuQ43+rSF3ewxAEPQSEUC6lSQF6+sBAJrJbfajgTOR0\nbri+YPPfEEmNKskRQJYc1p9QFX+LwCsKfa9Vu80OZA56ZPdknD5UC7oGuxGg\nUfdT\r\n=ySnW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.e683bdf4a.0_1615493262955_0.9899681934780007","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/theme","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ff685ff1dda37aa5100e4b76f3ca12a5a227d4e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.a07b6d486.0.tgz","fileCount":42,"integrity":"sha512-Tregwr1tk/sbRuuLXR6xw/JEqx+zoGgTQP62HNvxlNh3MOfaU/dOo65m5SS/VQSK8Y08xC1pfoq+hKYErhN3Rw==","signatures":[{"sig":"MEUCIQD3rlancE/C98KOIWBGG0Rb7zoIgKymH4jnJGHoH4DU6QIgEMrRyg3xd4Sx7r3hyBRI3l0yEUFm8l50LK45fkFefX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn5ACRA9TVsSAnZWagAA3R8P/RSo8OVb1dxcDb3sRrFT\n6ZIsoHhVOPaicrmY7Vmx0EIVMNjGEX+FK9UbjfS74tePhxbyW1jnB4tzb7Ob\nS1imbwhhERGa95s2n1QOUICnY1qrbJ53X+/g5Xo61AdDRjGxqNcyw7wrBW4o\n55X0A0sRgb2KB+eq9wC5NFhwwXKXnVVGyHXl5U0Uyg5qLNMjrcJk4xXcLG3r\nbxQbDYyRBBdp+/vjohz1Rlbz5NRzB0wYnp+ft+pA2fa89+z2WLkrDVUR+jzf\nxAtBfvgHSDgdEc/tOtmzaX8iBS0r7QNr0iXnK2Pm3kFK10mkj0jVYTWafPch\nZ1IRekrqzy22w+i0ZlgTEOAJy5WszrJGQiKvA05e27oZIJ0j+uME5LJ7CITq\ncTSGAjWJjxMghUcCtTE2CZGgzHFAEmdUd4Za8wohGakt86m79YIyDZMVOT5Q\nDEX0Y94zsG7EblsTjuTcMu2qIKcavCP2hi4cQ6Gp1LfBWN7mp58i7KYcJ4QY\nmwVZdxnzA7LVgijT5rFQj2AwQOV0j2iAPRqcrMN9PJSDseF6s3p2FzVrqMJw\nyeZPQPHYIpFEv0P75I8Csw5stcba0W/NcNGMaCm3iO6wQVy06G3zG6y/AzKt\nuIeOEWAupeiMyPJEj3rz+Dujy5dwIP+YFwK0XFtE1zpXTfaS97Ctp2fwLbhT\n/KCA\r\n=jVR4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.a07b6d486.0_1615494720276_0.7375367549133787","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/theme","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.1e0653477.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3dc572d1cccf351922f68d6617574f47089dc20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.1e0653477.0.tgz","fileCount":42,"integrity":"sha512-4xn+eo09pkrbqgOFIxuHle/WHCyMVcAdKEoJZjdl/8N7jhnWddw0TJC+UMTWUq1aiCP1eJ5DkPLJW6PNHS2eKw==","signatures":[{"sig":"MEUCIQDT1W4DlYUrqw0vFuxTx98P28S9BzcgXU5XLSZY9kkAGQIgenDP0qecsqPW9r9D8aQIDpQn4Lirnmribj1zdHTPv4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn/8CRA9TVsSAnZWagAA2moP/iv5NKrUMjmRiGP5gf2a\nxgJW38PtJYvzS4ymHsMEi4gZBO+XKeJ/k78aaDnZQkECewgYJFswkoQ2muIB\nqevzmBQ4VUwrIFFEQWIaeVGSDkElZBOh+5DpBz6WyT0krWba4ZeEUGOOJDqM\n7cIv57r9jLVwayVKZTubxbxXziMYpf5PBfblF1B5ec+Qc1OB5tndIQvNpY8U\n2+KxqJ0wvOu10PRy+YKEQvWF6vg3R3PLSYrJxFZ44+ye0oS3a85pqjmXZGPI\nvsgwtJ2UZA9InExK++Vrv/KbQurWyBDnSifHILGmGcNPzlCftylbq7CxM4Mf\nkW0StoL6eXcaHtmixj8n//aBm0FDy2Wk2TuL9XooOLI0TtiOZm+w3utA0rtW\ngbJxZOdGc1XqwFJaBkoDW/LeWSq51ZeTHEDzVymSrwUXD+6ap0JoVgB5xLYj\nVXE9CjYoquCyFI7FyAY+upBAPiYBIbHdkx8qkt/qh/9Gfj1RNA9GYCyCvZrl\n3jHsTdxIHwHhN+rliJxYrtZkBfyHI/XYwEl+YyeNxt3SHoEGF2pLZmHwFCFq\nHawyqPzeJYQVH7Bqq6YyyQmTEhYTOhMKib1za0xAYVA+kuRXG6UvjuSgWltE\nzBB0dfoBFpk6VK/EhBx3oP/ythe5fgWJa2fuSHrXiWnod3HNjbKIPwYUCNOi\n78iJ\r\n=r1gT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.1e0653477.0_1615495164129_0.2606288907021552","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/theme","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d4a17a1d58ecd73f2da705d4a3006dc6f3feaae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.148e8cfcc.0.tgz","fileCount":42,"integrity":"sha512-LzxMwWM03tUeGQcNjyiFrVf9AfbL8xrTjT8a8NC3te94U+d/CF79kDpfcC1tNA3vYfYqKbAEMvSB0su9DI7fIA==","signatures":[{"sig":"MEQCIFEkbp6341qoxba/QH+yttSal6lUHRXg0uhWxx98ln7hAiAs515zwW26sYfKw8HVYLEe6BR8gmIRZ1DdtQx0rFGbQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp0GCRA9TVsSAnZWagAAErUP/jOnQMKb+uZ3YW1XFXwe\nclrX2FArf9okeX5E+1nNoIA3tcrjles3pHcWq5bKJoOY0N3TVBf58npfdZIX\nGNaxSVxbHJEQrovwpHWlwRtwBYRBMrDcggx3lQETHPQ+nc/ahr5M5o9Daj1x\naEvTUTel1/j7sA3v6stqEjn2PHS5rghSTubm6s7UAK4uLvTQeELGF557AHHp\nIKNxcqKyXbWR8/Llmn+b4VdsMkNNYbyKzlqT3lYbkQ+6Q0uo2eN93nOeweIV\nA1KBuXcg8JecnpuI6rdWc89RxtxBZzt2aGQs/DqghEb4hxUkdXGfJpVg2jUf\nzcYCX3Ibx1zdw5CRSfnr85qJtMXEm1gEIrJKeXMMD8PEbZ1yWlVFq7v65hA6\nykDHaLG44kBX+djLJBK+nkjr8FZou2NVZ6kklDdF0kYhmi7HWWh1u94KbZ26\noDvC0NIU97Hyvy5fpQCBrho20xR/LwpnpWeU041XBoYX9TofEndEAskvygZl\nY9go7Fv1xwbKKojQgBLm9Erq8pCs6cMb+jZp42tSuT1PKB0V/S7rwMnwNCmA\n+TLV9NhEAlU3oIxT3R2uZ0vS0pMDbPY/SwwlYaOuF2XsmN7REZS0ZLq/Whmp\n9J4B5GNLNMvo/FmJYw6nVLbV8BFuAUsIacVGJ7hSUqG5trVPQII2KAi1vmf0\nDGAN\r\n=xzxb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.148e8cfcc.0_1615502597591_0.14936264550054879","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/theme","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.73a227194.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9f17363e55b9def679d4f8b22b44feeb3bbed34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.73a227194.0.tgz","fileCount":42,"integrity":"sha512-HwQ92we7ucfl9Wh/8LD7D0vrGLYvldR3DkiSFdyYJHQlaks94ZpMGa0X0trCnieaHT+y0dARerVdj7aZe7Kq7Q==","signatures":[{"sig":"MEYCIQCYjKHFLWh/Z4/g8xxfOCr5iETXXZB2JRk3ElibjSmFMAIhALZ9Bnr9gUruFfX1BYQ6T8vA/HvsSRy7bNmgfB4ae5W3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrRYCRA9TVsSAnZWagAAP3wQAIZlrOn2bIXTzguJvm6q\nUA7ZrLPEDpZCrIuUu3ocgVvHDjNMmv5+N0nM/PJhUw80ynfGwb8EwYYtmdU1\nScPcokmy+/6/p1Zny2/IJX+enrdYx19ZEY0YcHVO5Z7E5yLwgyEuLdyfid1G\n5g7gX8CSWg8VfAw2M2+2+HF70V94FXk3FSXjzL9/skY9sbwEUv+QlIfXde8j\nU1ajgNjJ3mk+E1RiG5HIzdXscsLj8FryQ/zvqQzcSSlOzXNwSKfsTPysSLIV\nrsncdcm1E2j+nw+np+edwqOiDbGF0ZCqfnR2GK6RRZzKkt8LOcdMSDGDaOLu\nJs2Vrvo98r+ACOBJcBZMfz3Fhe23PyNAhGwUD+7LfKDIXkQu92mGDnbanegd\n3recjvzFPQdXeJ+JvyCip10SVwzITYx4VUngv8hMFizrBT6xlfzs63UVJAR9\nZv2m4rZQpvidcPpjMR9HxzTviRU7Of+g96i8VL5k54BPHA4qJ3Z8R2/WrMCC\nGzw0D5nLaMaTCFrF1PD6WV3kApLuGy1xsSE6XnoGghS6XfAequqYoFY/Ys1k\nBShqwDJaZazqN9HaIqkGYzloZ0pJ6Nt2yi8joM3gQbCKcgAs3Vv/TECUQ1q9\nUjQBY204lYCW+YjBqOv2NGl5QbUwtW7uNz/3A4knYuP/YM+/uTgLmpg2q37z\nuXqB\r\n=Fikt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.73a227194.0_1615508568219_0.19621169565506924","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/theme","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccadf61c7e6bf44b7c86124a6be47df396765af2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f8579b7ea.0.tgz","fileCount":42,"integrity":"sha512-yztl9WYMFMDtyTmCxnoK8rKfmnUvnapXaH8W3xfF4fwsOUr914WdRL2d7DBYsHN56uBjpH6zpvIadueJO0cjoA==","signatures":[{"sig":"MEUCIQD1Xe0pgkIxoegludtSJdClumgWf0XrgnWsiYDFDKgIAgIgajKjQsdx4yt19hMXv/puTNgTXEpl+ZlN0aZfzrYreQc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB0GCRA9TVsSAnZWagAA3noP/1qU5nNbpoNaSYVKVF0t\nzKdF4injBJTyTxUxmTq2ZYTFjyi5dcSYA7tY/wH2Qp0DJk+6ZK8s1HbRJUL3\nss4hQna6N8AfsgnNIMaphPiZ3yKWcXaEzAmDITwNm+eilnqq6fSgHOCHCcFs\nhYkGCULcn1E35GB1JuwRUZv1kv73vK79trmNC0FQ4whWGKT0ikCF40fOuup0\ns5lA/xNSx/BxTpkJ+Y4qhRvdBv4sp5GvFijOIwcoAGgVfxj9kZHXI8WhFkUg\njy4y7XMYBGiOEb+6t+IyAON1/RgHy2i6IrdUJoZsAarrfzPOrmI/TpP/cxNv\nIRaIrrpAuS7ndgi1vNkdskum1J67fVrb0Uoz9DKQQhEu2ihHFVr0LU1UHVHu\n8vR0CmZqmsFTmgTuLl0S0Cf+R75TvXriy97RXp2giQnEGsLRM4S/GvWRHUCo\nXzq1lvbVXmCbYqmRac1jPP7NeuBVFUJZSf6PaW3PstGdOfflECWXdLmUqihY\nby9Bp9yEEiqx7JMVANw64N/MgkAsEP47j0gHYm8W5ZZm5v36g/DkqqMSqANf\nZ5k6AJWKlTmIhwyeyV2y6DryR0eA5+0vsnkYlYvwQOC064LDvLYuhZ4WH9HQ\ngGdrlFvd5I7Jd8iwLKbGv+9QHrpjJNZmdIZvZ3/KmTStGrQPVoPksQW5oNa8\nNr6G\r\n=hEnL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f8579b7ea.0_1615600900756_0.9662889820455043","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/theme","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05f59a5cf3b7a39d1aa45d559d0705cec82095ea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.d2a39d300.0.tgz","fileCount":42,"integrity":"sha512-OBi7X03O2qcUuSUh2dlXwLxqwWcyMryhkYUcBk+Ur2zeQsDHJkNP6DYxJiZlVrN63Rb3gwb+oEQL+vd7d2A2xQ==","signatures":[{"sig":"MEQCIClRM2LU3GH/AvBy+m6ydetyMP8PMdEX6dgGZW0MzxYRAiB6Y7EGG1eLapTolJUQoeU87R2gs34JHZEfclhuCB9B6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/zuCRA9TVsSAnZWagAAIMAP/18TBP8/06mUBaEY6kM0\n56lzInuDP41iGhBrgFcVvVhBBuQbg3o0thtIHp5WTYgpQvFmwFzlytLCc1/y\nr3tfuu/u0rMhgcp0/VuxUXO+24JQ/oRIapMZ2clrTJPKV7X1NlDrlD8NHK0/\nVX7Ye8ib2NpqSfOk8jFSOesmUb9gYzydyygqsU20ngl/1SHYQgAkOsgU1kd/\nNZchHPY5/UZNGtlmt2ZFxrtv8Vstv3CDRg9PUlfqTCGeLJt4K67glK2sxxk6\nkpBgrNsx3vN+AqE/PlodStcoW1xCV7W7I0FpsSSa7W3d3t2UKMpz3SZaaiep\noE6GLa0H5s4+3sXJLMO9L4lA4gUFgvxj9+brKpu4Lbc1A4diuiRsqkoCR+FY\n8ZpK3pdwSoHTkmrKKQXM68Xn5qJQyHbNcmNGaB7F8u5LzrShmPsAvbvA9Vll\nwdVPTKX3r5w7/y29Xa3aGKtHES58lXZAwxNx2xxeSuGUWk3S2nSDEkYCwUjg\n3sqYCfbxAYzfhlsQTAOdYkXax7+BIazBImFm+7ThjcFvYZdmvJ31Jv2qIZIv\nGrJAoHJOGECLoahZbW1MST84Vk3s+4NEkHgkwBRNHNWYHbhM8jpJ9nRLzqzq\nTyxVjGXj2HxCsvIn5XYz2ZhjVFA0iUXxbnVT/HRYgJKx3S7RlUhak2gB7swW\nl3/t\r\n=Tk2D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.d2a39d300.0_1615854830155_0.002065622147236601","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/theme","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72156d24054005ca37ca3c5d92dad623e678643d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.7cf67823e.0.tgz","fileCount":42,"integrity":"sha512-ReRG2A5A7MuEMF29qlZehpf5RE8GtUdb+5IkominkeIbQ19xZzm7SSo0C6KmvMy0IiVRYlNkMshoCW32naLqKQ==","signatures":[{"sig":"MEUCIHEZbKWBvD6a+9r7/xpHTEixrCnPfvsZzgABu88/qJxcAiEAiQ7yusb80lQ0F35ZpfPE4w7E9CmPv4ERYgLbdfE3+p4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPaZCRA9TVsSAnZWagAA+2EP/R62UTgSM8um/7hWb3qQ\n735b6EEN1v/hJvZQk6MO9IJW7J55JV2Z+9Qfe6C4pwZEx577lHEkJlpP0HbQ\n3crquIXtUSeQWdeo4EFqh9fOBwfx9BOZoqZx5NkpdEUZBeK6wU2/c8dJ54CB\nss7uAM/Rg3JcbyzrjkP/7NXLFL1m9SQavS5UHehXHn2idOigqkW+P2RRWcuP\nD/AOj5y36qbVq9D37npviofoynNcvuBFcpNERnGw5t8oTeu5Ogknovo63Lj/\n/PgxpcLv3CwmlFYE5iYo0QqoSe60wctH+lTBRAZQRy3K2+5QHoVrnhuimtPT\nZ5OXyct3qv/zRTYVVlu1e1bqQvAMbuiDcW562dYv/g3aS5bBgIN6BNul2gUJ\n8dsAKG6pGOr3xfMmQRyAd4eZJ52m6Q9eXyyO186U3mk6V93jfcFw5lIbEuNM\nXGFQxI91t70X5N/aNdCqcvjmk+gP0hXnq1vqGvNy9iA7it6i1GE3Rm80izS8\n4hMBUgsYn4nIIIE2v4L3hv+eesPtfdKz4bcfb4QlOGvtlSnHarolI5uPgZi+\nBTWeksdWDP7lKTHgY4Yy79yTLJIJtnzzHcZF1aOw/BhBcvl3Bt18J6QcBOeA\n5iSxg7k+L4BZuzkyiw5PWQkJiCcirzndDmg9k56+PfopRUBAbvyoepekO8+h\nrO0a\r\n=3LVl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.7cf67823e.0_1615918745373_0.7856377442097751","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/theme","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.67d780c79.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdb7b7eb893c14b91cb2f230f71514b6b7f15333","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.67d780c79.0.tgz","fileCount":42,"integrity":"sha512-x5iEsn4TiQD3UwYJCrxq9GzZDNjUv9PXqgvvzy5qXHSYTk7IKkLypI5mTTTXUUSpbsDUAtxx8fPr4zGFnnFZVw==","signatures":[{"sig":"MEUCIQC5cRNJjXLnJCnkg/jaiKGmWn1JiVx+Itmyjn8KVC0MSwIgN6ki/lSHa/d52gFHS4oErkN6XenYgXthsh1cEBRw54g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQsmCRA9TVsSAnZWagAAWw0P/1zu2rjVcbuVsylura0B\nxttXW3zmEJv/Vxp1LwIpN0kmiFEQnoNn8YDnD2FM99NLH4uV7MdJtkVRwL0N\n2F6tL76waCVErYPLrE3wsDwqJn2xgTXagYcZ7yXwfEBZjSfzaDu3ursJxoVO\nv6AMc6SfuLJ/FrqWQMPAOnJspl7NjfLwFaGK6p/Vj0Qnkya68q/ChVJDC/hI\nkBj3ywEdqzObx6ult/YXojPNqHgOFLEC9vsk0IGZlFVJOmowit0yngttfLd0\n4DoSJdiI1QoMJOMAJZJXKw/40AfaauaRNAXjzRcfDCqjGiYFUel2srcSAaPb\nd5Cqh9NcOR9RAV1mYOs2Iq2ZOwmuI1zfq5rk/s+6XTBB5mvPjgVHdlqvcc3/\nZ2WbjqRKJ8eWKqP4jWkVeUEkCDnIheGL1joif1+l2i1dOfdUEmZt1ERDuCHo\nnmGHOv0jRLJZUhlBWcDFPWZ79Gp5zJ4Bbz3PcWBGNLWjW38AYydPZsTZ5GUB\njB2vrIDkN7YZa67g4sIjpsFJadSgbgpyMZyQ3O1TBZeATRUuZW6+V7/tM0US\nu8l7j4mgVO5t1otteGFW7pPmd/P4ictXI480Z9sBfY2Sl8iRZDveYYDHY7xh\nM/UXE8xJ4LvbSP5v1ESbAtqbi85Kt10jM9bODhlctgjxjS0QOduEuWHL/JKD\ncVKw\r\n=BYet\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.67d780c79.0_1615924005837_0.8935162026790266","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/theme","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"990881bdcb4b8377c4f2d5b4c3656b210dd97ed2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.0f358ddae.0.tgz","fileCount":42,"integrity":"sha512-wlw0WvTmuaeAPjvordLuG8+6qOTg/b4h8CoHis/v47diYzyj6OV/rcqNuXR/OzQTc/Z2Qg6rNn7Ms3Dk0Ejszg==","signatures":[{"sig":"MEUCIQCP/lmk8VHGG19K+wSy9setuICTzPUEZJfssNeXqs18AQIgVYjax6QH16C9x5KYEByvIOFC+FvX8zuu35ORm2SI1F0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS0ACRA9TVsSAnZWagAAEHEQAJEWuqFjWe3bC5vZ3Iv7\nFXFyoJaCI3VQH6XWgM8bSWNQZ16RhZjBNH0+zateRU361i6eKm1VYvh4akBn\nA7nR/ByXFAiVPqK6Neg9ZFeB9evev3h38N4yX6ATzwybiXYMr+MRi5UqqWN4\nVJIlqc+EB2o+g9G0MBjZ2Nzw3EMzN6hHW5VV+E9jysCIyqaDVGFyFohHRoCC\nnCqQfYHtD6Ys9UQj17T3DJ2pXzaWAYQi05H0Qr+XpIKV4xL/K4xUBeMJ8Nac\njudsrikkhyC8ROj1Y+PSTCcvBEgl8GVxsasu7Hz2Xuk2xtWHDv0qTXO2a2U9\nmUWzmbRdXhGKod5fSRsOwulDdFiMyRdnJ6SuDn7Cf0vte+h65T01n//VsyAT\nzbuzYkDglo551bXQ/vhQpsBPUI9Lc4lkrocw8/uCJ1ztCxU3SkcmO5Z3jeeL\nlQgn82vsz8auRQnN/dfnirzimzGOXra1KlZW5+hzjm79/9RBGAqXHEKAdLXC\npgFM/PfCSJPnhgVoOFI2qsEkt4ARWbCr6ZYGNqost6wFALY9h70NYMKB1Vwv\nr73ZqRbvcBAokA/UujButAkASAwvDXMMLH0gbpbDbUHCo22EYoYpaEA1u7wO\nQCLG3QUwl7cVCKbf8AYknzfQUp+OkKsy1XYwb26okAtZlpoxQRot70gBQTJW\nnC/Y\r\n=LlDH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.0f358ddae.0_1615932671681_0.7355609168320174","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/theme","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dcd9ce823209a3dfa7f5dcdbea777c0d03be458","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.67eb0df80.0.tgz","fileCount":42,"integrity":"sha512-uIKqrxmTuUTrVvX78pM60GFgqMyK3dkU0cePZu67Bi/MNQ/NEx9wcFaEL7zEpd+B5kI+QFtheumE6hVQtg/s5Q==","signatures":[{"sig":"MEQCIBWJnk1UbNFTAuWrZze7tvmvB2Wxl6xxH0jCb2/4CYI1AiBvF/xtnYAka0OOYvfOqwnjFZpkaw25l+qKgMQicZkotA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTNlCRA9TVsSAnZWagAAqI8QAJe1/hafsJ+xzxIo5rol\ngmBl+c7JLGicUPhyC8ld3NcyXAKFBv98RuY1a1jo2D+Slm9gjrKbHoZNmPkH\nC4lTtOY2+51+d/iLM0Ur4we8BFMY2CChwTD8NQvsu0wNKQbsaRBmFpyUawX7\nS3xqOoRIn6tbmbZ0bIUjd+6sX4RvN0riHdMDNuYCTRFxDf0H5hJVRfednhAL\nlNnfCDYwzMSuqXNmncmJNxK+FkHyPMt95fs63wrP86KehX18QYxBp/wClMl7\nYxDSrGuEKflU6HM9onjxeAzbNqFJt4AKeheKDgEzX//vEZKNlVpU1QO+UhNX\n/99OKM4rfPoO+zwLjsUx11KnXzKBfMxp+yQPTb4vRiqEU+RWkHTrfrWfBUVl\n1PHe9fx4NqnKxHpNnoCkopa8Lg+EH3PwqfUe+wlMDRAPW7ehhFOEJfrRvjZN\nLxcvtN0wztpQd6JdF0AYaeHZ3hQX5YrLCrhlIDSkew5AlpvW1CJ7rGqGVXzN\nAdFyhiBecetVLxcGnYrO9oeiU2+5bBWin3WwoTs+E5tXS+MQ4zi4vL3Cz7zy\npbTf59WCpWpiuGyuYy1kxAAu3hdsOpzUZXXMQDACHuyy8CzDHINu9CfjUDiJ\n7nIA4h8Ta1vhh8kbOTeqa0gP+GE7ufxHfLO4skfq/AgSuYnRLrdf1V0ZpsoX\neBBc\r\n=BwG7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.67eb0df80.0_1615934309263_0.5652755957087601","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/theme","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fda99af5376ae15a410ee670fb2b251a23cebe62","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.941ca3b3c.0.tgz","fileCount":42,"integrity":"sha512-NkZRTUIHAy6AnneKoXIm0zdH90KFGIQ+FNsKpnlk94US3JpdAQROD4tDuqVrDPZwRZ/ae4AyR7pQIKiQvDhq4g==","signatures":[{"sig":"MEUCIQCsz9G/95Ku87x7nE8NXeRXY9LILieAxovjScC26a2GCgIgDGb5KDdFfOybUFWR8/jcLpx5Xd8DDbRwEQpnLTzm8y8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTPSCRA9TVsSAnZWagAAt4kP/0XUzdiG91yJLGL+DpmX\nlgFOV1+WhbZBWiL8rGQae9FuFddxT4qgCHCpXezO9rAZT78zELUWXDwuCVAl\nBk8Wstyhc1Nv1b9WCz9n6DonSSNIe0wPtmcuxVpwVRh1vbN0/4HN6RPJANFy\nowePFJXynoYznDeOs0VADClQyFA7otLPV80kVDBeVjb/9MhbFfTzBgk69VkY\nGM+ZvhOw/z0sQ7L/0zVfNfj8rpTJ9eCRDnvW5awuYMzQIdv1/LkUOWDMdjed\nEqBt//tEWTvPLUySKKMxmJZZJJ1AMU6Zic7BSbaYAmPSiLepVkkgolzZ6J7x\nt9meN/ZolFJ2MjpEC2SzziPB4qpsQ4sP0fMi3Fj3ucs6/pYcqmebrJeRY+Ds\nb44Rhsx2ItYQqBhlFdBX+xvzgT/y97RJz+z7qSQGJSJfLTJ7RW6mgXFA4LNa\nMqk3W2RGzfPL0wmtCJNnVM2ckQrAVSip0e78E+zsLIW5WO7Ji34csPDYCv1K\n7MWSjMK/tdxuFOuQZ1rChNUeBjDU+/t3lA8qkeuBKNG6AErKqB2TGh75LBeB\nvIGdGVuG1WOx72UejXK1nQ7tTBDdWUb/+2t69gzBuL9iTdjQ7ihHYdSZowSm\nvBrU7a3R4zohgqgdwHPxi1gPeMX3ICnzlg3bP7I1/KiAUrzicA0l5OLj7LTJ\nIAPe\r\n=vN3h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.941ca3b3c.0_1615934417677_0.3745858324196196","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/theme","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cf9218307342d9bcdb6cb84497970c13c8a5153","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.3344d12ad.0.tgz","fileCount":42,"integrity":"sha512-4STR2gVxk+cbmID1uiFktxgNIgLkBarnxebD6cjbGvUDsPVauFP+YQb5Tg4XUoM+8bTg2d40oC5jeCwXl2/hIA==","signatures":[{"sig":"MEUCIQCBESZ1fcInB+zPf69NlhKyQo2seEyxIbboX2kIOAfn8AIgZZ+UeHjc/gUKRUwjv8pK8zR+uqXA0SmgHmhjfo19k/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdNGCRA9TVsSAnZWagAAm70P+waE4L1gB6hjyr1VEmiR\n/YinqPfeqlWi8glfBezsORFEXi9SaLJP5Fq6ZY9OXDnwepicPmvTFVo9uLW+\nxieDvf6IBlgxMKFgsCDwvKs0J5kWoMaPO9sJhlpmgg1/XphsCDN4JkTaBJMs\ngYtgyRslVyJ+/vb7jdjKNAs6eSqbI2yeJLpKUwIGAABxiTpzk6bd1kyL/l3Q\nM+BNlnN2j1RZ7ISxzh86no8XP2txJDAt5SuNtEKBwbceL2AHgcdX/p8WJMTL\nBya6LeVihMKsd2npJF3rskc3mIGn+IcOarFG/QgDHMSXuvgOp2LHRycPd4/k\nQHj0jdbb7UjnjE8c2fPvRh8U2OhrWcoeFsBQYOUCycRxLibP3QSALgzc7p9h\nts5yB5Xdb6Hiy6m2xGrrQVMTFHztXUQ3v1tz4xNILqHP3KnMspYJLy4D59Ac\n9kv6jmM7YWBZiLTtRpimbcEpZCrAxTcz+I5qsXbQwQbElhVjAAMsFhoNIPDv\nXYjcVsb0F8DEDMg1RdaqM19ux+KvCzadneuUFJ4QEjrXt5ZJEIh9mK9sjXTt\nFpK5VNAmincuEuAxJB9BVO2GfGxhbfENkQcJ3X8Q2lsRleGvGiPesujwbryA\nogaI5ULkEz2bAOdeK1MA5OXBbOZlFW+s31FlsuTWGxEMJ5tueahy9J+7UlKN\nIdOc\r\n=D8Wh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.3344d12ad.0_1615975237806_0.44678942636223984","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/theme","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.6072ed604.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11c8b377f34f51db0f80098fc8306dd1e8059113","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.6072ed604.0.tgz","fileCount":42,"integrity":"sha512-8Dp7e0uzHLcBIeoZO1ccdncolZ+LBrjjtkeQwSJ1yuTheN2y5ahFW1i1bPj3J3jMQ9B73EY5a5o4sBYtvh9c5A==","signatures":[{"sig":"MEUCIQC/YkDs0k7mcFQHOgo/Q4APUK8FVVzfhSIVTdgRYfhJcAIgPfCRBwExNBkiGR0UMsHY6YDmo2CMvA1221+bAfLpzxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUomUCRA9TVsSAnZWagAAJekP/0Z8BSPFfB7KI+C3F8Zv\nBXj9YRy7825az5mAwxeNLC54VP7/1w/mZbvwB76f3PS8zI8OPcUtz37jw3r9\nlrl9oEkPSdPabbQwnxibDfWzcqD63yBZDoMHzwv/s6VMiYKKIWrmWCZxt971\nVNbzlRzawB02CrjYn1qO5JEwGYJ7nPIZJ49vtyRnJ7crUlMO0hidZj4cxgy9\nvKmLAkBSwQXNjsS7XFbc86WeyAMmNh0b7+1D9g7RcPhXKWTGSYQpI+vi0ptn\npn0XeMQrNz5Fp1oJJ2C897uPH6Y8uY7SR54Yh1bUGDQCwhEUyY3Bd8mLf7oG\nsHSqJr/BnnMRyQeSYLN+Bn/BUvq5vI4qa2MIWKOt9eijEW0Xflubv5XZYuMI\n4FWcS/E7zXRQ5BS29LuS4Z2N+8bOBNLui064jkwg9GcivSIf+L2v2PB9Bfo6\n/mPkApMFWbg3wV1V4JMrkTnCwdq9UnZILx3meTO483VgC32tEbuVuW/trZhU\npMpjBHHfTP8RbEAN2mzZyZ4Lag6XT9Uhgn47Gmzbv/aTB4V5YDxIvX5qtWDU\nuoZHpylPQsixmFOQkHjkFaqlZ+c3H+XCNEd7dZcgexdjwKlE8sy0hzOF8iU5\nwNWZRc1Dai4KXPuTBQ5nvHjXi84xUpTyHNuvEk/fXi4a4kqATRC1x5R1QRBD\nLRXB\r\n=ivUv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.6072ed604.0_1616021908235_0.20699761040171882","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/theme","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddf443fe13321a241e1317367e5a31f430be1094","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.d3a6862af.0.tgz","fileCount":42,"integrity":"sha512-Kze8wq4VjmyKWgh7/vWIW42pS/hcjgdIt1MolrjKVX41R2aCa+0kawSLKreIF9/LXxaTfWIhOd5fdfAdxoWpgQ==","signatures":[{"sig":"MEQCIDZC3qPKM2k9NiQGR1PotY2vZkRxqoVWLdnsTAJWHHPiAiBujU+9N5+HiXUwniRiZMqSIO1cWdl/sR6+0vh/TNJuVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU31oCRA9TVsSAnZWagAATpkP+wfeM8tkpcazPKgo7pUl\nw6TAjoWbXE45Tbm7FEN+MDOIKpKTVUvbOxiBQ8RfbzJ+n3XRcPhXYhSzW1k4\n6UFiZbIUb8/u1rqeNPOQdVInOYq7zUtG0wjhCJYA3DazWkcrUBWbn53yeYKM\nHMK3+7Z3tYpaf49i4YtHEx/CeCI6Wsg5TPXyyEUudiac+MHW/MBGCvTxTK3C\n+dyeBalDVRubbGiD+30xw6DssMXUn/2HWPd1KT3GyPscHTgWnsQl4jm6GF8T\nW50XpHhYC/iGEDbKe4v8mbBohQ4bbKhrVpr6yE0VxlpFmdVFn3YLEnyGgiTC\nTgjq4bY0cDTF2MwteItYMDnZel6ZTEfpawvCQav/tHF8bWjnBNIWcnI/F0XQ\nNY1zBw7NIZWdQV+wqmdl5U7OYcZwiVjMwWkgXq8v9NRlx5L1/+vVqp7TQcvi\n8kcyceKi+tFu7Kl2OEisxKHtHe68iGwJsAnDssegp+ydfLjv5eqJsSvlFlHF\nreS7xAXVJm3zXxHbRTrevawp61Smyn2XJUyCpRC0h07kVtxBVCCluIhPeqvI\nNAQYaN0QKIcA5xan09f/62BlCUfKMzYn3A5eQ9XtWwjM2SsF7BABPADnfEU4\ntDFtgR8h9V0v0MuNyZaUrKtvS7ezgozY/EMercF09xl5Np1FNXzQ+aa6Xdt1\n0yvg\r\n=8zNI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.d3a6862af.0_1616084328009_0.26972536359991417","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/theme","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0b7aa6d2da9ca237e811cc1d8a5ead07917c23d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.40dd242d5.0.tgz","fileCount":42,"integrity":"sha512-29j3tANjvu3YgMWEPXVld8fxuEihp2Y4G4orKexECZ34rICE1UBPdUeh6crGRaRLTknDQGoDFqtQaT9NXShkfQ==","signatures":[{"sig":"MEUCIFg3rztwPzrW4ZsRy4onitxqenp0xCA8wLKMWXrBag0BAiEA+nc9A1f8+JIF/3DhQB3PncDGsfKPoYBf4+Qx5zprgDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8MYCRA9TVsSAnZWagAApzQP/25q7QexHD3Remxuh835\nMJy5HciYUOe3MHf8gvOkByJ1cnwNQzGiuZ1BLi/YMeN0zOEGkChodEOcZlJ+\ndclCbnkit4ERpG+nTAX7Kp9QWB1jKQZmLC7dRQbi2FsUXLVhNNR/sk67i8dZ\n9OQU7XtfVjKE3nYfg36vtBvWQBp9D4tMIZToiRXDcQZ3opg5YSmIlO5s0hCw\njmUQY4WNqcYPd6NPIqE9FuRXukXn11OY80mEe3EIXdlUgrzpx0zUvBb3hsT6\nEbir+HEXxFLd/Bo3D1pDb67exwEJXO8CrzWuXY2Z0GqNSpbAuk1LZ86U9q0W\n0jT+BWHDTC0pm+Nuv7YLjgrAVeJemluPt0ISQKNTk/AcPv1DbVnCehuXGiL1\nJzg3jxKDYYZOEagyz3E6h7uZ8snJ90XKe2Yu0WHRM7Ny1zlugAabh42OnPMy\nD3BvoXWFiMYSo5sNCzqHKQbMQRwet1ew+eJEgXmOrWWmqO7omCPEGc7Kvxl/\nN6Gr17g3+rowMXwU14CrDJexNk8EfBV55KVyh2+4THkj1EK/ALWJYIuuUASV\nTTIUcbbCeVXcoSgBh2NRhaNnWQaRRtmbOZVChc3QC1w287UcF5ilPL1NdKm/\noMvRfC+0v6Xe75kE7T7pWK31SO6ktBhcAvcOrXRMi+RKfE6QP+dsTnUjgylS\nVqj8\r\n=vq0Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.40dd242d5.0_1616102167829_0.2690584213314009","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/theme","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"334f09d67aa54ad51a1740bc784f63eede17ac39","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.ec8f8465f.0.tgz","fileCount":42,"integrity":"sha512-xB+nHGg8oAKHksCF747E4wTyBznT7VfGsMFXWG9jDXhiBrNnlBYG51CrtkotETSRLQlV4f+WW/ucwZGN6PeYRQ==","signatures":[{"sig":"MEYCIQDyCfLP3qW3BUPLwNrF3kYvK4nsSfhKNMc2CzM7ZtxsyQIhAJUTU+cp2aAE6LEb/83oStWeN3a9vVOg8mmWQmcq4tGh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8lmCRA9TVsSAnZWagAAlnUP/jCGuI2eNF6WQkQWV/Bz\npAPv2rSsDJoIqGcOgzi1Jy12uGtMMUzXrXhvbg5eUtGODU/TK/WL1Hb+n/hh\nNhHP6hKZxDefZLQ7zsQFjiTAH4o2jL/CdFDfOtiQ+WqxxVpatIYYgRsdRUIW\nKZ6V27r9bjlKYGbpSQJu9i7xOHNJHh0uZYobFwiHQVZejNJ83XV2I6PdHuuo\nxeYacdKD22vka0RqqWNMHsxC3drjxVGKEOQszJoF4/q+Ek4xuNxWliWchtpW\nClj4FVxIGeGZGMbakpyG2iRPHUIfpWIxTBVugifFfFwVyjxpzEha6EJkr1e6\n2pHEVf+z+d6S07CLM2P9wTuykI+L3t+VCOBRej+0627T/AD1XS9ec5Y8KgLE\n178fESWULgMN/OlPXl0HOfksz+0gsbuP7nb1Q9v15RJJ9M0XHQ00Jjdh4/sW\nAtHld5txypDzRtiqodSPrbW6O2FjpQRzvnufJVcsITSYbygd8z90E1K/9t71\nzSceMjNAtG5C4/3CdQwBsBpa/7yEzNRZEYk3+jv4WwET9uNZxi4omiyeISiJ\nv+zn3GGEsXcvKk84OBuCtqkfrnZ7cOqj392pkoMhkdKhHZstkH8nl7nkpo1k\nXwjQVAXZq1oFnv9RD1Fr6auRrtdzGn99K+GDh3cGrVg1n6nayGRHaziAgchv\nu9PO\r\n=ku1m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.ec8f8465f.0_1616103781663_0.15026613167606961","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/theme","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.da38969ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f6062e21ff1612f72892de786019c0b57bcd966","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.da38969ec.0.tgz","fileCount":42,"integrity":"sha512-xsPF9aeX/gn23yRO+U8cfr9mEbVwjx/0D5uOspl4d2nYQ4VmuTqcqLzrYWUOhYxdNQRjCeS3W24ALxg/sTcg0w==","signatures":[{"sig":"MEQCIDMl4v0CABwAZKNBzcX+3KHcV+WJEhXzn0x2R4QX9zY2AiABkAmPdvVVmLQBWEG1G+pM1oXzv3S44aoYiPkKOJkohQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9FOCRA9TVsSAnZWagAAgoEP/1lkz4wPA1/nrsuhaODR\nFV9W9/QPs2+daLB25PmJ3oa1kz6cIVgIS7HYkbcSPgD0pNadhdQSqJdoSgxj\ns699zAgucdAL7M9J4UeI1jpf31xtuJRoQaRyhQVxvFs1wJtUfutgXi0Q8ypB\n2DNXfjm9cE7sIU4Kk9YtoErwvb7TsFPsCvuzfZ9Ie7O0tbWtx+ulDcEBemWd\nBGsZnlyHGKxxJZwBhY5zfArvBDUkBptP/xwKbTwjp2+FpTamQReqIGr3FQTB\n+rQ9Fwgz4U4LZmfzdhi87jvWboNsYsTOkKxYy+FLIC0Q0rilodIqx/e+fdIw\nc5HqFo+1vgSj6MC4oPE7J+NGdsg+r1VMgMkfluVQk+pskgRshRtmfINQAX0Y\nmqTSAMITWGMAGMhZxn3hLxnvGhE8Y+yI2lOarPDB9S5/yZqSEW6DK5BHbf+T\ncIthECQQtyy2ne6m+ITkcSf9gLa47wyhmU9Zp3htYHGAOCO/JXcrat56yKqZ\neLN2wl3JKSV316J8G19rv9EYn8D+ddOOXRT52ocak8nP4tI6DI3/PuTjmNLE\nXAA41BGKD8LP3kUJufe6hT0iJv6IsYPLU5iO2oEpny+f2kLrM33wgvewY2iw\nvydTRMck4ZdcAbnCFpAZZ3wldCqBCUMEvvoOitymKYUF54viUdlJr0VnZbak\nWCLr\r\n=o2ZP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.da38969ec.0_1616105806347_0.5333921393093242","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/theme","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f5246264d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"babc826e27757ebcc1b352557f29b6e19974aca2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f5246264d.0.tgz","fileCount":42,"integrity":"sha512-200gPUccGrMyb4Sj9zXj2c6Bxjg34zbH04L+K040/PZYCd561EQEaqWTngfs52jFxdMyzYA5190tRt5IFPlhdQ==","signatures":[{"sig":"MEUCIG0Z3/3WZAnBiX0zMcM/QXQu0RI1Et72OHgn6nmtr667AiEAvtxiyFkHlW5N3+uYR3aZNGfirDqK4JyrrXOncPcQsd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/IbCRA9TVsSAnZWagAA1NUP/Ak7344oT1M8NRAsS6uq\nmMYr0hBz5hFAP4a+M5442/BijQ2RHjB/Vy48QY/UadfAfg47bgpxKrqRohyT\nPuY3qTxcRQ7KVYf1CN4bxA+asMYmeMMXzXUYNKca7VmCYtg5q1kTUg1O6EMC\nAWb3XWHkxVzq/1E9gszhdZL2g3H6wioVqPolvp1AQAWtDbbJHuMgueVuaF92\nUKL23ae5odeevNmhj4X5paHWhHwH61XoYde4ij9YIKdsTYHmX4J/Us5UdqHz\njOWjbMwFS/W1RmQbJvDKb84Y7XzsfFDx7Ff+zeX5aghaXlOflgB3dWkPbYbs\ngMWcfJFDU0yW4qLUnNs/gte2EgWBIJvTzDx5ErXcA5tPaqu42mdtjxnUTQKo\ns/X6Sc6oh53Bl7XgH9SnBSjkb7tHiQkB3KLRH1dtWW9QZSdPTi1giIe8wpjF\nxU9xkvOZxYTt7WVrwcS9yk1u4LSLst7c4OSe5A/eGK/qXYZe9JcXm6b2Zxud\n153Nt4JBYz0UiuzxvRhriY43qDh4Q+H7+yvj8Zhu+vyaggiAqCFzW5qRO7ZF\noR34iWrxah2VU9phbh2o5zipoOzNtnnJ76cVS27aMoTdxGPgWRgw9uPpBZFv\nQGVGiVjJWBDjWR3ttVjXOXGdwDRVS3qU8/dvF+zba7oH7cKnW7iXU2itMakK\nyrz1\r\n=OT7G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f5246264d.0_1616114202802_0.5759075445316268","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/theme","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c817b27d607da13dbd287726b05b834d3a0379e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.03d34bbad.0.tgz","fileCount":42,"integrity":"sha512-lI3rPyIpVopq3dIuKLsVFjx56sLO8t45T7FU/76REZN+PuDPXFyKxkdRQfnietdqhdTk2/r3XNugxjHkK8MNoA==","signatures":[{"sig":"MEQCIAFrKf8PJddMubPCMvq0m/+gOve4cQFP46ytNrOAjpLoAiBwCdOYQs2gR3dBzeNigkwp6DsNcmZfscEZANw1OhPPvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/UzCRA9TVsSAnZWagAAVnQP/iPJd+wzefl5VDM8SXLC\nnXtsIo8RprK9Ae4+qpN7dggeZBmCiq3bDL6YsY7gqktX3cUhFis0u0vSgzoN\nPdlz7Z8lJI0otLjTT13lgFSclsTZHVexU2xVk6qp7PWXUvbNNTOQ0DGyEWpO\nG/b6KGkVZca8PyEVjE2OolInHBlLlGTM6H3x/1B0bl8cg5ALKd1z4+k4lq3r\nilucrGmx2vhwNU1BNBVddFbWygkaaj1kkUvTGZTB32dqKXat9GJKc/uEue6N\n/AyJ/K5LfoNU28PuWOIfDZ+DwgVDr8D33VH7vlFmq552OW9cZpuJLalzqnrR\n47XM1CZS4vAn9KtZSuqdDaOXETY0q8NYaFGxjV+fjUuh3uhNOv0dtxmlYfLy\nJv7wO/uqTU6pgDgERzpVVcqSw6a0Tk29cGp4GuW/IGf4if3OkdRjCugT41kc\nW8IxYSIOJLCswox3wih3yxZ75msuKO8r3iJR+7NhOJRluTtwZd2Doj4PMVsx\neG64RL+pF6rk98cxwr2OojvQtmhjBCjOcuWJH+utYnlVueaXKal/P8Muo80N\ncXm9ZneinQJenBf9IYFmAOGVkPHhWL3mJeI7TPBp+Dsm7VABh3e7vGZLZSJN\nfcocfpQSYnU33Mv300XxPjAxqoeoR6A0Daj1rlWWOX5X6+lX2i571xeiij0Q\nU4E1\r\n=XbJ+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.03d34bbad.0_1616114994722_0.38390074362482407","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/theme","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96794683c30485d87de89607afb6b8949e96c167","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.cbc57c600.0.tgz","fileCount":42,"integrity":"sha512-aQFbTQ3ehuStWYxwDDigkp7ojUSmQNbpjx2aLXJqhUYHGs66Cp4AF3bWG/5Q+OGpyNLNcLoLE43kK+mfebh/vQ==","signatures":[{"sig":"MEUCIQCkG1zPUghxm7glHeeHWPiNrUOif/86sFfBfpDIrVIZkAIgQDR4rcwW5AKLspt4DVsLipm3bUIt1rfZ6lxw7euEZ7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/dCCRA9TVsSAnZWagAAglAP/0Ix1PG96OO3bt8RV2X8\nmPAEg0P/tyMndn84efBdKgvgfnZizaXUGaAlgkfX3bflwtq6MUpb0zHQ9kOH\n2lBbEyf0BZl3u26QqMAt9f5uoUdqlb2caZRJ9MuDLvlKRlkuMpO1uKhn1eWU\nCEE9Ts8tix2ZzrewE/m/QjfQHZ6S3JNqLUG2xkm396K/BMZ7nvXFifS+CkUj\nbTYQKwZJ3gBkky5TTMg0p6m/bbXCE1OiRACI/GaLl+EuymTwC25JwwoL+pQP\nVf/xkl8T2/NX3Gh+ys6MdUIhlTvftPVEAYKPO49hGATf8ilfS2S1UhjKjJt7\nOeCM0vP0D0dFTpXeEbTRokEFwCpT9in1KYcMTUJkDFQ3ahgl0NXZQJAQEsqW\nPWjmTDEhF/Qcb7GA4hxd4pNfSfFI7iyq0D7kjRECbwBoQoemcLZRyWf13Uxg\nlPzKo+HtGzErAxodGnB61BG0LtQlo9ti3uKFJYcOi2qEO5+BBVpC52IqrqHV\nSZ2lhv00OagXU7MLWPXjHDusvlDtgZFDF1E5IglAuP4YHxoROblexM5j7BEi\n79OPfJQF9JhS/2TnU/ctWIhrshWAAvUtFaSgp0p9boWz9FtqSoXJgqK+Hpbq\nB2vlhBqkTAQ5JYMy2dIMGNyzUkBMCSc9bfwLyhynNth+tQxKa7smsHMDUcwK\nmtyB\r\n=3qeg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.cbc57c600.0_1616115521312_0.1365398195829779","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/theme","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e8d201ca3321b40aecd5ea2f122d58e2f7aed92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":42,"integrity":"sha512-blxuAlLXUk3MVfl1jdm+0+IaxE4EKqBHna+Sug/XtvKDhvrO8W50s2ToK4HSY8Jq5vv7DvJZTOVT2LVFBL531w==","signatures":[{"sig":"MEUCIQCs81FttWoOIwQD2Dpej8WI0x0NLEoY5ZH0jIIs+mSnTgIgCaKRYKfYMa/wIQlBktTCmZKYfcDtpCErf5/YScE3QDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/oeCRA9TVsSAnZWagAAmM8P/3WMdpJsJgYY4rZzZxJF\nuZPrAu1Driqn+SVhKO9bwNVwn4plrDXMk63Db5La3yqsq3ks+9dlXatUt+ek\nFaKA+i0JuScv8dKAmduiEZQOFrMcvRML5dJeoWV7EXTf7by14Rha+u4k8X3W\nSPaYzOQqpmtFQkXN9mwxSL9xQFX6lfNG5deBVZ0DJahYOF0uLgsRndidLxN8\nqgjktdiCSYVuf+N/2uErkz+jMIbB/m6OrSOvUqVX91nCnGQ5T7efO6F5SeZP\nP7/0q6k/D+wCgSU4MdZj1hyX6rZcTAoQLmf7963vuMol13Uxru5PNpqf+LCo\nPeiKjSCbNDktdz9ZRcZlHSf2SORS0ssTETl4f58z2izLW+myrJ8FKP4SZG3f\njkgnmKCODdYc/H/IPEk4JxHm5b6bOLL2DLo8uBMQLONaRnJtzYiLZn9EMLQG\nvi9+2CVxPIGP9chKdLcQ9tFgGD8Y9S2bsyg3hFizHCjdUzIFmJ7sGri87caW\nTr93+bX6COHqAUw7nW8rt14A/LjD/Nf4tctBFmM6zmCg8IcUJma6Y0mJoT45\nCBpw7s7p0bQIIsNybdan3+WB4DFwV0LwQ8VgyXvxhc9nGtleqb3bTIJSilBB\nHAlaxH1WmhBslRp6l8qblnYhMITHUOsAehpUGV3dlFjjRywigXa0ffpEPqmY\n9YKb\r\n=hGCE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.d6c5bcf37.0_1616116254096_0.00813560131741431","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/theme","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdd482146f0dd61fbbba4b4f9ff86da5bbe7d1a2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.fefc668d7.0.tgz","fileCount":42,"integrity":"sha512-qeRn6TiEDrinlv3pV3nRNn9KhufKJL1mEP3YVL/AMNmmTXG8w/EUHzW6p/GZW++l1LPC6zo8uRVkx53UpJIo9A==","signatures":[{"sig":"MEUCIQD4JaTitd9LUtZ5s6SnUu2xFsqKAzahLa89yKzAnyxjEwIge/oPUBdODAEVGzfjdVkr1B1jaRj10TXoZs8lUr0/xs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/89CRA9TVsSAnZWagAAbWkP/Rk14bSMKSVd2a1JIwBC\ndmj+Fld69GABroGgewsx7JDkJv1hRUOMA8xCbwBxpZrSYKDwuf7Mvb3JRDvz\ndUHhu7w2gStlTfcj54ByZM4FIx6QCHiOx1WYgMZ4D05/tAiubWnVzlF2vqf4\njFiN96EKC0POJ/Kpi0xjV9M9Kxdp8M1RYefbjmmDFBHQ6spHCly0Y0TzTKOj\n+D8WvW+gFu+CCH14uY6C1cYn5tMe3UD7JBcywDBFZyfeuCyhBeeReQ/7IpHU\noVDXO6iDGyFD/rY3P1GTtkpt+PWSpb6nS4LG3xw6UxLA4AZdcwTslpcBWwOS\nA4dUDl8AXsBlH5IKHwnbvM7xPouWaWrN1slvqYymlQnarX7MgQWD2aYBLdAT\nud2sXp16ZPLaW0Xw2KGxj2XiTqBTESQ0GvqpCNjR+OeSiO/nIl6sy9XxLEal\n1gjnauku0hfGTtiHGI9HvlmHhH8l+Mn7T/jBxa7XGj3JT1aEUAc8/IxM31rh\naY+nNuJEWxXi8xXBA7egQAkd/yUYtNSG1OIhN225uGpdTLjJL0F4f7tkcDxs\n3GXyJmPyKrKZodH1mxPkGPeOWhvNid8tXT8SL5MQiAlwsFxAzLxh/jePi6dI\nhkZHuV6RXFlr5aBbGLqzPv0gxS9xUxxOrnjC7dFrYZwuDwwtLaeTwqlPnSgh\nvzty\r\n=+dXp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.fefc668d7.0_1616117564807_0.3773235078016739","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/theme","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3da1cf60d2d3d0a842642b632941ae22caf12ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.faa7d3226.0.tgz","fileCount":42,"integrity":"sha512-LmWageJujRc55CDzxHgQ7GjQRiN/gizOwjJzRYt/9g6PrYQh19PEXKN9SKu3BRcaXHgcltWHClZJNj2HDLwF0A==","signatures":[{"sig":"MEUCIGF8/eSiJ1DGfzXGHhqkNlmwTBVLWqBL8bBI+OTckJd1AiEAhAQsajXJik6PncHVsQO7SxuC5QEFlpAgQFqGYvsdBvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOKcCRA9TVsSAnZWagAAmZ8QAIOUcDtipSIyUgf8q4Uj\nyfHqYmIzXfQv4mKBGUGmo4a7/1bqDPT+dq9uJsIO8L44fnjbwZBASRVqtf2x\n6fpZtwsDX+UsfAejN/cQhHKx3PWvHrTk5ackTsHTOpXzvHsfaZZd/rSkpZsF\n/nksD2f7V20opscWo553MEHk+4JWVpRZ7O+ZCabjO7ztierSV3bzXx5el6DQ\n4eSnE4+bmGvx96stvhC3Wzp9qG7jkhFQGJux1/5mO+kPhjZ4bG5JPu62johW\n94VLoaq+z4P7whCvM59joWxzVLeyi+GyMec5A8KG5k0iNCayaxfFYScizRIE\nrGOnF0atZ9u2rhuz+LwD7tjPznDbB5tRON3hmspEZcNZw53FgfZJSpuntw1L\nvH4HN+xlUHEAndMOM3ivkdCLzrnQ7wbawE2cpT5C1JwzpW9yVyqo6Nqr9/ka\nyYagLFj/pbYTTA7Z1tZRyKUPCj+j3Ja3yUN0uLc0J+pm191oWMgKRXKge9hP\nGBh94b0eI7HqFUqCAKUbynlm8bAGI88BvRiVZsz0CFhlMwt4HRvzQZtHIr5I\ny5xX/PwuYLS2bvZ/fbjBJYGCAnHqog7W2Bk68B5VgKPa3lwb2eA8fKUPPRtg\nZV7PWF1zidGigoswnzYEaBGxkYOTx4eoDv3mp9vFtgrhOPWqHv2AU41GeF7d\nv8CP\r\n=TbPI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.faa7d3226.0_1616175771929_0.6081725097373583","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/theme","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c323efdaa05615f510e3a34553d8a5f39214127","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.c60449bc8.0.tgz","fileCount":42,"integrity":"sha512-opm4qaqE1IZPBtgVis7nl6zOSKe+Ihi0IHmPHZNGnwnKt8oFkJ57OjCGfqlHVAUVWtMKHsf/pbScJ/kpRmFk3Q==","signatures":[{"sig":"MEYCIQDSp/K/AymFn1oaI7JhPSyZu8U3O4u2hm8KpdzfZ05y/wIhAJ8kpPv/Tf/0uFXuhObFR9Sr528qCfO1KoNbOxIcW4Q5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOeSCRA9TVsSAnZWagAAdx4QAI7OSAPvJ4EZ9e9r96UP\nf16L2NAsiF/QVFC70l9+zGBP2dXUJ8iBoGkSiMmoJwikrGAVxDy+0shc6Apo\nxTkUJzRCI4Dn8BF4Gprk8H9MBlJTAcY/TNyKXJZoKvAINMYSotRqjc1DdvdL\n0b00VceR8ikC26ewiBknTJIUQoOF67CSeR/96sEtcemd2SekYAdaupuA4QNd\njKvoR9qr3OvI9jIxMwuaStcMzf/Gty/rZAnLnewa1Q3gbO4NuNnSdzaaJzu8\neyXGHy6cTlzojjjgzr39x2s9nlKvyMnnu3aqgFGzM+d0HLorzw74enSxIyOw\n9q+/LXsr3tyJEicy0QZyAuyqRmOazG+selg8Tlx+SOcR0h87JdmZey326FFR\nRjf1r81oocHsSCWFatquS5ICkBEyQe2oluZae3k3O5yBx1vrmAzAqQg9h+xh\n6Bux4OwL4tGGRdTIYjxoc0wYabvl3S3H3KeNI5Fn16dWX9iUUmqFMCRRZVTP\nnH459R++HDqDsIRQhRszdMC56aXpAswtfW8zM7kXFXFg7XZtk20stNqarMV+\nDSuSt/acr8Wz6Oid6EuiNI8qm5xPz/8UvoB0cPkgybb4rfILGe9QEh005KUl\nBPvQeS9lR2TRndA8dSliMAa4o3MY4g0Y7HF3VkRJ4NfVAJgSxtAD/uMxTquP\njlc5\r\n=rT6/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.c60449bc8.0_1616177041468_0.6336407050119555","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/theme","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a52724b2e4f07e18259683cdb082fa6ef0284f13","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.5f0fc444a.0.tgz","fileCount":42,"integrity":"sha512-AJMlXUgD4ynaaHqKmlopomRgqNLTkcHWNvnkjnQQdVc3QH6r1jjMjwRoPsO7obJMYdVU1dQpoyiOCxcGf9YdyQ==","signatures":[{"sig":"MEYCIQCa87hCuNohT68gDARtDr/awhHYWONW2a9WNPbUQiQdzQIhAMQwOGtGSf1V16KNkiRwedvIXmIPFfiTi7kv6ZZJ2DXe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO81CRA9TVsSAnZWagAAVNMP/1bMcs3SCudWvw+T2zMA\nvz2+N8iidoA6qYBF3yCERELVdA3TP2IrtQPwRkxwGrO8G8DoG3hxnK0q8KQx\nYlHizYKwjdrTzwNKXy5k0e0AZltnk6Q9K2paxcwk0Nf35ci+VKxpkEhp9a0S\nSl27+uxdoYcG2RFIah44+QimujgbsiW9MqmXy+3tL374TTaGaoPCCc1oyVqE\nmukiH4GJ3cUa8ou7/ouaCpKRlcp6wMKky4xT9k1aNLEeU3oyKRzG6K/YWVLD\nPyQBWt2iJ2W4Z1SeBEC023Wr2K0fN0R4vp+eSQ11ttxzJIKBTGVQEEryX5Ng\n7tQaijCQ+OgVdu92ry6LEzf/GFe27dduO6E5UXbU9n+Okp1QKfqPq0gyM3at\ny5UHN2ED3Li4k3123AYnFncKXALkqA9U8e+b5komSC6bgtjndHJsmrRSWEI8\nRfQkVo78aoqn1LPzCED2vvufhuuqI8Oh5MON6WUET3q7rzTX7vQSx4nD7+iT\nlM2wfF34Uh0Gx3daUpdJnkK/OXvJMb7IBWkLNUmVTBz3r9i0VeQ/9qOaS5Dv\nDptWEQ71iqZkz3+ptoR8UwWMv8wT0Dv3CH6MLjPnPbC3f+a+OAkX4F82slKV\nD0uSCkUDL6cyrICL5QWBXNpSQPvmIALO4hPKHqkrc/MnmCcbFiymvs2yPEfC\nml6j\r\n=qQgj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.5f0fc444a.0_1616178997556_0.5585720115349448","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/theme","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.4567a750d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c68cb9025b65214ae81b438fee3c23e9b0b1d947","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.4567a750d.0.tgz","fileCount":42,"integrity":"sha512-Zj3Kgs9BmSol2bzknNL5EJ7hS9YgywJ+HjDr4WePQMUYDG5CneSspGEF6PrSQfrrARarNIF1Q1+G3Uc0rxx8Ow==","signatures":[{"sig":"MEYCIQCgyNQz4FaDaM/oJDddp4oEtWuRxt0RRUODwylk6HqKSQIhAI90ET6hk2RczjGNmlrjtq/Dpb0AblbNR7dOCI0TO+ZK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVipCRA9TVsSAnZWagAAzHwP/jn0hpTnNpPUuIoAkW/O\ng6WcLoPABEd4GuLXFkOOwalZzl+kzDMdb7llGSmYm4o/WH58V75P1p97YxDu\nFNvolvEvBmar6UCWbEMbvLzzvanzVuGm4GEkuivPSD64yi6MkC8L8Lcz5GJm\nZBp+gqVRkVmIVHp4Wn7CWHuoncAmx884oLpm6YBJDkEgcv3/AkkFkQe28eAj\nNbuCblzvdMTt2TBW3S8O3T/1WqfAm5kJqM0lgvzlO/QOlBYer1hUFP6fkDEa\nzS5ykutpToupIdAgh3ltUY6TM0X+cMtXSz5baCiCbMqcppIFNmLS16tXBNdv\nVB72PY4kvlMzUw1Q/G5roLU06q3HqdQPgIr0PYZH1DsTxa2SN91JDB0OaN+l\njArDTKPYHUR9Gnz0cD292ZA6oe0I4vYy2tN9fGlm+Q17QAFi+NdkGOegzi4d\nr9l9aCCabgFcHO4JPQRcPwTSgXHMTj8mS0u3G0ZCog0eTcc5yGlP3zSQHXC0\nqStM0wHSt1nn84T0gsnF5wgbWMMcJF53yK8pvJ2Hxbz8If8Ew3Phg6OIuem+\ntHyQpjt2RLu7sXsMO2iEeSOqRTUtKCBl5fsFd5dM1czC07HyzuEGg8Rtm58G\nnF+posySUbuRKFnPv3XmiZd1rcuRdDQ198o2W65yqqHhQzo2ia958JHqiMLX\nVMs7\r\n=MC+t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.4567a750d.0_1616205993146_0.7578801444743817","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/theme","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae35f05f6295b2b7c0e49e81194d2b0eebdf553c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.0cde52f5a.0.tgz","fileCount":42,"integrity":"sha512-2bY4V+pVKLzQeNBwOO3PKS+6QST6FZzSgCDkW7j3kAZlFmCjz4nPeL7CYn0V6Z9jdy73Bh//YoPkkxljI2IX/w==","signatures":[{"sig":"MEQCICPmXuLaEIZy2o234OT/0H6vxn71PcITIlc7HxX2zmyIAiAneZn+6RtW/yf/uSP4KzX3DI6LIQ9T7oHXpdxdONGLMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWS/rCRA9TVsSAnZWagAAtTcP/AgeOGfEO+ordQM6WiGu\n4vQstvDRF1cX4LbrPjW6IrrIFJsowuuc2awRVr09Wz1ym+WJcQxFt56SscQm\nvLwzyq1FTRTUOZ5p5MvVKQqMeCRbsonhdHxdnJPtk4gUicHSD0tnZJE9pTz7\n8lmk6RFLuMoRf5BkmxAtg5Qae6gJqmXjRF1aqdQ05EVyOCM2R0m9vIBmoEwY\nCkqFsHM73FB/qLTncGU6Ktr6ycTvqaoeFBCsIvJ/pOw57OTbUq8JExgfKF/o\nG/4AhsL3gYmqU2ZVLBtzBOd0RO3g2/76JBg9rjKHg+XavLKTHAhAqCgYFKgo\nKrdqQQqIRbYlilAt5p5xqqqyXN/A6x95bjuBVHssou/adxCxNH9w3SBp+PLr\nBvyFkxH6NFRfZfYmcxjBf4EXl9JhaNYlthhEFJ08bovBdiMeX6XJTFwn2hAE\nxMhfAdHBLyv0H1lRkJtrUK4c19CvObz5gZtmUVPDgi3K/Jqpheff91prPNDa\ndDfShLqgY/Dhau2kWvStyhDHd3pGHmSDEuIbo2q/ymuWxOCCpFp4hv6zEyhC\nR1iOCHEGpgcoARqPFtimG/JOf9ccFc4gDDLchKOX0GcLQl5lscYTQudrrorw\nJMls5MuYnhzkQaxh1v3P+YIDQChvx/guAPenirCibbGwe1Nc3+/Y1wqQJEt4\nphzm\r\n=CDrf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.0cde52f5a.0_1616457707144_0.07436056801261337","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/theme","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c66217ae65206c4c5587d138826633e3d39010fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.48f4b67fb.0.tgz","fileCount":42,"integrity":"sha512-Nu5a0vfr7doyTD7sO85GLS/M+alToNuJsUM/MdM72pMngbFWeaoSa1xMvnPKPFiBNITQ8nSj4JqHkIDSsdDGrA==","signatures":[{"sig":"MEQCIEdTlli99IiIWdnliF98nuP41YukekTQ33M23IDOWnpUAiAMcS7m5irYMFuRTcrBsTKIhiqGBK7WaJIMKkgNOe/4NQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkcKCRA9TVsSAnZWagAAMKMP/0+JcSSFZACJP11R1hD1\n0gSOFIkipD/udHKb/qHk+FrgoN6E3x1kFLPMDAKxSOuRIDq9KT8OiAtYpq1a\n7gTei0tg8YruwvNimSoDHauxHLhePNIllyAVD6KwbUkKr4eFs8Ivf/neuH/d\nqpanod0lzjFWi/JbN7VyBq7S6tokrDAcNcNZf48CsTNVqmlxJKcgVHSoID6y\n9t74mzokFTf6DD3XRAeihhpB5SEvKedlKFzGv+wCwbF2oUEnk18FmtpJkjQc\nI4lKNJfDLFRGE8JnCYeyKPSpvJdnuyCWgvbmyuvCHqaRavu8FkSNU1BAVHdy\n/3VHRNcQriSb4L9ox8CqfGAVRnH2ds69puUfIxXIEMzpqqvumMQWqSRtew+4\nVGQiSwrcPqdiN6K59tTpcbbqxV5cYC6sBKYPgORtpMOU6i6wN05vRgSHjZAH\noD1sFkz30pxw2KyTlc/8s09VhRP6E0DNX/S/d8PySa2MLN9ZPX/b0YLBYJoV\nVOmkr04F35Hbta/48xIPNiDbl4q/EONtLrq17RglL78kOhLfoDcWjbMPz5La\nz2AjULillYF/lB4m8o+vlBYXCpDP2dBEMPhz8CJI5vqz2L7WxH6hnnzinLMf\nnqV29wI1sPvyCgCVpsvpb8YfTn0RXFIPKPJFShXP6AAP3PiaEzZ3+ACxv/U2\nigdw\r\n=RElj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.48f4b67fb.0_1616529162389_0.22508261571782562","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/theme","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"080d574806485a6df15b11028aebbe6d3fc3a868","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.0b8cff734.0.tgz","fileCount":42,"integrity":"sha512-1ymGoX+r7YquPOe03+vvND7hFv8+RPMNslo+zhbBquqwiOfQ/zQpayGV3pUdmDwJDMbHjksgIPmJp7evbJIWYg==","signatures":[{"sig":"MEUCIHNKuzmSDt5x0JEtHHbMVHYmyoG1u+kNEg5nD+Qci2LAAiEAz/v4uMmoCyRT9gEzjTle+fHtKPf5V23JzpUwyV62UV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkmXCRA9TVsSAnZWagAA3KQP/0p7zbIUtK6nPuPsVbwa\nqb7D6GqVv2sqqwHKT40coobjTb43fBE7TJjcUWXQcOjBSaQxDwB8cChKVD7t\ntzHl6+Y+s4o7i6/eq1GQZ5ZGHm4R4tLMsLDR905wQIGVmYMAo1Ri/yrWWkVj\nJRHFq/AxX1n+7tZ7Qr+p88ngtVyAUBL0DmTu47lEcX7vY8If8Yf6gN0w8hmQ\nxPmiDvxkgHp1JYDUjs19DcI7TNYJDfNx8g7qOe1UjG59FXNqA97JrsASIKt2\n+RbypTjnqiJInMLOV17CuAm5P5w8ymnJ4BBz4T2uzDfkSmFmC22M2GpmjtlX\nayZS2TN380PILDo+1NsMFSLCSZTHa/b59mH/RaXy5BIa7L+fN1E6ttF7ZB83\niwzqcfTrxYFijkopO8xgALCN8mPx1sTkyk/wIxrpOflwdqf59z8eEB2WvrZt\ndq3kkmHm6ucqHTMo9wtN0gMSE03rN1AjflNY6pVctm/kEYbaq4c6kMDavRym\nH18otyHYx3ZUl/1YY8ZY5qrm6grxyDvYf+89YKm/Y5pjRQY/1kA87CRNHXnR\nVO0R8ZYZdXNKbUtQ5Fywi0auJpEfpQqCd2DU8kYJhn94TALu7J+61PJKYT2R\ndxZHn9v7V2Ro03/0JZrztRVsPGnxg+gys64E7Pd1s85vhJtSsbo17PiBxJXI\nT/7d\r\n=x5Ew\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.0b8cff734.0_1616529814303_0.11861739398588722","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/theme","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.8943b991f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df172d53b1ec5ffaaa3d54b507df5654fb954be1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.8943b991f.0.tgz","fileCount":42,"integrity":"sha512-LLFP7UVBoYRdqnBarrPy7sm2jLht2dEBLADBdX6bRZC2SJkeyJu62koA8G1Gk8Z0ViSf7az+CBAGfLmje4aM5A==","signatures":[{"sig":"MEUCIQC7ApWXvJ8E+1WUrzQdzpnpHVBOXD06ei3iW2vXnkhU8gIgMtfm6rlEIm8M6PIXKk4HJOgSmI5w/Lg8rSACDbXX7uM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk9tCRA9TVsSAnZWagAAZ/QP/0m4nsgoIiBqODdfSroK\nasDwjqVvD+c4SQggD+3ityXyIM0xWqZ1mZj1/AJM8CWLl04CR9PhP3TCFwSI\neM6k2siNrlruxc3GmqIzIkAFkMdzmv+mOXLf0xBP/+R7Y/o77ABYBUbNjhGm\nQDOiri1VS9onuGvZmGC7qTCGn4ojk/S8Uak4iGIFslyOFFmBRWvM9/J58IBC\nXlifbXcQmGj70Gkibh1znahgFDS6Qha2FT9E2xrAEtgPwuBBWcCdPaXWhJnB\n7iPrYxXeNpUSKMj8encgyY4K8EEqQDslHQc0y+UwuEBrddaILh5aZlY90yfK\nzvCWq4f5gl6V9S2tFKeWXKMP1FsuU370JN+abtLRaVUEE6DMcSdoIcSm7BXX\nAKX/A2FoF5QB6VeUBmUBhUYVMWA3yD4kY/rwQlGYPu+9H3J+6JlLeZHkpPGh\nvT++BRJNRY3ivd6RlLMaaUJJor/hnI/3EzgFs2KRdE3ueeq08zCkRyPUvYRL\npIv6SfcOKlVMlyjgAGDC8tuEfEHTpJQmOnWeROJ8B8vrDspQQWx/Inng6DBF\nSTKC98qJdeO63zkzTJt6uNLNC3n7WcyEWH24lMQmbEoVlcso0/5ZEayQq99A\nI2KML4xx2qUPTH2OUg3G1whzIGQaynG4YgSB7ArksRWgSh39+R0skhDURgED\nhGe9\r\n=Oxl4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.8943b991f.0_1616531308688_0.1433432003448294","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/theme","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42b20203884bcc21671a0250a3193ef323168ac7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.3955d8d3d.0.tgz","fileCount":42,"integrity":"sha512-f26zlS8bsqCYMR4yuglbvUNiQO4KA925fpEupjxIL2xLBBTzyUiMm0QNeFWHJZbrx87sn3f2OGGKHbR4YJraMA==","signatures":[{"sig":"MEUCIQDD2z78EJbReO4myJRN9GOwEvKmpyaRo7TmnUPQOZcQVwIgPrc45FLrP0JLYwc2VrsZXie3wB/NgX1rsz4MUXq5Iuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW4/BCRA9TVsSAnZWagAAn6UP/jhSoU/OsCUyyDFGu2Jq\ndK3HrPB4wj7+skjpK3vEde34/8p8EpM50XHF8AZzIvUn7c+ntTiPq48OGF6S\n5D9gq3HPaWnUVOSJmWOn5vku5ZDjqKPlwEzhqKxzzH8uIf4ZGc9M40RbTp+s\nqljexa+R34nWuR8zM5rQiwKCvdReM0HNbyZjIVDVY6eR0+AO4CwJzBF988Tk\nC6wmeClikqyXSWO5uiDNdMBegoNWblqLA4jzUHrym+YIlTXHhi/wtnLtTL7N\n/ngXzUucjbgVOEA3RcN5jUb3xl1fcUSSoGXZiNIC7XkjKY7VqXSgTWYiUyap\n/vgn+Z5cvkw1OmMz6dJ42YcFC7Ee3XtMmRVSTaNCHOAPkaw3NfWBWCNEx0mQ\nhzsdz5UDhO5ruXg473bXHhK+uSTSHTleYciJLKMc93KnkJsow9n72AfB8hlL\nqlwfVFub8+UAN6V+q3E7K5p66ItcCF5puvWHaQAUevDkFMXNrcIZMQiOMWIA\nqkuX5PBjZdVJt+ustGUvBao81dgBUkLq4gc4d23zJv+zbVCPyxcVmdJByu0X\nll61JRvREECl+ARsw12I0pyR/XjkI8ZWWeQ7GCR32Tmn5cADQaFYqWHdBDTo\nV5y6JLqJx4gdggtwtZn+TZuyLcfRL9vUmXwAHtmWygZ+kupiw/rWUlzktXHk\njjce\r\n=lg3m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.3955d8d3d.0_1616613312810_0.987820028546778","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/theme","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8a5e81e7f75abc872e7566a8f0951bfae7ac8f2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.23ea2d85e.0.tgz","fileCount":42,"integrity":"sha512-zSc1Is2ZYMZZKcu9wF07zGUqomGQgASQ2qKdTcYbK9YA7BGYGpc5Oxnw902KOrXefkpqDh805t9JRvrzNwqCJw==","signatures":[{"sig":"MEQCIB5MKdOdVe7PZySq8ChoIT70TtpvowlOgmHEzYgLSEbdAiBAL2msYl8mGYeulLFnVirNQL25vFbKsOTuA3PTrCsL3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMjlCRA9TVsSAnZWagAAzh4P/R6iaq1nPC4p0PFLaP4f\nmFd3x3yqEa/oXz5cka7SA3Aj69eLp32QBSFCBN2oeThMdxVTFkrN2+WU4r2k\nn1fPb5flqMZvY+3UbSJrRvOI4C/ouswuHCsip3w9uy1N55bG+uOGwncLGW2B\nDDDvrC94yAVmxvqXwjPpObF9LYLUwXe0cMsMk/XJ5B64zpgjlInLWfkVEylZ\neE3HdDxeBxfRBNO6xl3Ia1MU8a1YNz0tkBU29ghaEC6u4tE1mFD5IPq1vXfP\nwyu0xi8S+w7UmEQU9HUH+XCrWEmbU5J5ucCoqd0ZvyfbDP8aIRgvQM/k7/TW\ncdFSGhduVXrG3q4Q54vQ7bEMYLxtL1TeIodF1cMRSV6uXutBSksLTmP+Vdj4\n8meCb1/aIe3ysnN43ghvUPfw2CGdeuCmUysmDY8J10cYO3rxdki1BnKs/9Za\nHx0A5rjr4/g+k99KgpaMiSpHiJhMhdtQ3G+ihJbUjOHSmjDCKZ9/JwP0lfDM\nc9LJ1Ir9dBDMplGIDXL/bTT1luMFuyfrECyjeuovVwVScKlZEgsR+qOsfRuw\nkB5RAXAGm8xEpKUiw/tEY/tJOICDlV7+cKEJUKBdaIoe3g8a+3ArcH/3Acqq\nxdlihzJhjh/xOol/1MIQ3btLesloBoRus469GpcYkgzuxCZFy2+Y1jPZV2zW\nKWhT\r\n=dMsF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.23ea2d85e.0_1616693476622_0.6510582012212129","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/theme","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd022948269e06309c60322a41ef3d382e00a9a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.e3ec22f45.0.tgz","fileCount":42,"integrity":"sha512-7iEG/qbVYH15kXMigdQPbCweYQ8Px6C6rOMVux8w8gmkKf2ZoVdo3VLK69c3D8llVQObUlENvDBVqMHWtVrx0g==","signatures":[{"sig":"MEUCIE2JiKN9qXCvCHuTrnyWtC8OxJ5DYbXnH6WhehOc9jGqAiEAtOoR4IcMGyifEdbnyG0m+Un7WJphZlTZxKTPMi3ALNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM5QCRA9TVsSAnZWagAAaOAP/iI8o17HtTZkX5bi1uuS\npw3+PLHgrumOf/f1fpdRh6imeL+vB0bok97zRn71RabpGHcSUy4KH4dURTx0\nH/8OBXWyj4Knep9NXodey8UWWlPToB+tYuDOGBFWBhYTM1hGQsKC6GP26gEX\nWpGLU+SLbSikHaKYz8Mkki3SboB06AzTTjy9/SJZi5JjcgBj1c56PvK0wmOB\nlEu7+GjIFKcc7FhzO8DPst6Tiii2LIq6tPjZ5OiLJnUmXQRwjT96nayFvlpM\nEVwViTa7/ME9A3gyXuY9LdWzdzDGRgNurecic02uljc33QiggveGmrHdiNnw\nlmi2GXhJeyoeMfTRRwwUs7/eS5Kw5ytEHZ/AQFG47DIL3V6LyXvu6QyDJfPx\nTHmCu+NY0+uQV0Idz5p+aebMgMX+1RyNNg9uKixJXTwxeHnUm6y++M7k3Q6R\n6eSOicXt7F9n+qHCAi6nYasFNeqlfFkQCRH4T/pbNvkcGEFKh1Vy5KXDOaht\n1XGQ0ZK3gLUWa0O8YPj4dQIY8q/sBGUDjd+ivTEYwP/KKQOrPisfkMmwaL4z\nbsbSG2q55kezhsR35wm1hSOcHf8uJQk+YVYCtKtmAisW+x7zuPZCQk0ECv9P\n08Hm1bJfJKcLi1gCDocjdKMSa9D+zzIN2TCdsBbI+7o12n978CunRhQsgNAQ\ntn6x\r\n=Zy/3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.e3ec22f45.0_1616694864289_0.9843861342644586","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/theme","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3042361bcb292f30b92022a0a202132470e6a3fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.4ceb42220.0.tgz","fileCount":42,"integrity":"sha512-Hcq6eWcKT1/1Bx3IqwsB4T1p0P3yruzLvwA26BfKqn8n+8DnS8oM9eUYZ/vwIYrkyUp3lKdcnNMkQNCHnIS6xg==","signatures":[{"sig":"MEQCIEHknIIK+l4S6FBuwUT56MRS87oTFXES3GI01k7jv3NcAiBtvOb9BqJcyyIqKqK+c/72KD9on0DJe4gDpKfga+4Iig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZOiCRA9TVsSAnZWagAAjfAP/3i0HQlgH4oR+eAy/K00\nP+cc05aE8yTgKxhiFpvcKAQ2bg/9nTO+beDTsb4Udj6CrmDpFmSIK5Ag9CPI\nr9MTBcrau8wdS7/9Am/baUKa0JtI6BoM0kPYvh/9EGVAy6ohxiWcbOQyww90\ne+P0t8IUBuuMP0ezRyiTbP8PFArTA+7r6aI0n//PKJcfZRll8+oM//EdXfZv\nVnC6GF2s9aPoSLUXTispdLAxLsb6/Bmcy0Sfpi/TdqjnXkgEZnnUckufyyyB\njFtTR9EbDwDBtds5pri6ml5fH7nVSLJfeSA+isqYIXCy4BURPI1ybhiN3QZZ\nhAlpQxfj5bn8s+Gmbw8i50kJuKl+sFdV14MTzzBDC9AT8uSrbrKVW15obVgs\nJ6eZcoNCrybIFRGB/5Y/CNCAMTU0G9uUYCkgrVEZQKaAb3MKxE6uISPAo9NT\nd4pJFdXRs5/z+PanLq9tzD/Mx7v4xaWGIPMgH0PgMr+QaMw9ymx5yKfU2kq+\n0WHYlWOjQb4lLy6qVjSSYpCgwRCim6hNS0I2rSCI8Oo6qeDUCkpPnJbvv9EK\notnUmodDrC5aymsOM6H5UJbccadKk9gy1f2929Cted9wOetASf1uuhew325+\n3hlW9Lxe2Ytzx2Jb7N/6C+I8XnYR7fp8+vdadpYOlP6+w9QobIKl6LO7M39w\nOFnl\r\n=NsMN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.4ceb42220.0_1616745378067_0.9835584186550228","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/theme","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bcd3a414fa8a85265c501cf278e22ac70c1547f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.dc9c84023.0.tgz","fileCount":42,"integrity":"sha512-pbD7Wo8vEERSqQjOBRbUvcNDkIerSllwDOpaemIU09+voa0PwZWV+2VI2ip6GIRDDn63qYcV/OZX8FyT3XBeBQ==","signatures":[{"sig":"MEUCIGduMCAIFXaYOASGtIa38hRTLP/6/XUoHBFrNgAAamEHAiEA8l5OlQFGlMnenTyYB1kosCNxI4Nq0BAfblVOuDedKbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2QxCRA9TVsSAnZWagAAI44P/2Y6UugVFrlsN2XwICTF\nm29Mlis/Gsr2r2sVFayFnwl6MsEy07W55/IIOUgcuW0zSWA0UXsP6+Nk0Okz\nrR2yBURQoyk+NISSCbU3krQmwLdPDwSkuLwtzeDjcyVhBI7juAJxm2SOygkQ\nlXjtXONJgvneU/xz4Rap2hB/TdWg5VPWV8g1bwbZmncMhOR7D0faFMp5x49r\nGQlhLqaNByHpxKKkml9CGp6Q04YBJsAKrzZAIfdBHxWjNKBGM912FJOI9gud\nViyYZHNilujqlDGkouZmYYkfFCdb7SlMl5UYmStYabj8Nb75bPZR7TtkGz69\nPqzh/MCAuehWUATtLat4fu4Jjyq7Q6vwPzrSacbUyGigCw760M244wXG2ilN\nmliofw27SFGE/aTptFZOUD7VeFNHKkl5g4Onx5jwhj6ER/0/x0Zu2ocN/TcG\n7xhe88Y5JTCbqukib+tqNP0s5LqJqUM0njEcbeEv53/6wK3tBRzbJAiPNWRO\n6Oq0fBHQacP0Z+/s+arrygHSbpMgXvN+NTAEDP/+CWgZgO2XYJvgyYGfNLZN\n0PC58RDDknYbHmI3ki9fHefmsYm4RDot6Wf8GXhJCGNyOlh0jRRqgh7bBdax\n57gMGkNtcL4mcpJBjoZxE8MazTCEH404Y7wYkQiW18Dj04k+1AzvcQJ1LeXi\nUdfg\r\n=IqPi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.dc9c84023.0_1617126448944_0.16198530331768657","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/theme","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.56fc26962.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2153212486ab6e5a476d069d6bf7c21e36dd20a1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.56fc26962.0.tgz","fileCount":42,"integrity":"sha512-SuD8NAqPZ7FsD0c+1qHT2uzagc/O9DLXM1CVCGVNoWEP5P80Q1gpEJG4OoYd+u9ycGrJQrr87kCKIxSpFVsqCQ==","signatures":[{"sig":"MEYCIQChkKW7aIDco3Dcj3Byr6+ccllaxXO33wx8M91oZy9y1gIhAONoYaqhtcXIHNpltFEchFjN6lqkfwHuODgziqDUaxWG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8AtCRA9TVsSAnZWagAAb0UP/j5d9mun539dTUEZMU9+\njuhImU7HlNk+FUCRejLxIO2D3YbpLfkZvnv+VRSGtFXVGX+T4QQoY8cL6moJ\nvVOXCB2hyhV4he8sPxcjN6bf6G33voEbXJaTmy2KL0YDNkO+gSheW19AhqOM\nDC+rFCgHPYJtcorHassjLE/b79VjauvqeU1YgoS4qPNdaIK4Gngrh3c8Clwt\nhXZivqwa9OLRZbN2TpIk6sVpIkdRx3UPZjQrSexJGNITYWjsqqXFhxXBzyKw\n6b0pnDFqz5xaFlDcG22ud9JYuqQX05UjTIIjbtOgarPG6T2CMCrCTGDFgS6D\nCncct3StW2IqSpwjbHQRuUgs9/jS6c1lkssECbHHEy3i3QXHrwKZWpTuXvkt\ncclXdz+nk8ZK3VX1bSwkp2Lg5uvJ+TncmFlXRvieAbnpj5jzo5kVAwc90Api\nnP3TbHKGWdgR+UYdpxTHjbVFgekdufRlyd9rF/iY+vlrdIO7O0ZpuCh9MeM5\nRF5+3k+85Gk+FC+qldvFpkjEdMpC3EOhWeKkAQ9YbkJhgTyY2QXWti3U8GJ7\n9fFh4JRQc/+iRl7Ge4rfdMYL8GEJxDB79ci+kzD9eRbRhpWF8oph0FYf5SHZ\nNUsivQ4H5crtWbLw+o4bcNGhKXiWetXm+5SXIJHIdasPdFG2mXvsAzWRsqlI\n6Kuh\r\n=7CGU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.56fc26962.0_1617149997145_0.9746576234255517","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/theme","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.bc318250e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"617abb557b761448106fd44d45a1cbb9903d0079","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.bc318250e.0.tgz","fileCount":42,"integrity":"sha512-NGxxERMgaE7UfV4xvHht+itYx/wY/YjRqxLbTZdgFzYzDyJ+bWYWTl1W49UHk3s9G1a/3fhjbv8omQdpRbfxbQ==","signatures":[{"sig":"MEYCIQDQ2c3f+zBARAg5GWquiSnnd5K2V+BMAuAQv3pB6XtFuwIhAJo6C60fX/THOnK7Houi5SEIUYTSSzZ/RTZ+ZFd8pngC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9E6CRA9TVsSAnZWagAANcoP/jN39gyRyvrZrO3kGxIw\nW6cjOo17ADUVv3V0+5FvVqSIRzFlF1QO7FYwZktg91CNW1Wg8lXlIKHFzUg5\nAge+BwqCh/03Tj8vciAh29NZyLmeY5M2kv8cF9yHXKgyxE+tCSyWx8Cja++6\n+vpYoCgKtgCfNvExw2wM4sK7dfYLokkXcJ45NnFtDP+KOgNiFaVMYLbN0hH5\nY6g6Is5LIkYFPvZkO5kPQ2XV7mWKNPudA3ZvvXc+HPzdKqo96eqGTgYkzz4Y\nrZziiPkIn3JMbBek+y1mQv93MJuw2b/v05UcmZAmaMUq66tcJcig/wXTvjVs\niOIo6FbamjHrMwgg6xWAOGBzQZ9jjR17wSUoWXzVLsMFOma0oP6dc7aFnb4B\nfNjPjyos/u7vuvhih4R2nIkkmnfHL1DuAgoDFJSZt0d18o18BifSl5exwuI0\nGLIgD3lkmVkxj5QqtakfFqqASMfdRmxS6As/4U1XGBPFRugrAbI3cwOW17z5\noLUc+dEkjCtpL4xEU7k2bgDHL52bHzlp30l3iBvpXcjuN3y0iAVr7s3qEXQ0\n049zpIwbDoShdtuduW4aeiVWQO785MovktH9cSf9+6ZvGg2T4HJLFa3ZivsM\nDK5kKL98nY+G+AdJbSRXopBxyjWdJ4FzuBPmL71PZB6r3p65k/2dlpGSzzJ9\nUdcM\r\n=l9nC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.bc318250e.0_1617154361944_0.47299020237790135","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/theme","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1debe6397c63f20662cfc3e6d27e242c6bbad0f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.edaee19aa.0.tgz","fileCount":42,"integrity":"sha512-OfUheAHNPSYVvYo37cCsh1E8VN4lDZTpHTL0Pf2pQzci8Z+8GWc9IJn+PseILoVeh05XcCgxOagT94xqVuxm9w==","signatures":[{"sig":"MEUCIHdwfJEnfUISb3PiW1ys47UHmcdoZ0GjBv135klQPUuOAiEA3iy4vljIfdVqAHoH0rqoYvn5GZlzFquG96wrsaVeFCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9okCRA9TVsSAnZWagAA5gYQAJCpG6CKyRHmLRWnhQ1C\nU9pTlfTwExdQGn4C48IZrwKbw71YUHrL+BzMpEAUP5Ti+4ud24SuL1wKTel7\nAWOigj0mw238Q4pQiE3ZHQuOlEMB2jkwI2auqUSQpUIWdGv2RDHpXM6KgagF\nmu1Kk8zfnQhp445UCW+uaw482OlQ07xYYTSLM1okCqn/maLfJqzcGVSxzvOO\nQYiLceg/kAVvQwnkzgYTvj8BImaQLOK/DXQ9qKD8hjJtLe5v1YDw5txZw+vO\nrq4t7Fcx3Yb2VxPQAE+9lUozcfYEm3gtfj+MJY05zqCk8o6KLWiLfzqaBufG\nd1jpWKeiQxsgqtmMoRyw9PBEtZ6Rd6j8pZTBTBAOkc9USMiAtz0+z8/tkSLv\nmoi2eBX1OPBAwZuwWnzMtQWUeMzflzLOygeTbUo/YoGhwXYn+9IFo8hLQdlX\nV0i2woUdYZV91gGm2fddZUwslqyomjzhoXF13YhKbpYFCacq2FFa0C1N0LRJ\nJYrMG6jN7M5WxLs20/dv6sG1QienngW7J93gs5trPKUIo7QrAoumL66SBf7l\n1br8aScocmHrkJgQNwwufkQg8t5Mu2CvdJeGhNkaD7BY8dEptnklf0LawYro\n3hWji2mzK29nkTQ2awtl8R5jGoXfFMrfwWOO/likh9phE7fkfyu89tLFeCVY\n0/k9\r\n=I0se\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.edaee19aa.0_1617156643613_0.391666595168348","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/theme","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.24609b822.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0533cac5dd7e3599849725f2e416459f6a6b940c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.24609b822.0.tgz","fileCount":42,"integrity":"sha512-4duO25eeDE8MsG4VuS/id84FVZMpzzpNxbDHH3Acilmi4zMFfjZwKScf4DNaQT0yzPWzHGhzShSHolesez3Wvg==","signatures":[{"sig":"MEQCIBo9P1+f46m7RxP6MIr+00PZP/pLnHowJ0GVQ415ENb3AiAkAQZ2SPP6o4+WWlJrm4vpRSyT4ksrA4JkLfPUixgE0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOHsCRA9TVsSAnZWagAAKP0P+QE7ZGDFvYnHWvwk1ABc\nxiy/G5ifT3i6Neb+zgqHK7EFmJNu6YXXccclPM3rBzKJlzUIGLg8K3nftPP2\n8RZ2smYsawh84+n2A1xA+WrnhyIOMXXAWmXqwT15qYFAWM2Fbp4N5aKizywn\nFSK+FKeDbdmy3GlA+7f5mSwbU6pva258oBltLsjgwCeFKqZtQDeU0QpyQN0a\nX5JdKyMJrpSOuICDE7Mruce8fx+Fi+tAE8szrvLJ66XsfioziqJZ3D+FuaCD\nA3G3jCCneR6ctuaZJ96VEapSBBv0J/NL76F/C+cJPNbXTsXcyXC55N0XHz0u\nHTe8y8urQwyv4MfFlZaiGHI3wUNqxVrFaNHp8wlAcw3J3BnY1f8R1IoyPbto\ny5v3uXLCpXPiibFAMAFb85mJCMn0mRGodcm5GplkUYKZOcutY/DOT9Q1iP6f\n2LZ9CmqDVGF4TKmZQW7aO1BciGpK22sxH1VOTrXcIbn/lk5y+Hz101C8hTf+\n/ezBCoimP5wTKg5jXwnFD9jmLaYDLDHuyQIvRS9Z8w/UZH3pIaoBYO0x0iqs\nVNW9H1+ndud+jbvw78gKtwniUsUkfU+mBobrrXVqdvuPk+5XSLPBByFMJNMG\nFl9z/TWMvVRKOtf3eyhvEWI72ulatpVGVWNghGgzDWQvgbxNT3T2GZVmzI2n\nof8Y\r\n=Xaxg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.24609b822.0_1617224172279_0.7361697649909344","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/theme","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"187015392986d43d567f2cda8c28b26838e1d0c6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":42,"integrity":"sha512-4mnIhsUbMCnWH4YB76GhUEfsijPgjEYrcESGixrjrZ+AxZTipLLQHxQbXlMX2cuB/BhIP1g7+Fs4JAx4qSe4Cw==","signatures":[{"sig":"MEUCIE80bDkDgvPMiY0fn9B2Z6OSojQVHXLzd3fWNoFOcV04AiEAwlcp3cISMBMo2+6uNe1ooB+DqKxl+NvQlb/JRHQr/4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeDkCRA9TVsSAnZWagAATikP/2YGs9gEpD2qLSuOmTgn\nr6HSeCFTV8qTYx/OJ+bvxM70vIsNtCjSLJj9em5b+CSyGP8xafoMA5XmZWk6\n05Ro2whdJcDCy7GqtXAzrBigSdkdu0rxBOiCVG5ISN7Si+6hJzkN6ZIRQEg5\n/QflK2mzDWqR7kO2ge1M39D3AzVJ3L/kFkwka/QTAZ3xJoSXuuFlhi1BBoQT\nYY61C9yzcoN/qUI4FScDWCgQ14WSqYfL9UQ55rkZ161sDqx6bzyPTSyaoxsi\nwg0ZQe8NluRwwsmcaSrhiGjLbl9S9vIgiPtn0kuq6bpxq/D+xSjDfEUFV6UR\nR9+HHwzpWbIKEEZNy/JivE1++939IeR9Ac7Fwugyz7Y1KsSL68veVeJGRPky\nz+s5AHaC/AlP4/Afh9iBzAOKWumo6kgeQHjm6LxCdkF+YoPSRqw6PqfJAxgE\n2xm9Xo1Ui32I3h1j/T8atSrKKRT+cQjLe3xE4xAnFGacL2B/nZCs2N3a1ZwG\n4RENqy8CyZl3x3vUIgjyQluN3DSprhEKbIaEPhpQe9aONRnY4LFaEsP4ljfP\nhsW0XFRK1D7bR7D2+aGhI1nu4onNUEkWFZyX9MFi0Wcqrp46LOVir0aMRgC6\nuHymqk/4GkjfCfoTY0ngeZMoFpBtGoljaGED64twSCO4ym+qk+fo2q7QbaVA\nGdmW\r\n=Ju4Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.b6cddc2b7.0_1617289443906_0.11742707038457323","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/theme","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.94937c78c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79dd9e47ad1541026dac7fc98c4e2ef0d01293c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.94937c78c.0.tgz","fileCount":42,"integrity":"sha512-726FWHLCXD6iPOmII/R6VAsdi/sP5Xxo9q/byG7oe9xoXpWLfaKG/guj06SG6g40ldtmZFSrTKhFFxWxO0l5Fw==","signatures":[{"sig":"MEUCIBAg6r5mW9psIuk1UM8hmiG2qqWJ2tC0OY1DHxTth3DBAiEAzmZ0aVMbSgiRDicCxtM3LXke36ON7sCrtX8K4PJXgzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjRDCRA9TVsSAnZWagAA62kQAIPlRTA5R6Qy1tDpNJDZ\nlzberD53BuGB8YuSJQI40xtWNI42HA3Q5wgcWrJkbmXPkzeDq0ywV23JLp6G\nz18BB6udfDn66Ik3LxVYeRzVz/bO8mXNC65Z/hR+q5XO/52pi0I40oPPP+QR\n//2c/Zbzo0pj4Hqs2pzNh6EENo2mTuCVSFv4HhM3z9n1qI8UMuwwT5ML17Jg\nkQhzlt1KzX7z4iP4UKOnoXq6c2gREhUun3Ty6/5vhtWlWAr1m7z17Mw3Or1g\nNob+Fl428srPelhaQtPc7D5eE/mBCk8NGWPh45+wtyYaaRgc/GlSbNFiR0Iz\ndnrmZXizELLYM2GZ0l2/2IG9sGS6gz78jT1dBmr6NRJWcXdWQgIWOxaMxxTc\np+B2GhNsTCx9BudYWy+kaLBTZde85Gd1EV5CkudTPg0Q236osh8xSKGnY7NU\nOo8zkfW4rrM4oHeNJ0vy2lxZrUL7Ao8q5Jodtr3hVUTXwzeurfC0qrzOIfph\n9z8sjyq8JqCHXqiYAoUfHDyqTeInTl3nNmSw3lHo4oyhV/u79UFRh4F0gRFc\nWOG1E9ljaUqHqyVsYX88SfdJRHFPALU5KzlDn37fog9PR8t0SUgybIY/UHO8\naSn41J4Caglt7CaJqOtQsufwaOFpXTjf80uOBeBJqlBk5ivHqH8uv7FhBqFM\nwnEa\r\n=19kA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.94937c78c.0_1617310786506_0.22071608242143115","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/theme","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9514d925d8118a82979006836ad033b5c3cd82e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.e7202cb57.0.tgz","fileCount":42,"integrity":"sha512-IOrC802KDEwNCplkiXAXZsV1+PPuSzOxS6PZo7+7ye6FCU8UCjDWVNHjiwkX+IaMob4mXirHjb9yWaa8ojNGlQ==","signatures":[{"sig":"MEUCIGU6q73N/C21Xy7D1g+FvFKS3o2idXfS6/QQzHqcjYm9AiEA5pZ0CUyfS6hW6bcMMZOTEs/eo6E2OsM0ye0fmuKXwa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk0+CRA9TVsSAnZWagAAhXEP/07Vwkdd+sKZ9PlMS67U\noLwcJ3TZqdlL0rJy8kk2Xp5f/RVg4A9xAF8iHPKJsuao1C8xU1q7wWAN9VAT\n5yr1pEQgZNtUTksYChdHlOxftFJUyqwigzw82Fu11hRhV+KE+D9O0FFRO2D7\nPFdDLkF45npWE5B7b9mBwxd+rYUxtg8mjciPlvAnR8CeKHtVVKQgl1NIK+4n\nR1HzCDgoDUa0Vr2v5ngWs9LOVz+P5h3lsLIpGdBXZ5EhIV/2GnbriJoXAKUU\ngaxXXX3ZP1Nqjsv8Kl66rzrOuOCtXjdJQAnH9X2sMjGYm5+7nZDp3t6X62D+\nhnghPD6ze7nStHB9ahWL3aAOl8kdamtQOpsAhfZAgk+1J7i69mBOmd/f25ES\nS+IHGe+a+ysjYTnazclTnyXDib3MXEqqdKZ3BNKVNDw5qzhfI7f9yJHTedc/\nnf+wCFWyFIOzyraVUpFk3ahAXjLADiZEAtjx5sz4Tt/ml/l4e716U5uOSrZE\nyJiPSeAxagTlRhRAAcc7jFXGQqIHKGrG0hgnxXpmnR38ruxovvp4iZaKFyTi\n9iFo7Pv9d10Y2mzFe6MloREUVeiqQzoV5xho/fr7vQq4TnCxWL+awt5FvX66\nuTwxtSZniDd2QqWRQjY7p6k58IQUS0V/jJsSpFxHvpY8j44nkr3C/1vPj0aZ\nudDb\r\n=FmIV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.e7202cb57.0_1617317181888_0.2929326870516684","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/theme","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.1f636b205.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c4259baa0be922b1eabd8ceddef404a7fdc436f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.1f636b205.0.tgz","fileCount":42,"integrity":"sha512-EN1KelxU2EmMpnh/7wOWH2eQkcRcKbmDQ7VRbJbWQZiVZEJ5Uv6/fblJZK3r5QY0JsyCnNt9cVcXvuX2p23XGA==","signatures":[{"sig":"MEUCIFF6MIl4SEPJoQIHJjwBSz7RMNjnAwRpE3aHTlsz/TGpAiEA+5oP3LfaMFo7WGhQJ6OsS1E4r2vTDcc+keq3JrcUA2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5lJCRA9TVsSAnZWagAAZhYP/0W45lyvW5gMw6P+Kswo\n0OOKcqEy4INvJkJMes97mNXwHVsK8oXn0KIdPxjBuZboosu/QvjpOBaEF9IB\nKb1zugo096KRLaIORVJBDMHorDpth4ySQaRDsQIEr7/mLqyC1KKbeUPEc4bL\nWoF6x+3ZtFg5izzmFX8Qgm+ykL5fDqSr9m4kKZUvkwMyAX62bfA8M8TwcgTb\niqVM9qbSllno8PjfRn51S+wwq+oBaKHYPvU6e+SFsxDkttaB66fOLtvJ7xVX\nUbNq8GzmrcJB/XJTp8sNelamLHzuFnsMGm5qNP+2GnDHkC1FlPEW3rNgBrpG\nEdrDtgtt1j/UphNjm7fa17ryITClBkLvTHevzsOA1/tv6Y1BoFYvqB5/fTEX\nmRMDgoP8X4vKAFKWWKQqTi0Hj2pEEIrmXkQLura9E52AzlOZEGGY9GOoIWvw\nOmoG20j+06okd8ytZu4Z+er5pvrHrBBrIPzxiNqRFguVHVxC9gEz0x9JiVkv\n8ybMsdWkzT8XWNceVvRM6cLUOar+KGeRhOSkohJgX+1QD1ZluNrOk9TM1hKi\n8UvkUgsDfBpXEIJumc7vgA5Alg8FbE+C2/sy0hYDx0X2S86cAZbf3t08ro1y\nG9qGWAoYCBDotHSkGdBIexiol1qthZsQ0KjIN383SykBVuxIoBPJtXrn1LeX\nEocR\r\n=D/5T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.1f636b205.0_1617402184712_0.370356736942105","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/theme","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.94f50b260.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb9148716a8308039787d09be10766338e51c55a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.94f50b260.0.tgz","fileCount":42,"integrity":"sha512-rAcEZAyPx83FVyfSSqhOjbLCksFEV4ZMjnu8xwfjRCTXvxql/ijqX/eijOK/MCM+lWcDGQ1hY3XyfmSiA5vT0A==","signatures":[{"sig":"MEQCIBLLTa/7rdrrm5XSwKs3ZSUo3l381PiRQrwsReo/cyBVAiAMB3juauZz46Pzysv8AJbzTHmeKNc3Rwo9b3PPeCIxUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgayblCRA9TVsSAnZWagAAGwQP/jfgC3pVqRQUlAax6Ea+\n7FyWBg0aqmUmpD9L6m5sWqmFJYEovJCSBAAqx3psCX0BB1l2+1N9BJ6LB2Rw\nnVgCDIGxTwQqQH/WVL0bXmFnJHRFevSK6UxaWjpzl+4+GvV3O85r0KqjqLBl\nziM/D6HhtovtTR8Ip27GwPfhJ/TjDo3Q9oVL4iDEhnbzL1KwOXYspf66NJRE\n7LZ7u92qhmVApyW8mNi6hrL3nWxIhKALm6C2WMdanZK5NKqNNpqSl6F2pEzf\nLIIsK6DFE3j7XGCIS7O1wzwozqTKal6rHcx3GB7wUmt+D+ihv1cuizzif6yx\n7b6c5cwMZzx7uyO5PBiEzxMEktY8dx1LT4Eu1UsiQ86wcobN545KF11Y+ea5\nce3oJOxHd3WZjJMeeG17uxYjdxJ8fciB6vspRvVpWqFkRU55nbWYgQROv6xF\nEvZeppQzm2t9k4Qr9KwYpzlHKzTfSqtGpUlgeswr55Pzd2+HeAN1mKkIPsRH\njJHRur28Nf1JHqkp3ZtsZXxXZBBN0/8CZDqvGhTqvfz5FQ7u61g97ctnYlou\n8fn9gRFRfUSuNBp6MZLRcUBhubsYp4juWhkZTKP597SH0XxrpYMnW4gtrVVO\nRsYOPiXqmZ8NPZLgcENMJx2ZnLgkYIOeAzv3nfKt1WibJDZaTvPo37CfKnJg\nZ5OD\r\n=An7b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.94f50b260.0_1617635042886_0.7812342783544481","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/theme","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44ce5a9f81ae59b8b3c599c09d89ddcbe1bf5be1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.a4009b80a.0.tgz","fileCount":42,"integrity":"sha512-6R4th/5TDf/9/YBpcODRTThTG7VMtG6FmaPo22/cENkQdSgNOKLJBZkYZqZO5r9Z4VNWPOKxH5gnbJmumf+wpQ==","signatures":[{"sig":"MEUCIQC0wXNJQkOZesFTvcYzMvQ4gT0YEMkNsZd5PvH1+7GYUwIgFxG6K4XfROPEMi1VqdsaW1sZ8vrDqJdxQE1FB0XeKmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4hDCRA9TVsSAnZWagAAOMkQAI+AGBKwPBgBUOoRRuSN\nzqrwxqdB5fi2ge+peWi16R3vp5wgVWrH/kSFVNdfJD4U0L6f02WSg6fk5iAn\nJ4sRbYylP0vri+L3W8yPkXZdgrPS1F+FD+WFK1sbVNaoZifyS5CAug1VZFF6\nCWFvb8PVhLwZdXhwsZdRwGP/ymYH+6i7IG947Z4VbjOhr9q9ejqeV4mvAq93\nHhjjeRCJJBWk6bVhPigH18LkGcTi0kGmrnyCbhmpJnFzyWhW46UijSRXwi8f\ne73t1UFsN17Tuz8UHKX+0WA49YuunOhTYTHf7AaTSpuipBMzIhQTj7Z9cPh2\nF/WugWsSFkmKf+2zgSv99wtSTUZLQ5jJzSkYXYI3i9Sbpp0QanBtV/1DCxbb\nB8367W2rp+fNAG6jyqFYsdDO90r98FW8uuaaD1AzAheXvb8x388Vw6VgvRjs\n1tOiVrHJNncpEurGlqwsbxh2HtzWKE/cKlwTo2zqLGMq7Lc8xnO9CvJmRx7H\ncsElZmIllo5Ps17Ng6TdupBj27lUWUuyyvOsHNvMW4OiZNi9uLB14htabJVz\nk6+gruyEcZ9rrgO27UUDbA14G7rOtstHP+8b3jelokEhEAKHXX0jcQjID91o\n6tiEjnym5O7I3kb4wAVvnL+r7IeTWZjfK8u5vVs/B2wyZjFObQqtzZpmO89N\nb+Iy\r\n=KfTl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.a4009b80a.0_1617659971252_0.5586120624599493","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/theme","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3fcfb4842c774292d7e84c0bac7dba12b793bef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.15604bd0d.0.tgz","fileCount":42,"integrity":"sha512-weJ7wUmmJDLPZOAlKMP8SnJ+uTKIAvtoZFJpKcyJ0zbQ91rsfR/BFF4pS1vzhkRepsygh4jJPv8eC3dlZfRXIQ==","signatures":[{"sig":"MEQCIBLq9TJFW3yHnZwzeXPX+4zjZGaLid8oQNQC6EV98COGAiA6uY52RTTXfLxzhnbABNE3Yu3aJflomSvzLLKvTuScYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5INCRA9TVsSAnZWagAAxjwP/AjG1jhIT7EvCPJxFrJ0\nu92c6U1qVnZUNCwzsLOdc9u9SerXxXsldodTIBTtEB2DpHwzH+dW8sp5Bjm2\neX1XmHl0ypR25Nq6B9+jBMglOoB55glKltuESbJ9F00EvkoL+0pHhhe5iXuu\nhOVDBqEQgkpb1zus1a0KkEebNKAnKC0FMnjdiCIt0cZ36yBLGSE4cd54Clq0\nD9ijdZJc/KzONTEHcDSAuC7ScaZI9QT/zTwZbS47W1hZv1LtWR2HlBsxOqKZ\nJar4IJJXr/dI0md9TdfPxTGHW81F7tWVpFV7zsFcSNxuyEbCL7UZ226pbaFN\nE9gzeAsYMzhr+OwOsxhgsrpL4h4I8Fn26aj58q7ZTlPCaQFeg2pxNSv3I3O0\nazENoVqFa3hP4H3Z0zxplQAgqEWQB5quN0Y/1UgHlIWUpiO5xKVHJk+Dleny\nwFlZyKi9IXq7YUypypTpteeuhXqPnj6zgovpqbZthud4QqhLRlhoVDiCBUAH\nRkt0+QhkJmjpcuQ+JeBmuw2XW9d84O+0OsCB0D7T2+0hpgJsZ7JT9po1OvLZ\nq7A4CSnYD42Kclxz/HXg854OqeHrCJZiJ9Dn0SZre9fELtuRHhAd8di21VUJ\nMTzkPx5U9XoSNwLqdTJzcumLr+YNk6VDnQ+Xwf4I7EMQqMDepRECZAikigKS\nwFyf\r\n=9Gho\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.15604bd0d.0_1617662476647_0.9519966150758754","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/theme","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.76da7876c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"582e50eee182c4d855dadb583378c50a4158a7b6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.76da7876c.0.tgz","fileCount":42,"integrity":"sha512-TkMXQLa157uuadOyc/4otxZxkhc8vwCWBuo+yxWJQYIv/v6RqbEx5Vd5LDrrXRCnuvSYqO304ncW8UVnZRvHBA==","signatures":[{"sig":"MEQCICFS6aBYeWeI3FRjoL9KJy17/lyHuQlIsYv1ZZa4gr7aAiA7m3tKnm//2tBJHsknRnRvlFDIYlz/5Q8cGedRda6SqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ5HCRA9TVsSAnZWagAAFqUQAJ/FQyDboLzJf6Nn4r3t\nOelCzZz71e0VI0e//fOkI7jh+kkuKrVxvHbMuEn2Q7By6iR5tH2pm/l2l9+B\nvUZvozFdFcYmlcG3j05V+i/vghtcviB0gCwsgJDyAWQOFsgsIr8n/AG6CCtP\nCvMTt5qr5IWKGeUiXeUEA9xR2KeXmp+/iS7sz3bQi6P2Wp8NtmmTg4JM7w38\nJcEQvD/LyLJS5PkIE709sJoYvKAM5ba6BXHPGkcNuFVGM1TYM30zUrOjzv6s\nEhRvj7kvol8hhz3yTwKfYGFpAAZ0dUHhfVYN6HLHfCqVCjRZVH3zQEFg3CMX\neEKYeLnaQtYVoXyVy744d8y8TIwxZT/CYfEHeVy2URm63JuugU9f0zIEEkj/\nFjqO67Ve++mdsNZkDAwpZ+8/VuSIrRDVeTVgiMaV93se0EF0hZCFsnhb2JK7\nRxIOfa9bpLHk/yz58Gv8w87+RgpOAqvCYD/PSxf/1gmoiDddDfMW151FYxcX\nZTurFzDDUUPvevjix3hEx8oKpuzUR07+gZmH8JQD7hF4LDM3IPOaDEfZdh63\nWDOUTmEHt9xLtXhdX/rsunHVHNHk9Sv2jomWBBoPpKMEsp7Q/82AW3FbrSj6\nXnZ2UAyPTf7w5x76Qfk+pZr3NB0a88vPZyjN7eRVi71UNTqO79Nv0kJ9eIpc\nbMnM\r\n=xI0L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.76da7876c.0_1617759814822_0.7815534559427983","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/theme","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edb947e920a0b356f2422faa27bb51545aaab92d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":42,"integrity":"sha512-N8Ps58vnvjZsMN+1Gj3SPcozDTAXeaPhxsXAafoJ7qR7IR/f9BKhqa4UAMJ9c2RuKunvkxK+iKQisjjOpGvgAA==","signatures":[{"sig":"MEUCIDmn1Bw5ZfHrVnn6WMgl4mLRgy06fhpuIUP95xrQGEzVAiEAhAppvMtoxz+4Dd2axhgG//QzVKk+LwjSZu/5JkiUjSo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf+KCRA9TVsSAnZWagAAIaMQAI8wYCkYYX/vMDqF/Y8t\nKXrRrn84GqsrFx23iDSidoC7+eGqTnc9CxKScO9aLhRxK4K5Ey+nW+CJenUs\nzjg2M1Gizmhha3Bn7kqwe2wIjSn/2I3N+HQNANhiWxRGaMsMEptTXgyJeyeh\njwovrIWLDd6FC+Qy6KAoaiGKFhzjrox7j6CQhabMqNLIy14dC2WlM5yGx2UV\nDYPOMobUn+Z3SCaNWGfDUmA+aUj7edjf3t8F3W1RmS+zCE9T1UxG/KC6CjNr\n5gFDQf664u92LxOMRXgbjzOkZmZ2Ub4JofZtWfcnb59ejF6wJ/JElupOYM5X\n3d8mWWdrojPJ8tohg2XSsP7ZSgwq3bbwjuOUW1JNU1OV5ep5dZ85E4sy2hJ7\nZD+b2/6O2MSWCuBX1wDl8RKS4CRtn8IOHSjpOtG+IAGJjFl5oMKc/AuQQyYw\nT/BQqoQ5bbOdGhKQD59dALEbtpKL23tkqdKklo5giK8dRM2f07RyFaApFdB9\nQMUwvZ6E0vmC42boWwjf1IrOr6EtO1w7ub6W42rorm8ISJ4NqpQTXxP6h+PR\n5iUV77SClM8RXks891GvPAZa3ATLUuGENN9HX6uNI2gWvyLphFyzBPQE+oPK\ngN0b9G/7EApGnHWEs066a31N3iPSg2qqXCORWaXBdCx7Y56ToS7i8XrLiXKv\nhByV\r\n=Pd8p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.6bcb6cbd2.0_1617821578031_0.6757362094040207","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/theme","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77d2298b1d671fe49d58bfd08805c74a16fa627c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.c91e8d141.0.tgz","fileCount":42,"integrity":"sha512-QtuwhakwtuW9QcoBUQfDR7qrkuo4g4wCMJWgAy87G9xf7dkBqo2Q/G6fNdo0FfrMLc+cqeuk1LBGc9/4yTB/wg==","signatures":[{"sig":"MEUCIQDroxNTaOBXmNCh11iPPgPpPguzr/Q7PMX/WfOEwOhsjQIgQZp14tG5if2Eck9K/Q198nuoysXiY+1KPGNmvLE2L9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgB3CRA9TVsSAnZWagAAEnoP/RjgjYxWzZzWsZ+RmfNV\nsH1ANt0AYbzBBaY2/pdv1ntkyj+le9YSnb9rfA+08/TgZdUbHNjotIlFYmJt\nZA2lw7kP8UAMqB+pQwOF1sY7A1T9int6LFDM2j3kZdHwRINVTlRNM2h9lmF2\n4zmEJsN/9T/fy0jUhs25IpDkw7wlOZXOVuBA9llGnzwiPIKiXcc6chfd1IHP\nr355N4Spn2pQ1NsRb3BC3AIzfdIB511OTEbu086pRcXccQ3eOA3hBwdisVuh\ngZ8Dcl2Lvt6KrYSt/h9sFX5SA8VmMrTvWx0th4gd2GRELiEmCe815mttRhrm\nXSrI/8DAsrLkKB2icE0b7nUAekSXBb1FoodxesnPlp8zqN6JKKocDzkB2mWK\nvdN1RZs2DYjwp7aSe0RHkFbWnRk3p61DursG9rdONZH3/Aao1/y5Sl/nq9ZE\n/hgMXT+Cnw6M23Kavpzct2oMcRWvpE+n7ypV/LEECdlCnl/HO0WRv39dkFez\nnQpq4DzMDfOrgOHmStBQBy3SwT/LIrerPGXBrUULnYkZP5Yb1jOaHB/iepfC\nvEE4tBlJyBCaC6meGtxelvSNECz2EKQlGR2Yae/r99zsIl1sDl3/Blen4WjZ\nYd/4rLVRdjDsUn9S+HtpTv2XTASGfv6z7NTKun80BUwsss9IS5wibNr0M4//\nvs/j\r\n=9imf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.c91e8d141.0_1617821814696_0.55210721687903","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/theme","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f77c50860.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"892c2665bc295de1f9b6faec0645adc49a17e427","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f77c50860.0.tgz","fileCount":42,"integrity":"sha512-0qEona9Na9jva4xTX59FiSZMNR1CGtKtMCH4SYOBI6v82Ubyp+1nkfurNPKgFySnZ+cyX5jGnBqbaz494D50KA==","signatures":[{"sig":"MEUCIQCsVeI0QGKGYB3CyKB7TAQxXuKXTKGDalZcrrEqVmopLwIgAvyd4f0teJT9hVNy/1XVHvmZQ5lUB4G02YBgT06IBo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyKYCRA9TVsSAnZWagAAuTkP/A+Qlsb92vQ2annM+X3j\nDmk1q/8+JhfOGAvs9OcewJoJjQ+n9Zyk29gEiS/S/m6/Q4LyfylVHnkSV4LC\nrll1YO/Wn3BY4VsoRlyxMUqnKwlQTFlHQ12DmlL9vuf26jcjx/uEFpqyaIZj\n2RyDuHzAeUaKmnZdx89a/6cwEFJkQ0Sj6OoTH5ydvkWgptb8pzkwR1e5CQuv\ncSpe+fQUXI7sVE7j+f/srwVt/9wjFi9kNV0usw5yHhoAQdcJ0Xrb/twsJM6h\nDlazzI0sPMEgZFwgJrJo1Pqaf3pWroaw6WKdml+S84oQJ6iVR64fvzGi2eMc\nBNheWAZRR7k8obyIfkMTobUsiKkoo4AHAZ/RdAy0GH7ID2kClFWBgOwqo1Q3\nYoQoRrDKbfT0rohUok75uhVqkur372bu57sRRw01gRLGROYEsau5Fxsxfv9j\n00Bko+QB7NKORunOsU/s/cv2QnX7Dm3QeIwCAj25UACmqbazCOmgDXnAwnS8\n1Bi0Jh+bLXBc0TDolThgoslm0dQWR8ll1S0aTdt1OX7MIN4tbniQxgddKB1D\nlEDKptDjAtndOU8r4yJuuLTh86wPhi42qk13qdSwvGhXXbiMZxrOKw2qi13x\nkNjs6Z1KjKRQRlYfB+RLt7EPToQsU2uBD1FZZX7r537l0OB8aoytAcE8RBMt\n1rt9\r\n=nTqk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f77c50860.0_1617896088152_0.83806252575395","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/theme","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9f50ed5d9180959e0a607950fa29067e1263558","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.367d88bdb.0.tgz","fileCount":42,"integrity":"sha512-7xcUgD/WDB+9f14kdHsmz8Tt9kVnql5is4GYmULvrW3wHEIFy8E5LWZQUnyYtYTVbz9N8ptaiYo5emGAU87YjA==","signatures":[{"sig":"MEQCIEp10E6kz8DygPfQ+WrI+skUO8S+GOG8F+4EBPuGUezZAiBudFmtH65F2x6BYYVS01sjJ5M7DJlGK6bOU1dHPHKpJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzFXCRA9TVsSAnZWagAAfpEQAJ2NoR6CsEGAGcQiO0t+\nha4GcZVpUCI4zVchP7KbGzp2UVdn7+PhE50kyQmPsLKZxkmPDmS27B90mHjD\nk+rnrcqzlteGOS6rBa3fpSvdT6fUcQrphaWz/ywoX5qe47MbNKAKl8aFKqrE\njAP2OwVdRzU1AM1rWIjkojK406wruSGvLQd218lHf7QuesrRyg2CUhYFLbkT\n85kWK+M/4bfrO8REtE3rSW9bR5XbkCg7M6ey0nf6/6ef6bvDxIB6sapXqLWJ\nrZ5h8XCiakF1pH4Q4/8kfDRFFnAdnxsKHwMqFr/Th1DyanMQNbKgHL9VT1cn\nwCN+0erSYFvLD7WHp9YF0XrcLP5g4m5cZfPsr6SspwQ4VYxQyRtTyhD9+l4V\nyJODo/IqDs0nT8uSaxyGHhPztTP+GfiW7s+bQhnOamRkar2pYC3RhYHyLpN+\nAONICZc4u1glcPKjtzcNq6v64w+BUPP1e19dBUL0MrbH8c6FkVFgOUWzJ9wx\nM1yMLJegKDCWrgskvUjS8823Sbpu7z3OU1WhtkitOgmoXSnrqDg9z9yn+6E0\nmNRp6uD+T05clyTzB0jbT6wmTULpk5YAHvTzK2lY1xhZCFCI08+gbxfVDTan\nrlHWhh+PwnyPqWR/zEopMXWSdm96HvLlKjhip58IX87sGW+DgDg9U2cIU6vN\nH3Mk\r\n=DRjz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.367d88bdb.0_1617899863357_0.05040565019896781","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/theme","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"708b96c70a1714d3ae49a50d286f6f720d9bef9e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.0ec437d3b.0.tgz","fileCount":42,"integrity":"sha512-2CZcLyQUdOg3uawO7/3RQ3L/BkGZbSFYehYNnRWAMvD2GWeqAlEJc1DMZE02rXji1GpCMaIs7mecXj2vOq8BEg==","signatures":[{"sig":"MEYCIQDXpbNNOEjTu5nrhxbnoGP8fjrR++ynme9beGEVKYqk1AIhANIRo/Z1Wx8SZu/Htyxmq5khiF3uK+QCBO/dgTXb997i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1rKCRA9TVsSAnZWagAAGO8P/0ImjBgvKtPW4gf7M/OM\nC/Bu4aF71ubocqHQ74G1oi/kc+PDRknpNQu0C3P29O+5g1Yy4rHqr1rxpLDO\nLyH2fO+r5dK3GzzLFgHVfBLFZn7AMkrT1gOhlXYOZLFQVEFKaQ4huR3nQRhd\npo+1ix7WXephfrNz7rHD0khFKBlmE0x/QgaDb6M+nc862s79ur+Kr6e4unbw\nHeWOUenO8FUecTMDGg+8d9P5ZDoQeut5CwewBEFIvuPJwZiTjZMn9Bt4AEmh\nIJGi3XXmyAnTB3I65mnrHJvdZkJQq3xuEHNxLux9Tqf9j1nfqkHCxrv2N+lL\ntFAgicKJ5/lnIno5diuQsOyzWIbQx1MbFuKdaMAbahGZko4y0pqruE2z8T2V\nLPKV0OEAwSTBLtz4VovYznQVkMhYZj+9s1oIIKFsyH2di8ahWE7CDWnVFdCV\n7mx0EAQjuA0uHwEDNIjzCdK5Se3wwa23Ptjj8hDZ4HczUu5ZkDesEZlCRq9I\nE61rRg7Mgd+Gz1P/55AAjPlSbUnoA2Phey0DClKv3d47M1i0iVXfaYp0+fUy\nmeHcSG+ZjuKpBFjXabxuk2nHl+bGMC7oeHxihTdmSzlJJ8KT9bgiUlhQztot\nfnKpHt4oMa35zHAxmIEeMy3icST/VIcBIi+rVxNXRDm4uMzJ4hj/cAwMoS1P\nzL+H\r\n=UQ9/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.0ec437d3b.0_1617910473776_0.7814394035343235","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/theme","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9476498b5b3cf9d18b2fc07e3fd4ca87e6a5561","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.b2fa996a1.0.tgz","fileCount":42,"integrity":"sha512-ReDCqnGqpkLhvf5gPY/cV4JEbozLjzw1AH1+Gl67OLitIMdSFk0l/P9K2/M2zTBGb6fB9QllPUwV95N57HGeDg==","signatures":[{"sig":"MEUCIQCKEisBgvyD1PeAtSFamdSBCwFevbBFNGg3Acq7Q88augIgDRTJw001dLT63s1XZDN5NA2z/fdq+a/46JqqgpDLfT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG5PCRA9TVsSAnZWagAAKYgP/RKa7Z7954e9byBHG/tg\nbgYRs8wTm3RQOIccVy+Yhjvm6mD9QBJtba5XD1lsfcOnTpjy2FmpFWeaAGJv\nGAv+WGHQGkFvb7Vv9eCU2Mj0CuJ8SGEJApTMbLP6K+2464Mnubpj45SqsIqi\ngYvAAaWQvfA/ldYfEik8Ho6GYRPDF6cclzOe+Q4Hy+aWIvD/cH+3mdbgVMnK\nuywiOdfrSSA1qAPqIwSxMbpFAmbq8yQkDKzIk6y9fU8eeq31c/eExmyJdsqz\noW8ksYSnedS3rRFexlW05gniJDXLEuizPMFyxAL5fScwbtOJw6CA7BlmWbW0\nsT9cMpzUxvwlGYnW0NZ6nTlXu7kUpjo9TcPy0woWyJ3idKnuJql61/E3QV8L\nrpDE/A8rKLykEZxaGKI3eFs9P63uKnJBXjqkljNjSTNhXhhLf+lwXBbrjAbe\nHxTlt/bxcCAXCGSzWb09YpAfQBTtulGqpl0TBVqPftwjcCSPBRmpjczQV6/p\nlQUCueiKKRzA7az2Dj0S3GW2F/MK/Gt6zp7uU3BYjwfPot+I+OWlkuc5nJqT\nHyAZwVBpbpY/TuSkkqQ8lctOQMGCHNhPGmwKMy4Zy4goO9cY3iD6Niw5w145\n6wYNj32Zatp7t7VIt0e7bYcXoIuzeBjCalEQFeBcOIhsyY8BAvoc+DwayWte\nUcKM\r\n=rBdp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.b2fa996a1.0_1617981006878_0.8328127769216587","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/theme","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.24255c408.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afb10a03a8d2888360be34ae6778cc92fe47385a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.24255c408.0.tgz","fileCount":42,"integrity":"sha512-LHa82pNTvMFiVd5lzNNHk+/Z662+dpgQSBAxsnqw3ke5wQ8nz7qeN9y+DG6lC/0jEVhgDctV5T2UbLYbQNPuTA==","signatures":[{"sig":"MEQCIBmKzB3AzwMyaSPbwpw2V3Qo34adZiA97UHBkQQSEEycAiBMXhzEKWvT9BeNp539ZlE/pQzNiK2timeVdz7j4YYDWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLTpCRA9TVsSAnZWagAAyVEP+wfniflyuvYYU+ibf642\np3op+c8zzRvYhFnHbU+viPMAbFzYKbUm3cDX6sUkMFyIBVnF7ACTgrhLlxIz\nmHFMHBsLJjlaVm9R/K0YFRFCIwRvWtrEiGwFwrhX82KBGiFpvKaM5XqgUbx0\nzpkVwdyV2ROkF0u5x+3cd2b5291Hjw8D8SUVOvAmDoAOaDx5s3fp3A/qeNP2\nY20gqtWLPY2z5zk46g25h7KevPKpb1Of0nb/XlkmJkViyTmUIGPp13E4QYFm\nY2NnVZV9da4FS9hohVEH9FmAyRCTq7b0kkOGkvao4rOld45O2Msx6NHglpj3\nJ/8btKR7pVuLWtCPH45cqBRe8LlKd0QLnHChhlCeHZqPLSymz3Q0hjI8yKXI\n4sZad6i2GzQivG7msrc+tnIeOSDAzN5MaJ9Uv/aBAp4xaXSQ5E6SkFU98MN5\n5RvPSx/hiD7z3KQ8ig5P24ALiFmvJ+J3pF5hiGAqIFfodhbKlc0PHWOK/Q7e\nlrH9Gutjwq5QmUmdYTJLIdPGFH+sOqNvLmric35aPn3GcRrTkfV348JOUfN3\nNCCrm7X/agLmt9dSmfddKK5eWwZaJD0uVkYC0zI1pzYyuG7LEXrVcciuWlRX\nS4xH49EidAMqDbn5zS2nW2IZs0WJ+JStyWbZBKL2216giQ1Z2nfqlI6q7hE/\ngroH\r\n=OKe3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.24255c408.0_1617999080645_0.792014650115022","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/theme","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8283f8802ca5df67ea21ab4ed8a43084f68863c1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":42,"integrity":"sha512-OTEsaT3HMvtpZoOoP5gKlr2REf+WOY1aFY/EwmyC7gRhzBiGYAm4V5pdN9LBYKOi1iVn4lOSSMr6chFj7abmjQ==","signatures":[{"sig":"MEYCIQDLxHRDPoBvcQARWLteEDKU/dNC652UuANdd95BAP6XcwIhANP2GqOFLiMdrPZwIBba3ty444W5s7UUhUQMKgNtcr8F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNq+CRA9TVsSAnZWagAAGzMP/iT4Q1FFtX5QSYif9UhH\n1GyHh1/bLuRQxFrmE9T3aTqkyjiocil18yDIy1DKlHbefgUgTmnpjxZjPX0I\nVNSVYm8c1Pvmy63cpYxUArUMiI22D5njODX8CEeGlr8eUAhDLGTLFNo9Earg\nQuNzR2LLU/x5HnTEvUaAX44tFAiMBXzZgdedAONALRl600f4xPOV8jth8EDN\noavMk4yRiUG6lAcugs4W7Bj1arvcCdfECfye4uq7O0jEzZrysmQk/PENCTCY\nYUnbzkhVrm3LvedS/046edBneTSi+TQ+Ibev3VlqHEjOuOENcun7524lhP8v\nbsjtyXd/tYl6AHjsXrcbIalgnO9igOVxTM1praHY37DH4svhaixcO+8dS9PO\nRVfv1+vUrrvYcTeEAlEArx4+2TnqKtldLCNi/Vqx/JDeiSONL6DrPXCfGjkw\nuXktOENIF/Ra2R2BrVR9+75SsN4n06yACZNpt0PeTZGE105YxpozIvXawz3W\ni27nIiGku6qmYd4I/ZO28HP8IRIddIq4IOGVuhiTkKf38xgQJivODQdRPI8K\nX/auDWX2a1rl/IlhiKRmC1LLq8V/pxIRawldFjZlm4N65ZKPxSp712rOXM7X\nV6AnEpnuU0x80jFVz7IVm6LJzeqS+P2P2sGEa/IcsnMlSact20y0SnbmVH4a\n6+bq\r\n=9pJS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.7d6a4bb72.0_1618008765973_0.16821967038039332","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/theme","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.352b295c1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17ca494a5cf0d94cb971380e9e8544db6d8ae59d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.352b295c1.0.tgz","fileCount":42,"integrity":"sha512-qVsi78XpPAbaIznlsdLFu9hORrcZpQA5CRDEKHuBT+64hnesW9KM4J1rSctOjbBIbg98RemLz2TgoCuTsV2YRQ==","signatures":[{"sig":"MEYCIQCxmQbmGSoUprCCjaUMpt401L2DItk9D1dhfOJKVLzLagIhANcGfTsWsHeQAeD0USK2Kmb5i8kStHwSVL14hLEL/5S/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI4TCRA9TVsSAnZWagAAER8QAImQEEk59QAguTNlIT4z\nx8O3J0iWglVVO7h0hWWnKXf0rYwRJ6W552SyGfNBhKkmE2K6euxbyZMGX337\nzz4R89GUWllvchvuK1zyWVkB7eGwM8xtpqzVmtkhDSVu2NrzFJ/Db8nerfIY\n3Nei5pcnXKTXsUBrqrxlGRJHkQJE41Ntc08JzbBqsk3rR7e2eELmgg7TFZHJ\npsPbvASqieuJUYA+rT5DqNsr+AVnDYMk4jOffvdg8wCcSl9ctqqtAh2YcrrP\ngebT5dytcvNJkTE5wkQwTRiLP+Ec2xSR6vE5bIodR307lKFdKDN8VRE8WdrJ\nLYMnMxo5L7uT45/XQwEYPCg6hEgNOxLgXl1OjcRN7vRIbambWEUTLg2bdNUD\n3S3yNdwq2MqhG/yasyUV0z284QSu8G1Y6I2IQ9NGmchOLLB3SW4m0QHnMb+m\ncOkuWwMcahqSsl9BTUND0qqKDRGXOJYijD4WV6atTnapp+4TK3nj43tG89rA\nQ9RMtvYh6kyGz6eEXvfaBaH+E1nVjfkhYK7WOhzncv7Z9Mk0vwtghKm7E7Ym\nQ338QnXhmAp4u4WsKu1KaI+fChVxp1jUNbHgKnpblLeo8dD/LRgCFZJtJzH3\nRYZr22NLEN7A4+uu81OFzRrILZaxiUer3S3h3H+FTO/y+Yqq1w8rMcbz2G89\ng6az\r\n=oFB4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.352b295c1.0_1618251283076_0.7636255697380012","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/theme","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43c6270e797e7b8b9f4b06b0bb7bdebf3e22c640","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.ab99b8064.0.tgz","fileCount":42,"integrity":"sha512-iNRSn94n1n58wL0FyZ79j6wDsa4yuI2MmmbNAWHEfmdOjaW82DPsRs4Anr6tZl7DMUuXs9J29J6o2b2SCm+70g==","signatures":[{"sig":"MEUCIQDZc382aU/5AJGOmSULXG+kVtDB+V/iV1aPg8Gvp9V+eQIgHNv32vb71uf9ehl1rY9MROsEXM/Bs2me3Z6RpjAJS6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda3XCRA9TVsSAnZWagAAMAkP/1NLjHnqpodIJDsHfoQY\nvEOv5qWB+Fyyl6qnZHNy33B5h6serdChjBRfDCxl+NFEOsy4OKlTfcCUKCnh\nMRYTHpSUNPqa+USGMjiZ2zqWMOeJgz6S1BdEsO5rTBTBr9fbcPWw1vzmSfcS\nnnYHWiHLhjuV8rgz1deIMZ/kFnCT/7QAFRSSVJFqxcQMSXpzDOY5qPQD2oGw\n59SmOtUvz1LZBTVqa94OrBQ5hlnGF5f9QAoo2AEUbT27Yin4BmNksl7KXSsW\nGznj7WqSM3ZAsx4s0ta+TJBA8nXu6uwD2sENqAQ1VCaZZwQ7opUTA+xsWt6r\nGy6FFgkLCyjgnwdoyBUCsuY4zyWy3ITAJYmdeAfSOCsVroq34jfz/q7HRCNo\ndIVwrxPxBvftBEvcocuNcPx5Csr6FS+RWF+YQ+5WMJYXFil6VbxNpKZkzcxi\nwJkGtMDj5CB9Z0Qsf281MfV8Nd22BxBgOzXqyayhLZB10wsqogXoiPTU0DOR\nMcFlwavaWP/6jO3YNGz9LtV6v1h0v2VbYD308pxKJ/4RDRmbCUtCHmQbPPsa\nMFI8RhsvDM1wituFgIyDVeBhLdXYSg2FQvO63wf3QCX689KuoQIf9A8IU7Fw\nLj4/QNYKwv+b0SBDD2na8zQblvlV95DCEBlIUhJ2ecnjA4ynUDHfILMB3p+6\nCdkO\r\n=SutN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.ab99b8064.0_1618324950769_0.05209803300370952","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/theme","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9143def09e2a0b2ee1511f081f4a4bcfdb41dd4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.8f0a11e32.0.tgz","fileCount":42,"integrity":"sha512-+PwJj3c0lV5vES5sWrSZ+RWDxNyhjBT4anLojcth2GEZbwfGWhPpjjYDFPH/P0sCQlcTGD6I8SjoGYy+pwbwgg==","signatures":[{"sig":"MEUCIQDSKwlwBc2iZPS8mP9w94MO/DpcsQDeTwMdD9XQR/6seAIgBZhWjP4HDyNaOvbsbbDHD8FkayMmAv8ixDh/WjZv+4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0pFCRA9TVsSAnZWagAAIdIP/37fvuzRnuoPpugyOG8F\ns8VrgubK4ikUeMGUl8uLsxCPUTt2+3GnpsGqsW/FH5xBkWzG0DyFQsAWAF2n\nObiYNXukNjdJD5oj7xGsGGAPOEFuwBzyk0WxIWGfsT9mB/Ea7PDiNeuKpIWw\nbV1I+bl7tf+StIkXKPxWw4PKQM9bRIToTCs32NvFrz+Tg0OobR3StI4gxTpD\nrDewbviQyZzjIwFxLAy1WiTFsFpeI/hbkQQtukwEd24XiOH/tppM9TPUQprj\n6BFIkMVP/N/1KhdatBo8JWuj6nlFGU5ker0vmgFp2rY+QsAY1drlohxwx6Th\nkVBMpehyan6g2YIDdso5GIPRKegh3l1xinVMkgMfsuCbVVTB/wGBDzEAwVZj\nbKDFrn4EuM98EwHII4b8Fn6s6DzYWLCUem/3MQTtb94vV93d2KH8S1LjJSuq\nYO2LKNJAGM6wL8a/ArqNTFbSwo7YdGJTyU1ODS7EnWL05oJERNqoEEIHiwRy\nt5Xg5we7N8kx97p1ll4gFM4QS845GUDarb+xzD1FRtDXu9tZY8N3SS2345TC\njbW1dgEa31xs9Zps2FXKxN5yzJxCEGHleymHMx8Jn9kJGJJNFbGLjqd0WbzJ\nFzjK40rpxP3p049VFJ3g7IBEzzLstZR5uAzA30/UCTPZf1bOEtaZ9qB8fNjO\npwLH\r\n=tNfd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.8f0a11e32.0_1618430532834_0.5567787661538464","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/theme","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fec3d05321d46afade963b34774db43a01b8dad","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":42,"integrity":"sha512-a/vON1ONJkbD73GbdyOb5s3t9HD/WVOujrZo0KAOpVgGoo13pF8KSYjlWJmQ4IZTrJxw5PtVNVD3jVL5YtvZRA==","signatures":[{"sig":"MEUCIA2bTh7DbK0bDABCdnGX1vATa7k//ddbjoqDEDWfOGEsAiEAvnkaFRNzVh85rIgLHfk7ToA9JQITYvFVWqFh8L/R07I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeH/fCRA9TVsSAnZWagAAWkUP/RmTeUmBmVXoN62fu01R\nvZ3pwp4yYQXEPeSX+XHxEW/lcJKrQUGMSbcHTDqxXpTRzuCsJLjY9Qjih5RE\nwuDDRUMpgLK3ZIUcAuPfr4rHR+arAHxUk2z93Zii6fNoo8oT+xmyp8YmFRBk\nGtr238tsEQusCcz3azApS8qfpFXrAukc4RbIUWmptoXmKQ8IsI9fMCo7UTEm\nmarDXwhm6da+xzIYhUmrug2dpN+/UfBLggBmO9VMPoYmOyyDvlgZViIiAPAG\nJZylgfW9e4FvCYb6HQmo49aT9hZWLCw/IX+QTiy2AOKiIU25L6aWi7lu5Te2\nvsEf9uajyCUmkaCgFC5r/2xaQ9e8D2B9y8HVfkuwcigwgiaUXOiiEG8XYukT\nPpAiZyNLdJuPAmMJTkngAw/Eue0oDSvsdNi2Ao20tziazn1JRtSlUJZZH5EL\nxXD2r4gUIpTLCgNe0kWB8MEv35blqotkYfVAEyFhGbtf7Q4e7JWCfum6zYAg\nZX+o95slU3nokpTQMflcS5qjfvUtfwqDWtYMqUh7TpHyDXj0QLaf5zVwNk+l\nCB0ANDfoWWtHluO7jDZ53f74H9AhFx5D5sD46eBHQxlcaCUtmGFzqxtI/MNd\nelSizbwG+0DEoQloX12pMtgP1mmqoHd0krLEnp08Ae/04/tnaTzkLPfdOBDQ\n5C5W\r\n=1Tkv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.f5c6db8fc.0_1618509790797_0.24958473124898783","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/theme","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.3793a3143.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d789e41b5ab3df68079d782b39645528cf6883e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.3793a3143.0.tgz","fileCount":42,"integrity":"sha512-3ZXQfIoG3LPFye6OIDRpgE54AJyq1GvrIh4BSJy6cl1CNWcWTcbHAjHwY2YvEBIMAUOHEHUhgr7Aio0g/n3xWA==","signatures":[{"sig":"MEYCIQCvkM0OVFPa1MDH3DdIktij+tKTenrK6hjsijtNNCD/pgIhAKDMsMX85dFb9KnKZXk3wBKaUzwc5a0qtQtdOIDpQeI7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIY9CRA9TVsSAnZWagAAiH8P/2IFNKtfMBSrGoh8REZE\n4ankwzGURnwN7ENyvOFoy6Jcluff3/iRUfPf+mPvjeGvWxk/GCHEFx8u5PP5\n7uF3Jkpi2gMXjU+2C0TIE3eTFpms4+X32ttA6KM5KkOmx0XubauTizeFODo6\ndTG4S5I9FfCxSEQ1LybbqMo/wEQ6wAyuH5oKhc64NYKkEWjv9CUFpZpycz+2\n5ZQ7Y9/Ipi4PDPXdlq7yBaav0+IvScnIQlbXG7imPPLQOrDONOBVXDQAE844\nwBQxcG5/Pq71vVZd5BuE/zIzs12NRovE221Vg8UwH/aVh+jFuV26PHUYmpB5\nopfEs8smmOye7b1dIegKeg+Yynp/5c7f8ONgO3Lmqh5pNywZiqYokErgO0NY\nUpG4iC0KQsqj6F40z/dI/fAP9WSd0olAjme4ZbZNy3Fatdf//kTpz5dAlecs\ncpCRBe+ZqK8BayRXT142hIKlEvjjnD+R8RyLObvbxDZ8j8UMtW/1ZzfU+M9Z\nK+BkHjVH5w8zrBMqpwF3yhfuLZV7qrJ8tHFR4kS4KVrdTqezbqra6LQSnK5K\nBRnwY+zCuhclvTBn/JybxqwXYrSJtCLgyx0HVM46utYdeAl5XtQOpAe0hefW\nxyfIvgO+T87RJDRxpahzfehjxrLqWe1BjNCkwjivDBYrIcUlx3p0sW7K9LPP\nxmcZ\r\n=XB0q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.3793a3143.0_1618511420738_0.043952838290113316","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/theme","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c4a572122efc1e3747868ab9d4ab9792d0ef8c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0-canary.bc104bae7.0.tgz","fileCount":42,"integrity":"sha512-f/p4d/O+r60eo7ml+c8/m1vVxEMj5Rn4gbIYeTwFaMDyEcJM9SgVavQMumBUsbS0+VIz4ZguBb2CQ90ahB1ABg==","signatures":[{"sig":"MEUCIBi8bHXlS82EEKsyBBLtYChhRGJqeYKBJAsD4NNaf9koAiEAn3hck+4E4yS8Zaydof5Zax8EeqGpBzjkfLhXn0+Q88A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJfPCRA9TVsSAnZWagAAsJoP/2afA2B3sAQxcmWAH6Mc\nYg1rfL1/Znr2LOTEfZzcN9I2lm6HZB2T+CsH6b25iYkiSmQKbJiz0YuYJsSu\n4bsVtfXqFZRqxPcYweHIa3DWhbjq52ZsTY8HiTyepSW7dAKDfRZ/64jGy+0y\nC7yHamAA34zpoLhZqXodEBy9fxMiUgVhvo+sJ5Ldbsp3zSBMK9cKnmtkXlfH\nripYLYq925RQ18c/Yvy5DNxOxVzV+ua1ivWlUzA0+DBpuJtBtKCUcfUxII6o\nX3aRrxPTvLvatOuRGxmQ3fKT47d5uy5czEd8+1ai+7uMrpTSXlrdfZIIyjEr\nJGyHz7N9BodDx1s1el6+QWtf62bN6NTa2OfVZGF4N1wJ+nxywZdwOPcgcQWj\n9uURUE/pm0GUM5KN4mlW8fJ0IpYgz99uKYOjW5ShQanmlbjoR/xd3umF02PM\n3fAUuoH1o5uSsftIejawGmUiHuUG5oaFxga6474Fu2VxT6DwdnOSjNKWS2bF\nSyid4D88Kg7/O2uLVe9OgNaBrj162AIT91z3Q3COqJFgEwvVRHzB4+7vtYgn\n3TdoPLBCZviRN3Vixzm8E/4EAAcPeWVuHKW5jewRXNtRwamoOPWdpTQVficl\nGkxh6A+5Qm2lvQtEJoOzRQ1ZLL6CmJteizICDl8YDS/Anee6ioiqHCNn9lrd\nunHX\r\n=GQjL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0-canary.bc104bae7.0_1618515919112_0.55599824750925","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/theme","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"333b9bb3994c1febe02ede58af2e079eb332bd5d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.3f342c3f4.0.tgz","fileCount":42,"integrity":"sha512-xNszGixFqtuqUx/epgCehDfewPDThGcUloM0Gx3OJQH0PLsAliYKQc1EeVPVRAyBG8Yr/x+hGcO/agLKouSiYw==","signatures":[{"sig":"MEUCICGVQC2Rh7mieqVS+5TgHujCqJk3z4Te6VCyHwLfkK3IAiEAnhfnCjswQJgjJldBeJLIPq/Fi529pFrVIPYgOmFiDzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMPoCRA9TVsSAnZWagAATKoP/2JiQGPQfBtRvPzXroy7\nUU/vwobRz9fbxg5k5gI7Erl538QV69rAIIvC904K/fqy5hAl4TIXJZdTnxIz\nsGzThQDJ1keN39VAZS9D8z2X/Lq/ELsiPmXaqwQ/Bj6L4e4o3eiHvhuYVDwA\nRsgETQfTJJ4VQwIQKBy3+BsAtclcCcZyhpDNzwhPJXdphDXuAddi61dY4Ig+\nKV9iAhPNnYdDD3MHayK44GRQohatryi2Su/gm5wWEu9hebwCR76gPlY0zy99\nnh77SlCFTx4XvsJywqaQ1NvTFB5Vm3b0RQ/FH6jcl5QHJVVcZ0J36n3gfMi7\npGmI+lyf9Q+HhblHx81KXrf7Ebr0wq3mDvUGZlzjiv6d4TMmpcNX1Ssr3X0s\neXBfvRWxBP9iIr3oPa7XfVObAKV0B4PaIPp76BJPEWDBSuBzwOOMFFazwPqP\ntxRmrfC1P4bDYTTuaxMAiqei4oxhjGzDYDnP6huQx1EoQ9Zg70DT31oprJmg\nl0WQZ+f9xRZNte55ChxBoH5QsTNGwLzTNxRU4Ibyh/VrV1/6ZwXlzsAcRPpo\ns8oBpsChOx0uqPyZpART0q4erxiSnrq9fHP/nPRpfDmMaTXBrLcZLxHo15P2\n7AQ+vkCXxPNDZboyl+t/352yOD0GedLR+Hs8UZAC8uWr+sUkiflhR8n3aT9j\nGOO1\r\n=j19h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.3f342c3f4.0_1618527207601_0.9293504069459078","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/theme","version":"11.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@11.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"179df345034213c5ae1e8dcaf47f67f7bf6b71dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-11.0.0.tgz","fileCount":41,"integrity":"sha512-GnQI8sd2wHFD3AvmhpyRaH5o9D5Shobs1xDH4FdRU9+c+FNNqouZMDzyM6UpCX4700DzqvE7l0/1LjzB7ve7Lg==","signatures":[{"sig":"MEYCIQC9fpKZ7bdscAFIpzV8/daDuVaM+6ksRruxv4xaRJGjMAIhAIZiYoaVobZcbwE6h+THcj8xq4oSyljOPiU8Ip5WfkYb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMTbCRA9TVsSAnZWagAAWdYP/iZ2iwN9LiNy1REIoiKe\nW4rg5q7Y2bVop9cRJJJgqyj4AIQe0Yr66VSpxdQAHhZYb6FDBDvBujtP24Rv\nEOQnDAW9/byRa/uNVyrw52bKfeavasL3dxRdiWJPL0Eaz8NLM+ef8ORUaurX\nm+9dQ7nTdfD2tQl8X221j9lm3ChENEEVvoPTK58Q9hGKnvKOo3zf2VCOW1vV\n2scSmFWAcnkg1I6HcGqhXu7ljr0XlmJnERm6I+J62gHVnmHcFQFtZJE7YCYu\nTpoJVa/zEz0UzLyh0cSXvV/z5u3WJbSM/gk8N4wcXM1JEs+T7Z1oSVBn+W6/\nxUmlhaBcCyO9EcuQURg3QODbILs60hp2e9phLB6WHYVOHSVg9rxyqTZErOJx\nK2C6/nCwtuGuzRaIy+98ZYDKElxqgMohkjDT6NRQwEZuZhmlqyFmvPL4fJma\nb3/H9cNagZjktw6Z6arwbtBESxSwP29sOEE2Nqb27+HsZJwyZ9A1kxV1ozcp\ncx14T6WvM/sjCu8pv/j/SE8AK1X2YamH/rx267YETaeXM4FZuXddp/xbJo/E\nF004+NJ4K+SalMq47MYUJirkL9jrJwt2IAvbJJuaCYDHw+edtbvdg3CV+ko6\nT7EyMpvwXTBW0QWRkTaUrVTMg/HJGi1seJIcex/C/yoaGzSqp1HoVYmsSrnR\nQf4t\r\n=Copv\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"^11.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_11.0.0_1618527450563_0.914258457915863","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/theme","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daae6777381ca72cfa22e982fe55adef1bde99c6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.2ebfc5374.0.tgz","fileCount":42,"integrity":"sha512-FPRLRcmIbeecZkgKpfKJU4ajLrkn3u2gCEARmzh8z8xiY8pBq4P2vRFqC6QXMGDIY03HnJtcPR2ptMMxvu53Ww==","signatures":[{"sig":"MEUCIBNxNglhd+/aUET/IYQvysLQV0iMTSh3vP38dok75LfVAiEA0O8vBgajQmpGtBki40+rU2gfIzaDcZ68WX1qYFA+fjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefcYCRA9TVsSAnZWagAA3tUP/jfapseGhxs39/djrG2Z\nv9H6tTLD5tlpn8o5jxfVFPVZ2OY2qff1+FcdEix0ar1esou5YeIDYKsxKEvQ\n2tIufcMo1eF3/2UVqNZa2Ma0j+uxyjnrsr+wCV/+yn50HElOYPFS/WrEKiXV\n8hsHbJxkMwNAFQcBXu4smS+4YByk3BYU8bTclQ7OedQMKrXqQykJWcjDdH+h\nyGdcsAJN42e9xdMMaD2JLoknCk8IZPeY5HCommFPj2JPTQiZM0Lu8cpS/HKw\nwC8fnoE9ZwjJwC0if5sp64igD8JW/4grhPkYH2h+n0Ca56uLxbAizOPW/A6S\n5/M/y2C1IvDU5It30sL4sFLMGeBZYuox9xesLJPYneFuVwLLZmF/M8WBko4h\nNnuQIohZM74aPLGSO1RjjLOyc5pfvVBn2x+RhEbPVjnZo8lcylMsL7cDKK4A\n4U8ZU+B+8r8GT3s/XR4EWpepuPsI7qgwYO22cCZGWEg2Wdi84P6eWDBLy4hZ\n+bH1ZS4wM5BHwue/F++FtNaONLZX5WwpYAfgVJSjJEN7CgPsK2KxtFpOgPnX\nU1XZGt+EPFgnZP5/I1rafljCL5BlOxFejE+ESzYtL+esCdK9EBibfWEa2wTb\nPYI4psY6mYNJshd6/SQSl/iF6KZWJgvuPnKUYZarrewV7qzHdSyEowVVpumb\nCJoA\r\n=PaiM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.2ebfc5374.0_1618605847616_0.8506870979451211","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/theme","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.5631828e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"656289627940cb3dc1836fcca95486f97e7a2efc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.5631828e1.0.tgz","fileCount":42,"integrity":"sha512-53TAMxu8cMbbDsgnp+ODB01y7JnkzlTtp9dQ2vw7S4Ztj0m61GvYH3SYYTQJqN2rOg/z+Vo013tJbAPcMsDhZg==","signatures":[{"sig":"MEYCIQC2GLeBEtr6XN5B+yWzf4HUqhIT4udulIUB5+jWhtILdQIhAL0V8iCOwLlogxkqO2AAnNjJ6hcJD775IHOJluQnIlFc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepI8CRA9TVsSAnZWagAASNQP/2ECgJweEGsKlGmkZPEb\nv1z4f0uZyh1rDqUxVdwWWi48LFiRVJdDCaYThXqldNJr9Cppfu3imPClCNXO\n3rcRx0pk0ZTmZv/sjESR/oHZLA7y1gvaYlP2ytdMenhcDLw+TX+yfKma3FTi\nc2u3mfYMMaO6kaWM0Nh4UIbvWI7nvwGd6k11ooosP1NogAiS2Mz1WaOboxla\nT89LoQFqquqTU5eRx4gacoHAVWtOovaNS96OvGyEdR3Ibwno4T9PzJJ3wdAH\nJGzm8fEJY08yImPW4eZIQ2bslGD4OJNCyTOft77mnujksHdHreoZzJgXle5Y\nlvTiJlGY3a08TlM0WJIp93O3wc9bSdlvHUYmlXpswVRXEPZKjrMkA1fzRfms\n/itveiK2f9Agk5xe0hImKP+IFHvQwYwi7m7Nbffqh9SdyaPgWIqanXewr9bu\n8Edi3WwY7aUqWGWZ6ZIpHMP23+V15VlGHg9S8CYNdpLPMzFWwUN8YmmJT7nd\nE4r8Um6x8pWPpcfkF0EJKXGDqy+lGXgDPf/U8N0CMf2Ydc4NSZ2/poR5jblA\nCE4W1MJaMh3miXo0JNriCg8NLpyttY8SyruC08D536a/vQjZp6Ww7JqQACCy\nsBFk+d/bZEQhcQeUvKcn5dNn80L2yuXXZDYDbh+eyyiU8EkYKy86hWxUSbiy\nS2WZ\r\n=HeGT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.5631828e1.0_1618645564393_0.32994304593825796","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/theme","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.bd685395b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00028c118c6ac19d15014a294ffb8db2239c8e80","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.bd685395b.0.tgz","fileCount":42,"integrity":"sha512-b3aVypPlPaHzcNrVrxvgMXgNQa2BX6jmwHjfzY5PPgCfFzMgPhsSH9Rv8WbOySsm47tBJJ1ls5VwBtG46nTwyg==","signatures":[{"sig":"MEUCIGVc0h9i4X3lqeJ1K+JgAG457qs5mFWCj4wUUgCsR3D/AiEA+3150MPyTemM+ndIyD03sdNeNDk5RQhzdZLyWW5mOSo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc6gCRA9TVsSAnZWagAAeEYP/jHSQh8PfkaZPnuiMs+B\nN/eDWRtqlnbI28wLXVGWPAK3w1pCjGfRljBV9cO93g+c/68TPIoe+N+ov59s\ns5SrQbnsVfwLb+T8GeFqEvTx5E4asFYO7qlFtcHwqHI/0adAGjNoxmn8CHu7\nsuglx9yKQ4IdKMtMHoOMBEP2NXm13x28pPzHgy3e7pwAJt2HRSMSiBVe5Zdd\npYveAVXZJd+SQomZMCYEr9S2nKO6a2cK3ueY3fA29n9LnkgxqlBCXUQbnhl5\nbpj+UcY6oG1sD7sjU9kZ71Wmzu9yBTCiLxkDKd1e0yoOFnLhrYxlKSRtHgMb\nP1ekGl5n1XPK7ZQyq7kQknbBWQGifnvmmysQgQpOfRuE0WRNsm2EOqh8jqOD\n+1oJSr7pQ2QHHbqaluOP/u2QMDcpUic4paKjtFe2FkOx4IWG9nVJLXyShT+5\nwKjT6WDb7PkI52Kt0aLMCPdqhxq3FqSiZRMAwaqjB+nTy03TtO0Jc51SFirB\nPdEhlf3xcTEd7ToMzNCvZ+zuu8xxAw/D1376OcbWr7rHvEcmi5+2l9MHLPg8\nIT6WKzvPALa9BAZ7e6Xmb/5cuPxunfxN73mSv3C1DWVXhIKcVEt0aT2ZjWcc\n8q3hL2ccgkGbWXl9k1qCBZr2otslUDJbEkTr9m3Phj2vpc78y3MoYVzFkIfq\nlATc\r\n=KfeW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.bd685395b.0_1618857632330_0.005280248571294388","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/theme","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.b52196498.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d5ed493c7a499ebb22768737d8c1654c99a12bc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.b52196498.0.tgz","fileCount":42,"integrity":"sha512-J1nwjUtHd5UEh/0jqfvYZRmjtoqKLsIaA1ZHwsaSCy14YVb3sWRqe5ddYkxDpxdRgDo3jVihMpEamNiAhtetuA==","signatures":[{"sig":"MEQCIAWRN/h0pEhqvXLmJj0cgbbjfaSx8jAAFi/gvBMKlLNbAiAX1ey3vbqbu7/RwwIX9YTTzb/sa5wRVxFBELoYXFqrXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeCSCRA9TVsSAnZWagAAqpkP/Rtsav30M4h+eXkl4bhw\nnVYJSZ47YFZzP+KDOtK7kKfrE8Qo0MxN+H9LYKU1eanAW/aCytw3OU9veSKy\nP8mrLZiadZ7ylzOMrBlhEdQFMYyHEL1J+oUtf2aOGOvyAwsLAAIkeM4XXDFF\nQQrRznyZnFMfQjYcM+9IeahD6HaIFWEQK65SCW/X66ZsJil1e7zd8hX/OZ4O\n8voh7ukvEswq8dTeO0iLNe7sCHSaF0f/4mQ/9NfT6lne/xxVofVQCkDfJe3R\n/w9Q352Lop8EEwtT3yo/9lcYxWwTuQHegBgbrj7HiDjfiJm+CTzI9tNgJEX8\nDNI8iDHf52ulydiwPNxlPiRUlx81kdOWa35Uub9GwrdHlNXMfl25vS3Wf6ta\nJYr9wwZzX+mccecz+36Zs5srk0eKbovICjfUb3Dr4H4azCwc/6hubLFoUdYP\nIBCgoJAxs/yricI67W3SKdmaHAjUzxn0JaLymW8eOZXf9Y58bCqI1DEKaKnQ\ntF4dcMmillD+V2qBCm0qMrpHZTeb/3jtoZ1cMSFbfpflX28gUnE5kExjdx32\nLgbz9c4UVqo9dH/kS1UTtA/IWLcx5qPx4FGXUx9wH1FtS4+7+SzmolhkvlCZ\n8uMQRjEKFa/DfUWaZuJbNYjje8bgFI0HULvKIvCVTjjDRrxy2XdH0Fmdyohd\n7lsT\r\n=F+Gl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.b52196498.0_1618862226198_0.61183120583076","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/theme","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc0ea7d22d7b05b873812b1b2e24a72e679f8172","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.8ba3e298c.0.tgz","fileCount":42,"integrity":"sha512-t2HDiCfrpd664vLvpQew0oVCo5MPCBCNzB+7qxvit8iSrekmYRMFj5zG+6mRFw9qGRGrrxKe8fy7eUJxMKQrRg==","signatures":[{"sig":"MEUCIHADkc+1g1roQPlDfejtRqkJroghZEqSPnGNaciynf5uAiEArFmy88aRL+WOszhBjGDbQP/upMFgZ7m6CS1NKzs+ho4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDGuCRA9TVsSAnZWagAAQuEP/14DoOtkMFxvJCdGCIYz\nP1iIV497A+3e92IYeb0eybGnMHQ9UNlY672fPg9KCG7lFqTkJy9ZWi5AjP4c\nu8rcdsvwsYL/PLnF38m3fxJbCSAn2ZihEPQKQNhAVx8w7QxW/ZBFIki4BQP4\nwjz6P3iDUCP0dh+6QZdlkuopTDLbm7uj9c3WA458/DpfCWZxd9vbi5tRUE0j\n3Mz4PNB2U2FbaX2SBzO4ev3F3A0ex3q3p1RWq9xDgFParva59c5j+tlmmId9\ntWxNKfAzp7DRgcEm/Is7geXjXYkumbCC1HqWDT8tYYbl7xyuSWuAgw+NItum\ncfNL19/yGM9ObNpXLIIGV06Hr1B4Xo13qSftvKPmmOhMonj/UrDm6Ce8vL2J\nQgaS0SBYTrz+dEFRZzKHuqFSkEdNTKjA8kej7PGrGLela0ugSl24wW1jMqi/\nNJcCuTf2YRGHHNGrYFEli9HoaQbL7c2csvMCmmaxx6Q51BCd6vqbrRvVhjZu\nMMVwYNszb3UN/Bb08fOkrdcWZiVeEfR358gsqE0ybGx9K4U8s+0QgSceXp/v\n/qKmQHmQTHye5n31USOfRJS+uveh8K4XlZE6HC3PCYIw7jjx00gMA9/fyBc7\nHldKDraNttv0OhOeDMJ2LYWLR5ziulIt7q74ghBtE8l1ota+HhErN+YpZFt4\nddra\r\n=hR3M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.8ba3e298c.0_1619014062003_0.266620269165573","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/theme","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.c629eab71.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42f45a2d12ff3f1a20328803c67893de7000204c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.c629eab71.0.tgz","fileCount":42,"integrity":"sha512-vok4+FT24rTCkuhdF/XiS7IBrr6r6KmEsP29V+kWKRp8Dg4DtRY09vwHPWB/Uie7krmr+MmLmSr3gpqKNZpQVg==","signatures":[{"sig":"MEYCIQCXJd2ipzVcCTysLwuiQDaIVNDv0AtGmJVRQC60Xtl+HQIhAN6d8E11IwI4orAjdJGNC0SehnV/4fnk+Z98Ok6zdq0N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggINhCRA9TVsSAnZWagAACDEP/0bglFR1eGNHWw2axc77\nNtZvKlZtxvspymKnlYOp6geuSZTGIcKRr2DgPsbs4HYMonvOD5hooWH4WTeq\nzbzyjm/WGbDgj3NXDpmVmvn3Uji4lw0xL4a7H/zciYcQAyyv/Z6VeL6C9o57\nQ1PBrzSbJUdz9m0hqPWfJdCyn0qVNhKlVr653qVu2WGKWdflMr+PYzAMnAfC\n12s5pUH/fNMtHA2E+FoeG9RDIABq2v9idKO57ZgAJGmVcZV/O9wYOBjNIPuJ\nBrSnSMjSprr+UJ/SXzWk2HMYnEs/ql8Q2iEzvD7q8LybnhT7m0qfyM4LSHPl\nZQZjyOHxvMlgeHCirJTAyqIX0NuP8VfQJQEZpHmuh8PCYuFvX53Cem8EeGhL\nNuXx2fVuXR7/pHyFm49jUPE4GD906HskVUrazHWorignFTBIV92qbBqn2fug\nVM5ZUwsY/ls7A2JScLg8wp8xJEhi5SExiJwEpXXhFMV7cEBWhUOuGk7aKBM9\nIZgNQqJSQof0oNPrR5sjtiwRc1/jRIfiamvaC+SAJhYaMhZxnfN8xymArUEZ\nR7E4KGc10e0GvTqREh7oaYGHF2fjUeFbbUEdHJsILWQ7xDrSbiT+HrTTpYG1\nTGEYmFNVan35Wx9v43QqesxVJ+OfzcVzm7xQZxB2WUYgQmiE6juCZMAr7WPC\nZuLe\r\n=Ceh8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.c629eab71.0_1619034976649_0.3161769980445708","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/theme","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3e2083dc3276a942d344d1f0ef505654b7e0c9e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.8ace3b810.0.tgz","fileCount":42,"integrity":"sha512-bNgdpzvTiC3Cv/98GOMrAApcOAE90VdfUF5TDd9E1FPI/3hHoZvGiB0WL4qoq8WCjTyRKiIPgBuwnnANtpucxQ==","signatures":[{"sig":"MEQCIEsWvthbWq6AQMcmM6bm2Jj//17HL0ddj/9Rb+R6P4i/AiB3GkhBLWWRxwJe/klyCaYl+Rc/US+7n4ybOQ6HE1Db/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIzvCRA9TVsSAnZWagAAqkYP/jGbj1sjrOhdZg5YYSQv\nhmSZD9lZU+gIz0rvinpsI95hBUJeOfau3vTAB8C18cMNUmhKmOoPsprM+0gT\n8LLpfNzhQy/ZURE+1V6cYqCLwTVM4QqB219DK16vrFJLQROzABUVN0e1A1QL\nbzTJvmJkI/hiYSovcEHAJrX/PPWsYGw1YHykI4b10OqT5SxDba3DnC020mO3\n4kKAS5WuiqT7SuQrnfwRDJXgg0rKTZiCVtv1TAeFv8ajUitHMNR7AGmlpmLz\nt7cj3L6jOZtPECd3Pr53YLZ4JzJV83XyfEfcVaUdZU/Q2t1+kQhpnlkiUbjw\nhdPgDi5nNkKtW06mUYXH9q89YKZDCHApPGpatNSfYVu4c77ZZagZuD/I3V8G\nytQEAGQM9JESC4eVr/zGx9O9WItvLSRb6qlr6j1RYoHKVHyjNEzYzwh6tB/V\nwOOgd9fpmCtrptclDBxwW14Im3vHC7DSaP+MDX4EarnMuA6WFq9KMgye3nrh\nnB1V6SYLtI1492HQ3hDZKp+FjzLx8DYf2HWrQPafF99DCljtGxjUtK+wmv5P\nifDk65Aaz9/XWMJuJV87WlCqJbzeunl7qlfcGMoSA7IlvkEs68UBBSbH1GpS\nAmSpmYOVOEIZwIVOIfGJRIBvnj/yPuM6SVbHLMV41uabZcly0jSAdJzWRTAG\nh4QM\r\n=uLjq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.8ace3b810.0_1619037423469_0.2544205770004033","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/theme","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca4bf0dba37bd0867f3c80062c88d7192a9e621d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.70beaf42d.0.tgz","fileCount":42,"integrity":"sha512-+j6CHyl64m0obqZAy9M14voJ037c5LafPLPY/Z1uJaQtJS9PV816JUR1IwtF3UgL8HG1L04Ltcam35c14UnZGQ==","signatures":[{"sig":"MEUCIH1TDFD2IoGCAturo3RuroCt9WlgZZPWVxwkUOd6ODQmAiEAngWI4BVIWm3HggHEQuW+aE5+8GVH//mM8P+W2lohN7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI+oCRA9TVsSAnZWagAAnYoP/2zAKlAG12zNDbOiFmvp\nyg6ALRWTj78cz21pEvoWarZlXSLRE33F8ijB6SjIXa3i9aqGoXnPeSuyrrbL\nsTaN99JsPXKyKX/YuGaGj6X9xkciCAIzl0hw9K+o85c792EHsnvxQqdhicEM\nrC7JQULqWtC9NFpB6LvYSCTOKdLWqAWJVILsnerCi1Yd9dK6Um0DtA6/64rl\nXnenVF6uFJsxKa7VCKFdvMf0jlBCbf8kysK1NQrcH7acjiKJZgDHZPO2Q9z3\nld3gEZnjic2DLDnu+yV+N1ZQv0UQFwTHiBVAVrYKu9fFwmhoTNpAYOX/Sa0F\nac/pLWBooDDuOAxXsCyiPrZStwoLdrRwtZ9sYIndT+UIizwy8ddm00dafSET\nS9qAz7DMYB2VhDGctea8wx2G+LbIrO+4sGUqeksFZ8PTihQJMHT3ni4aww/9\nbnwGRuwMkT0bQVsFgasWXBEyd0n9XP6qkiCxvG0J/Ac8Txd/TX9OS26TQeSA\npZuBHqO2QtU3KF25hFYXHpw6EAmxUfU3YChu0/xT06kDFR00n8p+jVEMDeiy\n1JTieuF8KZh9Abr6EckbIAAteZZFmIMkRRu7IrjJG6z9twVDJOcNdbqMJhgy\njTXc7oDlwN3EfJL1qp99KXO539TNoAzkZbJKIxZKZrQuWVFm7B291RcpauhD\nizcc\r\n=inas\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.70beaf42d.0_1619038119801_0.7907468393142134","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/theme","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.cad489689.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"744de13bea3f404978ee28be874971b83f798c4d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.cad489689.0.tgz","fileCount":42,"integrity":"sha512-qcNx9sPlgoaHv6XUaUatVi7RXRD3Zfl9M0E9vWtJi/en0UFNQrEiHD/aUAzaIEKqwxxolyQBI2yo457aVh4sfA==","signatures":[{"sig":"MEQCIGkQ9WtpiKEOXqJtkKkbkzy4CMbTJWCPrGR2kDB6t237AiB5SjbR1kMV/qc2RoA/+gneEIKlHciox+ia1wVt4WGGdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggajiCRA9TVsSAnZWagAAEkkP/3SBovqDSSIPQ9jDboL4\nwbOS8UKggxsSebYLAJ5VCUaaF4T4fkOmdF4HPJSo7VVdlRiNkTL7vBprY80p\nrOqz97v7vztrt9L6acm55fVHseAI2/xAD9HDkMZmNmLz1JZgejyhwvoF5GUR\nmTd0izWSWfluXyXqUz00IZoLlkihc6lP/6zDEQvFFECaeAanib8mTeiNKEss\ntkgR1nTmNzssehpmlWojcvK+TzQMKKz2/+A7u2bgxz497icaghCyKIpii8HD\nMN4d0iqQojaGYQCAP5GjysTXOUgRJv+Bo8NqvnNcwydeWiKB/AD3Ipz7wBDs\nCkkXLAOcztF26nUm23TqkXy7BTqzWKyU/OBc9A3wIpDxzcELMHMa67gAB9dr\nxLAtfmsMeslhXIY0hNS4pR1O//98ToP8h2GzEE+YQfdsepI5X5H4oI58LQ/s\nw3BUdpeeRbMnvN7GQAh3ibh918uB8/ptzNRyRkwFNzS/7NvxrFjF4dW62ty7\n1wEy0bQblRp+pVAZuA3tr9JaLh7bNs/lOlUSz8qZUtUw+hKLirlEAgPKd5BG\nPWgBffh5qjhHKXRzPw9DqNKI9swZUK2Z+CmfjI4IEBx65JkX6k64UWCwymtj\nBUoUWcCrp+U9kv8YXpIuAt47hzoQfkzE3HR9OB8zb7TuTV1x5JaS5mlKxFaZ\nj/Zm\r\n=mXWh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.cad489689.0_1619110113622_0.2895367423602051","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/theme","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.d928692b5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"304f5cbe5130fe43e4726d0789ad939ecc77bc06","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.d928692b5.0.tgz","fileCount":42,"integrity":"sha512-0tW8YCdpyULcPhtVQ21tPcZ41AmeVJGmozhngJyNONnxPWfoeCYqj4C1gVTluHSWKjQTD1WS6NQ2IJI4xYQRBg==","signatures":[{"sig":"MEQCIG3hwAgGaIpYOTyO6/rE5fTPqZBAJ6vcyXPkrP318z+HAiBEU0g1DjbSdf6iQpAnDf7DRBeZ9geXDCBgaKjoKjLF9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwTxCRA9TVsSAnZWagAAkI0P/2a6bRDQODpYoc2is3aK\nDhktgtA1ANmzwrwZ33VNQ1f2uyr689Z7SucOXoR9SBBANpNtKeDOqW9Mss0J\nxtNmuA1XnQLVgml9HWCO5a4eEB0ckMC5tL9L3bFY+DBVtT6C4UxXFwKPkCAB\nWk81lW3m6m1obYB0umAMsdTNdzOac4zKJcetsUEBwNDs9rtMb09f8bgd4q/f\niaOsLCVrQoiYxTtqXm4UdyXshNzCQxhrZu++I7/iReasZwwi39peFPmZaFz+\nhcgZgD79/jmSuxPJRYMpGcLRJBC8LWQ52H2bbjPOHgaSO7x8X+AoW7BfTUvs\nq6GPe4L4c6O1Olc5DzlMJtHz6Ee3bzi4nvKfZj+xdoCQOj49kzf2QD8ZGana\nc56U/roImyoXZl25nuQedYORiUdm7J/QdXkIScfxGsrovUflHUyyX8+Bt5x8\npRuiCGzDKJ5Qbuf4RHtusRwR+VvAc3zafDZ5LQVRTpjurQ/7TZJsh04Ty+91\ndoFUWfARfm05d5jyxvf5ud3h7HMJnsUv5ri+b9lljdkFDdWsgieWj0/3ITqJ\nxi8admPlpLc4Y3ReEhmbIyIu4qahdwuoyGHkDjtQNR10GoX3A+ZJ1pRIPuIX\nwmLdMJPmk5PtMi3J88DhzYgSKe2uUVzG+mLxfn14S5DR+8ijIYOIBjws4/Nu\nFWnL\r\n=9wqy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.d928692b5.0_1619199217194_0.05623371021662393","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/theme","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d098f0b2c79ca4aa9af9e1fe2ccc1d955126936c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.8f68de8f3.0.tgz","fileCount":42,"integrity":"sha512-zBEMNNy2qqilpttFfIwbnA1Bo/4TKDFBSZPeUYYkPqzvWWR2bI+i+TM+rxjiokZZqplw/NUb69c742LUcQ9ELw==","signatures":[{"sig":"MEUCIQDomH9o7z9cuCXn+EfxvoOJfi5UqEEOG3W6xpbMzcOoZwIgdEBaxU3ml4WW/HUsqGla6QJZJ3HNgyc4/sl+YCsDwhc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw35CRA9TVsSAnZWagAAohMP/3fM1LYurDctijNdvLUW\nmz24rk9aPXUP9tCoAxq3W+PTP+MR351xGXHF3Wn4kiHBanAMPFF09u4vqxNF\n5W6Ju50Oe9mFkZveCuEDFOsrSIlMqI9tqwW7iCukvnFXOtgEr8VauJrbTB9P\nzIl7gCOHTYtTr2i66Q/nSTao7Ay0cpqmfUTZmYORzWZY8cL3Ps9YmXCTemDQ\non0FB8ZY67fFFipUaxamTLwG/EbVtahfiYklptCrUqXy2MTZ9lX5AYmvMRjC\n99Vcap5lOoZuiogIMojpoChd0FwaF7/E7bPlK2q98bh0p/NXL8ob6wClaQe0\nYb9h3bRqu3fvlu79e5jb01c1lOrqoxVgb4ORMQ6TUoIweDzNMK0USYqBERKw\nvGm+KOJTqKON95WVRmJKx0ClDA7Y3Ug0TTo2zjB05M0+JEEqz83wQYnZZic7\nonuzHkEEI2wK5Fw5Tj8ij50Xhesti5kAzITlgJOhTIVlZFwUL5QzF7KGbs0j\nxqUzT6QnH6LvSI3KdmrDF6mjVHUe7A2hw/pBtWWFrDTH4zQLB6wVOhoT3SUy\nB18IO7LIUOkfzvI23dGI2gH2q8N94LN5VxZ81lRmC6aqPNasAw4vnF7Qp2jk\nfASUZ3Hwt+SHaUHzH98/IHDADbG5QxL3TV0/zUBTtG+BsBk7FvtWKe2Ss/X6\nty+l\r\n=OHT+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.8f68de8f3.0_1619201528304_0.195371216260249","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/theme","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.05753cf77.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ddae30754d3ea434ddde83afe3cd9099b6be2e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.05753cf77.0.tgz","fileCount":42,"integrity":"sha512-+SElkjJButP22pnIZpahex76apZSa88Js+kb8qHPBLqdZd86rrdCjI6vh7ggmVBjyJmLvsF4UHzXf9qkbUrRUQ==","signatures":[{"sig":"MEUCIDZnFb2qJJVHUlFmpHv/O5Sjc6re/Jmq+JvASiCQRUGsAiEA1Fqi3F1gQ5YdPFxQ2fvsw+m0SdNXTrh7W0beJh0QyNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1teCRA9TVsSAnZWagAAK+sP/jrMp/9l8Uoa5sLq5twh\nirOmb1vYEKqrGYYepSULBTDlSftgVjMx/4QaEr0KdlRoptbCpnuamMqFs3wi\nNXGy7c8lPhy6sBuTks8ZeotocJmUWQ2UkOggA9OctFM724Ipgf4ewnlPpgjN\ntrzB2n6CAT72gsZID7GbF4jDbAXT8L27QXz+aX2tvlpSG5Oz2dqsX9qc3UaS\nHXClVbWtuYMTxMDeWi0cOLnh7Mm3ckVIfv/Fayd/XXISKmnfauKu3FurScrt\nGmxWvNqcaeKH+3atwDPPjwtuuzNY/SrNQL+Bkhm4aSx5+btdZQB65eHeIi+h\nEUrFbxMX4Uy20aE4LfIvVi2tM+wU1g9DHU0MVKJwpgNtDqT9eVSf7s8mc6sc\nSyXWYaxacQ+0hG7pwIdlso1dwpENlp66lBYnw51yu+vHG+Mp7pfFnsfXHAge\nHcFJlVLEkrrgjEouH07pyF3kPBYVoe+8UmQnJMNJDBiw36f8s51laQDonWGY\nj+CUdW0UuqsqOMFEGkL3sJLadft4zQUgo5MHHPC9U6ZvKHlJ8McRneKUpxMf\nHri4Za4lYD0BNCxQ504QL3oK8GgE0QEliC99a/NSA8nR14Eyi0sE8rwtGHWC\nKe9sEcjkky9dUdJuNAnnw4gSJ+3kdVaDmRy8wtFP945IlGixWFp4LyxyINVq\n23c7\r\n=7pw+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.05753cf77.0_1619221341680_0.5319336190202533","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/theme","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcbbe60d573791eee16f3dbf08b09f28bceee75a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.ef43e6d96.0.tgz","fileCount":42,"integrity":"sha512-kUN9+qb/jyY53jcYObTwD4F9RGzGWj2gxARKU/KsLsO/N+abPFbGf1ZlNL0W41EoKtyp998MZIqFJbqpH7AkPg==","signatures":[{"sig":"MEQCIExtVSXTH17K8AVx6Wl4KLJercmh0n3Z4x6ai2LQglOvAiBi3+79bsooWATMOMx7pYM0teMsBoG7iR207IJmeEdCAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1zZCRA9TVsSAnZWagAATOgP/00L3x0F1j0qcBYkaoMc\n+QqQ1r6tRZ91ZfMsAs0st3Mz3DkL9ripGBcHE30jYR7bYnO30tmvPvj8+kul\nvnbmkGTeaeFevj4xFU2tIBjSpxH5/vwAmo92lrj3vdNoj8f3AYHUezv3ET68\nk+Lq65x/iEKGona9DwlhK0V3C+bN6phEX27UteB3wwQZS8SUUZyChje/tZi7\nvnRzEPTvoVJw64dHSmBkiU2a57Tex4TDkFLBrgKfVcqh8KlfuGVCuC/U8bg2\nNZTHm5vpNhS7lE0gXrJXC6uIS1VxZmAKHupmqijOSma273MdFG3LmmO7pm/S\nbBtn2OGC5MObQNHVQRs1cbmWWty0vwAxBY8tbm3fN2YrgSC/YceGmkMD7RLR\nWHDxJxNfKZrLQWwKBHP86FpyZhZirYS2KoPhfI0rtGoeV+OKOXS3Ot5h6oGq\nRD9ulBe/stpxnzh2TRmJ06EX+JCIQucMHEKIai8H4bcPPiYp/TGOVjB+Vt7x\nkBJFKotpXrns7rGOIaY+RDfUebY4a7Wanrq0Z04gALsnx/fwUmnUaH6GlshU\n+lW1Zmp/c2m6kVKKHwmzCZPlsmYY30LMCT7axKffaxl4SgOJxl88FKLBse8F\nwUA2DsK7YJ6LppZg4Xl/6p3zroMEFBb5qFqC/zul4iAlcyQLGNJUqn35YGUx\nCHbO\r\n=2w6D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.ef43e6d96.0_1619221720567_0.48716104361793056","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/theme","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2443874251a0cd827a8829e55eb792a366400508","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.197f64fa2.0.tgz","fileCount":42,"integrity":"sha512-7juM8i8nU1LfQjmknAi8OdUwg+Db2XYL9LBQNyQ0pib/WguuydLCwqZWckGGClBsyenn7MLCwIn//GtB5YO1eg==","signatures":[{"sig":"MEQCIDlktLWKX3DJj1dhVjGiEKwgNilNTUEg8n3n1SS8KUTVAiArIj1VWzj2ENvMB6QCJVKDmHhKfINrC/aunRnYefZsCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvOfCRA9TVsSAnZWagAAAhoP/A3Z1G5YxDtuDiP5r+6y\n0aSQpLF/haQPou4vsATP/B2+tOEfg9wj+xTUxDGGnZ1Za696YTCRMp7Anh7D\n+5qNoq4PZ+EMRRGPE/pjRLIHsOBJiSoXXRIdO9YmDgAcamirZYFpssRNCloR\nz5pGzPi7twDc26Xv9be5CypfJt7PTAaeOIM29XHAnGuLsWBzjeItFjmX70MY\nKPBdzKmS53K0wH3KJphRpyTbq0bEywJPUQwdW9sgLyYWmMvdR9xss2uos8CD\n70VK3KJTU6TgPa81txI9a/Gu02MeTf0lxtwhfWuA6zoIMfcupeMk6OwctPsw\nGHA3cLsZ4ksRGvOm/mHHF65DanYV0cRLzNgQ0hOFnph5zetKabOotWJ0rgDh\n0ynne7V614fTlzHR0hFlxoolUCn6YqudQhfOy+4vsx/1FlylvIxv/8dEjcrf\nfOEUqVROvS7emAsd+96+MTdPgVeLrlifL1Lth0cpVC7SKnSWqc9uam5V2STk\nMgCALMACwDnhCHPRopn1rdzQPRtzMsWQvVmOvGLkqhQJsxaWRQtjn1nntfWC\neiXhksQVhMmRIjJEXmTnZZsN3JVgttTlCQmO0Ni82J7Ytbm9lCA8kwdzaury\nG+3bB+WRbxQL96HbrC7Sb2KiQ3yQN+j2FlD+CObMoqbfdL6kzLUw0f/pbhaX\nIkjo\r\n=Z54K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.197f64fa2.0_1619456927271_0.12032977385784016","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/theme","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"373e551966128af499a6f81ea4d09eb453d09c5c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":42,"integrity":"sha512-adVY0H31uf3bouPIH94vp5PlYCCIdz9NqAcsqAvdXIGe6Z5d2fxZBHPOafKzBWzKNzZDZArpB/CCkp/ZIcKttw==","signatures":[{"sig":"MEYCIQCmZwZtwuDEZ0pIk0IonOT4l8wLy+aiFqPzGK0sZuBEhQIhANfWAJ0SPZsXSRGausubi+SqiqkQrkUGSgg6PGd+H1G3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2aGCRA9TVsSAnZWagAANKwP/iZZ42N0iAZ9uqA9qKoh\nYb5CkMr5mZ3T8reupEj68WN+BVH/HhOYgEOUusDtWFiPDRhwaJY5qMOc3NUq\n76eMuulxE96fnHHxOp4YjYvyrPEH6ZEkGdBf6/xskY/tkHoz6qdayfcYsVMv\n9vdTV3d2CXgXBH3H4qs1tR2VWMFz+bjR0RehRmOEhhAPbYXW6RljmM5VfDH+\nX0pPPnn4Khqc6+1ZKihGL94iwUbpoviMJzGXYpNRgk9BCm+dCfMKIgYmx6Mv\nkL2gDZkyBPGOF7aoMCjTQ7b2qcRaPA/m64m8cOe8lTlLKb/PCf+85aJRA3NI\n+U59v21GuW24fXczIKt+QvDeYyyFTmN80I+YtXYshVlp1slX+CuFvUIWGJm2\n1xyu2kY/7OIGiGtSOOtDSoRCiVnXigYl6LNCQlPOsKCyY5Yt63PJ/0pzRj47\nS3brBCMS6PsTCpibdgle8QfyFTjZYlXnCGzl6hRafZE7qErr51tzGblLwkNe\n5/JEDmPvYpA3JsWRD0MCkz1h938CW3jG4Z5LXG8xfeJrnn5f5arGBIA1LCgf\nj+ja4n+wREGuFAuj4d4X5uy2DgrE428qrYNQF1HQxsyM9xs/adzDN1BILec8\nDQXa18gs9nIpLDQ237btHSgwXd76YybN0cJKlJgtBQ1NWsZwABJsVEQUNhXr\nnMvc\r\n=FUiJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.55ad2d7d8.0_1619486341849_0.23232871744158712","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/theme","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"652fda6da0132c708e2df0f9f817b2731bf0e9d7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.ec4ac5234.0.tgz","fileCount":42,"integrity":"sha512-TxQVGV4vocQmaU+Z4LAvwRJcjNQrAuHKuzk0bQfC37pQ/W+xF/HEB6O4BIiWbPKjyRijxixjGBlrBG+uBk/vOw==","signatures":[{"sig":"MEUCIQCrZMdy7GtoJdA2kkKCljBPhsrOi19xVSKt74zrMErdEAIgVu+0h+eXhFbh1DvI77MM/FmWMDrZOYzYygCy7MBY2c4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8P+CRA9TVsSAnZWagAAh74P/2drq8QMPuwVux+0kRHm\nM9SVeDo5ZqIXK2sEa/MzLngYUTUC1kT/0TNV5IA+i8dqlEs21NQFPCM1lw+o\nJNvR6J1MnX8k5GdQhYdYVQC70UnK0P8dS89OieND9grcKquSZcw2QbpNKSr0\nc2evFYCqeZU0wFbGf8d3f3zYUcG4F8xHMyosnrnDovfJ8yCb61b24O9kmtHP\nnjCq6KE/QRb0ZZKAClymDYbqCzNcFZjoscBbTgteHXGLqQtduOqZMoPhSnr4\nGonHVmhqlh2gDuQ2Q1em0qN1fFLskvNxjXdEN2l+89B2ie2l25HiZmBcHqlC\n8e521UpvFt7Ncd0qdIU9AOSwfrSgtCYYbCERAHROFGtY2NL9x5rZQvzet6Mv\n2s8tiYqDP1EiDKLUG7UZHdLlDLEzqUa/S5GvzmjqzN6uXcX1IY1QZYEulNxQ\n7ha10qiveBo/A1f++sSF5l+1tGlbexMXdnJuwf/rrddP5yPEoxMYBpEUq52U\nNy0yN84FM1IRjV/dUhc+me+rGHoq3NyvrDdobsLoKFAh3fQpUqm+fU5FOgQS\ndZmoERoYSRJ4/tjIneKVkauuhqxhDPbPc5sAxjJhTlHKkPx544cNrtoolbAy\nzdJC9aXBj3nXvDxu30kjmqBehysY7DLCP00y+NOdrlZDgiDD4/yWvxg6Uy4W\nU2+t\r\n=7HVF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.ec4ac5234.0_1619510270086_0.47586156024805093","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/theme","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecb9a686429d056ae10b6f92c4e472306a5cd20a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.b0579acdb.0.tgz","fileCount":42,"integrity":"sha512-67HJIlXtV+wuZHGFvozTXi+eVQWkT68mwPzWWEgk94FsoJA9OUZ+TLvSUcK3r4P3k35yIDItLGDdkSWgW72Yog==","signatures":[{"sig":"MEYCIQC8iFF0bBK6CS6RkiAGEsxwmpM8fbCsLgTpKbGwHLuTYwIhAJ2Ngx/KGmg0Yin86LBFOL57Rv7OSxjjeNF6aLOXMpIN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8zMCRA9TVsSAnZWagAADXIQAJPeLd52VumaWvj79Uvk\ni4UiYqZplRt80TkHelUF4sqXha7/vuQnPZQS3uo0Og4UWn5fPe0UAn81ofAx\n/TqFrN7V70KfybJWU4gUoNDHEQJRXShfQpsNfb1U+BwZNbIGH3Vc7DWRcPPk\nEzrI3TIDEPEdWKk5hh85SxPC/AfpyK9aVtyx87k0KxJGCuAMYgeIvz4gdrQn\n9o9/QdWu81A0UJvDwUHbr7P9j0dCFxKu2MAorj9vJRhI6Cxg2M9/BKph31xn\n6WwTFHsIjo4Zzxl/dCLUFjDYq6hA1g0JHwcUFXp2BqiDsERhY0Rk28ywEGk/\nKGDNvUikySXY71azu02aivP5TATpKtKDvGFKIdZbv+J8GfBwNZabi0MBfjwt\nVsVQurV1yEXEtMu5CnQofFJsURj/bzP1zWnwSbpgs346In4z7/L9j+z68Vmb\nybwyF4/1hU+5ZE2avG0dJU20xp5+hBtn34Gqe/YW7lUwOQgYdKdwPWQsGAVp\nd6cmPaLY6hTZtHmb4tZ2bErfvn+ObN9lNXN2Z8/tUGKrhCB5vBlvDzbRSHzN\nJKGPPelhCx7I2QTxcJgXkgefqYBN+46zsA02X80e5tPYeE5sZfxT16qQovlE\nsiln2ZNCOwm/kh/jfVDgplEcdjFBavMpXQTJiGqbrc4fjPSJsc+DRsKKv2hp\nlfPq\r\n=+0lF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.b0579acdb.0_1619512524232_0.27009446020933914","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/theme","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53eb9ca27926707b2a9f9d44b54b7980a15e00b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":42,"integrity":"sha512-CL2kV1/8jdtpRIHTxJ6F47yUzA9I/vL3wjbF3MdPVYjQIZMJxMTF8jF1J9D7pWqinl+abDfSF1SWiIkZG+6UBQ==","signatures":[{"sig":"MEUCIQDVEVu/qY3rCnD8WT2Mpj8qK9hXyrseYFRPltu+kYNOuAIgKjDrZV21l3jlQvenbzueYJ3XICX5MoC3UbrxoPxy+7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHqNCRA9TVsSAnZWagAAC1oP/0aEUSl56N7ufBTOKXyW\neBrCen9cM1//eJSAnHzVAK9nkoxrcWc9z+txYngz11rN944PF2iKobEzTamD\nfXYCTZeT0vVG5ty/6SvAxq3fWsEOagDoulNsZ9iwa0BMlMeLvpxsj10CNS4M\nq8/xIIhC9EMLEFQ7em7Qh8pEwV3nuFfGzErocXUfLPbA3yqLxUXgJGt8Uz/9\nuR9MtkZj3QgL7l2I/pQwLRZMHpNlH5AdcLixu7xI4JrdAta3p4y71sOV3FSs\n6COUKaRegKIbWrw73RUeCkwRItwOOOjJHYPArYhFeDOAE0w4duEvpcBmabtc\nmXMPxLRRH4bZNHTqdKsG2KkoVkb+kBnKr6VSWEssiPWSpio8XipG9GexNQww\nuccaCIOXosIBpr0cuSsSNzbr9ux7oFo2jaFQ3PgXuQ3KnzoBkLZBcetzODLS\nwBa180aTP2/wJ+2eNjlNhsJoQrsDYSSeD57q3EMxf1ai8NLUL/coOs+Sa+be\nS/lavBCP2gpJxfbG67iAXq/JWGDybii/+zsCNfYu4LRAzJUmc4xIhWNk6CDm\nm9YHFEqIIOhb9xJBdIZAdSh0LF6UIKzeAAcdsdCzyggGhEpTEy95kgoEjIoR\nAj4zFPqWdK0AsRaUA+/9QB6fdDH78ISHhEqijczjrVd5PUE56O+IVdg53poe\nibHu\r\n=zeHd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.81e2d4ff3.0_1619557005565_0.5038154598676023","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/theme","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4841be47bc4ee70db36da5beb73c45aaf14f588a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.c8edee52c.0.tgz","fileCount":42,"integrity":"sha512-MQdjlY6LoayqeCkWqEEb6462ovc9lTIn3hCxlGcZFTc8ObRdLtgifDOiHfOvwcatNE6kbV3qubWgdfpW2F0tfw==","signatures":[{"sig":"MEUCICpcTqovQm7gh/vIp+UkGHppmp+jh3WHxAkJMn+s960FAiEAmaeQ/6DR9XT5GOyeqC3N7LoMm4Fysn5CX+CXow6yuDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIXnCRA9TVsSAnZWagAAMqkP+QHiCxKCTgN+chrvSF1A\ndZMobY+a1oTEfuBcC3nAkXDtAt3voQz/yxj0AMv3uSYvFL2SU/giZmFkIPPj\nomddRjkg/LhChkLqWs6GCfjb4mstd42WYihDMY89DrLh136ahxmL13VyjrkQ\ng+q73Bsg2sF75K0EVw66IcjqPVgld2ypPYOs5IhTB1XXz0w1Oexono3M9Qxf\nYXQOD9QFvzeBjcE5/anVnId7R9biGe0KGm0jnsGI+auLapXiUDO1AeEYBqxF\ny3wcuGWG8CWAUGft5Gb8oeziHJIzvtvv641QEeHUL8euOZJnxvtaR1Motmh0\nEzxbm3DlVxgTH7W41rZqZ3BaXKt7aqPE1yGf3QK5y11o4Evehd9BfRg7CZP1\nZFaXOK3JXMZOkrsMAf96MQBe1zMG8vqLg/KuCrcXu3NRioVujlZwZEZH3Gtc\nvLtblQpF+SykKdQs7Kv09T6M3Cl7/NTVhGCbQwtPVDP9TmQbFSIaVyyjzyMJ\ng+uACoPxPFWMX3KvrRkyZzKDSPr9yuDjnh870wrIZV7Z/fmUWbT5Bi0yYG0s\nF+KlkYxhmkBH3QMiAXGWQGb3EtF+A3M+OrT0G8Yfne5J+8C2Xjr5AU7K+U//\nf1Yo1wCIUPalqTOxv3OWXBCmfr72My5NdzscnM+sghR8n4UBSazhqG6WWiUD\ncuAQ\r\n=t7tI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.c8edee52c.0_1619559910816_0.2297741563479292","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/theme","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45ec5b43a2add216650e9a49725706ad4a78619e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.f5b6110d6.0.tgz","fileCount":43,"integrity":"sha512-LBbKBa1u9yst6ymyqvTW/IlPN8RoDWYUXIGnJ0FSchB4qcuquohpOtDpxpKt4LKJTOgvdwej0j8ollfdFN3EmQ==","signatures":[{"sig":"MEUCIGpTwRi6TqMDx+OONAtZCiYgMPQetFepVNleXV9p7hMTAiEAi1VEfjVvx9ogtIHg8vVss9ySyEBFV/tgUyWTxnw6z0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIryCRA9TVsSAnZWagAAGNkP/jaDAkjO50KJDM6V3r/C\ndDBIFw5H30QiXiSoI2jtnFJDzvuP4dJN/zy5thY/ZntaPiGluGiAqMNPNWCd\n3UMeoARtZJZyFpngJliiaTxOr3TsLCClsaHHJt73DkCblekgOaSwKDzFWwxi\nPNO6XKgR50afvEj66UFK2h1iVSeUxNfKe5MxPgcmRzrfwl0Eo/rcIqMC9erq\nsec2m//cDdcrDghZJ9YVogw/uqf9lro57999YmHJVpikzdYtnqygRabVJuIm\n6XvNVTm4qT3RJdrW8C/5a8A0Bu52gGYyZD+aKi9GIBxcJZMTvyE17I1Ityri\n9u+H7llci63HbTeZ3mVfNQJVbHNyQecFyHGn6ezy1p97EWFDzOZHdKZao5ra\nvgyaDijfunsfdRY++6rqg2wNfSlQY8p98WI+H9beOmKYmfWTxfIOuHfFHEa5\nfh097Wg+P2/LKgkjeor/FHn8YOmBJpiFP4yZ9IHBZkATuNUYsPkDhc5YYy58\nasNW+ogwVWLXPBeRE8H1mmYdkFS55Qpq25UKQ6eXlmYA4N+VVr2AJ66Ikmos\nBgdW3aUBvbl+awzTFsWewxri99390ZalZ6yD1VvqKtc9zpgGIWssN3+R2HHL\nD7pJYIsP2V7ptZkJ6R3VNWlH0IMlYEVcLBoBO67LUIzfp1mXP4sQ3ss0JXoJ\ntR9l\r\n=jly2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.f5b6110d6.0_1619561201780_0.4397129733876479","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/theme","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a2bd5bb170469956cc2a1747545e7635b25979c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.cee9b9e22.0.tgz","fileCount":43,"integrity":"sha512-wnkBQVK/3Sr0PXJALUY6hVWhWGebGzzmlMpIz9BBCPTTH+C9AtpioddCpter1hs0siEHJQEhZ27tXxVVRsAJKg==","signatures":[{"sig":"MEYCIQDcDyjLIchjo7A+5euPPbqsmuklKft6rANnuv2wzcupuAIhAPYCi9GZsDuAcxdfKXaMLPWAzXGmc3tGTd8Ux725IBPu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKhQCRA9TVsSAnZWagAAXa0P/1JxS3FyezuSLMXq3j1K\nVvXx7yhSxpKCFtu246RCnEyhyMpd9Fj94kW6spWx/P9bNhKgtc1bj2qeEQGf\nIFn9BFE9HMNRj7gofqceqyIv7qFzqb/RzjDn6m1xs7vczzIctG7/LTBnZ2yG\nblWxo9cB5c+6fJ66WgMC7w9peRQjFPqp8KHyoDUdm0hoNPbCew5MAkUCMgWg\n88rD9QiUxHL7sQmyUCt8v905Arl2N9Q8ESFlHHJCEzutzsSo7CgDA56VwWVX\nt+XP5oJ+TEiUI8k1Q5ufK0dGXde4kZDEemasTlADV2ZRZ/hLyAUjzkHmPHKi\nHAZNHhI7DWXYmf6qiM49yFWoonIOXNg7GzhRQcU/JHEjw6695/SJb3Ey7XCg\nTxhmp2U7vrDkxTEh4lici5XwRhHHuGUiUvW2bEVf1OMPuT8/HdSnhVGULjq6\n6Ox87YlSHJvjLF5BtRwaoX5ikKj0w3jyOkPq0zINlVrOlNP4BMvJ0JVxVDuI\n8Cxl2UrJj7ThKop5qOzDVa/QqIp0U3bqrUhizg9KDmGKlnHslvVlf7sJw3Fn\nXKWZpPCk1Vs8rcXHB8leDFWs9La8gXizxyBr6WAZKshQm1qAGLrRN8PkaSLQ\nI/X5VOC8eMd/WvNYgLXbA1QHK4JhY6nIqwxfTzPJwau8ZTKFstmVAOuu75Vz\nNOxL\r\n=IutA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.cee9b9e22.0_1619568719723_0.29499851915276754","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/theme","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d031fd2c070aa69ed4e53fb25ed51acbba554135","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.96e83fca7.0.tgz","fileCount":43,"integrity":"sha512-gKKalSif1oD1a9BzFGKq+BnB7PT6g53andvpB32CkVNRZVGmjvm27ya9ZYhR/Do50akXUKVRZ0LVEglkjI/ccA==","signatures":[{"sig":"MEUCIQCwHqkEt8Ta1y7O2CUYjFuyjEF7rJZeDB6Ln0Qfma8GyQIgVqy6cYxdEdl6Rhf+fko9EU6tByqrXz3yEOVJkHN5snY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMysCRA9TVsSAnZWagAAKNsQAKKw8HKiatrUHFSsix6z\n64a2zamS0DYJcghNBIEBTNPI29Txa57Rn+TvOB3M2OveQCgoUOArBr9wc6LL\n3W0KtI6r2yHJoO2a08B7ZlKDZQA28p1y+df7ScmPDz0SJq1p6hiVBBZZJVlT\nT9FZAjyZKjPBfzYtbZw3v1XunWnab1iXGH7nahHDctknA4Fubc1ralKdRDoZ\nbC9C0JI+cqpUOGV2hL+FZAOhuAKJdyYWIfBjSag6IdrL5QdX+vi8rTP7HCrE\nSERxR2QhFfGzaJnw5wePyNBtw4y13eXgTMnBJtvjsiJS3hqDhb/WUXz4jZ5S\niu/KepUcR/tVlyE4kr51EH+b/4EJXtAh8B79TArLOihZr0m8OjjixPT/yX8u\nnABXw4eRdlqjbMwF+xZ2+WDyi3CLCjVWk1zkVRSaGtRGZU2bbo0MOK0kuCzd\n26g/Zl00dULJNYo6OI9EbTZzCoyQIDfS46J+eUFWETOAuKirjaUA38csc4xw\nR/jVzMSJ0KoNRKToquCqs0PqIET3QqrHqmELp2y7uUE3C+ipYkCHFXgGb8g4\nPDIZpJ+IFNRb1coz2P9NSZCnwwlxO6TMVXHJxbDandD46OQ+w/wyubgd4UPA\nPDAEd3bycSCYi8Yx3fFR/wWEhElEzLvdXZh5qaObkTBtjaxA0hgjPi3MSRLz\n2PFE\r\n=l9E+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.96e83fca7.0_1619578027625_0.7082472805078803","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/theme","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bca078157804b4ead438b9dc22ac6b06f4ea9f51","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.4c497bd19.0.tgz","fileCount":43,"integrity":"sha512-D8WW5hvBHb7U5PjIGfjwWUhzyLrmgIeb/O62+PscC57VWS3tCNha17+sYi/keXTbJUf9u7PmRKLmuzE9Qul3rA==","signatures":[{"sig":"MEUCICLXIiBsM8GroWKykd1bLBIorkxaXlQeRTUfFs/ZDBo7AiEAsTswajc35EWOLlcsQ9X658sqMvp+CtjdrYkfXJ2i8LI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaDtCRA9TVsSAnZWagAAJf8P+wX1/QgMX/7JDK60caM3\nV1qktc+T4tMQ2ZJSuMpys9wmDfirEZH5OxE0DcxZC2EjT19TtMbjLJOgzbsJ\nTT5/BrcRMjfR8GgR6iVkmMf7qpDLpjBqATHIStXtu0NQeJI7AbP9ic3eyT6n\n9w6YxL1U7V5l31QzJJTPSJfgISgj0/83R23rjHeStwm1WHOhjMRZ/0nfgNUa\nYn9ph7FZ4BMZi2x9sOH1y0C74u8FnPR0EbtuUBIJly+eM1Eculk77Fr06fb6\nj5ZCY5HKA7rrzeRjnzRAmOROy0bzxwCVA48al0CkRv84zqvxbcO1ft+U4YEa\nRJ4m8T9pROCWwGwVzVkHICTYhHbjVzvh813oJhsRMZ4OWPdKWSbwetAiKSAd\nyLLCW/yblPl8XKDx6Y3fsOnCUQklSCIB+rsavS9BjYNC9f9hx7JrcgAEMY4t\nJtYvLM/0qqXovv+zIr3viVDyq1j681Oc2UR1FcXe78ZDTp4BxD7DpIrGMIa1\nVWikeWP55AZ4GDECGk5fAQcEfvzodiF7sk3YGiv6iPYSVK4XCd0wNyl/b7Ev\noAs4cZsY/xQzdVsFwy/HsHNftenHc2uueqSzyl6dW93TEj5nRUe9mW/Tn+e2\ncvMEa663WjceIVd/5RFxXhvleHqm+kjkRBgRvV0GATdua0D9gkmR0um0+Gu9\nIrOc\r\n=UI0t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.4c497bd19.0_1619632364894_0.08585331612224212","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/theme","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.105b15b96.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1ce1727f615e490cebaeb63853cebb42f54830b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.105b15b96.0.tgz","fileCount":43,"integrity":"sha512-zB9ojl5CAXJuZjcZ049jDetvrYtG8s4XolnYSL1Y8pg355dyDYbflFaAErzNcgOzFbAtda/2OeImPq/DhmEhWA==","signatures":[{"sig":"MEUCIDrdJ1v9pzUHom5idAntvBLjs6wuRFs4FzdFcmKrVGcUAiEA9X6p1oovYxVo8G78PJNiN3PJ4D1xlvT08DCRXcpmM0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidcbCRA9TVsSAnZWagAARxwP/AkxlpbFwXFcna0XXwLX\n6MbgpE/ovW62WDbXO1MSYIZ6VsCnzIWTwNhZcqvmp6fYngsbMTT2VlnjogYX\n1RhimsNptazG2wswkl4AnogjyNbarn+iuHMKQ0FMbFIuahfn3YZdS47F0hB0\nNOT18B3Q6Kz6ZtDCLzEZAuwV9OMO8wF5JThu9c6lhRlvYHemcdE950IdRvoB\nr2J8IyOFPJWi+ohAn+ROP0N0e4EuFSqCo5Dbltqs+QqPMczh4TPqTLB6InvK\nqMkWR8cxgyeRtQBt02VHmgvePaDz5yoovsfKMdrls1WFX7H7EZkn+BqJGR+A\n7xOBM+EX/DAsyf2ozk9MiY2FvYXkWjz0QiinwL8WLZs7egSi8Fp7ivU0m7fJ\n/bzf6RzN5CeVM5hLe4bf9ETs/ljXa64kQ5nMLWCd8qrFrVXly7B/iVzv/bEJ\ntpVq9fcUuP1vy6w5SLRUXb0URuJLwIJjdsDsltSd08eK0P2NvCLyYLr3UAw7\ngVLQGZLRh3EwglV9XUKQX7CyZRWbJXdlxLglPz6xIEef8YkA4FVoYHRlvp0j\nJDYvgbfeSpaBXwA5KrW/U7eb/Qa59Q6I7kA2C8gezq1MNKxmEZarh1EpzIDq\nP0Zdfx5yy6gigC+3QZflyaD+aUFuNH+QYU+aKylRsEJNmVRnb9lMnj3+f7e5\nWKyg\r\n=s4G9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.105b15b96.0_1619646235309_0.21084325880347166","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/theme","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0749aa62a450f9a2f5c158e8be9192c9c686cc7c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.6e20259e3.0.tgz","fileCount":43,"integrity":"sha512-89pBxfLHalxL8AwuLq70XWVY8ei+KWcqtjj3PixKdkSR4lEPVLLBbGky6fP8iF6qQbPepjXSm3r4cxioCaNbEg==","signatures":[{"sig":"MEQCIGJl+OAg+FQI9Hn72309VkG87c0dKDKgsYd6NuYM2nVFAiAKwj7i6aMFjpQQjLJSUw7evwjRgBCy8eMtyPAqwp2lbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidgsCRA9TVsSAnZWagAAM80P/00swnHs/nsF09E4I4Qi\niuqjFZcQ0HITNxaLgz9utXVtoNVlt9b2YFc51vTBZJK2tpVav0U64YKKSj6H\nIvz3tXDqGkr83Xu7isoxAG8+yzrUFFytCBxHF/bnwqW5wdkmC18vCO5bsSet\nGGDGu+s5L7Ch6Qj8xj0y58qy1qda/Qdq77RV6e7734vTs3ihcV6gvAljzAQr\nrh6TBLf4dgCGMiLr6e0WdH4JHXm5QAtZyoNBMS31DNbS8tGCX9kdoJz+O0ED\nHg9b6yPsIxP3qZKrq81vygN3jbSzyYVhHNdfbo179F9rPyfuzf8bv7BqrJiD\nnNA8W5kKu4dP68sVgBbF2JepxTQOOjyLipXaLunc/6kl6LAE5kHd+X1/6jtV\nXlT9fJKRZIBQWhk8rRrGBOiViOknS9Ha+7VpyhI0k7ZX7b1YO+fLb5jU8EO/\nQNl6B6QgSXW7bkC9DzU7SptzTuZtUqpViyXTTP2YrPw1FC10ye64Sr2mw+pi\nr0eaB89nvZUBpnjt+WmcBgi7+uuG9NiDnr/ENg1K+p0HG3DYX3sOcEo0o3g3\nADiYRjHaewogGq6p/wkVLti0adV0qlZxFEpl7bKUACWPVj6Zk0+gddvmWPxk\nsGq4gR9GOpq5H8wr1YEUCix5/Drt7aaJrU0HGhXoAfA1dbYL3/BWGFeDmEM+\nGxJm\r\n=x8ni\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.6e20259e3.0_1619646508343_0.9975212963822011","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/theme","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b6f7bfefe68fbe70f23409e7f813403bfc43425","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.0f79a5d74.0.tgz","fileCount":43,"integrity":"sha512-/b0F2urhDEJbqpGKjHYibcYaxVZirTgeFNo349rZa8JoVfyShGqrW8qgkUG4Gc8XkLxtrsTFS0PUXwKoRpzZeA==","signatures":[{"sig":"MEQCIEkNFuLy5oFehnJM6exJKaEtwOBmdq41Soj++HbVluNxAiB8cG7g6wJDmpMkJBeijcQ/9uSisfFfWg2AVg1v6aoGtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieTHCRA9TVsSAnZWagAADKIP/A2UguJwZ3GCTg7jaw6B\npnPCVDaBfbnbiCVaNp6gp0ruxkTenu7PuZqRK7b/fIlPWr3sdAX0bZOGR9zG\nenUBY6v3ZoaZWDEssSoyBqlPwIV3/SD95vFyYfmZZsLDpMmTp2xxheCq7xk2\nRKQGnriCs/twM9FArqr8AqSAHX4f/qmKltlcbL/LKS7vlBnzSQRTTZpMxlxF\n76mjxmZKXo85K4S1Gx7ZZclBXDPnAiaTAktcUyRaAcuoMeNA4vbmX04eMcoY\nz0C5AB4o6UvSCMxWQFJ70GxmGqWN0JO+pSj6AzEDTSkRi0nmwhwu/YGRB0OA\nKLxwQ5upDaA991FZjCtYDjdCks+sDSlnlsp3Re8YfkffKith2qZBFrgQ5Md4\n111Usg8RPgzKvqjC7DZvgzWlm63JxPCSWhKlo05L3DLjs/JVnIVcvz4C+lXJ\naRLZVnNmI6Pz9VLUer1PCVpVTadLFXcKU3mmfAqi7QlM7dciAz8qledoLuHP\nr6Vpzxsv6tHte+xh9eS8P4gc+kcl6NyEuPP6XcH9LwIgK9E5gqzzgVbZ1jYw\nzeyTLcoYvZiipdHtcTib5XvWGUj2KymXT0dCRsJtqeewd6krmE+26bBeHEt9\nkmwe/CT2SBrZHbaWBOxjvy5pEYb/Zv89l7/7Ymv1sZLiiS4Euu4b+QZM4zCN\nJJNR\r\n=gD35\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.0f79a5d74.0_1619649734639_0.5934922437555672","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/theme","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29e34bc72269161d2a855f218a61529ceb561b53","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.84f3db9ed.0.tgz","fileCount":43,"integrity":"sha512-vsffa8XJ+WodPU/NFL4B8GKf1aIMAf+PiZ8wi5AW/Hbq12aGiTbuus68xDCWUmOmv0KV3l5tBU8LtLF/PnEhwQ==","signatures":[{"sig":"MEUCIQCMm0093of9rqZolWW+KoUwzQood67ckcYLK0wSl6COrwIgXgPTI3Y4V1NOgvrLQF84N8LEtydz9a2M3r3KfhUr6t8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgir/ZCRA9TVsSAnZWagAA+EgP+QHZKJJkI0CTUYHD1m96\nvvJyMUwqhO4mhChtPGlh3I3oQLitchbciWY605WvVIfyGPRNVXH0GX8c9mWA\nHkHX8xPCHHtBLTAjr9Q+d0qhImxq+9j8iS1UIcc+S+mfozEGYNITarI9SpmF\nI9PXVJ7nro1BSk0b2t5OWa2zr3hCPIJS9ivCNVkBKyd9gT2CFOZXpieMRM5r\nE43s6UmaEFOA0V849A0lQ+xXo4lGQPHPqL7EPlEJWHt1XDIAUcZBBC8M25Ba\n9odTlCEmCa7BdvuGXzUffCK9NHBBw2CHHIAc8EtdWq/WckEnsQg0UUVAsR06\nN9xF2bx/5bAPU3OLtQ7sFFMdMXCytVPUelbUJmNGewi/0AhlrJbQ8Ie4poLq\nQgU1frAl0IycgxUxN7TVEvBZAxZLJDGYmMTnuwL2xTOWcVdH7zpotINsw3oX\nfc6k+tNxOAjYCocsShxifysz+Qo+IdM4Ca9yxBNx9MADyuOiDuxeKUfiSJ6p\n/pBp808DUPz0tn3vUhae6eO/vI7J+mWtFTHkASJ3v0a4zd3Kvq6UpIGn3qbB\nF0xZp147BMuA2Iiy7eIoqr88b2MSVWtAvnDdE5f6JrHB5pAHvm8URa4Rx88A\nISPiHXXUARdc0UFs57h2BrBKpTmgEi5pCi7hyaiyh34KKQT41G/alq4b/Vhm\nnnho\r\n=LU/M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.84f3db9ed.0_1619705816780_0.4357095690637647","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/theme","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3299d3cb8aca0749f54e090e3010149421ad6ee9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.8fc29273c.0.tgz","fileCount":43,"integrity":"sha512-2eCEJMpwAF13n/AvtvXPHlVmvHhkScUJt75A8uFFtt8oB5n6ESzXEcuhIf3a3xzirm+60XMpWLH8fUefYERUVQ==","signatures":[{"sig":"MEUCIQDFgFOnRbcF0j0l4x3f3ZZS1kvXM/lNVc18C783QEih2wIgPR2BT9jKruAyXqOgjrYN9nICpfQSKlad7R7YBjNasKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyOcCRA9TVsSAnZWagAASF0P/jezkOLeTkzcFfjYatV2\n63KFlYa7dr7kYxdMxfciWVcN8/nCJMgMLhiNWdQ4+lh0kGtyRP01gRhX6rGl\nkvHQk4mWIO5hgZd2NCtTpHKxGAk+j+jRT3X8xnnXt+ChaZUGXGJyq9XqVHE4\nU/CeeDN4J9pfgTg47DyIP7/uoTKvhp7hiq/cOL8odvWkthK2oQ1cRHHQIz5Z\nAWViAEitpLePhAg9osYRGu8/rLxs55KF0ADhep6FVdd5abroZQ0qCEPLMEBv\nfeWjnEz79bEDbTID1ausqoa01t6OCsNOctbmslFJQ1xjYEVkZLM4xr4oCn5N\n0Cs16ztD9lOFFuxOIaG8VM6R87uoJkBM46YTM2MOm59pRQGC1SHrXMeACP30\nPBTXxyRaSq1WzOzNd/KHDYEJwFwURRzMp8y4fQsfjaEsahC4JDboNJqdMJkm\n4nrX6SLYB0DkJ2GdcsBaQHw7Ex1I+ZN1Jg7gsVM7eXW3OMCK2IEzxas/zwuW\n9v+JjPQF+XThKQsGKBnV9W7o6pe7jy+wNiCNK7vVjKoBZ0iXsPhQjCFiWXB8\ntTNiyqbmUolPlm8PgxcS6S8Eed4PU7t/uQrKf2+xudykFmhZkZxeBiQIC8wb\nD5FM0hInBrTKVUKfrU9e3xGzodjcCgzdFx79RX7gfwi8TMLNfft2RRCpTiJS\ntohg\r\n=Xxpf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.8fc29273c.0_1619731355724_0.6941688327687126","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/theme","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d8603198e7691d46a165d050eeafcd35b0f8f24","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.c50d20bab.0.tgz","fileCount":43,"integrity":"sha512-g8kHfmeppxvN8uZ9rWwX4lP93/fkTNrC6SPw5rGhyVTyzQoUtAwBffM4WJX1ygY+Be47rwhqfaxXkZ7MOsrBZg==","signatures":[{"sig":"MEYCIQD1gPH3zEAGKsPAejhfECwQpc9IxodxrPcxHiGen//bbQIhAK4rmwEYM0VG1PIAuWD00eJlRbMwJ0u9TZHNLg6uVv7F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":212910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizqvCRA9TVsSAnZWagAA9QQP+wRaWh+rpn/ROqS+wrt8\nvlKEQd4YmK5a2wiMscP3fAcyxA8S6WEUR/OlIr/HV50S4Z9oUYd+9RzmRE55\nrH+zRj1ZtuibQmZV9863iGbVdJeMrmt1HWUXniFRdMGuACZjtnmC3sOLpnOr\nX5hNIHNveXQBgcSZ+Z9Yy0IyL/UeNhV3/ocWQEyfnVF1Y75G8a7B8B+iF5KP\nLIogwW2BbnUki4tRwgDc6OzklfZ4YZhXNOd72K1eQYZVVhIVk9T7HNUSHBHS\nx1875cmIdlAS4xNGV96PzjYKK2H8WUWlGnLzK8SM5QKF0QpCpP9nPJTqCJV+\nX/oxcrkr9RUVfCV6JJw9pE5L7fgOGQKykb5JkGEGMlgaujnB3pMrF1MRnX5O\ndj9TnhY/t+1avOAPuUFI9rJ2TY8mvWHnBQ+LDfZVNjxGlK+m4GqMW9mkwqOb\nGZPYpfUFhSsKaLZUzB9rQRbivr5ObL5930SuZQgLCFoxXns2fVTmyCYkHPG8\nFIw/+19iUV1FXZQPdu/nUHM0TkP5P+xMTAOqRLyxH/TQhmcjyHBcrKuXIwtM\nrpTMissrWQXzRXaNUSlJgPjSoCikxayoJohrAwOHZGvHaTWqyJXB9vjb7UZh\nh8/myMmZ/rsVjRnwvzv2vk6sIM0bB90Ln/pZVZ5RMUFgUAdSICh4kyuRg7j1\nMz5T\r\n=u8hl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.c50d20bab.0_1619737263533_0.5316602713381235","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/theme","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.474836ad0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74a747874403bd64b8e284bff20b8cd59b6550e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.474836ad0.0.tgz","fileCount":43,"integrity":"sha512-2Wjlrj//uKjWMFT66XhT2MIczY3mXQrH/b1eQQNSeGjyA2hUnogASaMav7bbNiyzg4tNQPyIi0z1w9avuGRNvA==","signatures":[{"sig":"MEUCIAiI7FuBGKeoCym06yi/NgDjOOXnREAWqizJTBV539WmAiEAj3Zs66k+9F+f53olEj2I36QKaC9r+4XXqaq1Tjs4hOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjMzaCRA9TVsSAnZWagAAoRoP/2dC0quck4O6b66J7djJ\nvHIbOUU/I98xIZc09XVxVFncM3bGVPNGDjQhz33BiQlffKMNrvzu+fAWdSNt\nXJdxHcPDxV7f/9+eXXWzwjKb7+xS0d7S8URvQhuKv83c/+23tdwXD3UjpXTL\nrvvVL+uP0ixnE6OAWahMHuEo4CwkTM+eDI5hn7ib9QOYert0Kj8sSwqKYEh4\nlVH7YecxexAUHYdbkEv4/yC+EMDo10p4+5dEkhiUdaAWpx3/f3oMApYleIxE\ncXDLHphnNnNDvaH3KuXghmPxqMEAGns5Z94jeqb0fcf2QWjdvgwGyV9eWzlc\nR1DYrDdOM1NxsHYjMl6gqejncylDmghnEm1yZrdCiaAHA6kSWMIsnlNxu1XY\ngILbnzh/5WeLefXVqEs9g22PItFELNnkJcksf7yy3EYMVpPfu1lIGc/uSXOF\niOPftYeGQIUpeKv5hVJsi6rO1Xt0go180HXIUihS3mYgGiIfsdJ0lrrs2Cxn\nhr9TuzG3Ugop+demzhQSjFoXwWyaoxPxYE9lXdh+GS+WT9eqMyt9Tzn0nUgw\nxD1U1DYnwP5FL3rKaDU8025OqJltMJ0DRGozyGKcKpYhXxv/ZmZKidumAefY\nu+QvyO3ZSDQmpcznElOXiAVNaYoWmWYKIoR+Ps9EJ8UjflKpIXqgfYsWVMSm\nTO/W\r\n=u46O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.474836ad0.0_1619840217998_0.5941422536987917","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/theme","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e96e448676e4fa84fb64f3cd8655948210be284","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.f5ad92287.0.tgz","fileCount":43,"integrity":"sha512-6S/WgcwnTg2cqItf9AzcNRe9C5t6JpIk6fdLBBpNhlagfylzmIlEHnT/Oz2uu4/wvgvBfc+LpoinXcTk76Z8Hg==","signatures":[{"sig":"MEYCIQDW6hRdNMz+8Hml/LUaxgPggFM7qd/+E7+zraMQ0/FJuQIhAK+XxGe7dSak35Jida3KEdnMja1TrAulj0WHr8CAds/1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD8tCRA9TVsSAnZWagAAMRwP/2x4zrgW+OjIekMzTqUP\nmTLZdX+TdGyLQZBeMZJHU+RqO1VisDSaghtpjQz6jfveutyvpoxD10yjdNjJ\nt1UJawVfr/KP9zha4HKYVX/8XdyFydHt48NGAw+ZK77JZRskOTokCUXgK5sg\nf2aRx/yIwvnddRxYlWB+BT5Mdw1x91WZg49rGKE7tPlP3Zn6QjwX5FJPJe+B\nOkojAo/YoqTlnXLhROJrL9h6E5q+N9quYBjoCDjKhoTRsM2CJTzKtX0kWnLt\n0iIrrqit0dWhOFktLNKADfCfrlAPCnfcom2CnhToXRKyVVzsiPh9F8g9drDI\ndDY/BOnUZvvwaTd06/BjgdpShdJ7YUXpmUIdJbGoFIjyeqfHlnbNor1dhSBB\nYhxEsWtgDo+9NHDGgcVuuospXEogxAN3IBjmrAahiIwjt/GOC+G2sdEY7TdO\npNXscLhCPH+tyw86ZTL2U+11toUN4z/XuRgGUrS6qfIOYtfVpUDbeUOQITF8\nOwBl5oH4L4tNtlasEo2OUooZxmt/TGtwPNWpW+IiiOxmxDMWcAVxZjubvONc\n3stvCP0A9eLgEuX2fcvx42lF6XcSPrYvDiSwCGyGJSHlU65oM1KNZ8Mah9aG\nLjmun3C2h338uX2W4e40qnUaMu57n3f0FRewmrqVfslwKRLIT8iDpQsjdXvR\noap6\r\n=Q7YO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.f5ad92287.0_1620066093059_0.6349496780661654","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/theme","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.af453daf8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d73435c37e7458e0ef8809601c9da6f36659eb27","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.af453daf8.0.tgz","fileCount":43,"integrity":"sha512-AnfLZP6E7Ue4m9u1NHMO0P30zj3tsTtGHnI3mBUirUo9lpL6dVK3F4JhCxiIcCgwWQ1igiLoslHj6VO0IMvS1w==","signatures":[{"sig":"MEUCIQD3qh9d124AU213HzdRtF1tfVaVtWeylO4JDfMpS87h8wIgDk3iUAhdPORfygqNQjYKWcoXUL4vfIl86RK2fQ13LUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEZ3CRA9TVsSAnZWagAAKSkP/0vw5wqRbocUYtqO4bvp\nmxIWF/Jn3VK39uX/8AkJBSH6hM2OAZX51dAsBIhvy/xqfpCmjl3Hp5ER9noZ\nZr8kWWlBxsYV2vduF9gdsTtzYoufzyXtvC4ryT51kikmPxSrjRdiBLiWQ2E5\nLNTaMgNFeYl7c/RxbMvQECKMfK2oJ17IVFpqeF4Yq1iHgwmOgeljPyMIMsyP\nkS62dDPWiWR44KykHVtOklcqQ9S3yDKAhW+Bot31CpPTIgTAp6IRixOxdR1Y\n/a92/kIuwaRchbVqDMDf7T7YFQGp6phjwbXm7as0J4p8ZYdFZWdgLx4FdY2o\no3ujt0NOUwier9i5LHF1W8OAQpr3987BFohTMORS20MF26IAaGK1fI00PmIx\nSMQTn4RTxEAB+k5zVHxUdbzKQdjhoW6NUUMLdMKfjJaSPqU6e6Be+wa+SYAp\nxfsnBAJh1uOvw7hksggij1cMugLk0IzmGyqdl/EKeX2ORecZmc8KWtkAaoGn\nQADUDTbUfuxPggcRvXmTsqawgA67oqjbL7OsPT5GBj1zPKj+iHR7blPaxYC8\napltmkwekv5BabisjeMLnsTMvCwUXb0vzY4UQuZNYdgdttuy0cAcFAMNEBUU\n/rnRf9oZj5161uf2r9IDd0A4NEPJ8RsE/o8EcKAIe0M+UmH93E1AoUjGEOgN\nRCeE\r\n=zG3i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.af453daf8.0_1620067958946_0.8818318089929287","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/theme","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13654046c9b5019571b839566daa0c9c34823090","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.1f1918c24.0.tgz","fileCount":43,"integrity":"sha512-WcjL+NPZ6Tu+hsOl8BE+tkrpXx3/c5X7wzdc+pAOanTQM01pkCQEvTr6G8/NR5FyzVl2ul1sNFbs/n6OQ6N2Yw==","signatures":[{"sig":"MEQCIGfrHUlTlT3agrupQeUj90J8lqG73oAv1twA5cQrcdLWAiBqOnwK91uhbC630mquzKVzSFt2DGzNONiTEpFdGkcVsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE1KCRA9TVsSAnZWagAA63MQAKAsDIUujcV97+ePKrks\n5fjWmrn+ygB1BFYBg6UNHe2+qHsi8szdFVH6u2pBrn/nXVkWdE9oBpg7UfkB\nH/Juz7+3HHqxVu6njIq1e7vW+o9LxGm9UYmCy531JCJNkVn96WVxQtYaNOw7\nKP/newHXGFk979FZ5CEm0mDBX4UbuUacEhS6PIBmEVQDcwq+nu4URIC+VODA\nrU0SDqu4Dj1N8GOJLFEIPb5RemnTBM5wlcv5cgDJ5ccIO0S4+0VLSySeQlbZ\nrABjmy146lXg2bKqbyybVkRvZzVrmo/xoUkYF10jeNuGrCaLLdd+hffc1Ev7\nbrTZBrFMB3CGK6cT4c0SWlgYz1kbyDjhr9kU51/GAT+LhHPbx2Z3UTDBBfS5\nw/eKGIleMwWs03SmS/IXL8NUuecI5VZ7/RiV+TeIHFEozaA1ZVlwEy87fYNe\ns8/NHwd68atZX7Dl/w7QNM92lv7iWW5N3Vi1KghheWhdiLieN6p2NFVfpmVX\njhH8j9lHdKACZuB82iOm2MmikvPAPVI4gokokFM/4r5UpKksVPIuuNXBt9ud\nH2Qt0BUvKyZ2uDcW7ySlD20DziJZB7ot1v2SclNmUp7LYsvQlHhvBfiykTMF\nzmn9xDVcdtaI0HOw+x13xxOfZGPJVrZhKtdXcS338CBc+Af3CSKvsncWSePr\nwl8Y\r\n=QErZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.1f1918c24.0_1620069705851_0.5469048992545289","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/theme","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.33148231f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8603ab5e577b3ae0933b60c015017e4360345993","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.33148231f.0.tgz","fileCount":43,"integrity":"sha512-UKNK8dgnTE3iHPbyG4zbuP+OnWdD+xXR8y36V7i1cZ7UHQKGL7VMKmGW3ViYII6TSypjbLALWVgYUjOliZP6ZQ==","signatures":[{"sig":"MEUCIQC402fbY6K+dz6lP5gFgcYKV5NKYdSY/rcULY7Y1Lo7HQIgEPU3qKVWpL2gBiykr92w5JrvHYzYFDVYxaEDKgvav9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFEcCRA9TVsSAnZWagAAp7EP/0sDJcKXy9N656bHr3tv\n0vmHBB0HfVM4SrExg5opVzBeZgrjg2tmH3sl7LBpzuCmyL1B1Tb3E5a3Tf/A\nvULLvIa8f07G7XExqSgwi3ygNQUblYJPkF14t66Rf+HRlWCj05WiOTT5Z35c\nbtmEMxwenNq+tOvwAk9hLmIn90JlfInFK2RBihSjN7BQYkvj7cbn5OsdPcqV\nvLLbhLx+8CKV9ZIEOjMd9TnOu6CDmRvSai02G9ArQi5ZUP6+jDDGvbhq2nEB\nA8etfVR3yo0W6UYEr9oIzQlJNWOF+5fPFd/UE0bnBAr2out9a37UoGjNHPsO\nkyPkfPVNl0hcX1odji5iJjYnZA6Q23CXLBT3zxbhtqMRQJZZ5BCYxHyrBG+O\nPN4klpX76BRfE68Vyx1LSaA0/nhp3+HR3iJYT8ALagHoHU8mh3RodMaKMl5j\nFgvD0iKwysdOyG/kpcLWgEoOZrGaEYTAfBHdO5xMIDXYfgOJAxloVHX1qHa6\nxt2CcmrQTleLDyYtJifDDia+qVDuPT5gi0WZdej1s4LvC7E2jQf8eMmF+46B\nYjEcvCi/aiVIBzJCDPHW8CIQcYh8AiMGCyOBcbU7KnoVoCULWY1zUot+sgbe\nlnCYJZXeK/LVdxA0u0JVE7XlEspkgSh7eMFOky+7aO2wuQ63uCgaB/qbOzGE\noR4M\r\n=hM7x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.33148231f.0_1620070683592_0.2663683221525939","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/theme","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e051413df417c3cdc780ecbfc3e7283df9d8654b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.06b76fa74.0.tgz","fileCount":43,"integrity":"sha512-1suUajJ20068M85UA64UGvvfzhW+0AInW2PKMHNirH19hqyO18TUEEIPScY4RQad5tgAYr1F7vh+bo8k6puC3Q==","signatures":[{"sig":"MEYCIQDLloYEDFm9JB9U9bNMUR3hBP+Ec2DhxdHzEeXz5u4ciQIhAP393M5EV9kYIQ5KwZYVvB+Zrb/mMOw93FL7G7rUvbQc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFLECRA9TVsSAnZWagAAG2cP/38WP3Bd9cMMtaFn5c6O\nxM2XJjHoezqMcOH7N+Zr6vpkNoJM3FUZB8E1tdlm8vafyRuXJS7/UoafqHYY\nxYunhbXfNH0l0XZCc5K2eIwje1MVf2L1VriACEKFOdiXUfoKfyCUAeyfST32\ncqL5FLew3k60W5cYJH1ad43mhpUqVon8pbXGQV8taw76jR8l3OG1ncd1kW1S\nQaCPORsYjqPl8wl8AsTiTcPsv+tHtWwphnom3Yaf9mVVC3364zHlKievihhg\n4k53RO8cuCozQgVrF7FmsaTcw3iexIBp+F/zs/TRxABvr3V2RKR/9EYjfH0i\nS5sZ6udsKZZbZTSanQX0J+8CvBPrwuRdjKFR0ZZbUcPjUR5feFhPSiZMwMBu\nhXOf7lRjUGKVthwRq41NR5vorpZXDzXLrbwY/ELJ4Zk3ZsWE+jSKHY9ner2L\nH2HeVTtfwlrtwc1hxxsEKsHCAeYuOXxjAbaqr/u2jTkqmdRmJz+0b2bKqsm8\nIL1VrBInnafP1Wkf9zq4ChI0miSqceC+AfXpI7qfYJBzMnTkAGqGbnLRqfFC\nOAcW5PkOXJ0hpytFVmacXtDIgMSW1an/HECEzAdkbO78TeWhhhWrWAL/2SXT\nnrrFT37jE4cF/laKBjlKQcoC+hEYekAq5+pcMGk0v1X9NRTVh5ws1fDcMKy8\nJKKm\r\n=jQZR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.06b76fa74.0_1620071107965_0.5066761993388249","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/theme","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.7c5000473.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efc476a314912e1c7158728d156a72f28042bc25","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.7c5000473.0.tgz","fileCount":43,"integrity":"sha512-2Q5/96RsF9pl4DuNLVUrKtjb/8rn2/yIsQ5QUvQcMyojwoVZ1zDld6ghgZmN9mJ0EkCWseEnKZylca/iwHQQmA==","signatures":[{"sig":"MEUCIQD/zot+F/t6HSpORrNBnt7XbkG4jP2cc75RVsUmqSYdjAIgShmVJDW1lXSLjaBSZE31zhY62xkgciD28srMuB9RtC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHv1CRA9TVsSAnZWagAARTkP/0YxHWu/K/xAbpnDmFJq\n8HN/LXafIGEMANsvuvDgaHZDCk6+0RPmisHGEkRpzPlFsv4exvf06dqHqlWh\nsNo/a1pmL8sfrBZiC8Styl3hHiQ0mJCAVoBNJ9Y87an0UiQlTtUjtYU+q20V\nSx9+75x/DILuu4HAfJYTDK1gyJv/wJ8LvPhhY/Q9k3xThwbUxdg1sXp9Jx+o\n/3UtTqpnAiH3n3uh9Nnq1wqoXcjgbU6UOek2eK5w95fhcxkeMDWSvYpYAlji\n1oOuPF88RNni/p0xZnLdrSFWyS5irfiIUlMsozJ3uSaAKW747wWzjYNC57Ns\no/V90kFZsZDFgIR3fI9cv8ClH2gHUNIYXP/hrevtW/nU6hUAEHo3ci4mWKNi\nrMtaTKb3OVv/ont4Iux2EVBRAWoodGTjcpUxlou0+LbAlpgOSqBe6E7BFYy6\nNy/1qu9imgxazDo5d7PbZA7/Qy4KFkpU3AyNOcZi5mca0X0jfjyo2bpNJUpE\nNlyA0pye3JfMnpfmqgrd/dBgG5wpEOlQ05gFByWOqbp3LWU0sQ3YcMDkEyRH\nZ8Bqa63JQbvHgXPiOAzuwjle6tL0f+BbCxdQOdlMkGRkolg1YFWYjFfi96q0\nKDyv8k1aL9Q2PXYARLnghrnF6/BcqhrKeAqrL8xYsakRo/8AhVdSL5z7OArC\nOYsl\r\n=xynh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.7c5000473.0_1620081653240_0.33869657093203354","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/theme","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.de997644b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00fb5ab139cd97bd1c12a591308859ec196e3595","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.de997644b.0.tgz","fileCount":43,"integrity":"sha512-FZpnU9GyuSdD+eZuXBCga1xpPC25hAFb+UMemRP6NJB2C88KiJi10aNk0E6buyzeHIpKwTJxLGOG+whZNnyc0w==","signatures":[{"sig":"MEYCIQCuN9jdqrPDB23CJfOuggfc8pyEZKJa4bBAV94Rj+/erAIhALTZtDurNAUIPIC1Da/j7e0FTr/hDKTmoZ+Bc+kksxFP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYQACRA9TVsSAnZWagAAPBMP/jzEeiRdAOZKzMXGRBEM\ngf/aAt9+LvChUmWk6FWyI49Khfc2X1FeWH3MjLKPwdu5TXUtWt1zOwbIECVm\nrFkU1P2zb9AMEhcFYujgzjzbMj4Jgk60oYaINkvyuMUvLaWyy5OHKOr0P4w9\nQlVfVsm3+zU3uRw4r9O2zNOumfQ2eOidpBejO+zMwXYdE8kuvTX1n9aFa8Sm\ny5JCR9zX9kHimpG7LqxX/uC+HMmNJ3EpkPXDZE0hjZ8hYxpRCBeXuS83gZRk\nTweTchBO+m68bGXDU2PGTqPMuEGICJZZEmERpG632wE+Cvy7TvfMciau8fk6\nlAipx6rEKu3tPvYdbRJuGcb7jSuKXWMyyankGK/Ah/8NA7s3sCSwXuqPRASX\n81NZ/+SlXtTtJeENeojlE7QYrncfMzZamMRmux5y2/3C9EbNRsAokDQRjs49\nnzvTRJn4YibguCYwtqc1/cjmKuiYaIPBw2NpzGWyIiPm4w1Lhr1LLYM7wP15\ne+mV3iss8kwLi8HfEy0cOZab/gpgb/4Dhh3LCESWjS7Nb9uYMLBuWr9Pl0Hr\nHM+aH5qmHUm1JxNm4jqPO+wPcvXu8NGzx+IOLtCSXmg3iF00HVN55YA1oksA\nex+kTfRMxKOvs2mdiHUW7urTxQ8KVkNiJRr16zWOJ98MyTqICeOA8RRpkTz4\nQZIN\r\n=5DCF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.de997644b.0_1620149248131_0.556033320499091","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/theme","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fb1711a881a5932aaa8bbfe9033c05b672b477e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":43,"integrity":"sha512-dngtjoYRhMH9+t4GovrVK4AXpxIk91Wwn68bH2Egu9DIWN3viTdUlYEF+hlPwY1kvnyBwUEMsoehs02XgbkwVw==","signatures":[{"sig":"MEUCIDWcVVaKCm/KfGmpjFcqy23LfgnAAo1h2MYMjvuB8uxQAiEAt4+7fic0qz3ENqMTNyKBIBsYmNsi+4piMsUka8UcZ9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYpDCRA9TVsSAnZWagAA37MP/jhAPB9YeDienlvoN5yt\nONYlxtLa8hAPMoEHbYDtdTnrOCoYJC/cu7T8eD1ypz4lAHOl6vQyC0mSJnym\nhUYwS4LJItQQ4PdfB62Z9y65MOKqxYE9gPqS39+iKrBJzZp62YyX5snsVGWS\nc1ybYCan2/vnvtzn+q3fPA+gXKqyOcnME7SRUWpOa+mJsuAJpgipELhmt6Cf\n2kf0S1czSUUunr5Q88sxIBllAglpirj8T5o8Pu41oixLBnx6QpEFeaQeD0lE\nwBzzmQEG8knO/BydLkk3wPraV2jfmn29rKABRz7zNY5K4/KorbQvO8L1oP31\nGCtfkc/HlkaENf/ElFaywLLSAWRHu2nASNxki+UcczbLK3M+3V98nkOHdYJe\nakz2SjgcB4irmQ6ABNQ0BfCYUnZJv/4undXE8WmUMjrxNva+ssB4SLIANVsU\n8cDxTo40mTs0qNOLTOOOmpU61HZ1cC+5EmTaJFlJ9sXcMmo/N7V/9Xjwakze\nfEDwZvnVTJYeG3nY6oRz9p2aCJtMj9Ph37YkQUrb2+2/4UgK51WBgQwOClS1\nhggtOFz6uiaA9G8Q7J6HMzeA+WBQ1oFMN9FCrRJsiB7EaZ3W7ooyz2F9Y+t6\nyW21moFKphOtesGSAKKuniXU/L2VFUeh2AimDIqcZE5GrFrcA+HBhsnOCjLM\nJ3Zr\r\n=PPN7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.d4d7f1cc2.0_1620150851315_0.35064937417978537","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/theme","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.be999eb08.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ffceb35ad27c0847db99e7bab1cfef0112482d8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.be999eb08.0.tgz","fileCount":43,"integrity":"sha512-+9KaOkV7n9apJai2jQYMkx95GhMA44HOOMWsWbRhYbC2en3bYwJ2FBREUVUp7JO2KDbB94bhW9AxUI+dyqz1OQ==","signatures":[{"sig":"MEUCIQCpV1nq7S01YohHC7Sgxs09X1QXZCeLhfWPjsZilOmUoQIgddML97We56gETHx8VKk318szKA41WWh20UHyJGdKqVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYt/CRA9TVsSAnZWagAAQxgP/2XhL3vum8yS6UD2vyhG\nR1hFn3vzZSp9Wkt1hk6hxxV02gNIQv1dMmD3yzzpICtBlvEBFqvcyUU5yj0a\nNG63CjS4lt9rux9C6DPx9s+EbzAXjF8VGJB55I8LfBvYIkra9f9y0XjsSVwt\nh9boCuwwU0NLppLI9fhoHV269a3stFUwNUIjAXUUDDO4dHE44vYRP8zeRanX\niiHYDS26GbWVMrXwsWRHCFHuCverevYH4ofZeioOuiOwyispiZX0Ry3N4ivN\nBtrFiFQ79ACDVjkgqHrwUmdhIgMC7Bqwj5WYIcKEhwBR0WsZYuQBzTtOwqcX\nioZToQTKTckfW8w2u3WSihGNk2jTcgJXOjclnNN9tdA5V3PtyWoRQgGFqLXc\nB/MXWEoSACSuWEadDWVql+bVZzU2u+OdG9HWgVV6iYzob7s6uhPcjuxE36It\ntvzsGoCb+IVeUqaCPyTNNx208wQumI4FgE3vm6ykr+kVtfCPz9DPLE1PbAFP\neKAELDJ1x8gM7ZYyJ3NjM4G9eGVDUg3Xzlzux9LSAmfA+/2PYZJ6qRMM5+Qi\njNZ7XBXu1llLJE/J94qeMJ2jTGGILREvqKeciz6sVNh+Uj7XjIqkVHvZYDRh\nsd0u9TkOw5IxHqu5Zu1UWZ4O4SxFHmf2PGUyn2RMFbtIjwDQ5PJ2tmKckOGQ\nITMq\r\n=HNYx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.be999eb08.0_1620151166689_0.3456502786739648","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/theme","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03fa4090b9082dadbdabcd1905e6832e5c4382f5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.eda1705fc.0.tgz","fileCount":43,"integrity":"sha512-ZOpXqNL2Lb1BnGpRheChlN/UNB2XQIp2uxxIYHCMWjdmy92HI8Ogh1RJITTa2IhMBUjfs/NQj7SAtnzJyKcrjA==","signatures":[{"sig":"MEYCIQCaWjx94II9rX3GZCZ3fKOZHlSxC4bUr1IYTgG7LmGE+QIhAJwmQzjcmbqAyXErrXjlGKqqsSi/dr0jp67sSkXCKZIc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZvtCRA9TVsSAnZWagAANwQP/3XTg6jlxBT96+SleK/9\n+TgFaqei1lFeZnhx3U+i2hncJaiMS+8j4gHSmmxhOIEvm0pSRwpaeOBNDezr\nUG3H6B6zQH3hbShnrduxykuf4Zmp3g70iz74iPCHeBfYMgazzZNYDD2qdGd/\nhuqSZMzwy4z0A6eZIkSUpk/ORt73tHOuBkZoiHfO5SFO331JS5CLIKALoiNS\ndyMjYTiKRUXXdaLk272afBAv/nFRQOJCuF4z/KePEgLaODcWyaXAyvLq1267\nq0wQiu1d82eqac+FNMoQ5dd3V/nC0muiKZagXaas6fc4wwVJ5vqgoD1zQvsu\n2QcyIOYbs2RsdLngdMxI0vBcbnq41i4u9CbCEmxeSViE5NohQzOnVutNvlif\n1io/2nga4bsNvZsGBeCna2ztHcy3/RxnjpPxHbRPpkO/DK6ecdgwNOXxAHk/\n2QMGyHdE/LGRqgT2WEUZBbd37y/scvkJf5Bu1MoUkPo/Brr2n4QkaqJfqjoE\nAyt+Hmh2IVXcTw1eY3jRA2db9KLJNWBKn/luF28Vtdt1apxxR3QdxUwE2duR\nBChWSynBNZpzbitHIFFmdCtadUPWEm0ypURR6IuZxy1Bj4gGGNUhg7Dmn8k7\noeb1l+podHSKo4DQmbaHOH7rnRIC6IBZFJ8tLV6F5RH/gQAkppnYF+9jXj5j\nxST7\r\n=y1VI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.eda1705fc.0_1620155373161_0.5711834666775295","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/theme","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.718c90178.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2935122a7dc906da262b3ca9c03b543d94041281","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.718c90178.0.tgz","fileCount":43,"integrity":"sha512-3GHDW6ZxM4DfmObIbN198ddjy+HDibqbo8ZX9GQFYGquD5w+gKHDcDV2SnMDDwJbHzLz57zFaVHAhGCcVWK+ug==","signatures":[{"sig":"MEUCIGioXOC/aMU7Tp2IeNVD0C+C2NeOMZU0NAD7dPyw9QlzAiEA62BI84/WBb6kGoKj/jqOnXmn31EI3ABoghgHhVzglQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZ/9CRA9TVsSAnZWagAAzR4P/jgs2QLOW8DgWWuxDLBm\nhClyNgIpQ2jcjvW6r+yoAjocAMEMs+7gakdpY2EkT1ci3YoVBsSPkiIW7uhn\nzbccZbIiJIhbijc9ikaGuIgxQakw9PE+X+QlCfFfZI8fp3rS17cvRNiFVtE9\nKtDDbsCLVOMuXmAmRUj/tvoE9EaGgc51uIJe6a2+vaDdDY/0aDKIgPb1/Csq\n/uoQ5UDjg/zGWAZ97Y9/2UV1ZlUe3GPH1kphYg1CD0f3AMNunCYnmnVavoen\nF9w+D/gUn+sfig0B5CI0nOkiu6uoihGncJGafyghWCVQfzM+Z5uLukNCbN18\nCtJQ2mC3TxgbX6h8ncqMzLs0zH92CEhcJFmg8JQ7UFlp5QL8Nxz/zv09+5SQ\nd2Q/GMkXKPNSsh1NpA2gz4izx+aRs7K8IO9csus298yJ5Vb6AQUoAwlf1fau\ntfOvY66c8mlRlJQtk9CtEbnJ50haecG3xILWnKNzDftEyZ6bzwv0cS7hUQzN\nrw+DYb3rWPsqGB/zL1FusDO9EmANe8mBsEB710pK3uPJ3Im5UIA7taG431qh\n7FHhACqsUlJmFzlCYNif8UVC9McWZq//GlepNJX3jc7TnKgHejRQuvGqtQaz\nK30udCdY2m6TlIFiC2KtTibvGiN5MKXHJrJXhYUdni5TeoFnpyedFSINCCxA\nAIXZ\r\n=7Qsj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.718c90178.0_1620156412791_0.29436852186738527","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/theme","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.0e3917299.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8901e795f3ffe9d78b660432cade49a09beb3a16","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.0e3917299.0.tgz","fileCount":43,"integrity":"sha512-LaOWJwM2SU1323eiASPaVjdT+VRgazXyKmBpleCJrtSfA9BVT7d0M1fAhdt+iMnuBoPpIF/tteDQwdu9pTszlw==","signatures":[{"sig":"MEYCIQC5a/OL8gWFMZWMrZ5ou5gx8+ThOSX/bG3aBXxUrOhrOwIhAOKvXeyqSDWDM/bn8Kogl84cuZVAamuV2/80LbYdICSL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaCkCRA9TVsSAnZWagAA7hkP/0JhXVzDNAvrkzhOJzUN\nveTi7RMVuilS++A4eHooU7pFSOFxW7+VQmix5OolBTINqZlehGuFqJPM8XBu\n+cvtobYsarCqI7OvXVdLLIiiET0CxkS4Zr0dc1ObxaXKclnFb5123Kew7DxO\nfOP4VbePt1DjnrfQk0PAR/r9H7VDbI66GXWbq0SWGIf7ttmztxoZIE8RU/Z1\n0g+WyOHpTGD67yvPVhvEe8oEF+E8rXv+mcnY4cvG+cDVsMWUAynuoIl4o30n\nBQUO/ByhlW+NKXtR5U+A4bNam0Y85FnuUdcte0ndOW30LjJYkYKWfuEcEU/c\no1rto1ftSHoVN1k0d/xZTN9kZ+DGWkr/HCRw33m84RBU6hBVkA8600Hka7FL\ntFa6LgsLwwTe36aCwV6yxddWSsnfkFaDAORXzgF7ki6jfLsKW+t0xxSfmJpH\nuEKmvLmIUvGE95XXVWzQQ7XU+VIejQWEBjiZ3UeEBB/G/5AzNygFDjXf9Hg6\nR7FuKP36BGgck3EIvt6bZ8Bt2D5E06pvcXRbmG/RTFE+TM2SiC8ra882jNnq\n5itqFQSzFR12FDxV41iCcpc8Ln9wEW476l09cdqQtAXfGZULDC1Qg+evSl3e\nEPwFB7mkWIH+i46cnoIuhfJMc6uxy7ZdImC8oxe8jhbvUDQuttolzl9mtgyc\nJCXA\r\n=5cAW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.0e3917299.0_1620156579968_0.2083310605932842","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/theme","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59d1ce7b00a280540c4211eb6aa4911fd6b7afbb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.836b3c7db.0.tgz","fileCount":43,"integrity":"sha512-6Yr5jD5O31QeO/aLWYLsRd5MogJRx2Np9KqK+pUUt+q/srZmjP1l4mdhi9cg4GEyeSgVNGCnr1cNjaKw/nBjrA==","signatures":[{"sig":"MEYCIQCDRbObCqQ9znHqyAWpAJcKDU/tavumpL7BGECzY9k8dwIhAMJkO/CmtC87zexbUw4Pb4YuZmQoXXNZACONovmiJcKq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka9+CRA9TVsSAnZWagAAggoP/18UyMDmM7k/QpTN4idw\nhUJGNBC4T6CNjdM3rPIouyB3oG4LdwIm22V1wgc/6BE6IvOOhGuK1/NOL+yC\nqsD6yTqLOcnPh8HBlNsNA9Belx0i0sEnETzXtbFLQcMN1lSEX9xJg5iY+inE\n4ZbtsqBDpnmbx455NC5yNlgOEYfnrx7Km168lJ7oEkyG+3AtUhbBK52t0u1O\nmXYUISPnDyom0XpORkNjJXK0RiU1PzScyGmPYOZ1Sj4aZydVUUdF81ABZLTD\nQw90ZSc7rkvOle9xbO5XWC2HMYtSho668P3MduJZ81TvLw8PNW0SmwpipymY\nP1cdOievP3SPSwOGrXP8z7QzUybM0+pWfHdb6lNHjdlUprEYTfzJ1SL4Kbol\nLscR9EuFKDiDvIqOQRVN5jaGanQ528k8xOgywMZBHKmc3lY6QwHNoPTaGrcS\niX0U0LhgAx2NE9Nzg3RwgbDOt2qnGdwma25x4BEydrkyULAU8WBrM9irEizH\nQM8TJtWShrIozZ0Xe8IJPOp17DCmiC75x77R/Q51nk2iC8ZoKoudYJhiRnK8\nfS+wBA+WpvsPeWB/j9+oxfRZ1KPARHc9qjQpTEJY/PRrzrKzm/T9Qc1i4Q6q\nlLUTA9i5xcCANUHrDeikrYT06dbFnIahbXhPPO7870uVVs/ASv0O7RytgXB3\n1sUI\r\n=Ylkx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.836b3c7db.0_1620160381756_0.7267590405814359","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/theme","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30ba763c8a849ec833bf238afb0c8d6c8fce33f7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.53d4e6d59.0.tgz","fileCount":43,"integrity":"sha512-WT75yYgYrHQg6xOQJad6d3TLCKj2kwQ4oXf0FLTKaFr8Amzom8s+VPhOEJCbMhrsvpZZS1Ti7ZrCz8FjtmWE5g==","signatures":[{"sig":"MEQCIBFiMnOriyt/WdtPoyT8/ewkJYRRFgJ7mAYUhDjRtF4xAiBZwZ96PpxH+icdG+Xh6aloI5tIiEsrv8k/QbBX49TM1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbMxCRA9TVsSAnZWagAARXUQAI3wcT0P9w7RBLdq4tR/\nu1JGSj3Jm3un3/EwLXzzwPuTbnoqiMzQriEHVgd1cQU7y/amEi0SyzzDkrrQ\nUPh/8Oq9zJ/zcc2tSPyI+AN6kqXEsQfWKm3XA5SeF01mu0Jgw7lxh7gcNU/R\nWkJtTsouKmjAmF362SG35DDuDP7LM97THG27JYS645dNtdEsgpB1cbJ2LMr1\nCcBwZxdC4Ek8kRrIdv2PtuEnAwmqNxy1nbphiAAWCg1m+cMGgZMTBL4bwGVh\n/Javfwjvdmur2SG/RqIC/dZOyXkEQdrJmTveRFv5CfRv5J/sLHXFnwjeaxxY\n03/mYu2mAuhxBLYaJBjCDjLqdrijssjXUJKfAWmkJwPfEs7Ms/0o5fog/bq7\nsfBsQEsxVYLRgkz9Qe7wXJgNVVG5kJNCfJ9+ja9zXGoJ0OnEo0mZIHz5Zo/r\njxxfdLecjeGXcgKIX8/xl6faUqW4ZwOkABnzeIA1QqSmzdZwSlPyf6Zk3oXx\necn3ONqILfgEzE6kBKWckiVJxfuAcf5C0fGxhWSPyu8MWjdwVSAeM5KbQoep\nGAb/KQ4Zih+pfrR2Gr1ZNXuHsOpneIzhhKPs4DP03fL9w6EEF3Zp1HvHIoqu\nq+YpaJnb6HznbU/M4ByTKPXl8jevenDajs2r4c6twJvSnLhEAryEMdgM/Ybq\nR4Qy\r\n=Hjq4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.53d4e6d59.0_1620161328531_0.9325301709969547","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/theme","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.18d147e27.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"917f19154fd3f5890023c75e4d7579fb204f5a15","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.18d147e27.0.tgz","fileCount":43,"integrity":"sha512-OZmE/PYVbKGn4ehG+AXu5vzqFmFVdgaEuR+pHgdFsneqQPnO0fUCysTokRXcE58dVuSH+oLrydtvADJGotSXTw==","signatures":[{"sig":"MEQCIDe9W7MQ+8T+BtzR+H4G6jNph7lpWY+/th4vyrAA6w3sAiArZZCgMxPLfC7jBR/mM/Laqqu15X7LJvirMZRC8aCS5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbUwCRA9TVsSAnZWagAAhoQQAKOqTAoRqLzjF15pixo6\n6PxyfeGYhoHa2zfv18ja3yvekL71kAceMQgXr6G+jD3yWmTSLvvlYJHphnhY\nWMjvJIWmzNFIJwwYV0vM0EXOrOn0syaB1fGsbcJmPFBQRskCcvfZobCvNk0C\nFTRBvmDp6KWHmyWq5eURccX/N7LmT0nH5rx8d4OHU/RVDhBjvJ7sjwaNazx3\nn/SHGfg6RbjFFMpkctOX7BxENTXy+ll3KdmS7hUhszdcVvNgrDlIVKy4OV4E\neQYI94hLwJcCB+jKpO/YEQ/BMM5+2QURjKhxEqmLCREWhxYHwrByvS/uQ0qb\n3kpztkvDhvbDVd24sqW8LNrcTcWKCjvXcViktVZSykyWqKqXIb2OvX9WsPds\n9VICBVzcWGceDo9Zce9DZewgJL94SH2hA7JCDKE/Vg+9Gy7evx/HpRAdgUsh\nY7z5zgV41mEukkshPAtpy6NmUFs8TDNVHbKa7lLc0AOV53hi0BeJ5hwzvjfW\nqmRY0bZ8DH0Jsz0OzURhyZe4AgJEij+MFh58S18Z9bI9AIk630lUTfw46+YT\nn9/IeEnwKv+l0kP7wgf+PZRTmiVi0ckbYINNCUvxsA9uME6W0ds9pQd+AwyW\nsjDsa0uNPO/odGCEiY1yo/G3xJxf9YY0KYRv54zd4ZhHC0wOmDLeaQGRvs7g\nTsBf\r\n=KyEe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.18d147e27.0_1620161839568_0.4695948425230998","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/theme","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.b9984794e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9a60b0e1fbb259df549aa37c6cde5afee998df5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.b9984794e.0.tgz","fileCount":43,"integrity":"sha512-nfnr9MdM8LFW/FoTsHdZvkkCA4Nd46hCUwFxnBN82AyaRFpSKFcIiySK7TrlFsSmcRgtLHxNz4/9/Kfo7EsL9Q==","signatures":[{"sig":"MEQCIA9NfKAZJbrF02OrxW5GPxuj1PNcJJpxN6Cegt0bSJ5OAiBHGjsjDWdvPzEN4paC5RZXTxjhEk5bMFeXeHJC0syTgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdJ4CRA9TVsSAnZWagAAwukQAI9W5ujYnsI2uIQ8bYIa\nFFTRRFfJ0Yt9XTw5LERR1f0xRd3epffX9Pgrl9SeCBgKox9MZ60Ftwc2WIkr\n/WjmMt1NSyIQYI+0rA92RVuWaLMT4jbH2OorjdiHdqv3trYltcHxzVld6Wl4\nl9QGXHOGnbEVdt/RE/pMIKbTDiL9NGVATtls1n3QJtPQKstkPko2LBDQfoJ6\nAFXivplv1RHkTTlFXJsRtrlgbEUqMHP7v8T5UVQtF/41r0TboRcoWia68CY8\nVlxyC5bOY8uYL4U+S6vbn62NWqfdTZsE+UTkMNXEDToEUWtu4xCOYgspwnnP\nBravKPKP3rQZuTYQvtNIGcfnF3MIub6ij+pXDHQCNSpeMrnGPrkFZx9re8Yi\nylMypXOXIO9do7oGP8l2FtW4YHIX0WkjwzhdlUjf9+r54SkbLOvZpJOT7haP\nHEWwjIbji7NOS0521w2ce7MZBu3L7BW0gIOULraY2EQ3ekTiPS71uJyVydbW\nrnL7eJaXojQ/eHhVp/RBcOmUt8sQRRJ5gcBY1Pt30MlasN6/24Pzfiaj+ujg\n//dO8scZZIV8kQIPtvMG1QH5QJWMVNr/G9S9xF9Q718wUq6WQhgpw2o6LOYa\nQH4GE7u37bEuXWtKEqqwtrDSMG+73UOksCwvpzoGp91PJ7EzD+MUxbEzQ+KR\nBeiz\r\n=2IV4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.b9984794e.0_1620169336198_0.5532006861775935","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/theme","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e9b7ece9c3cd053b8d6711e5ff32757c42059c7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":43,"integrity":"sha512-7Bs76lx+S57fmkujs9VsNjaEmpeNPBU2q5QTb81FXKNcmH5zFhymMNDaoNOQ0A/QSiK+OyDYBg9DjnWcS48z5A==","signatures":[{"sig":"MEUCIQD8GvuB/2zOFaxSFok/KrcPl8dj810e0wwFbIUsf/LrBAIgBHkOz9wbO0aBaJzFVyAm0+5eeI7eDC6aTx1UXZmzfzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdNKCRA9TVsSAnZWagAAuTgP/jnw8cNg3OpHG7E/r8VL\nIsrymlfAXMsljiz4mu0BbedbsKVZkHB8rkaQ0ksX52iwMvCRYJn6y1NNDVpc\nBvlK5ctu9swxTa5tkKFdhil3RhKFXShFWofy7+3PKMIbCFkX9kPc8GCcbH7V\nnoEfdTo96+UNt4b8duv2YHsfFa6hHyljS5Ick//YjG/7yEIGkNbf6rj6ZNy9\nZj7d//XY5OlzMckImNjz8PD8Ys+m9zfpQ+LahZvGlv6Z16yGJWN8ssVhiBlt\nB2oSnxr9+3XEXR/K3bKrAeSdY6FerK/vz8UB3Uphea+7rBbffF1AtjtGA3qC\nRKpeITKFlAAha3zotwubDMOsGfgrOo5G3ziq+EFCLfzAYuzuSZT/gjKPOGoD\nRGiITh1aR1frFjEdpdL56Jz3SokDbtlQ0sfejyFW9yQ4/te5SZCjLY87lEH2\nhzI1IEJXi6DBP/P5j1emeZkYc0HMzod3eZSkiEPHyzo1ftzgYWaKYHkNAzHe\nQJp4FryBh01HeJu9uGHVpSwrdqo7QgRtbxGSoO7XhF3D3z53iy9T7fh51U2s\nZv+HKGkJTfFKgmaCxI78L9XejFoIOjjD7A11yVKm8l10zbkGz+w5/jZmr32q\n/hQRHkhaxOZfERrV+PcFqV6K2psLfeOe+ZaRPITpdoYlsnUlDeB9Yc2AoK8B\nG71f\r\n=NW5e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.b76f5fc9d.0_1620169546427_0.037377647206351616","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/theme","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"329847bca2791a35b2aef0ff8d1261fd7e10ee0f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.055d4f10a.0.tgz","fileCount":43,"integrity":"sha512-Yxg+M06DaWEGCe8O231+vFX3ze5f8l5Rk5Cgvuheop1wPsiqnc4uPgB4zBo9d0F0ga5tGOGBF6bek0e061T4UQ==","signatures":[{"sig":"MEYCIQCeZlgzjzbdVOrzvh9qUlo8jN0mgdbArXOayJ6RZnzAmQIhALc4zDDe5vwHjGYE0GBieAme98SX9fEe/YeCd7jC0hSH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdbVCRA9TVsSAnZWagAAscYP/2ytPP/8X8QojT4f/NDl\n3mJOsnk2iPp3Y2TiWhmKU6Zm42ve/Hihz0EteuXsTLqGZnfXv+vOPoLxzvcg\nr8YBJbXHZ68zbU3FWQMCdelItlEkHgV4DyFSVUwDsnyqW5M3b2NPqCdrjjdQ\nS6C23+Yr4zvouNkn3e69m+HEzyphzfATuqZqGGlDCQf4NSOAP5BDW3Mlhrrs\nixxg+iuaW4sMVu2sGDfW0gBEDsTk1hyksHiVbJxy8/KN/iYi/gTqxZYkMpHB\naQE8aH40afvjcjVdtKKPmg4W4dMGdNsyghQCw61A5ZT4OUgw5s/HbY8C/VgJ\nYe3LKxskgp/7KCQlg3r5xhufIL8ihdT0iM6o9U9NxAc96kHRLnUUgXH054GK\nY0luEI/4WuicOTkdba4pNH07DTFcd2SLzVYNVC5V6slfwhHjiirm8F23Adli\n4z28KvERMLfdxn9EzmCF2GYzNE8PPJwKtlKPS5bb+Ka9eLNWnW3z9mTnIrmZ\nzQL4e4Zlx7sxmIKild4yq8e0rrOZ9SVrpc2QIOot8ZpvKqhrCMqkzESCfzJV\nYh7hwApxv+zWoqOSwBNNJGJsn9HFHD1wGv8XpkZStPENlivQpI19f0aquja2\n1DjupVpryLMgyhj4Z3bkvnQH28axyo7RelZXONrfzNZrf4PiJ3zTbLajig/r\n9vzr\r\n=Rq2U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.055d4f10a.0_1620170453434_0.3338647296202675","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/theme","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a209687a5a9b847e6952e8d3ae4263f4c77d28c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.5b6a46016.0.tgz","fileCount":43,"integrity":"sha512-y5u3fl/zo59ZY+XIJ6MOtiGpe9jsjaGOE0K162iME0oKygjzsDdo+jnAYw8d50xON27O0lbSwr0KLtOs+FlM5A==","signatures":[{"sig":"MEYCIQC9ODWlQHNkNyMf188TTZNru9kSwJ/QJDQsvfrUUd0jNAIhAOZHvAyxFxw89DHAAfbxEpwI/F8P1hX/3WSjUW9ZcxOZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksSkCRA9TVsSAnZWagAAH7AP/0qY+2skKqTwDN2y066P\npYJX9ZDbSAbh9Ku7V2HDW8VNgdXsSLGokWR2x6mRBu8t8L4RFVK9c5D3nZ6+\nb3MsOpURPgigzEkvTkRWLY17OpKD3s4f+LyDRTWszV+TAJhWZ2dEaJ1iHWfl\nX9oN7Lk/i1zblixBdnQ/wni1VHxdz12GF+6Jm8t3LagI0njpKnGlQSHgJVTC\nPFpxWi7kWqDQUOXwtgR8a0K1zfHasc/+wIsan9gE31EKppET7r1JkDvCJAV1\nN+StrjRuYWPRnsw+vnoV95nea/7sZTjusKYjzN+tt8ELmsA5kXHTFx0amn0z\nd0NiyBOTW24n+gyM2NPKqGbJjkWjNLrsCsYJHEP2vikejDnNvHNVK9bPnEYb\nt+bVsDk05A7fxvySdYIyxTMiMUEEphvMzIpaZfDseYqMEEGZyJrOu3ZPY6b/\nwuWDHF0Us6TgPeT+2GNgs3pi9fGdk1e3atF/ncixRCq8LE5+G70V4nU9jkgk\nb8dyGymLLZHLBthjueQmo1dfsOnZ9YCsLKQKQ2tZqSFsr5Nf72LB2T0GND9z\nEq2xAZbCov3c7LxpiW8HaJ5hX+ZsCSrVPy4OuGk93/0JI5Ug6aPMW5exi7xH\naG3ypNEXUYqTeXcNntb1GszPanwZC8q2OhukiLUM1+nMtHuJwriOyJXjVcH8\n9Zak\r\n=3HLI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.5b6a46016.0_1620231332411_0.5244782022662895","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/theme","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85068171025e758b71984f973610988cadeb0ed9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.33c9a737a.0.tgz","fileCount":43,"integrity":"sha512-jHT/QTrOaKqLdYm9plb6bfFfnYNz+W1aAyuREQfRnT0MQHQSu+IeRfP2rawu6CYT8Q6/axtc+f26zI/y5uCJcg==","signatures":[{"sig":"MEQCIClaK7ELvXoo8WES58fu2Z2BbaMKZn1gAhfZBAnazlTJAiB18M4hIioch1pHBexTlXHdg9R8ze4g+D6TTPQtja8nnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktVBCRA9TVsSAnZWagAA/uoP+wbjuxrQ+80jGkY3rrE3\nBxu0KI1nHwxTwTj0iXi45tizxKyPxo/DIy8jio62PI/esdXPB58ige3ZI1Rv\nRAIxTMYwZQ9EXpj1NOfJu+QAXVWhY7b/MfC5w236OegA361LIhPySqpTS9gN\ngNjy8NfqF9JZm7FsqTbjO4x1BLewF4t1cVcKqusPJ1bflGu1G2Vd/NMa5WX8\nZRbDACovjUsjL+M5s4vhuOfs4xJypvCJMSl3G+6fOUcHFgP0dYbSy63fM++1\nx/HdWt73ADPNEtO57ebxa2xBkb+hO3Jbq6HyfIOKmUm6EfuGCL7DWHlDD33W\n85Pu3fkTZkz1ArDoZ5hiN1rwNnzzr1tuUjQEvQaWSYSrF5jY5O2lvBOlGfS8\nKM/zUi8R4TUb6ggpyYWWCDQtG4G9QBdsrdj+R18NZ/fH4AAB/yfJKOTV8GzC\n0LmDtUF4vduU70/eWXwD+RBGScyIAq9jdrzEjhQzYnRqJwA5sdzcKAbjnwdP\nHoNGJvJG3/Yk12a7fsbwTGHoM10SHnxQsA/wYYGj4U1GKcVi50MRNgs576Bj\nVLRr8Cj80VBJzGk9FlGkdZHh0gqHZpAvnuen/zJ7FCZ3kOt7BfdEJBliX7zm\nU4BzbrZA6yARdcoFT/n5CYkwZfOFRCl/d8AvgbJ9K+rTjYk6KfRyy7f8nzUn\nwxLe\r\n=Fc9B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.33c9a737a.0_1620235585179_0.28547172481111294","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/theme","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89d13e9b5902163651f129e18ba4da620b814fe5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.9bc0effaf.0.tgz","fileCount":43,"integrity":"sha512-Lcrt1P8HyZiw0eoI4yFtu8SnKztxidoFV2tzRqdrXDR1D7Kvy5nDxcBdpVJ5dSz11DbWUc48d9mUsfIQ+/HZMw==","signatures":[{"sig":"MEYCIQCqx/OFNaMXEUlLUpiTdgzZuVHFsWpdrAHAw4IedfL3iQIhAIGibSz2EX2RTCnSMCpdV8+L6PRpZDwQgdppIhZy68V8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwciCRA9TVsSAnZWagAAyfoQAIYTjHnZsjVU0JF3Dh7M\nzaumlYO/HNUYItbEXuSC2V/Ih5LWzjRX7MkqIYHhceacWHY0ur+W8JqhMf/j\ndgTxYT3v5TXuNm9EwCsnofGDXzXF8JXUGpL4HajjwoqPah4+6m+7T5nD6GRh\nx/FjnZg8JPM8cV8dzjUKIRJR4aNs0SiApkjkDjxY4PpHXHZtkaf71KNgr8LJ\nNIbDV5D6dg6F9DDgD1ogYBpg+CR4g36bTbX5udsrZz6Ja0yBbJzBpf+/qNi2\nn9F74CEcj6H21AR8FU6RPgtswLj636I3Eppne4jLxOiMz2UlaFQHNO68Tkjg\nzIwasx75nNINQuyLTe0fWg7IQBdDS1jSqdU51Vnbwt6iDipYTn4GqXyvFSMV\nnVXwFZJ2STwSZXZ9XkdxMSstRfol7PeXSP+udVbiRNhCWFjnLoaSBr65J1yQ\noV1SO1sAzXcxWAqQSP9B1VkXA7vcfcy2cFmiYlttj1O1rKetkPLASHH1u8Nd\nbAEHpWEKCSBHfxA+DIz8EZz+/1e09ELr5Q4syQkYWJjJHChi8HULmIdH61Bb\n6HXFj940L+mUFyPiiZ1ZvdMqFLHYoj8wy/DJjbc3CJh5vIVwOuD6HW50dZRk\nU1EsEX9GCtosk7jh3VVz/zMY5Vyd7Hs+sZPelBcXnRzFoNfsPRRDfBoQs7qj\nIFl+\r\n=qVnb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.9bc0effaf.0_1620248354418_0.6311078330350273","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/theme","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70cce17ce71d5a5a7fcb5d648e2899f05b51420c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":43,"integrity":"sha512-YufEkVgrgPwdq4UnneUCtcbyoDRHHNLBQSSmGb+Wq6Czx3jsMSKsG6+E3wwl388im2gNmvdtPlOGy6Le76FgaA==","signatures":[{"sig":"MEUCICce7uSIHUAnCUfhAoR3tH/dvpniS6EiFB7l6PGCQB4uAiEA9Lz8+27oN+YgB/4MKDH8HiDwmN0j51bD4GjOUqpPY6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxC7CRA9TVsSAnZWagAAXqoP/1sW3tf6t2olf43UpL6M\nNpWnRNMrovnUTmgBRye7WkUPnWGKpDCkrmMWpSl26ZCQ2Pc2UvuTUH32zdC0\nNWS3IL94RLKtduT5AbVXHV9hrY7ckoa2C+Unv+zXIgNnUTsvyDrSopE0+mSW\n2wduSwn6/DaUKioPqn8mB4wOGNyVwQiPTBQJr7BvlPwpguzA3icRurfa+5Un\nptOczTUVDryN2K5pJ5Jn+mW0ALfRffq+B5GHgpCxMx1qb1mu87XyJ/x4wbET\nOQqx9fiFSuaFuu1DxQg+n8Y4dqjlTFwnWUjQMlT2Ux6zExK5KNndCWSwD1n8\nMN6pzJLWtDhehxj+Ypvf4zHsTXsJdo2mSb0HkFBN9VvzPU5etMwdwuE0pl2/\ne2QB2SyBsGTseCXFtJa3Qw4hrW5lglNcBmpXG4CFezjP9TKER816nme5nHMI\neCKGSoi6SFWYCMUfAxiHbRqZMSWUPMqCKlUAChREuEHrOIZKGo3TdPyaFx+n\n9uKVj979sVM+YmlQ9og5a630CTkrC5jtTQrXA/z0P7J+OJvryMj6CX6rA/mG\ncDS4X1ZE5Tw39CaDT9viDyCwdiDUANsqIicc6VZKm7lTT+/x+B0qmKSodB3n\n3HP0/yNA5TYXC/SCtdrGp72WQ+mHgqBRBe9tQ9SZsUIq6BJ6tiCyW+/v07oW\n4mTH\r\n=wnDe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.a1e0f2af5.0_1620250810567_0.9777912452064876","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/theme","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.06930c96b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03e62d7c0524d197df9c952b753dda86cf42ad78","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.06930c96b.0.tgz","fileCount":43,"integrity":"sha512-3ioUGgbB+MEyA4+5yRbMrZC6GyUfL8d5FR9fH0H3lNwIxyAdFTQXxAEcnT7boxuVVeLCjPdBTiVwY2272dW4Pg==","signatures":[{"sig":"MEQCIHzuZ2dv5ykkHtxlfiWs3uQsKruMKXIZxHZ5Wo41py4QAiANfYragNeaKRcL5X6FjSEg79dTBuyD1zp7OLBIkO6UmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyxzCRA9TVsSAnZWagAAPv4P/jSPDmKR++93mFdBINw7\ngU61jLdG7voYqIuTo5l9Sb+1fMV2aOFdbxor6f5ELw9+mVwVtcYoalUtvOsD\n4wuppefOtQdg0PAOCT0Jh9WcUUH2X6n5jiSNvmanZj3PwWLTlRDUrpO6L75u\nKuRNonki4uwdjx0I3444ZO3GLjEDCYREs6NqUNsMyHGQXAi60ewBlGG51ONo\nr/91RkHGUx8XrqO/llTcv6gJaZrdBp0PmZJcf1i597HxaE5reOaZeaaQlyio\nku3PmNemQeizyxGxC7FWm3Dks9OK9bXMbKCRky17boHKCJU4oohBDAbTnjbW\njWah/mP5YMfx+oY/hD92HTQYilyp4XZkKxxd6MIfQQWzRTN8C7Q7wFsvu5Pd\nl3uKB6/75extyCGqeRVorbWfqUtkJ/4NqB+iwlLfeMJo5Bs0dL90BySG0RfV\nr214oGVpPQ7wysOUIwsirs++hHhR6hQjTOAboDO4D6o5eFF9sYI2krI1LoCw\nIDWJy46xtKQI1k83UrQkMNI2c1q2tLV66SIqPWsFqybetUZd7aD2rqxka8io\nxwBdXbVHQMpIKhoozy8NkzafUBbxaN/PTYw6EhNeEh83qiM4cdAlQKqCjVSM\ndJstszEcLcBw4IH9zl6CcbriPFCSsyC7IcAm3TJN5RXpw/18i/JxwPLWzQSf\nb1++\r\n=6Ss/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.06930c96b.0_1620257907192_0.772765619942966","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/theme","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad02e98a7b5e6c5f86b1beb0c5825716253b1f01","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.03f525f9f.0.tgz","fileCount":43,"integrity":"sha512-xwzA4D0zqTaYMoU2pRIjg5IxPoCB59oCDhkAukPa4UALB+VppyOuiMXnU+R3jJABUDQRTyMnjcLKFzMiwDqiFQ==","signatures":[{"sig":"MEUCIQCyc0YGCYJfxrBOAZMC5J8Bx/c4im3vMaVEPvVMeGYuVQIgZHS8zu37pi+/rYIyFtpIo8jIRcTQiO3pF4em6XPCVKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":216414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzhWCRA9TVsSAnZWagAAFoAP/RAdOQW8E7XxaIOgM+DP\nV6E4g8Iuwk9XI65U1w4vG0ZpKHRn6HnFNC/v2D9F6jNZtTa01/45QmqNNc4Z\nnkriKmuJI43zOIB/sF2M0Ei28uLacDUEiv0bxfU04C9B62UgiWwE2UT+c0S6\naiuY93sZx75U0BpeckiohNvoKzuM+l4AtOs3kyoq1+6FkRKtB1efsJd9L/4r\nPSbkmIiRfCIsjrUzBfW+vMjmBwpnwAE+zz1tgwe+ryOJQ3Mm4/Vw9kSQhNXq\nhGiwIIOHeB++PRZbCyCxQJ4Q+q2oE8XNv67AET1vC5Ubp9XwdwgtGw23exIl\nk93hUUrp0fxe59potWQwBOw4N4iDkkAJfLwztHDkceA7AMLgw/gdnZFmYG1j\nCCFiNji2nI1LJOb74LJ6eM0ndziDSxVwOqhWFkJymnMkRpA+cW/O68aAbItF\nLS7yQyK5RbuarYedPk5XiS0S+oTfJLlu/DhBOFXNQPCIdJ+J5ITTCrE/dlnr\nvbyzVwRmp98Vx5fsvrNz2kvnQ3rRBH4ncTNF8oc9HN9rbMTiey/J+5sWjvg+\ngEiGWKA0mkuA4lIHmtJ3ebT/x+UONz1D00DzTJOh/i08WYf5zo3RsenW4xfv\ny4gdTqlk/8tX2WAMiureI6WW0pbdKfONGjyeEu5JYbroI2afTmJJuR90S0Nr\n+m8E\r\n=Z/sX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.03f525f9f.0_1620260950119_0.23397483439099465","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/theme","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1ee48ee182fd4028e3ffa645acc7bfd1116c718","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.e82ba2a26.0.tgz","fileCount":41,"integrity":"sha512-U2/OV63laRV5onrOXn/TLN1uDXLEYckzVmiT/ZwgyxgFT6vIKxi0dZya47IfQGExyL+rZEJw4mN7dEGsDcOLZg==","signatures":[{"sig":"MEYCIQC2AqbQVvpipK4lXrERTOHFQaXAVmkBTnldG3cwo87ylgIhAK2ub9WQrduy9QCduSsbA5qF2S0WYmRJEPGxPRb8AjQk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBFwCRA9TVsSAnZWagAAiHMP/A4N1VVWEH08MNGk3Fe3\nyZU7iu5gYLwr2oRzY7t7m5tGp8qhL0IjY1TUU4Mw/pXzVmQUZBQ9XABJpUr6\nb8Qw80MAdN7UBeVcpHxaoz2nnhFwGu2aCtUKOrWNZwdSzCafb3a9MJ3Jz2fU\ndNuB2OPmMoaHiqjY42NAtAsTHVeEfxsfo3tGi0qoSUp6oHfb8FA5CsQdfXYZ\nvDoMTmUf4Fl27zfxa0TYczXiFwRSqeIBhZWchZnSMye9dYdZX6CQwpyEp8bY\neeqNYC6BLSoyhD3v33AC6nl1BZKjPtEYV4x29Ypeykb0UAuXjhXhLhLdLr2d\ny3Xi4cpDNFG4Hg4wkqxCNxxTHTtXBdUUuSUyc8uQLx+j1vD58sqh1jMGb5j1\njvlZDsvB++mA/1CNEyJK1/Fs3FAS6N8DOQhXW8zARqFMVGnbBZPt8H/zI/lI\nnaRzGOojita1uO58VD82Qb5qQc1ZUkFO7O3PyGH7B8v0Ciyde8d4G6HfFBH1\nAJ0AcDYKjwiBwd6opJLjyWgS93J4QXFp/8orKSEnI7jgVtyNZ+0y9cG92sLW\neaT50/H+JuAMibyUhzyjPhmkiMj7eU1LkwYsG2pfgKr5yuXkn76aB3vMbtKs\nPwly+qBradkyz96gkfseuExoPTvXHeWmqjw1CQiHll0SGjfs2dUUFC2Akr1N\nyKZ3\r\n=8NIk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.e82ba2a26.0_1620316528375_0.9678733854488444","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/theme","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05f6d5c0e1f808d31c8fba407765dad83826ae18","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":41,"integrity":"sha512-v5gCckrUVNIxSKQ24iwKJqO40vflVQL0wtCmNH8Z7pWrFxs/gSx4d5VbUFO/0iyqkOmTNZCF2i7RaC5HDVpNOw==","signatures":[{"sig":"MEUCIQDG7YbHr3nUyGgmJ7IMZO5/PhX6vt0z4gBDaK+GS0nxmwIgKD4ZLytKr2PA9/FsBvKoZz6hnZLVQ1H+YlPTQqQcIjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCc+CRA9TVsSAnZWagAAhyYP/0fY5QrwyYalic+4E9gV\nxGwggTMh1R0+DuEOfyHCin9gybGkTPdBtRLPnlqets+CFAF3nr82R2HpMVwK\nyPw4dowQ4siP5hBNkXChNPhVOmMmh4XDJpy4WPw2lTn591pxEViz7co6QH95\nKYBZ0SgrJOeumuYjEbT3+GWWEXncH9nzQCiSS9VctLyEySVAPYbnzJW63KJm\nS4D5a3XLkG65akfpkjxqOuJObtrDFXcMvqiMG7/IQzzMM8k9O03fMyBbuLNk\n83VhonJPHdwDObMkqz2AIes8iU5tMqBsJGsUqKmnPYFoWG259o6q3gj/TodC\neYbJeDk0dAlRHWkwR8gxWhFV+IIgQ3JlcTwzW+QF2yV+bxqDsF7KGOzrspG+\nin8mq8Hf3V3ArZRj/vBexkgAAIg8SHxB9cjVcsLhNuTyO5YnwVqzhMGVjDdR\nBQTwiuvnbR+bjJsmVN50KeVwYGyfIVbM9u2s1gGeXtWHG1QO20W9hAHiaf2s\nVKOHAgnhfYehvjyZZ5sHkp3+No9hdh7Gf9skcy4BxyH+v4j+rDo+Ows4Xcoo\n8s1KtSH8a0aq3TwdSmQArJ1oI+Dbx9CR66lU63ODPX1Yp1s6d2xLVchLqikt\niDNje3Q/kC0Vbh3iDofmJwbveGPCGe0TyQvZDAsgo2EdIW/iSJDKw7sanBXm\n0gLB\r\n=zMQx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.fc7c4e5ce.0_1620322110523_0.20387506273761824","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/theme","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.65c04514d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45470436bd16975608bcdf277b498065a8716251","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.65c04514d.0.tgz","fileCount":41,"integrity":"sha512-vP2XAfI8J3u5ttviQscsbEDRdOZrU5CbXHTg8hlbMkbIkDRxYVkokFreDTYUTrOeLT4qFn4Tysps3pnj6mjWpQ==","signatures":[{"sig":"MEUCIEwCSYWZ+2JxUl3CquDHd3v60MD5nWTDmjNmHv5nlN84AiEA9l8yWh8csIVtQhIfcW7Xvjr2Kzijnd2AYYVPFkOqDTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDiTCRA9TVsSAnZWagAAfz8P/1+XFtDwcVEtIcs4yjvR\n7DXkDZgh+IQ2T9ORfwNs6p+7O6cIosT54+C21dyPdoD5xbR3W4uP+K/47EM8\nihgZZXCzAD7WZhYZYJ4YF+MsNbu3Vzxsy7JGi3eqkb8wL/JatTt4bqbdU+iM\nYAVYb0P+lWoyNpIWU5c9ohecGtXdNherX8VIx7cLxn2X1spsYfMvuorSQvrB\n/9tNrhXnZAArBZrZ+nzgm9luiRxf13c7AW6MZPe4k7jDc3desuSLZmNqfHo6\nRfidiMElL1RZhNUf07XxAcM7ZZ0nsce1wE2U/yq+R/w9O2jiBdtVRAdrcVra\nby15caOY0y62uoS2Y16KhPshHl0BivKVgeXuVp9aHC8I/GG0glUbT/DTqnvS\npN+xSYyqStGXqPZgjb0iG6f28+j5wq94fSw7whSUrbmk/KtJr+guDboMIXxP\nlcXGvyysMHge2sgTcnM1ogZ769OZlfuoAdzH/OvAfcPIEV6TF5X0n1XHJCS2\niBiWBa7jK2zPNpi8PLxZ0ajrUjhtAtTDoxYrPRpd2gkOgGAoZRBqXhuiHtxz\naLzI7u3ingAumjuC+we5xUJ/qa1AHyKdpGMsCzOCri6v3fe1sj2sKTB1b7Hd\n5l3nHAQ1If5ECI4u5AL2euJZVzhtVqwj1lhgF74G+/4rxRsqqFb4D7PJAIvW\nOHsW\r\n=4ln4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.65c04514d.0_1620326547405_0.9302767433207078","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/theme","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62c9fad858867cfe46853eced5fd35125e650e76","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.c97779ca6.0.tgz","fileCount":41,"integrity":"sha512-NMI5UBByHYtN9FDiWEoX2/jxUQm5Woz19CJDvm5/B/9mk7GrAk+TBX62N46/rtHEOhZJOh930UJr2h6b096npQ==","signatures":[{"sig":"MEYCIQDwiTUd2bmPoeyjLS6mCT5q2XfYq4dDlxfeH05kwJOjwQIhAIrRtM3l6vHRaCey6KjoKqdw9qOBtvwgY2SI4RUvAfLH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGKuCRA9TVsSAnZWagAAM+UP/3c92vqu0kDxR8kEpyMd\n+fSifxP/eSDjm3nYaKAWaD4TnsCrPFVgofqyUK2utL3IslddM3YsCaoDfQ2Q\nwoZ02O2p18VGNVsb/ZALjw5kV/mPf5guQVjjrWJMMiIjcC51mm3HjPzfXflP\nxDTwvbZLZcHpCOdjuuRutfs0nOl/7DvRVz8OAD95sfmv4taMt6Kh8YW2gPDo\nQ0YRC7qijHwaAeWJKkL5Tr97l/R0sbFco/HyDTSfz7FYsNT8BnaIJF0VQEQx\nq5tojFyMFD03GVxErz0lpDN/nOM5buE9XxSyi46sQ3qhfNxTXrJX2/+Gx3IV\nGn0fRK15TtxdYMLgK0rzVJWiYM9VSsDvfUZVrPSqNZ3ydFyqeVV+oA75WShE\nYJQQL3dKxv4ztZ5vejZaIEeZDadqBocdTZMCFtd3gM4ImhSrTy90HTiSGGsv\nW0eWZhzIKGzwB9ElTSBLTW0WQYLVlsbn8ND4wmsNO8XO2vUbXwc8cNjtFXDv\ndDP3NCyjv+sshPsTdbVKMSPvrZy8xYWrOR1WAB/q2nqYjjgu62zEB3Om1/MI\nU5Pvd0Kdseyis05Y1qaYsBqSs2RSYXmrDnC3+7bNOV94bKAQCbeD59KgbIaI\n15FLEY6JZRYd1C7UJ5i9uMiBdaUsRGd0nkZ9BemFm4TNbwZU6YwdqPDA/TvJ\nwG14\r\n=Cj4E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.c97779ca6.0_1620337326104_0.3170862548163009","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/theme","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.869d890d4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcbe015174dc8ecc70198f8b6ef41284332f4b57","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.869d890d4.0.tgz","fileCount":41,"integrity":"sha512-iBPVcbAIsIYHA6YtmhW3OjZb1aoxiPmzzzi3lNixGoAYEb1VzmlG95huhQ1zzy/FqGMZtlWkOkrOjD4qtPJVtg==","signatures":[{"sig":"MEUCID6Ulc9X+j4smxVAE/3YtPfqeXzbNMfxrxvWvjX9u2VAAiEAoqe8bRRIeJnHd5mMOMczweqk/SVq5fpBDntkqW7s+Qc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":203047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVoiCRA9TVsSAnZWagAAIccP/irlAFNnhtUZLiuVW3jS\nH6j7fu/n+DeDkamMJuyJEEiXRSNamEVvGIgtvMThxI0CtENeckK4+akF8fCG\nSOYhXO7c5OOyKMv7H/kl2ZoWqVy1W1JLRHM5/bA4oE4D2gRsw6Z1nGR2mZxf\nT5jjdJwmFXG0Sv8xhbUhPuk9p1mY2GtvpPdW/AsKtNXX7idxEYNrx3sET9y8\nKmRczujCG9MW0x5+rtZV5GPXAKZa3nqFiKYRNlO9CvrfiuKsG0WXOYQwRQKe\neaXh72tloXweazyynv371mBygKxJ5eutnuf6TzWik0Q984ufJkr0bxvFBGXc\nibpHiIjg3qPWCc1zeHs6MvfnwHenK7vl9+2CWVd6U9yZRcmgLS55saOpQq0l\ni0I7u9iLV6JBnXhRJ6FEDZnYZ/RgMaBComYgzpx4j1Du2h3nAFADJPxURFwZ\nhAiOjPngwozwODKxlXyHe5IyYiCS0cFoNGTYhlzRF/Ncbo11SK9ypBXHRN/v\nvsiRSPHbIIg/8WWmoO7WOWlSN+w1vM9gbBVcwvd+NmYrFrUcuRr/vvvWAmcP\nhDZMyzv8SddFxQw/JZRL99aEyPjTK7wkfL4LJaLX3xrP4kHLsNz0EKHk2BeQ\n2P/aUYj3lkkpDbuO+hZVgT04Xxl5maAUDdVLsAvhbRBnBblczNLeT452a5Lv\nTG17\r\n=K5Fs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.869d890d4.0_1620400674247_0.43448395827580266","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/theme","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26c4ec9f27e11a67bb6e9b2c6d0faf67c1355644","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.ec22e1da9.0.tgz","fileCount":42,"integrity":"sha512-IDDFpjbCcOZl5GBLY9QhOqw5GATuxO+n08hdY5k9Zd5/mY2N0f8K6+eqFRIzpnNLQvf8s0hKncCw/ZhKK7NtFA==","signatures":[{"sig":"MEQCIHq6QS/UuZO4AY3uX/fEUyseEgRSqsXdLXyKcqZioi38AiBQ1EQtqad14GUL3K2SNqXSc5YrGKEiOI3gNFeHksJEaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXn3CRA9TVsSAnZWagAAVWwP/iiQTtzanDuf4CNH/Vym\nC9Bt3RZk95S7IpHV2y72Ef1ukrnUIgMKzOdSj8irAKcbBv//4y2aIEvjrd95\nN1BQLwO3vyIrFC/OQvkqMnRctR18652ZvgjJA/o5E4wxe6wKGPtUpf37PykS\nQSXRrr9TutcPUGpAuvZALnBtHe+a2fUOCubfFzUV+mqnQ13NKPbKJxMokJz9\nluZzrwhOp6IyHEkShTN+IJjWY+6CHldVHSXJmmpq7fRgdgJI0yvTJiVwjQnl\n3IVVVdTWO95KN96Ed1YR0A/5+qZHKEW+oBK3xx1P6lJ/pfwwG9LZ4UQCKsy6\n9+kTcuDEvN1g2SZnHsUNnZBW3o61S7M8cdrRf/IIyKSFw419C/Dl9R6a1hRL\nFWpPPwmFuDNjnOv5/RVEuHfKZrIqFLOolLFKYc8zeTgpm5MRh0w7XwwcM/5w\nnNzSAHex1T8881FjAXDJv1KWwgFvAVNbI5cYkJYm3UVU5SwCY/k4BC9hcJPE\n21al0m1Rhwz5V7+25pfpdfJFfNemR2c8nDTOwH9ALsJihavxFlbAE3AUwSyX\nWa21IlvEKZ1oN/VCu/iuz6ar6Xcyf1YNJoQ+4ykVyamLl+rIUA3/cZ03Ff4S\n6yZPqFWvCWxaFw4YL6asnH30az6dcWiYIb9zGYw5747WfZUcIQVMs0HvL4yf\nIYyj\r\n=Gwti\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.ec22e1da9.0_1620670966926_0.5430486373452021","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/theme","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d78bb1bf4eb03075e1f8f41c53ba09fa82383078","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-nightly.7427449f0.0.tgz","fileCount":42,"integrity":"sha512-6c1BXNVU4UCJlAtBR4Ktr8v7GIiX0rnI+WipRM6SI9RKdLC/QAoJC+hZfdbfQP+UMjy7RjxAVSv5Xns2a5uswA==","signatures":[{"sig":"MEUCIQDxrhkV4BW3Lm+2kVsHqh3rBefQUwo17+R0Jtom/ekCCgIgESqdq1WAWCUlixyYzUrXwq40ydo9JoZ3xhShSQWZoAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":220341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8fCRA9TVsSAnZWagAAWBUP/RSzRddG2iYEY5Q0yziO\nbQ6iCg3pMWt3hbn57O9L0axkEa96TjMNQJE5Nkc0ithNfw4GzHAOx5OnWWcl\n+k2j2TuOwxIbPyv2KEDVK0V7cxoqlsx6sm+6AZ3UUUCL91T8Zl9/oV7yzE75\nPAYw/a5nMcBmatuS16/GXfkemb7nVHxGlaszmHZuNA2shWf1I7h9nPNhYeSw\nTZcLGLvSW9D7Nx9/dv++aVBkrkvFNWKEDQ37KxsuzlSV34lXV/sZa8Cn54tU\ngvTapr1t3n2ou8MkyJ5brGHVJytDJldgI2N6itkIvilNT41fqoWHCmh7tMBq\n/Ze+ETL9zx7YyuW8RxbfV4nj309fcAT/t/naMAywsd3q8M2s+vAXk65SYyh+\nfJ2+yLzznrZsZZUGK5apzoxRTBHOvJduEuDO2YWS+FYUOKhyJfUJgmReY0wb\nmcyVzhwEnCG9pe76l5cgkLDayhJCBu21EeVRMIEkYT4rqQdfJTvbjn5iF46G\nlrltXwy60/2YR6jAKpfAALUX//Amk/zJdi7kgzw0EpNCZ/EDCXiAD6yoRhF7\nJPsHyxLbj+HbUiXDEAQ4zlFN9VqJR/alscaz2xDtpxL5726P+5mxTvVhM3cO\nJ/RqsAHyj24sp8pYTUPF5p7UVMb+CGMl9fSyYbZ7pUt/7Lalu1U/L9r3XQ4k\n41/h\r\n=jVnp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"anonymous","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-nightly.7427449f0.0_1620672287129_0.03289363924547284","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/theme","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fefd9def6c2ff60620ec652b903f5af3a32f338","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.957cc3bf5.0.tgz","fileCount":42,"integrity":"sha512-1rPGCX6JnFJ8Aw2K3OQah5P0O4HOY0G2RpYEzes11N8iiWvGgvYJHF+dCdIYCxN+z73lDXGgpthQc3iOb/kZuA==","signatures":[{"sig":"MEYCIQD+t4tTAFkx83FW+NTlL1xeKYla5KMX57VfHFimyakpUAIhAKQ/vRq4jOmBjnLoxLhDnYVn8yR8EBW27fh0mlSstj/a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmavwCRA9TVsSAnZWagAATsoP/3YNC/p7u2QLT+xSJX43\nzODZjptoMLFsjJHAJvIEaBeFQ6APanYYp0a2AaqpmWVMKRfS2YNuxnAyWkIC\noMEePX6c4hAD1NEp/mY8OrtD1mEnXiUyEYkN6Y2RGR2spAXeCRdXeo65NGql\nCuleCnUUCynlxOwNf1vpJaez2opyUESVcWufZtrGlOJj3UJmbHH49FjfFYPU\nzkvxoVTjl3Ew60EBTzLmuqmZ7W7Frlq7iXvHiEC3EgRbUFT0MbM+W0rj6j5Z\nyhdrQMB3EyYfwIBdk1m3UqRn+foBeULBRfB0NGqwKy3B7CC90Z0QPfNXJrwx\nEWeia3KzBSgIzN3xQEKIbs7TS0fzNxVP0NFYIBe+/7buAWcauTkj3/fOwYs9\nlU/x0i92mnUYXZn8JHkkLtjobj7lkmOEjatxSLozQCzpr3CXihwTBBqKVsTt\nb2nkhN16h4Vz/tVA5F+WwH3rviDLy/pJjH/BNDQejVEyC6gzNFFCfk2VGBrE\nXbG26suq6mGof4iPrpou+39pefcCp+IkU5AtfdB4r42PHyxh6lTZAtrMkBOK\nQ+bXl5wO6oMqxVz6PmMF/IqoG6Z8y4fwzD81r3qwN246FhX9o4qhCK/n4GVB\nuzTzqU9rC5z8uKOhZEn0x6GdopYHsiufffwWnhN2OxWKKK7U/6EGYmJq1ePp\nv/7Z\r\n=PBwW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.957cc3bf5.0_1620683760319_0.1919476925944461","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/theme","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d99ddbdaac02d1a177393167a419126425c6684","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.88a33cd70.0.tgz","fileCount":42,"integrity":"sha512-j9ZZryMduVJRAFJNfF5V0JUoD2/WzmvGgas+gn9wke0V6t9+1UmX0v951bvJrWLouSDKfmn1oGg1tSZwJhm2ig==","signatures":[{"sig":"MEUCIQDWW8Ho8+zfCwf3FjQyfR2H1aBkRGcq1rymDYXHnOg1iQIgYfOS1IqS/5xqsXaE5X0yy9VhSEKPyFOJVoXp+q8GKf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcrsCRA9TVsSAnZWagAAp/cP/jkeG/iy8gGQGRveayL7\nvZZ+eqD2GYPkdCEFzCxqrd/eUwbRkZlGpIMoF3mFXROlyVOwYWDex5O8oKH0\nf9Thul5JP9SQ7U14zIDD9CwICCyjOEj3pQGER+ZklFQaUW5qiLjHFnNzIWa3\nqexV+sOauR10udDg9wFVmp02g4klK6z/9AXATszAhblh7vdmknpH44ibiGLG\nMN0c5Wur8FWmeHn9qBy2h9ZO+OmoeiEqt/u915YFzm5JF8JxeR0ssKZIs5DV\n0lZW0SoMoXJPR+Rzg+7AEc11wTbTeRaiDhmGXfOUloYuNtIkcAk3JmdfuJnn\nSOrteNg0Vs1MrqBav5NxyTJLR+ySkQ0eOBDDJ157v4ySidcFJnIoR1s4tC/Z\nQbWnlbAPBzEMYq3vNuDcLoP4y/58A6czYDisJEmeOmHLGWSjzFsgZfNj85E/\nhz+Vn6W8fniepeXirIEhWtefMQDPM1hnD5I1ogNji3hsjV1NPpsPpXeouUnH\ncVp2HDna2Dy7WRPX1fPfed0xt3tK9qzHQiSPZfbl9v40vd2aRRC4EAif+SGM\nJBGYsAXiYi2W5DCr+tpm7IvRA60fAYj4ElcyWdNj4dM/jEVhkFwMQxldRkNo\nPfL1FVmW0DbvkBb/riW2cU2zt4B0q5w1Xdr+0jzj08njTzUsDMx36pTUgkYW\nb/V+\r\n=6e13\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.88a33cd70.0_1620691691593_0.38371032739982036","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/theme","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b767c3a6f0febd51cfd4299e4cb55077a8ebcf80","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.d20dc6dba.0.tgz","fileCount":42,"integrity":"sha512-pZtBURwQmLGkb2l5G0SztCOXLqsBNo5mYQ94Ij9TzpmjGfzoRdMbdSF4THTEjDH/SCVwC8d8Vh3nEVjYVZsiGw==","signatures":[{"sig":"MEYCIQDY6xpGDUyogDcB/BtaOV3IVZayunWeJB02tgBJDHANbwIhAJFNof9nH8nm2PoI3eJxqbcqY+cyS+iItc1AXxgD6uWg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc6cCRA9TVsSAnZWagAA8TQP/jVLLq90gsS4iGb7NOze\nhkn7MT5GwpgPiKLQjp31Ea0uLEv0ghTru6xqM7J1hV+RYku8y38hY+czYAm6\nmBIEvsdezu/9gvmvKwU2WG94DfXswAf3XZ3z3QVOAUZsNr+mLEH2slGwSEu6\npZZLKVWYbeq8ZC8E6jZEvnWURDXS/5HFYPSv+TrrEHSjxuAjz3eWDybtIHqX\nMEBja1wyvk7AdUcJOR69DuReUpaZxH7IZH4e5e9sWugn6FqWFPwQXvhI8GQf\nUpQ2INK/hxwTBp8TgGMlHYPipQ9oZ90WPeu2OjFqiBkZiw9PNzP+Yy5vjW8V\nXg375oLBOZHH4j6OIyRmKWIvjUGp/378StZZz2bLTCWg27aaJQ4DnWBay5Zz\nebVaPKG94HkVnk85YdRo/HlDHg+FYIxS6ZRcoLpO+6KhLAWXuL/aA6uodVEW\nRCAOWiojh8t8deA3TTB2bGgSh4pNvCKeohFdiWn5rkYSXW1VYDL3tUuBkEHw\nIb9yxHnLRg4w0R7ZLTWBLwUkAI2XEUTWERUwlqzJ6vwdMz6H6qrjR7303Pw+\nIuEt36SioZvJpHI2JDbkkMZ7xo5xdtfm1UeH25z2U06pMCS8BYf7LOt9Pi/C\nOJkrhhiZgvOd/fdq4lQCiHLsq3i8Vj3y48W24gXIeJSMxbOaMtF9J2w7dbum\n7Txl\r\n=FKtt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.d20dc6dba.0_1620692636334_0.020707696663103015","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/theme","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4fb2927f0e138f540d38c156330a249f3760378","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":42,"integrity":"sha512-rShWs1r08fhlv/xIkCkq1uTXSbOfTHLUp6kZu7v/ED9Z6XSvZ6Eqs/Kt43iJzTs3iE0ZXe/J+IHPGCsGUt3mcQ==","signatures":[{"sig":"MEUCIDO0h8y65H5gIBSeTmlmilsSxEOSe4mmULDfzI8xpt3JAiEAqsHJXndKpBgUmaxdBXXj1/d0GE/i6YRmrbYwUnzu+Zg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdaPCRA9TVsSAnZWagAAiIgP/04+FPEaNCPv0FnvCYfU\n8rLUqWyxDOedtcr86xonfMq4e+JTgsr5mKED1G3/vSdBqE/0xP83f4/hGf7N\nlk94Q9EDhtsE3jDFn1bhXSf1jBjeI7fs3Zk9OM+tdVN9m+7G6vZknS7W6r3y\n1vUVKbQ4Sq633sDsQmpn0gXPt/Up3Qmbxl9VcVMNAc0/h95vcjsoG6VvLbt8\n86Y1Uyc9urFBNmuSLTiSmmSem9x0sggRUBo0RvZwfA0+NOyg5/5s1ExTO+SU\nLLX+5GvVpPrnpxRPXDvV8ZY2mx07XNmCUHLayDHEV5yvlRST6oPDMrlbDOQR\naGKuivhCxQ8K/ScpXMb4UEyebt+yhIuEWKoD0pQLuhz7prrEJXlbIHxetCVe\neIr+EhNhCEsgG6znJmzwLRqOupvGWiIsAEVBPHk6DI49JRxWvu84FoFLUBuQ\nyIq8YArAn4N1BLGyizM7GzMN3WyvLN0UZ9hXoG8yhZ/H1Cojlc2/j+fwjG6Y\nv7QqHoi/LwrqdfODYTAc/aS/OyYEodPAKzMP7imvzfZABG4jkJG6Qy3mTsLa\nldrxdIZdEZMY6Yn+BiTL0HVHl3TJuOQ/DisPS0xHghL861646YfRv88sYYkA\n4iizsEpmJb5+EHXdwBPYUoIqn9ybzCijMblxT1KmKpTK5ou6JkLtUJesSoei\nGW9b\r\n=LDzn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.0ce2fdb02.0_1620694670929_0.1540408344896418","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/theme","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.cb162da37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7759ef6c251becb0c3267fe72d5a2bd97a53f089","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.cb162da37.0.tgz","fileCount":42,"integrity":"sha512-BzUCRaIFEyxuEDP3HHJvgiZGYIyH2/eFyb49sJO9tnL9/4vGeGGzpcNiSu5QbIF9KUEUxEek6RxBeYh25ul+vw==","signatures":[{"sig":"MEYCIQCWZgV9mJ7/s9mhlps4HsUhJaqrBEEvpLayvtw2yqPlqQIhAMCtBm8mOHpdhJFXFsRU8oggE+BfpQsq2xgFh+9Z8u8L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeSMCRA9TVsSAnZWagAAxU4P/1CsvPM1mz15eRwBrr/H\nClagpIuHElbdco69ox4K1ouDPGjA7fN0F9Pn7OaqhD8wOm+fD6Oz/1+JgFzI\nkUdo19259dNM89IVob/jQktn9sucvvJjxVrKAXmHTuIjDT/hH+MHKW7jieNC\nfwrIs6NfNDZMMaUv7LPhZXSNA5yvPXFpzeDYYjuBX/z1HhzmQNqM/D0oLu+l\n2Fv9IlY/0VbjoAkG23SFZ3WzKY/chQjBcCuO0p1iQkMvszxMNqpoHYkH5kj4\ndh4Qr1u3jGc7PNsvpx5OoIl33ZsYAMo+HzbbLCoGICjqWkOohHiWkD0Z5n2T\n2vd3l8frF6pDyKTWBBn+1XPTkyIhk3K0d9BqfuA4e6NEQ+JhSEU8jXZNNf/m\nDxqbPhnsnxGAxOHYB25XiS7s7OLAI0TIAcEgGxSezijQQBRPknScGFs9K2II\njDwdGi7GwhQ2pasgwKatAB3OnuufkT1SUYpb78HP2aeji0QwD0mT41rA2Oxk\nDsjp24RURddnyA+TIddqZ8HbAPU9H5nm4wCDDCZVgQo2Rqwi76uFPTov5tpg\nSmffe9antLhYYNxuYd0ozAVfJGqRE9i4yJv8lYNNtdwG64rTT97oDsvCeV8R\nl90/pTi3/hpabQKX4pZ7nsUxrVQhyA+xm/jVZkmHY8yqQJe3BpBO8jGMmVDh\npBiI\r\n=ytV/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.cb162da37.0_1620698252138_0.6476291864725674","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/theme","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f80a9a62e7538338f71f0d47ae4a4f913639aa6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.573dc7ffd.0.tgz","fileCount":42,"integrity":"sha512-8GMDASkIRwhEOfWWxUHw2jSOh+2be0L9dbedag+AD+i4dVbm0ruwiwKIFoWQgT7LuyCzSCRD7Qr8HrZazZlzKg==","signatures":[{"sig":"MEUCIBlEGLYJZRy7pv3Qk6jDUhVJW0tOk/50GWXHT+fgAZJvAiEA5eZDJtlqI51p+1vlbYdS21ShYnRAzmpVLu5Va1yVJE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmekCCRA9TVsSAnZWagAAahsP/01rv7NKwo84wVhRuMTB\n82OxcinOHnCYzxUxAJZLHc/nufJOEqPtsuQeblVLDonqwjvdYpuzdacFz1lP\n9F6BSFd4/lea0ed1AjRSsFBqqKP4gI4dlQ4ZUG3xC+apF0WMetKc4oYGVvvP\ndMibYrQScqpHroLA37dGzfXhZWweeStNagK9RruOJQujh379ckjqGVFMpJ1g\nD/KZperaaSRFR29ezOs9JJKDWaEvJ90P7iKckCHLn9lH3kAaBD8oSSP1tHcZ\nbdh7dL17J0/1bbvX3PbX8TdbRHTDxc6NayGk+JAdHB1wCMzvILQ/1X5PcKzX\ny9oqwJaLuHeKGklCAZzQSbGVVvrEa66BCAXU5UHpDjqP/lvwLkREif+EEae/\nBuuNJ3Bao7NBWGJJJu43GQnklm8wmfQ45AQkcWEkU7xs7YDcIgZAecpW5Rgx\ncu7Pz9bjn4DWsPaebhl8GUhx2pK89mLwzwfrTSsGKCEzS5mzY4Jnk+MIwR3e\n1Anqdi/sSu9EHCH3j3nqh+xmmkuHAwHRqRjGs6woFa6y+tPlGjO/L7BrVuIF\ncdNM1/Lg2VU2R28k6UloISAZUYcVL8m94kKu4FvVfj1IrUpMMP/a4ZKxhSFZ\nYiiSJlBriwBr56k79GlPz6HwOc8jMBWnNwwCgFbDvUgJpki3BtC+0vL5gYzT\n0dgb\r\n=wwRb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.573dc7ffd.0_1620699393652_0.761030426160324","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/theme","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a6a04c475e3366e64e821a9afbe0c291bb10bed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":42,"integrity":"sha512-WA6GgpOhhGJNut8aIX/CmTuOu390Srxaaa1+gK+RboRZNnJHVBJ6FfFcoo9ScK+fyTj8JiiTb1juKv9g6MxtXg==","signatures":[{"sig":"MEUCIQC4ZnHdYRW2X2HUoUM0TKcOXr3KEmAu/mZ63l7f0vehHQIgM6Ku03LntSVusHSRZU3gK1jTIc+ziIcyjQ4hsN+wg+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxGQCRA9TVsSAnZWagAA9McQAIhTV3LcJ2rp0UolPRL7\nboLF181Drc4xtJpupySGB6CJafjSIuOOwnKJdTLpf2ECMZ3jXEtGcn5aJHxQ\ngY5Lsmm8rWp/sqiWfqQ8ERcgJ3tbk3yS9lNb7yEXyIKtUgJNeokbuoLJwY1d\n7SgkFlPQ+GmIBoiGHbishzFh0F7vcq48i7opVkhw7XqaWceOvM5rGh8LdcSi\neAJkPC4QFJGT9OkpA3Kieb2gtkECmOty/NpSdhPjHs/JuMg2ZmCTQSwBvSix\n8XMyVJA7IjUXkahaIPqvlKNdzZLAGTR7tBJ+OLzupMT9LVV4nV3NzMNa0Kkb\n80SOB9n8svh8xMbuBUVwwRD19PQJHrAKu2ddjJ+CxHjQqxhMd0gn6+dhaPqY\n9xG2CcI2zGKWDWx5OF2sb45O12/B/31d7zAvjTuqjwtZN/HPBMn+8FEZ4Pb1\nQZEFjf+0512+FZk1GkrG+WvrZ9G2oGxLa8SRl3frL/d5ozCjfed65/auxSoO\nvzguSkk1eXK2PJlq/1pk0cfcEN8exAlSxHMB3IL3SOW8BllNElfXCfS3/JVI\n3ZZ209opRqpvZR+wbDYRyKEseCxElzW3IClN4qiD4M7zjH5aKwF2USGdX2yh\ntp3AwJ/UKqE4v/Q7RNPOoVTn4sItmbn2+s48jSBnpN4czymQZmEOVj1GEvLc\nE2MC\r\n=FtfC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.d5f6ad3fe.0_1620775311740_0.6744483535029462","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/theme","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48b04acf0b15ca5b6483fc3f0a99285ad9ebfb64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.25751d2ed.0.tgz","fileCount":42,"integrity":"sha512-svPEU4mQOvLqiDdJvBxECgXKzk6h29HEnuA6gdUZ/jpGiM+/24rfXDSovhYPnwuWi3q66eDDnhyrIUClwxHfjA==","signatures":[{"sig":"MEQCIAZ972pshp7n94g1y/4MZjK5J89djwHyEsNDBOeqmkTPAiB8910Sojc55JmsNYf1u+eIa4LK+w0p/6VnRBc8ky4aBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgm//wCRA9TVsSAnZWagAAZJgP/0yysvbKeHtGzcbkL3Yb\nwndskqR91XYSfFxDsxpHuX5NmPZGY6u/vNEn5qzi6HPriywut56GzljQLkrA\n159L3YEjrwLk6xgNKKgape5MU1Jty0oalUvb5v7iw75RG0GY2DEzPIn8yS6m\nC0H5PoEofjfLm6Jx8xktyLGHmHiWRCi0vCwTtmSBAg0jsBAmHgZBhH0OW+ob\nUPlbXt/2DxZZ1Px7pVF3APzMSszf2sw25zd6LGE9+mDwDOC/8cHJbf+qWrTA\n7cAg3SlvkCI8EMJxdoupH8y2Zgnl06mpvrerxkwM+aersIAjfVqC7q15P7ax\nFb8h/A/nzHXzgPCmHiOOzy8XFJatho9uIMepfHElGo2KcXx4MN/cgdfbYxFf\niYYKufo9mUDQTw6FMNPMxaO82Nv5/b7j0TtZf8OWxABdPHvYo5WD34EzCchx\ngBe3vlCIP+36p3IGsr9ZwmN4CX/PSOXAfe4WEpFwB/c81Ico1gW+QvxuwHw8\nwE/tNfVVIyO1rWJHmMX58bJilElEyiu4RAP3lnWwkRxYwvpWdj2J5jU73t+h\nGlnnLRSx8yKmwIglV/PnHehyIXv/WydgapvtYAUcMR05lGF8x78vlBqM9Zm6\nYtphKI+oqwE4ua+mDR5HsK8zTfD1sqvNUSAqRtUgc+G8W7vPVh8gLTonrk3H\ncBdl\r\n=xy9f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.25751d2ed.0_1620836335795_0.5076186251467989","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/theme","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a438ddc648e345d0d3f8f52a09cc8a260d16bfdf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.a23ecb682.0.tgz","fileCount":42,"integrity":"sha512-EZD20VELwRNaA8p+H8qrsI0Tomhy1hctG7g632evFgPWVelHNK5cy0r0zx0Nx24tjjI/qeySSVIDciVb/9rXXQ==","signatures":[{"sig":"MEYCIQDd1tJZI9p5xsyi3dCWLuanTZ1CWICQfoes6GbXJhZSDgIhAJJLs16rdbJ9b2qhcyoe5ZR/U0Dc9arZeOm0haxt01Jf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnBziCRA9TVsSAnZWagAAIi8P/3d3TJbdcjXj5/JY/lzt\nFpAN5tNXXhrmJ1Q3bt/QwmtFnS2eKvfd0i8eFSfkQwtLQI0o1OYEv84UizFE\n6BeyeaV0LbhNP1pi/YqXFcfAESjc0D3lbvzj7DeuPbF5tJItNpoLxLICWXpB\nROAaF5Imy8p7EKeOTmb9lNnhxff9ZjoYXc/4iaSArKv2wERW7+f4SHb+Ej0a\nkahS+E3zdAB/q6d1rSBBZBxytTGNNjDn9SL9wQlpPSaZif2/jpoSCAYOiqkk\nWC9IjKUKkEYnG8R7cAKO7Q1eIgTHrLgoWXozWmV2hLtyEjOYdFD9l7V7ywS3\nw9hQBe/QupvQ/kiznhIiMBpXdBTPQQnCysRbF1v/S7YZc+HAtrJXQE6JTRfF\ncmiUsas8b95CPenkPq/OOTUrNe9WkVX5Ix+y+1KFHh8sb4f6wbAIhCeJUNt8\ndjlOJaJ9HuFddLS47jIjKihmihElf5EPnsJI/kL/66/8hTiq+KrnoN/JuVSc\nPaijmcBHv4h47l5fAS7//UIog/9Ldfd/s3ZKPzFAQP8SbOEMObJqtb3pdFy0\nYHVlSqB/HtRId06W6L1xsdmeuXZYGln05g75iF1N7Z5BxY0Rnd95CW8I2/YM\nbCDpYwprRUg3/DCsvErnkZlVkzEI2SBH43Jq3zCrSYwvFJfoYH3d0b471uUO\nw2nH\r\n=8tRb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.a23ecb682.0_1620843745474_0.8708934339676926","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/theme","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.33a954852.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f27fd34af95f9377bce9f1735cf9756dad7a5fe1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.33a954852.0.tgz","fileCount":42,"integrity":"sha512-P5InNrrFU2GN0ANp70EQdX+QxFW0tDvZb0+InDoNFEy187B0ykbk82+Livs6J+6IPpdwy+ZnrxiY9dKRkGQsxA==","signatures":[{"sig":"MEUCIApAT++tP9myKSUH+q5kvl9nbe+FnUpvGbFK+FccLiHpAiEAl+brkJIVrvZHKOM/Zm+3OYu0UTl6JKf+BEvCW7EQsEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUCNCRA9TVsSAnZWagAA+xgP/2eYW6ZSdHuEy4WsD4Je\n4jKiHdtT5mhk7X+Yci5fg+re2e5ltQk+38TJU0qBIIrbclfrOrN2h4KApooz\ntLdPeueaqkQTGCQeOzGn8zaPOSdcore8HSRj0fXkf5gwnRuYn3hF7oganE0G\ndg2F2nlok4laCJ2PvoDlYgi1RG5bbvkqPwcrkNgHJFKCizTwdutljw8+fz6m\nWxQ48ZsQFWzIwGE8ZXHrwgoOQOITryuVHPZxznlFoHV6yoDzKbWx9aXz1aHj\nA00QsM1f4/RPnba0QKDQhN5GQ+D9M6M8kXD6dzBy6Ns7+OBwmHXZY2WtAfOi\nV1eMHKkbtDQxmfj3Oir7nFoEGMV4Y0/dIntJFp56RYpiTPVcMx0ayk0gqL2n\n82I7mP5KDPasFWKNnKx+RkQEVRRbJMuJAdMsdGbDPBDeSclTxcQaTOM4B5rd\nE1190zTx8MA14JcZcmwNHMp9pUJbqZtMMQqCPa5PdPRbAKpbxq5blRETn3ES\nFDmrvdGJN2tuy+xGZezsBGPH9OnZ/JdkmjSy0uj30imW1i2TfX1pngk40UwV\nyTHym0WbEpThtycbCK0YLQmT+EJY0NFhywPZuh9G6pziqV7zD5oRL6osXyLB\nw2W/dzq8F0T1gwSn2QHtZBLL6TIF4bCtcvyFfXRme7tEH12sm7ZVfMd/Hqj+\ng66b\r\n=IuI3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.33a954852.0_1620918412801_0.42123323002182156","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/theme","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.a4484849b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08891199f101671882fdf30e14b111eadc88b6d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.a4484849b.0.tgz","fileCount":42,"integrity":"sha512-36cRB8d6UB0aRtGFx+xaxZJ7tA3vmvKcBRQZo14dto/cjIIM1VGuIh1LYOEBMVQeP1vr4SdwA2WP7lDGM9sqrw==","signatures":[{"sig":"MEUCIQCD0T9HX1iV140Z6l8HqaXiob+QTjnMaVFCgOSdctZI+gIgRFte4GCdKXlKvfFpdw+TjAlk0mujTHsUZFVmnnIV4Pg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUYCCRA9TVsSAnZWagAA/44P/RFuFw6Tp3rrfPhD8sU4\nT6zSq3ckN4wQNEQilZGIboSrhjUt4vCbG7kxhkOWZquW4NXgzcO9loSXkbJr\nZAEKd3+Y88MiJnqYip1JaILvT2TZEuHJEtfRAK53fq4PoZVAPYsBXNfryHED\njjwlfjshDgHlFHtV/XibahlabSGrDoqozpcrf8IikwO6rD/jvvY/XW3liv2F\nco2VIv8vgj+D76DaYc96plhudYpXEcOrDDXoHPF4jxcXsFwy3K/pv/nkY9PO\nS+hyJavVcAN14Ke7N7IkHqwPvswTsZpo3Vb5n4XG6KNFedgompb9+0adx8DK\n2+kWVJxVo7EBubV3KCTC5C79Rot7cO1tS87+0/NHLXWeTUIE4ZhVL7gb7M2k\nAFUcosQzHWm4UKmU4S3P8Ljzy4kUShp9I4OqJtjf3SsICuimu4vO01GnEu2l\n7hcfMiTXDZLqDVu/XFOueF+b8+LdHqzcJVPpYvoIZOTAzwimr4gSptvgdZ8f\nhbQvRHYMrLXlJJ/497WVMCEJGsamJnIiYde1Picti8AWN3Er/HIYTe9q7p8P\nnAJRVz/It2ba0r9lKwZzHBf9TPxAjjEQTovWmKvChlYnqezMdBPUlxuKfThN\nR5VatC5BMcfpXtyBq7A8ScSf5KIrg8qQElHaK1OF25/wR93C1ihz5fTGHnma\no1UW\r\n=uy+T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.a4484849b.0_1620919809866_0.1824405988247586","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/theme","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c60ce7f9c62e18b63ce252f208437bbbd0c4f626","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.b4c3f513e.0.tgz","fileCount":42,"integrity":"sha512-h+uuSaR6AqPH3I9EDi138n6HahVvwBM8+ff2qvckekw4zMKJxRYGM8teXovpDIyKA35wwifDtceHK6ntILn6+g==","signatures":[{"sig":"MEUCIQCS2E3941MXjx/QssAP++iCvBhaRpW6h6fvu2RkmVqOkgIgHVbj5/G4GLhkLYMppSueprsAc0p4XXF6RB7tzlRL0rE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU6qCRA9TVsSAnZWagAARqUP/jpsCIVyUP7qQSQmVDP0\ntWdrckpKSCdfSz8VzvRsCc/Quq0OB1oAbHohollIiiNljlSQQIcI7pFtS45p\nhhm2OxIgKTxVK4uWZC6w3y+pWdh+QR6T4wJwqY9tq3mS7qC9A8OslFdex2mG\n0IOjO+NgyKc7hayNwgEYpMGZ+ABsfqEAwGZk3FRM0k+nByzAcTKbWmWAdtnm\nPGrB1iT5OtiCc10o4pV8bbzuzxUHQj0k7thIuRui+/LX3Igg4mCjUU4nb34W\nbMSbn7nYXf/wfM+826MwKHD9Lg7jZOFYVP1sixx/1rFzl6K5eDAbQVv2ysk1\nFKLvxIo+TrT79LqkJkFKRfVUBv7YK3G37a3ZI9uN1ERLGgAllRBR7b1VbD7T\n6Zmu3p5zVpg7ULikDiZX4yCYwdLVdaBPdWjfJ85DfkAjsvwv4TxE/FskLfVo\nkqsTE7bmtYJVjekDFhHDEzEmCD63vY+gADUaOiPhBRfdTHjrOsfU8dqik7b4\nmYztiozjfT7sQqgLhFGEOybvo1AWa2EzpwpEmwnTPUISW93tyMQX5xLnFW/Q\nINIkeulBRsstryT+kB64oR+FUkquhXwKiRj3a0GWApkXZI7NqpcNwgOqzobb\nayIo4jkYDFg16Oa0rHyxnl0Cf2lXE+B1Zp3afAFpAqVMP4XahAIeJDwFdoeG\npSAm\r\n=BmVs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.b4c3f513e.0_1620922025997_0.6785809526618449","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/theme","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cb281b26a1147ef0322d21ce750f4a0f792d880","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.1a8d06483.0.tgz","fileCount":42,"integrity":"sha512-Llc8UnCcE3UbCrJyNLTVXradY9zoddJgH1cB3bzx/j7gIeoJnqXqZB43Zg+ZMXVzoOyGTbYrqpi5Kl1VzOxJSQ==","signatures":[{"sig":"MEUCIQCW9qsjytAhEcmhgTL8j067bAZkM5wFvrR7F56nanEP8QIgbjwesCONzeXGVlX7+1sXaM6LUe6uUMUMvwm3GW/YDZY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVAKCRA9TVsSAnZWagAAwHEP/0Y97Sz0eyjgt+qfpWne\nbhKCb4PRF1FrbR9zzv4YSPwPQgB3DH8in1SbfpOeuONs6OObN0LkWoIcqvGN\np6X+xOUC5q+w0cCK17ijt8SuOkzPXbBwyPC38Ka6qlGtHEJMhyEu1jzzusop\nsg+rcjN24KB2Qkfh/oDyK0JLLUo/7fjZXdV0vTWkxLKdPmIKt2s2YRWXRLyq\nSUSUpb3BSPBLbBKsGHqQCKTRsrQgEKR4rEGIS+yzuczw8PT/XtqfXzoJDS+j\nQtEsPfHrLuvyhmr2n19o4x8u+3SK/v9qLfkk3ZOQXMIujJmjEly3cZFRuDrV\nLbtxowrAil4LAjfkVVTf7gNAH3N7YIBf/C9Iog7m0fzTpMwTceQDUQUa/UqP\naQFX9P5CyM2iChEjpWddkTR9+0SNtCkw8oMlkkxig0RzJTDU6Z72YXqmyW2d\n/tzarFCqQ3MGZapstLpAA2IzvrI+eRfCHjTl12otswDmggolCKGc7vBFJXYr\nMonV0MWmPGqobBKZYfgtCC+ScC7EWVsNHv1tfFToyOPoCQe7VOnTawYjF0aK\nUgV/+fSZfNjHmY3ra63UVtITih/wLQl6gcNOEHoY3pBqT+gbo03gcdKQ1GvB\nGfQxD2vK280qI0ZiOTNea6ItvSlFV7CCLb7Np8GASo97hb5+SC7Oed3Z3zC3\nrrvi\r\n=Yco1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.1a8d06483.0_1620922377825_0.675017182492798","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/theme","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.8e6081836.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"807d2a4bd5769186eeb056da6bc94514746a1970","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.8e6081836.0.tgz","fileCount":42,"integrity":"sha512-pLQiCRaRpAdQE1UxkYnxhFqHY68376YzR2jLZ7KqzobKv/wUlTsq/eIuloh4kXqWz2LYHEZKDgtAbceg51HRwQ==","signatures":[{"sig":"MEUCICtjk4lPcmuwJFimTy0k+7hY7/u1gaF77nUyklSzCyXtAiEA45j+ZcQ46fYGgkwFbk1ixOEdvZal4eQEFDz2h2ueImk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu4sCRA9TVsSAnZWagAAuv8P/1kUcUjKPlPyC0L/Y1Qq\ne35eSfy6wIf6L48zP+k0mm2RDoVK76ZPUEdijrGPDdv5Z4qze3hZm5bHiMdp\nHtWpXzXjAzolsYut93L6AqkZem5/jr4ze5apFy6e76iSMi8oFAiwk6zbUusv\n4gVyMN3BbUe37slB+P0lTSOQP1i5PryOPX5x3pAnjusJBsSU+dbwnnBhD7b7\n6z5JF4VHAWph5mlTHmqXlecV6ZJphs9iX3ehn2URV2zOM/luludg+/CGly7J\nxiAB8bCdfLSzVFUuf7Rl1cMrms/gZXoIb2EsWMEMY8J/3ACHasoq32VKDmRi\nB6WfY3AMiL+UuqUCDKWExazpLkukT313DUuPlAOOvIu+OeFmBP58C2Gk0Jac\nlrrqLnA8ZRcO9h9JwsZZpDBdguzuzQP5dTau9eb+67drM/Lru1MYsG5CsMeN\nPGvlyGk6QU0LUleG0toNYC5hzKhOp9ppESkRZayVQ6rqZZQHT+LWCDdEpjl3\njq6pDW3iRC09OLKkUJtzOeYB4VAWDqjqS4BLQ52QEqFMiFTTT/DhJxNz9s9Z\nF3WLtGbH7Zn0p1xWADJgHqJF47cNMcmQOYv7WELOBiQS0VUm7nG1BBlU0cqh\nipPUJkB3jAUXH5SyrwdQBWImx99kw9j/ayG8sMj3yLucjjjUI/dPuys8EHm9\n1iBb\r\n=Dr9b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.8e6081836.0_1621028396413_0.948739853814798","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/theme","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a67ab04aad0d6f1f1ff642207b1a93a5f14a0b30","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":42,"integrity":"sha512-7s3S4xdUff9cFZ2rBCFHzwAXsCPseoix2yQAvo7SCi9RXV+HaE48a1OK6lKo68oqmlWxY381xKBCL9JR+hXGlQ==","signatures":[{"sig":"MEQCIBz7z0xdcHfbiDIbCjbPAyvvHZ++9+XfX4dIxbY/3TaoAiAs4lCYsvAsVM5xGbUJDvgN/kq6Sis9Cbt2vYr6L9E8SQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvFDCRA9TVsSAnZWagAAXBMP/iucd9j0mubz1aKcdOmp\nRsisObw5ei3eAwU7FN0QSB+o+WxkvhFS15ZlekXl1ScuMHDMnSASwNRB20vd\nZlqMOV8OBW1f/lp7lVllAKCOw08zuv1xIDNQHcrcaKlYUdq/UHNte751wGM5\nDUHflzndiFpCbbNoo3GMN3mqho8PMMYTdJnakzWKP1FqAxQ6JDbewaFx7d4/\nLc9sFyeamLfkKDPjk9XmVn6IsWITqHYsapecoJI7qj9NBi1zaHi1+DzLKrEf\n3No7kjtjFDQZRHUWZ5rxG3d0RQKuznk5lfpSPXU2uIuHvmgRUPf5EwVbucTH\nStW7OmG2YE4pgx2eIWWoPwOGkD2/pcXUacXxHfSWAdhYtpvC1bmxZs+UKuez\nOTzaib/VMBCyEnQExl048KtFSZXVfQOhBD0qmLZEGvmOds0xRH7Pn6bMpt+T\nagzc5Usp087XBKkeZgtXzcccrNlZgkyLVqWWBf6uWyOC4+KKU69too1JckKs\nbPC/vFX5Xv/5DgQXg2lr1EWtteQ9XCoIl8ycmeH4RzrWx8y7WHH/1GW//xD5\n9IVUB5Kt0nJJiJmKokSkf3hxRD1+X/lQoL7NNgCVzIiGqSN1qQUDKR115gxw\n5tbCxN0KIpLgVbv0FwArq7o4JhZrBRVs+aWSj34V5XV3y2Muc/UqSIRxUD5V\nra3t\r\n=mBOC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.a2b0f4cee.0_1621029187274_0.6002333128155919","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/theme","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6b26c556f991872f156dd6fc31ec6299c1880ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.e8e39ad19.0.tgz","fileCount":42,"integrity":"sha512-Lj6vIsAId2bKZtrtJi/cXtJlHBTzjcxqtf9IZzl65k+p1XsII3Aqrg1PP5NxYhwW/STl+IvLub0L90mn8u72XA==","signatures":[{"sig":"MEQCIAvBWRar0WOVqcnZl4SRApAz1eGbawj1KD+9bKgn++JXAiByN2Vbx45gZYtKiPV1stO1UOsK31YozcznrCkE5oxjnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB+pCRA9TVsSAnZWagAAYXoP/il+7nuKpnJZ3KSUNOmV\nc4ana+oHSRty3TR5AEl4PF3mkBEsXdMGOqp8raMoWSRnsugu6icMkxpNl2/M\nDHz/NtvEq69iFevDrkO28Z5OkjJRewJp/8aXv7yBgzNsvAed47i26STk/Qvp\nrb9ARXXw1WlVYO/cZ/WZ/m3ijQde+CRMkQk4ZqTWrTR6xk5StpgsLWbNFh8K\nOt7id0dW0xfkw1A4dKiPpoAcDiAt4R1YHklrdEveu+nWMt6MntPYzU6Tw9WA\n2tiRILlo/BmzfRcA0SwIYuwcFTMi90LCH6OKeR3kkI6TSENjgd4S/GVjGceW\nNCllQ5p6x6j4DCZlpOCMaKsFku9YINdfE7ITiM+A7SYE7iDijyG+kA+2II8r\n0wlLARiYMCaZRPIKaXUP3j1n/B2FEGPFUNee5yii5+K3sNyaSDrrfby/zrGX\nFZibOIlCco7hnGm2X3XIz7mufnrGz6KILxvf0cWZ+wUrUZ4dF0ab0xMk8rX2\nLkpLfiHxw4ejliba6QkxBcOihWuuw+2QzWcOAJk3TNNPGnZZ8lUwXBRBa6ym\nkMBFib3Ea6YHje/P1qiGP+W6gTtdTTAOo7/+Wip7dXAY3La7soK4rk+PAyxZ\ndUitcV4ATH81IdQbKXcOmy17T0fucEHgXUvg2WLOxNiLI4C2hCJ+zjrcz830\nhXPH\r\n=eclh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.e8e39ad19.0_1621368745347_0.45095500935048927","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/theme","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71496d9be0ce9c4e36c80e664c804482a9e29add","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":42,"integrity":"sha512-FGQuxaYV3vaifZwn9x9HCt1O5OLvXT0r5v3YrlyGdFzT15KXzpub5xWy+cvzwdKeSoTV8M2R6FNo50MFw8WxVw==","signatures":[{"sig":"MEUCIChq9LyEGJQ9wGZQwREhm8a3HPCEep2lB74u7BQHSJboAiEA0Ebe4BCrsF3TkdXADEo76RfW3/JaZGDnpGiZ+dHFYNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS5nCRA9TVsSAnZWagAA940P/RCPzBLjGiA7YQW3/Jqo\ndSCQVRa0FZSOIKejvkImVey1euy+/gryz2fChE5oIn9zKZxaw3Ayq2szNNbP\nFQayCcc+inzNAU2Q8avY5IzBCyf+QJmSed64rwpxEK37hCyVpBGWSV/IL4Xg\n4ak4CkFnPUSmTZ77EBV8XVHn/HhqS5dy6cxX3HRa37FuVJKO166hIT/T9RpR\nV/6bAx4vNzcblJyk2UEPIHrlP9sm3Bl3/GDLMkPson2DHbuz7+t0zXRNSRYV\nl79rL5oK79LZnzBPL0CDcCpQhljVI8CZrPv7IpIdCT2OFsMVeKhBf9W9Uqrx\nmxVVsv42+AxQXt5o2Q+92myo9Bq6cvwvjKPTlIC7LKEGjnU19aHRcSz+tcGv\njxbUbogvewGKKh4GZC+xAEeA6zVkmrU9jkB63ehmZXnX3c7qc5gAHOs4fuEX\nYoEscRfxWstSdpnnAX7acb0vCPHnOnIB4pFwbEpLkcE52wHcnnTH0bquPpB/\nvepzMItWEmoRiyt/qFiG57nQH3Md8r+fD58egxYfM/In4sQj3k0h8zW9Uujx\nlBRl5mrYG6mHa+wLbI5Bm7ArBk+lP7KCTeBg+tgzgyk/cxxXUuDsWJvbkZ4C\nsQ8f230bFgIdRfjdJZ8BCeFAMoWmUyKmesQMny4IgZQ69VrghW8/6PH89NUF\nIV88\r\n=51Pz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.4bb5eea2b.0_1621438054769_0.005036857006923023","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/theme","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0948b7e411ab32b4a310628cbeac03f4e6369bac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.ccce99cd6.0.tgz","fileCount":42,"integrity":"sha512-ctGTrYVft3P/zvg1MD9YVpkW5CR7o3VnPsEr/CiXxY+87NyfplraioAlCkPdL+7g4dmcKoPQFKlxZii1Zg6FeQ==","signatures":[{"sig":"MEQCIGFlU+3Qrm71dRc/kYanvV+MbHWWwhQZXYKVsP/etV9RAiB+Xqe6h29aVnIBEtfqpkaFYOkhZfkDsZUs73dQBA2MnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":221798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbOlCRA9TVsSAnZWagAAo8IQAJJJfM3qdpkdLoQAUFsI\nxR/V1UEvKzTL1FTkBrqSzFNpMg+g1VxPQnIt54ieDCFoP10FbtGGcL7PG2pR\n8wYB+sigRq89EzWou70yUws5+h4syo/E0BdJlzinwGZb5cmSwFNgu3z+kr7q\nNHv0PjAv+0HabgRluh4nIN36H9vEwnruE+I2PinH+j6B5TZIGkLbhldzY3zY\nSsME8g2AtvqJTWrFcRLEZXvsiJSWpxP061OhNMwvwcsBi/oJmrSJ2dryV3bQ\niywWTwgAGXYhPGrJVnRk5a2yhxajQdugbzPf5cxjrvDCNbYVALqz/l+4ubME\nCA2CBGToE23qbVs2EyhOnbzwwoOMC0aOd6WTLrX9jFI+yzsH/oILtH67vxuH\n4OgLEwlIk3+tgs5c5eP97zbm7Q4Lu8xz0zKuRaeYuccwOYuwh6wIIYV0Y1XT\nwQ9pSguVkxONLWVBpNYm4scTEbsKT71psAUFVF/IU62RoovHAk9/kGvcJfin\nOWGOkSWAghsKSemknJ91wJmBO2xQNnQvIdFpjfvpFrNJNBUPOUxloSFm3vtc\nsOKD6H39w8Lz1gw85NTCZV+Ka86oQM8bsUgF6OhGiENgPlU/deceGCwacbIH\n6biwE5OJc65H2L1pjWnWsxR0GGKqVDAFS66dN0dqq+1Mko6Tmt1QZit8b504\nto+d\r\n=IWiA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.ccce99cd6.0_1621472165248_0.4438053356824492","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/theme","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.14767a8db.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"163ca8982f5eca3657995ae7044a2831a5e1bf03","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.14767a8db.0.tgz","fileCount":42,"integrity":"sha512-dt07CZjtQd0qOVr/ch7bmtvWaUPPoyibsgau3Aw3s2CdD8EHVrTk15f31J6ZmalA5Iz9pAxBFOHqQkMoj9BlRg==","signatures":[{"sig":"MEYCIQC9JmEsa6Gfez/WHiswHhxcA0qhnJ3ThgOk/QE/O2P+DwIhAP6gyXg+0D5cCK8QewHy0sniQ4UThBRQJ2oRSiQoUKdd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsuECRA9TVsSAnZWagAAM8UQAIgGia148Ufhgz04dGi+\nrOpaIqys3EWh2nSbPvAz16CXIUVcQ4+AxN5tsvUHqnDpymzLPY7UrD/4nKpf\nat0S9lfQ/n2+i0okmRBnAzA1gGyjF+O41lztHqgrIsHSe2A0u2Z4+jZSQBDy\nhxRLI1qHYSyrGoP0t7kXyoynlrE60Zoz/WfjsTz7IwBs5vL23IxxGSmyKzWo\nI+NrdEcW9QaR/4gPse6jcNHgifC/tPZXG9N3fytwBn7EFP0W7cjR/qamoapx\naGCTbCjutiGvyrkeV5yFuxj0gUtIyEEela7GaiiqvPRKuDDCtKtIKapQQpmh\n1t8EMcqXEsZyTnaQqvAiiBhwDtQWUhTA+0KszLupqYiheXWPtrXNUjqSqH7V\nrH0ZVlRH2SYQkoTVO27gK5z8Yg1rInZUU1FewhteGDET4lHuBtg/ilAoH42U\nZyLxZTOu/IBbNZsbE6oJmND96nDw7QYdcTyTf8xa1xlulS60v//MVUzPfCXD\nulnMsNR9zOBAPUUiwVuigKwT+qUMx8QnYjJR9EVRWLZTp4R38PThXyYQMsux\nhiIPOADZhgpBCty7v2jZA2fdtg2EfcjGA3YDW5iTno0wACNU7NGoaXpVQJkC\nCmwGznlowKXhPuNzS9bHPCu+GAMLEN6Ww5nh35KHUdjZ6BlX8VI/eXWUzLgY\n+uRC\r\n=LwFJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.14767a8db.0_1621543812100_0.8151504326581416","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/theme","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c07c01b72578f0c4e976f4cf127f039b00b0291b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.22c6dcff9.0.tgz","fileCount":42,"integrity":"sha512-5ESQImvkcXK+HuvD6e5XBQlE1FuSPP8+cdMfyQ6fKqtxugEfUVCqCV516ObPHFtTBhUvS8OURM3itqTEWiCc8g==","signatures":[{"sig":"MEQCICC60M5f7z1k8TgkOoG8pTJMD1ugSj99kHv19HrEyQBQAiABb//zOSPMLr732WSTWa9IiOQ9jXlX9sz6KSXoMLPcpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8OgCRA9TVsSAnZWagAApCIP/3dJeFQCWfwTncGIBoav\nRBu2Oi9NTaZKfb8zSJiv1eITsMlInff0mdwFerFLwCyhqwtTY+koYMHNS4Fv\nVGgftfjoE+ioF+9GkbuHGvmoqfzS/ApBsocFAjSADFY5s7oyl0z9HXDyoP7J\nJXSicqPzDDTAeMh9lxxTtrZE9AzOnA5qRCXCBEE6el6xGWhA3L/yG9VmI1vh\nP3r6cpUkZ28uzhkJsieQJTqfEE7IuHt3KIxr6IIUvfY5v5wFAlLiplOLzkqP\nHHX+JO3vRe0a6SrwkMavzOGRe33yeL84I1J5FhBogR8yIMxbgNcGskEc12K9\nNfjAZw1B6wTWPv31ZpcCXS6qrLvwEPcaovqhDs8jzSL/5tBci+DzjMe2UJzk\nJaS85xUh+9jXND1FzPjj5EsKQuXQ5nccEc/CIMPL3W+NwUmJlsrGl5Ajb3S/\nWSo3w5XSCgZ1VLTpTIHldhR2SjdIwt+oZ9gUQYB2DvzscpJ/md3gK09Xibu5\nl+G3lUkxl+uwCAvOJqUFuM5VH7CXizsDPql28kTo4ig+QHD0lPJCrc5r4nFo\nthnhq7Za+vhDwrwapnB4Rw14yFBv0YUX/227CVakR+5LSF8qIhJP8sv3rMoM\nWyjPNaCIyaWWdGHyCZM1s/HeaZlC6LsCAddvgcaIx0wB71TCxSjISoWv3hjI\nErvI\r\n=MA5I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.22c6dcff9.0_1621869471954_0.024821090197327145","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/theme","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.fadab3372.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b6e20df62e15836cdec11adbbefdcf5db26eed0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.fadab3372.0.tgz","fileCount":42,"integrity":"sha512-ue0vcjoxFMRptzs3F8so7DMjvWhoh98H3vR4KMfu5b+Cn30TtxinRJGN0UUOWgOx/r6hI8crusLuRnKYhYbw7w==","signatures":[{"sig":"MEUCIQC4BXq7y9gEsU6ufjSp9QZ/G9jtSrWcrUdR7sFybRjM6wIgJvZukmI1LtodQc4TxqY8aWSTG6+9Wwn4knDcb2CZkak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq86oCRA9TVsSAnZWagAAf7wP+wVVe90aYNI5fjGG1mI3\n7uhBA4DU/J80gSlso0c5BRN4cHxeiTZ4np0ndiUhSwfh/w/PE/v2q2D/A5DI\nzLu780+dMQdFv3KW+mLXf/GRWcbtxj7WX1ujnB3wODKVyyKTLe+bpLks5CEq\nEnu3ACa2+DbWesThPccQ7gZXeoc3Eae/n9/KfUu/9yO/dFl1CFWibSp0cZXv\n/+It0kUQCCPUiAZkxLyJNUp8mNyl/W1q81AlCulYZycDxd27I/JppFO8j8Wd\nb8FZ+MeKidCwJYMOf1A2dXEmOnUUgCa9iHKCBDUhxm6CMC/+WvSjfXqGVI9X\npfFd9HOeMeDuqgQA9UAfL+BtrIObWJr/BIDIIKZZztevp95jxLglEMsnL0wr\nDzVOT2WFad6/ussLN2tGUlt98XvgaW1JaI9IRdjA98A4L3ovoLReRbKbSMc8\n1yiqLGtS37cQAoZ0k4M8pIsdRqxovjJwDrDeAzCcVWVevr/Z1G4lOzb33a4+\nqja/1f6mpDN+5VSRUmDLs3Be67IA6mTsq2nKVFEcf6y2xlSbT0B+XVZTp1MS\niXovUz/uJAZr8U7eL/uYvUg+OgF+d1xb2kT7O8wl408BLN/sGFMKEFwBA0FL\nNOKzyru00jEh6h1WwstjFFi1IPHtwMSDfaZPPp0LowklLb78S1M9uDUtxIVE\ne0mx\r\n=To1A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.fadab3372.0_1621872295597_0.3024092175651176","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/theme","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28790c5d707c71440efebefd41225d1c017f282d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.caa73aeee.0.tgz","fileCount":42,"integrity":"sha512-kK8vlTk9pdVjXDaFz39Dn05GiKF0H2WXSFcqO9422XVRYCPJzvs0AOA/jY1CjRZQpTyMfhw9ydaYRVZgp05QvA==","signatures":[{"sig":"MEQCIFRhH/46k4uHwyKArnJERmrdJiE4sycwNH9SltZZdPTBAiB953ZhRnAXFIiuyJws3JEpTbDAdHxpXtYDe6M7Ph4zMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQYRCRA9TVsSAnZWagAANhsP+gI7cj5PNvGVrbh7Gayp\nti+5WV8ZJyUQhW3NdhMyGFnf9zhJLhFXHnqoJkb6ehbWtAd6z85j9b0XCK9T\n/NAY57flc8qLdJZEVHEFEStnkVZtcTjEIk+LuGdqVuuRh2RUl745nUJ1han0\n7RfIeyEGQZ2EjFsFPc94CO8vsV/0Vtpm6uPD4IKGLVseTc21EE+ktFesiNz6\noArXKj3dg4dZCQBjdfPQBeJS7tMPgQq5SGxjG604QlS56V8lz4J+lXoEU934\ng2Y6LZ7k6A+jZ7hhG28xBd5Ag+MrD4DlSrE/gt8ES6mRQ3MWvge98iol63gI\nF0yfyzSBD3d/sGf0fa9fvBKSRqn3giy/gzjS9sP5BD/yr8nkK2PXGwI9ggf0\nEqnlxthv4RLcKDbntSYJlqVpioGcEO8Fs4ZtwxCpQaisXoCxboyjGUcvkpBQ\n/83yd7iUZa6wv+OawZMAdBsziTj9rln54wh31AjO07heHWqWYsqNysLk24XT\n9BjxMbe2Mzgmjrg6UgXgTyEXIb3aZ4pxHZvj4JSz1W75rQ4wE5BhztXAWzZf\ngUON4iq7y6IA/CRFOeCz+qQsoV5Zcz6p3XHxbwqbQSFkHuZOKWS3if1/CQB8\nbA/VDbvBFF4dlRcgrEOjlbNYe1wUnzJOYgqqdA88+UVjUsMfunBp04XcTBRE\nuzfZ\r\n=GsrU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.caa73aeee.0_1621952017397_0.372578047361227","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/theme","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f322b6b2470f7a1ed0cacb9c700634b0f410770","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":42,"integrity":"sha512-fB32OwrSGCnO3aLaBWHLSEc7ZzXWhnMMH7TUnYZocXnfx5o2Vel5+MARFgxeT6d0CjbmJnzmlYpoBlKiF64rCw==","signatures":[{"sig":"MEUCIQCTQWefPTzFe9udLjhi0t44p+N2cKO/WzSH2DrC4iGN2gIgWZhDBcdugbIjU3mQlMD1xRa4Qm/MfBeR5PC87kkYPqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV9hCRA9TVsSAnZWagAAKhsP/Rm4t12dCxfPxRQJrz+u\nv3lHok5peLuqXZz/+f9Hj+mONnxp8rKln/1LNWyakZO25A2NpqU3OPh1wAme\nKGxwsKUQy1DuF5i7KuisuVBDA6zAr73qjX4lCwugpb4u7QMEcp3vyeZhILFx\nIzIs/lJyJp9BjMIk+VMOEq5v4feHcfgpBPNWOupVPEsfw0XqoMc0UreBEHWr\nH8PcblLOQ0wHHZ16bhMTunxWtHqdEqDGjhCFDWGBTthjn6LXDFiBiBrUSHVd\n2C8niXDaDrt+GZvAM431m3YWc91ubk22p6VRV4RPJhkgEJfR65EztAFVVg3H\nsTn2VJtRXvP9bSPWvnmLq1TGAGoOsl6U5DmKlO7oXJ7/V2bid11hzrNHd4tb\nlvUFY3OTM25sux7DjJaXLBR5N2MUGcaQTxhELC2slDFqki7YRD1fkJaaGi91\nvYoBc2u00071SKOpLXjXDAZOv84tizROtI4ycM4CGec22rpVzUvm/HYYrBu3\n4TG4SKYbtxHsRj9wh1ctpF1fN/hDeTIgX95YaT0jbUoZICTXnpO8Wj1ooCj6\n/RRUndhtpFA6YoSj8Xyg0MiPICk9Py0syvW9GWaW/lr/tmVPkRWFM3Gi2S2z\nzA8mpxE2GYz87z0lBe3+kOK8Nfru2wGH9N0fwgTh7mc7uBiKY10w965+bbaK\nUtjI\r\n=/4Fj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.ec31ae1ed.0_1621974881185_0.9965639307338363","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/theme","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.8530d3514.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"564257f1d40770fed9a96e57866a6d69acbe58bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.8530d3514.0.tgz","fileCount":42,"integrity":"sha512-H8yAfnZJMu0ILDH2AbtcCrXs2mSiMU7pxvbqebsHDfESStzhNiSXNNuZf/8wCDuz+8iXcMHwKJGTYCyHm4nWSg==","signatures":[{"sig":"MEUCIGJuVKmUoDdkeYgDmxt4HBDTBaux/kAt79pQjVGFmQblAiEAz3i7fVYTMrIvaGLxQ1GF9vLh0YNQBepYbhsEX+YfB+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8L2CRA9TVsSAnZWagAAYHEP/ip0BiUlKNsG3N6QFVbK\nahvCesjxgvEFvcC1oxlLlKmJYE9fSg3pC4h+kO8CawVP8Jm7QZPO2tqSTPVN\nURRTJurVzC+JPw/9rnnCtps7Ivp1Rf4VWow5EwyToavDOcwR+AjLAQl2svxS\nA3Tix8xrxFJ+VInMPLN3qQ8tYrhj+DzKTRHdXYHkmZRMN+VNLIQ6lxVBj12u\nz9lkUuNu8tprYOnNq6TOFZ2ut4iz+FbYuOtKsRTzj4IXcaZptENcraFVouKD\nn4vtSxHbbPutCA9IwNJsKKJ+hXFLgFSjdKyJ8+0HWZLGBpoMRXbJ+3VMFWXk\nnvCXrqcaZpo2MZZ8pMqFbeHrISTqYtCLza0W0tl0cG4gYxI0dPXfjhSmI6OG\nNDO/brkzKlywW+M/UvQtkf0XtOsUfnhdXUM9ttg6gq2l9QDQVGYrgopGGlt6\ncnYO6md0nAULrSdEfOk7A/hOD3h8fj2kyUr3YQ8PvUr2kxaOjUTbfADqEzJn\nQQEgC7Ar4SddYnaur3/UKtlamDAsluzHBAfQi0t7/ywBYLvXOgT/GT2BP3l0\nntt34n+xgN1+YOJH/z0tKbNI8kDjd8r+S+eI1qkRvI6oIfxYRoorYI2kNef1\nJ13Fkqo4alP6mgfxE6Kk4B+CC3FL7FY1ADdQPnLebF/lE70jYQrNe9J89eST\nwLzD\r\n=IxpX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.8530d3514.0_1622131445678_0.4198177862612862","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/theme","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c385c264912dc16fb366c1bef76307fdf2869a4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.00b5899dc.0.tgz","fileCount":42,"integrity":"sha512-Har//t12A466h6uPBBdikvbOAAVkHaSBlKXXiTV16or/kFwU5C1aqRhMEvsM/HG9Y/ZIzZhohDqqw9yQqCbC5A==","signatures":[{"sig":"MEUCIGj3rhgN2voa1Uq8RxXKQ2L1HAfWefkns8Y+GFNuVITzAiEA4dbTa6MFxbPh5dy4UsrMuPhHcLcKPTHIQ74outAMok8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrhmCRA9TVsSAnZWagAAmsYP/1UmI0GQKW1ApVNomE95\nryerhyRoHUf0HO5OSkaZftOH+HYCs2jCqKBXh2G15ZMIB13DJgyLf0DEwPY+\nHMuBXAbLv/rdXUfxBkNbGz7Ck+sfDdf/Og2DGz9LdmgdGcv5GSqBA9lXtL6J\nrnvs08kIyzrhLaVwTm82Dc70kqlKLwKaWEtkcIHfW1wOnYJ6JKUwi0d92tFQ\nqDaPUmzmQrVY01HBjQSRjcDPo4nT70yQIEtVJEX+26Lh2ImcX0fesx14p8ww\nx5Sd0DUZMk68L+fVokgPtXmQONW5xsscPTOhOEydxStNV2ml+eGj2G11dS9y\nmwXcbqnixjSPNNecL72JNSvyEwimm645CYbEK8dRG1sP0/WNgdMOKQtjzW1L\nhAyQO+KJGxAnUqp5P1bU4U0Jfpef02lKnyM+O/BN/BaU2auBYXjg9nqvT42f\nbkOjq+d1SXSKzbX02+vKhThzI/rSVhToDkA/sFDqEqqoPXUu+9gN8TvCjOiU\nfRUVHCV7AaLe8uwT0Cj76KE5DcXCWDWEonLFFozKAVdaqHgaooduBRTe5/O+\nAUaFHwVpaK+MNrWVgjaTO3L6r76tpya546W3SNadyR6tMbQHAA1XamszoNX7\nTBM5xvfxSlHXEimOaO37DYDNkpJjlP8XrR4qI5bGq09vTTTtBOOVbxU7vDlZ\naK6w\r\n=HY/Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.00b5899dc.0_1622587493824_0.5031259309140663","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/theme","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da423772cf337abcc6622fb59ed819ebc251df83","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.f1525ea3e.0.tgz","fileCount":42,"integrity":"sha512-BzRL5nKPmwcQ3ps9fxpStlZEmsA0azT/fV3eN4OvpqLrRRi37k2vtEvHcnpXPfG+t5Sccky8D9HJksyCvCNnUA==","signatures":[{"sig":"MEUCIBYOceGhL/V/9ZQYhjHy5BTNmgRu25irDeF85o/q1r7AAiEAoJQ3n5erUPBhTYF2e32Vgn3yyzbDPVd0JkMoKfpL0hM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN7hCRA9TVsSAnZWagAAZ8sP/iNwHa+2NI/qy3wxQ802\na8pNeWWnlIWjvP7NJQFjfa+RTipOHojLq5/29hve4GdN/8dHlPohiJwiPUn4\nMJNprOWH2s72OZZTkAU915jI8Nk1Xz8F/ugNHh0klNXrtqZki1LDyDIDLn15\nZxV8z4E69iAzSJIujal1+LVaPtzocnDljsL3eEoUKPVSczcVAptA8UzCGSOG\nefoch0+72Yb0GY37Mz3ZgS+/FrLsoC6FiTyruFFqcPVX2JBhcngVfCcw+6+e\n7k4miT5951J5cb57ZiDwppAb+lxPss7mVzsBv8z1fJt4UncwBjhe7AqPKXZV\nLMPJsRo61CLYPDJpKoOQ/5I7PkjhbK4ovRZIxq6AbqutNN8G2ivXbXNvAVir\nGjLVkK1IeKvL1HHkpZmXyMLn8Wh0Kt2vAWDEL6nRQP7OmyqbFPACn+BW2nMH\nhh/oiX++KZFAAvVU7lXsiHRH49fxxxn19neg4yqDAU6CCWNOmi4RJHfeqL4f\n3Rh2Do4TJ5GbQhAE7YQnQLNdC9dnb5T/Jtx01CzHde/DCYPgFaSbbLntpvek\neoGFPxkA9h9YDeIu5AkagctwtmfuTxvUxEiH6akTBshBBmOA6Z/i/EcNhOAO\n/bEylTOxZdxEr5jBiRiWEblyisERqmMxzoCrseGYsZra++/lB+GT5nT8MlJg\nwuXx\r\n=dOuC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.f1525ea3e.0_1622728417413_0.04432563468162587","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/theme","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.464a00286.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dff143aad686dbacff936e4558f024e784729ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.464a00286.0.tgz","fileCount":42,"integrity":"sha512-4EW5fvUbZ9LHjff3951IocKaQPVHtAsbveSFDncr/gH5YO4SCp7k1MsJ69QeEwoFXsZFS6T6u/YXCZ7gXzcJ7A==","signatures":[{"sig":"MEQCICDN77F9CW8OJWDSIm/KIVmOaCrnC5abGHBGW6t5MbeTAiBp3oyoqbQ12O0NNJtkuUVZLOvO1Ty9l5vEz+BBSKF8ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOrqCRA9TVsSAnZWagAAVisP/1JbEzsT3IYzcncjJJYL\nfIh1+SG6Rp63KCWg5OPXbRlV77fBT8GJ7macOvoTN7t+np9z6IC1jhksiOwB\naNwf7ZFMVoPDxQ9vUE/3MBNkFkCbtc06lS+cBl6WQJUSHeqfPiGf37SUPXoI\nOEGWQwF13EH7G7IUoLMXsc4E99cEMCP9SDpmOCZFob7ZqA+PxUCdQ4ymODas\nltrBOD1z5Mn+kcvbzetpL6sgpshHWZ3vYPiwJnFDaeXBl3wJf5OnjtoXbTRJ\n4R+8m6lNJG2NfB7moPzfxS/U+dlVh8rBuvUDqtjRIp6jtICnhJ4kEBMC1qBF\nrRHA7m8Qx3YcoodWF117DCbtqVg6+sDNCJYTSc2tSozpIJyFv9l8tePqH6Zm\nECwkCb9XxbieWFJ3vygJ67ujaWfZW2PJVBXUeAYUNMmarLAyXRspdW5oZg8X\nfqhAV4oQn+LutZExyQGBRAoQ7183REKdYcw/+qTvLpvjVI6hibsqGgH1cTFi\n7NCO8gAUa9UbsKICT6r+alZBBSat3wwaUF/Yt425rUAmz2+p8AkbqDlCruju\nZ62iyz8/7LUaMqUb0+UA1p0hfmV1jH8JE2EExvCzLBBWuRdVRQ2k/kSBimUg\ntT0z+CEoNxZX7Ub91wFfyiWciObrE67f/vdSL+cnNU5cu0paDTdrcOEXmKX7\ncuJB\r\n=K2cj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.464a00286.0_1622731498535_0.545034342118873","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/theme","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.474de7878.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1149f7dfa49dbe78933c68242db23668cb0b825f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.474de7878.0.tgz","fileCount":42,"integrity":"sha512-dYEq9PSPZdxG9sMyNPm5ntyJAwVIXg4Y+3y7mdWzglxsi2+k89xyXKxYkY0QbgGcKAlUSPWMlWjQ1sLhvWSDow==","signatures":[{"sig":"MEQCIDdJRIg2PLMfveGWUPyjtpKx8mrQN70g9ZUo/U0LUSmoAiBD/AXhoghaOJ5MiQU8iaT7TJA6kGBXr9pqu+t0qmuGMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPGdCRA9TVsSAnZWagAAjzYP/jYuvzXviJHuzgvI6qBY\nYUOucBWfyHUZFKOw44PQophtq/SwPQ04OXX5TXVehxtt805xBtAwsvy/4FYH\nR5gdgOuQvTA9EYKcunQgs+tQ9t+UlFT8v2P45vRxLgbKfJe2czSZ4GqLiev9\nG0foQPuQiozqyFPrGqf50fLlVMxBUymqE/TrbV7aMZp4wecm3A2O2cKw6aJ5\nbGxM1ZwMZHxYxITT8M2LIM/pJRb0wd11LIjYwhKvKunvCX7MDYV2PRULSGgm\nVcPuLQwNySzBM/E6t5de1YCxyyVVjCgVnLNYyvOGsQZkolNOLTDxMB7folbT\nZ5q3AnJ0PWWtfMgP3pE/jUAbtEbULGzoP8fyNb/1a6+Kvj+AfrwjhHaVHugj\nNvXnhmD7qDLI6dL/jok6THfTGKkvECJnsNcPaafbdmHEkrCDCF9hPTr/9Kjy\nfo4xDanj1ZTZJBVzGxY0bIiV0sahnlUkF8AUjpTjVYPzemkgOzlvNlHQ4suN\nU/vfUL0fdNx+913OuBbZG+jF51dQihOAk6MWv0OqZb0UNwGAPqlSnjf67Otr\nVJwHA9scwQs8w2DK5dUvRpVR82kfP2SnmQlYOOrauEzkz8hF9loZES9ED+QA\nOiEYWIMJqCgBSVXbs7iVWAWwPnbcG4udJpDFhMdAIuFBFNs9HOcBZwWRr6ie\ncU2e\r\n=RH/s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.474de7878.0_1622733213261_0.6761227587714955","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/theme","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3fc12e2ad3d2e0ee5f67acefa25bd5f3d88aad4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.b87ebf74d.0.tgz","fileCount":42,"integrity":"sha512-ZCK24vjksOAY+p3FwovPpT8i3j509Yl6tDgNjmKrbmkuKzoztXfO506T3Yq311vlrNmfp7nKgufBNUy6A95BCQ==","signatures":[{"sig":"MEUCIQCs2BqKPJ4hnwXQVv2aruIt+7JXc8wQwxajxFkMy3EqBwIgGGb0l/MCf0euFL4XiMK8jHny9VDS25qnL4cVPJbGO+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRVDCRA9TVsSAnZWagAAIDQP/AiU9Viv4QgD5DIYRe6z\nit3z3CH0Oygsz3gyBLnZ5i43tGVrSIlV/3sg5JiMhCoyyuqJ7nXk8qag+pMB\nrP2ODXmmTluoITyCQ6hw7bGpV8v4ct974YcOeYnUAR72EWjKoeizvzn1ejqo\nz3pE0dN2YggSK7o/x+2WQkjMuH3PK5evQUaxStCGMSL9safz7t6bzGr7AXiX\nV5Un41qA+3fYqAvtJX2dKwlO+TksYPjvnIshVeW/i2jymxBroMIC0XNS/ubA\nLxGwOmnHTMg1r2zkR904iavGGhI5SgIAJtQ+5Sgn4jv77pSqCMCHWog/qm7E\nLBCVZl9D+t5GuKzB7eqipuhnyrOILMXBWAHjTqodwaURFB/ZeUcVHyYalBIp\nlct4G0Xa4GzX9X2bmMrDBUuRqB2Se3ND1TWeI0e4RpBSsqBcdeOSlh3LaECa\nuFlHK+NyyfBUFdfNP60Xl95/NTrEY9v7hFZkyTJesKwQpe/vgsZefV1Jxodp\nfkGt6E2q5XT2HBL6RioaQ/1PKHSt5VwkLf9rHT//EnaT6SRR4IQY7jMl0z02\n01DrVzFHuyG5+N+Jp9g6+Mum2J2kh5QS7W3HTwAxh7Tpq5nKACC5Phe6s94w\ngpaliyY7CwQWC2tYB/Xe7cuhUIe1gzl/CAoxQWk4eXitR2Ys7T7MjkfdrmoU\nse7M\r\n=WJLa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.b87ebf74d.0_1622742339028_0.6471169199581579","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/theme","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55b512f72d5d75ecbf270deaba0f7f1bea73bec5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.2daa49b35.0.tgz","fileCount":42,"integrity":"sha512-CX+ZsKLoTlPW4AxTbLr6iPNikmi435N90qXEsTHD8nP2nY/F86jvmCa2E/Iog8JdcpeD6tqVjM8NxX6gSBgAtw==","signatures":[{"sig":"MEQCIHutvUgjZNS0gsHWzk48Yrrnd68imU7XELmz0llJcvAEAiBvzd3RAuQy5zJTes0U2SWXumTNCAUa0uxIFn8PcrlX6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulEmCRA9TVsSAnZWagAAGXIP/R/el3hF+P55uTWucMAt\noCkRQzK+8X0BZejTvvGTVganWIHa3ImYqb7iELrhZR5+LAxn5rP1Um9CaeTf\nKkCAebYPUP29ozHO7Rl1HOyKuz0HqaQ+g95ZK32SUasj7yrUYfg2wgOiTr0T\nYsMSLqVs9Kv98lVvcSgI2/UB2zvH/NXJD4qbEOf7Ja6zpibBtCnC+bJtUOmI\nV/orJaTfYSUcP4axcL6Qk6V9XdjMjZ8CwG42W1HTrZPji8hV1xYmSLk1bpbM\neP823esg6ne6ss3YGXMiWsTrT3vLllQjxFg0OAtTruzcaziGdKlDxFktTaXd\nv7kGNu0Esx1EQNMzUJFUK6UihZOOSMAKAzLRPznJGgugN9qo9tUX5Ui4Pgkb\nTeRX76YqbboaXUWTBbPyePy6tKwFJVOPoNaJwkby5s6yWjr8EAKqJNmNTNwm\nIfGT1URm05/rRUc83IXg2b1YfxPMEqxA7I5o80+zwDgvlOWih9PZGd9biqjd\n7X/XHhXuRTyKxcGOuPdpa9uhkQ384jsrmQ140BYO+r7nSfZL90IYQhLhykgQ\nQsLIavljoXU1eB6RHltt1MHmUem13f+WhRJSpqRbWzTKgPqDdEEFTcTucXZS\nDB/QzP0cLk0mv60Nn6H46CC4ZJBCJqqafxxSWDNeC8c2a9skxBzqCe1NAz4L\noNcv\r\n=Wlrd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.2daa49b35.0_1622823206436_0.686062911008952","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/theme","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.08db3d737.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d88e63af77542cbbf757bc741653119b83d1b4e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.08db3d737.0.tgz","fileCount":42,"integrity":"sha512-Q21V9gPCkSqwbnUlyvxUGMIPo0fzePawFLzwzw9xsGhwaZuiceGRXURnjn/Kg8r1tc9c8fIzmcun3gbQTtabaA==","signatures":[{"sig":"MEUCIQD4MWRErhCVWtgC7i53ZssoOBNIH45uyhIg+oz8H0n8QQIgQrxDBmupPk6NFY3FDO1QbWQgL3Y72TBlsO0IC7TGxRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoHMCRA9TVsSAnZWagAAdtQQAJhdrkYcDXrOtDeztuf+\nCRoE2YKHLGJU+MjOATYT8voWgahWSJAK4B2/tHhaDKe9jIUFq3AJ2EXmXm2+\np7+CoshwLXlgq5PDi4zmW4399WYT6M4lVfr7xKwZxa0yqYedfCw3DndJuZvG\nqx/200DJpi9D+CUCyNffviDFeyciwVKPhV2NSKhgI6EgZuWbs5A0C4kFe6ST\nX62pBFW97RJkYW906LqZcESA6HNY3YTogIdidPc29PclRR94iuJvIGbLi3Ju\nPmOaLheuChV4Ph2JN/Kufz5OGE+WFzZ1uG0nATHWR62hV8sYpkYQRgZp2x++\nrhq81ESXuBO5jiRTbyu2uu03654MJP2lw/xoojjNnRhNf2r4cYxF79Lk2c+n\nrPzgFzrIV3NCI+5whTAD7DsLzX90L5VAHo8zyyulF1Km4VgkOrud6wEu9/5g\ngujrYONfQG2IDAX1gxZJrrcgE00fQVz6kdt9fXdC5wsjyFQnJPzWZgUclwnV\nZHHfX1Gcw+82ew6To4BKcxvDVJ36zigoKE0K/4SkhlZPsy8HzqtId5kRboLY\nhU8NxtAkdvOZGh1S2xQnk2Ise/8aEC/KZa6AtoCC5M0eodXIzV5l61XlT1Iw\nehKWngb0U4z3/U9jYQbiBEE3jKUjY1YySxGGWcDT24Mk3lC9ipford72KyUx\nX4de\r\n=Wpas\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.08db3d737.0_1622835660798_0.3691112629674618","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/theme","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.5823407a7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f2b9fa461b7f73f5ef0b42f3d6bb557f616da8c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.5823407a7.0.tgz","fileCount":42,"integrity":"sha512-Q7JbJlH29+njvWKcdvsA/CZEZe74SaU+DUR3C1DVv/ZE7Z7NDvMm7fNHFbb1T6buLoZbYhOoSoe0D9d1UWaIEQ==","signatures":[{"sig":"MEUCIQDsZr34aJ2x1HzuE4hRbhaoOXbpV2QKpE+Ln8kkNf6HrQIgDKNLPdKJMq2g7AwtzvinesZafwbZGitOjL7EdEdJ9C8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr4kCRA9TVsSAnZWagAAzdgQAJsh8G9uHz2HUJFVq+PW\nU5ZSOMK03ukfBeOLYSIgehKvqxRLQ7rhk0YUarhcuDOG+g0OM4fkZ+YyAaFv\no42lc1voo7GudTIFBYWeURuPWPTENH9+0dekQimPGf3bypFPbOtq69eedDnY\nokkzQyV9OENgScQTC+rscZWgmFzHDUCCpZw01zrFCo0+L/aGz5Wrs5Sbu3yM\nABg2q1rjAL5qtbzICNpXOiP7nzksA8duBDtylY5c1Gojt9XwdnUIQxJJrPNl\nt3RcuOThrxKel1+bO2xdIImwrIfTr8ibXtmvLuyBnaUOYAU9IyyQeH459WM7\nPxGTp+MowfhA7gTNqIG+rv0VrIzJMSVe5rYA8OLu6AjN42e3+FwNtbiw+wRl\nFFnJYPOple2c18LYvo2V9cCKzJbGci2bwc5eq1F783e71omAbttejz1wOMd1\nMwqnJwMFnMCjwd/Q/D82NBP5yhC3Kf4dojhwNyVHNp16Rpauzepj9i6dlVCx\nvoBf7KzOsxStHi5uiR6MgPBl3+I71WTWFlfIWUQmdqbT6rbOBK/YLsBoMCZR\nv796DJcoC1/t4u5fJye5lvqdudXILaIrjcb+AdMs1TbFYuBHSQrZwB75WJfB\nE8Ao8tuxXTgeIWh7L+qe619rJVtryC2B54Ez6bLw9lpcSycnhceZIYQm8jSf\nz13b\r\n=Qfol\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.5823407a7.0_1623113252285_0.32249716178196586","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/theme","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"707de08d45b1db3a24621f65adb2f0dfe1e3068e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.23b0c5e22.0.tgz","fileCount":42,"integrity":"sha512-1lJIOxdv+B2EoThJKrJq7y6tSW5UWGLPJN8BJwnqy0G9FI/ruDg0BgaYwpoeQKJjDt4WqGFsWIZOCx3P2gy92Q==","signatures":[{"sig":"MEUCIHEBWE48K6QfO/cnjqiwtxpihOtKWWxfFq8E5rXsdcRFAiEA3cxjJUyNLnW58muNO1aed3Ox82VU199xb1ZkmdVecNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5kICRA9TVsSAnZWagAA8PMP/3YDYdYFyUlsZMGLURBM\nbHcnSSzcO4aDG5o31fLeraWvLdnpFyIrOg5EVYBdHEQhfeyiLGHEaOk4x2m1\nj3hPhlq+vG9dSL1j9+okgK34n7OGRI4Nh5VsT530FcpgcY1PqzgJHZbbaAAD\nM1G4sa82Uv3WhvxVaRJ1Mo0WOz4LF2f+Nh8gVxXFrciRyaWsKADtx0BK3xZC\nIs8CC+yMzzHFVVaOGrDS9KNJYH536vh3fMOuWbOiej1qU4/Z6eC6ZUgYO74M\nkz5aPqrA+MNYaT9JIEjholyYRg8yZAZoq28Qb4k/2YOsuyUicqUvw2c2xHQD\nq7kMj24j5ksXcY9x3/S32KnQr+4R5ruGE4U3ZTXI4ewmyjZAU32h0ufeoJ1+\nFPll/YYDbOT6q572aTpiVjMDBxPtO4jt82ADONtoNHLGfVGzypiucuJqpjWQ\nmZtd/F2ZBWkidH2UqFmgdFIyryIyFYhzwgUfUrGVF5jYtlZFJ3N2v7dqyKN1\nCmf0i/GlEv70Cnoe8zGQY2y/9szIq5iWkw5oUz0shG36bCqczAc48nMo9T0X\ntArE3JD/FnpwQxDgLTEtRXTf0mJdTnd3xmeACAdW1ozwI/BfF93NUl8nCI5U\nmst5soyNzkTs3Zjef9eJOH9fxUiXonHRxYtStVlsmJHEtBDG4/NHL7rjrrg+\nV/69\r\n=VhcE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.23b0c5e22.0_1623169288756_0.8713980935423471","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/theme","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e076585b1a8dda005ea5527da74e4c99a3a94e37","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.2952c6a76.0.tgz","fileCount":42,"integrity":"sha512-Q+Bx8SxyRTzMBG/4X9iY2wkCxPn4n9YU/nVxA5XQ7ZCznVK4NpI+R2TWHq//Mmh+iQPWy3VuZtXLlxEVhN3lSA==","signatures":[{"sig":"MEUCIBiEp3KL4PLRNS3SCihkkMfjcEUvbgu8Y2/Z+Eb4CSwGAiEAnNb0eQfgSQpf0zMeTJvHOFHkB2t6hnSVb113aVm3L2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6t0CRA9TVsSAnZWagAAlrwP/30t5JzE5fFuaE8MiB5g\nxCWK2WXJR+Qf1c2boDra0biNFO9uYyFJmFSCFzfrvKUex18Q3GzBEhE0IRDs\nYPmin01opfkAxvvN+2a9oI2ZgFqwp2DB0QaBQSncNzVppHGB3UKep8V8xDeu\nrw05AC4cem1syEZa3Pp8W8E/Jo74WakFCB5g7pip4nwvj0qqi5aBGuE9E6mj\nNteIyzz7kx8+y8UGCUWD5x3fltLsc8gT8k5KKEtfkwBR96zMxRy5IzdkZ4UA\nH339OGh3cdGdqTLbaRW3wKCPELhjknjbLbgtoCQ0bu4LjUO8MLvmx49CFKVr\n9pcUhaJNVNtMZ1RjSbyXsG1PJVR8b1iibJdLCGqGg8UKCfEh7vXxyksGAHef\nqu08+PNim23PhP+h5G3EfOJ8nfBwxfmQByZkk8ZDojxxFnQknu7Jh0xj3O73\nwA7LesI8TB0AOIctjCCiyiYeV4kQLO4cd9aoAx228bnZ50MCa8iUrl94qx+C\nHLghwiFl9H/9CjCEMsouwCbnqH4CnW8opZa8nJnyrgZsjNwbLt1eC5Ibwidb\n5WDP+a2ZAa0RDUdT89VTdKMIkSFOZKVuCs9ZMiG6hViyHOPWVVqmUCuhpZN4\nNqo9V6VTPryn9lISKBtkJm+RsPKSL+0ML6PWDW3kk1IK1sQyMpOuY/tLVIhO\npbty\r\n=Pf20\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.2952c6a76.0_1623174004688_0.4887750285187198","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/theme","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.f12425f88.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43e388860c063138a0bf76a284f556c73d24e770","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.f12425f88.0.tgz","fileCount":42,"integrity":"sha512-o2vi+Lmq3Kb6ovI2hLeX8VpL9n5SHzSTwmEh8cbsSgC6ayFxXhBIUnhX4+pk3dLpHHDG6E4L6AyEo1BCTknIhg==","signatures":[{"sig":"MEQCIHOpcGJe4ZCvenXrg/CMv+GWOiA5CmoPOO958GSO/QD1AiAcT5eaBDDJ5P3pDpc02FX8S9dW9K5gSb01U3OPHb5wNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWVGCRA9TVsSAnZWagAAtpEQAJTNJ4KKAtFsWUdvjWMX\nBW8XuhcqpFTExKIdxPGiPHJVOg+2f9CU20/K8ahWk92zA/zVG5lWNNl1iTYw\nIHjOf5aRCA6vQAsoO/9JOJ4yrIYzY02O3PjuCRQ6cn6RVncgSdlihBaPd1hr\nHKYTy8vXREzWAB1l4saihJWIiUt6PuP66XcxdaXjzGKF3j+O+hKSCoNxHE46\nalXrY2X3kpB921t7PxeCV9FTuLd2zfqJTulHVXWNttwfcY5blMVnAW+vLvSg\nhIi2onIG2y9rkr5isgq3zqvrPzrnZp3Ddd5GPdogKvHvKlHUAX7VQeM4O/6b\nC62lRVEiJxIMRaAPHdGt3DgUqB2yOw3C5S4IVLTKYB8AYwbla+WBLsdacM2/\nlJ+kwflHu6TQEmnXLxom/6bJTztk7tcJZeQG1ji5QxiAtrLePzqvcOxL9VRl\n6l9Tkwt00u65IUXgOHBBp4NHThbqMD9nTu6KHVIYGzVP1pETDEhGukZmqgVc\nWaNq9PPmizneQBLQ0w/Q6Q0s7vCf7Lv9jZJkKjMdriWPaQkIT8LE786KlUtu\njJeKO4phdtwl/Pi1cgu6u5AfDVVu3TMF0QDoGT+wyzQAVe5Oq59XkQjEPtiA\nHWEV9IExKWo/Y0bc36PzP4ASLr2OkgOe2mOsZNl6jeAcTbSpD2OLk876PVUD\n4UYB\r\n=CyxN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.f12425f88.0_1623287110524_0.5262477028376655","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/theme","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.e543628c3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78e6b33284c4876359efa54c4ca4d98320375ee5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.e543628c3.0.tgz","fileCount":42,"integrity":"sha512-4In7MBrDR3/16W6n2ZSjTlvUU9IVOwvS7gQ09IJZtpADEsZ4RU88myrZWLm7BKwCGhiYPrD+g84CqTHn/N9TJA==","signatures":[{"sig":"MEQCIAt4ZncPeKEZJM9zwIrfoXrQVpWOmlKGe9qaDZmsyAlMAiAJnlcOyeZEZm77RyA4MWA7/m1cuD/dDZuqY7j60HIoVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWGCRA9TVsSAnZWagAAtqIQAI9mJrIU3JFuDMhqEim3\nbGuGHyB14vfFDsxB4y+blQWXO9EPp81lU81geRuEzoQf3GxTEZFLn9/rsbEp\nNZM9yEKPBEA62G0J0VH6QL7N8QOWPkS2+SPccFeQDHGrZjQ5/ZdxBu6w0W/r\ns2t17r6LRzy3BzxN44voBUIjH1FWQpS4h4LPjKVYeAB9LCWlFam4IxvospMV\nyCKcgU08xWLmD5yAeBj9tNKY+q24iupl4JdfrRjh2zUyfrHSoRQ9EpuIHboc\nCtO2kN4tObAOk+MB1QIVBJanUfST24PDDsupBiVXgG892lqkds669v72736F\neVwubr3nyqNx01DxxiplTWm9+UP2DSm6Ca/BqvkCAQvoDK3C03n/d77Ftzn3\nz7V8paYUKdwXDp18cgSMJlKNNGuaLEkGNMGDcq+boZAty0lHWYUFgsVebVGn\n43TchcEimzg/wVZQD9E9sErK2lBMFXX7j1vXaIwU0RljiEBERemkHuUnMvds\nkoXS5XcpqEwHDIdzsbLy0DIQXwxxUHuUQtCLQhSiAe+gOl9GPWKy9SOHNnJ/\nCDRDycRZHF7jYfQWh52CK4voiu1luS2XQpsHTwZM1+D4qm/6+fn/CP4xydwZ\nz58V+++oyBsjT3RlHzmVu6pB7HZhVi7LiVJnZlkmPkLalRlEisib7xKiEN6r\n8bCN\r\n=r9Vx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.e543628c3.0_1623287174547_0.7416722141169496","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/theme","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.e0c346286.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54522c209c23aafc6e009e11f4b1c6a4e6258746","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.e0c346286.0.tgz","fileCount":42,"integrity":"sha512-OgVfZg4nhBr6lcVAkFjPVtOprSdzOOnfZgPsjcFgPL4xPETfTP+6iqQGiGnKdr6/VrAf16As/1KY10AGO4mfBw==","signatures":[{"sig":"MEUCIQCFwvrARpDo11hbSZ3Ovg5nKjvUY0v/nwGwWnBpaxHHNQIgZpl80C6L7fp5YSSU1WjN1cneOpcTSfKj/wzCpH90EX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj88CRA9TVsSAnZWagAAJ6IP/0tLkn2Li2rJ9jc9VIqM\ni+Nnn6jmfxxJqBSxNq8nj384w/oGAe+5udq2vMUeOpJOBdfvhnwbCXiYqNEq\nxgxCZvLvcE7sbtMQVT5tmMm/RQEHJZYERMSAWCi70T5UQt4d3A1RgxnQp+cQ\nX8kbSOIYv22hVybOaHjfSjmeUtluiHSOz2MjekyC/uay/7fzGUMZU215VieZ\n2QkzXjuKZC5sxA/vJrA1SE+4c0DhvMKR18hie5VAslGf1KXO1571AVcjozTE\nMFlIvHleH8N4dZbWVMxZwHz7IX852ym1pRZnDywEVDWR7B1poaOlAI9883JJ\n96IycvejJm8aVes6tn3+ykoN6cretCXLux5AmjAnsik7dQbRmYFXH3zkpW3l\ncQgUqqzpcQTcl0M4p4ThTVAJ7vcs3IPCCV+96RCeEXRxR7ykjAWkUYSCc+Wa\nIOYyMgyH/qsUMHcn2SSX36t+ZnnxC80OAMn17ThpqLWLoxUXkNvmxvc2pv+p\nUwj9DRhkK0X6I0ODfJlkCvIswYJIBQgR8f7Ajb6EeAr3vuLQKBhb2XVdoAR7\n3/TMPc/QfsT9TDCJUDdrrTELn5TQhTFR34SexS1Z+vAysX4uHM26JAFV/QKX\n6vX4bDBow2RM7p+IPu4JhcTfPWvuQEGIbQKs/Wqa9ERs4yckUUlxqTxdzTum\nhxz6\r\n=4G2X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.e0c346286.0_1623342908057_0.6491890088526096","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/theme","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.f43af5633.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"681a1b58a63e5cb6798a6238051d77e628d5f7f7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.f43af5633.0.tgz","fileCount":42,"integrity":"sha512-oQ0Lr14oAa0agzIjMaZnJgmYrMwVbtL4ZtGcld588f3OhOf+8dPjElZ0qkvtdbd8vd7il+z86fq46vBWUfsaAQ==","signatures":[{"sig":"MEUCIAOJjHAVqX8071pEBMkSZ883LwrVsa0E6PxaF6m1jBDAAiEAhKmq2H935mqJjquvElArh+4/qb1x6OpJYAqRB/WbE9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnd1CRA9TVsSAnZWagAAmkMQAIJOyJMFGEH8h7ogk2hY\noUaOuJuFUCL6cWjThhyT4S426ZW1nASFwOuQK3bRPjITP6FthV0Iqza21bCu\nLwbnGW6cKxCL/Hc8wCs4nvuLnXBIUzRzi5t2xzZwm/nk3Jp3ZjRgGt0dJ02s\neliqvC0xuXlqHA9ONrM6YVZBodoDIHK+xgb+3ow0Qkr4ACDG1oLbjvi2amma\nRcTBWSbITJHRQ/EmMV2yQmR/y4Ae9SUX2MnY8lRT0TPK1U6LFWkDWqZAcm6l\nZj9bfPrmkfsZNKxQFvbBnr5eReBPg6gTvDRfUwbDgW3efvPdhU9RXXVAcbow\nWz14+npaxf/QKYEl/lhKBVUxyXcD1bAyQYdWtSE20w22FyJO3pAO3oeKcijK\nX8JT2aHSYkNpxO7BOwUohbXjIeFTjUJoHL/Fzzi6NpmtcolJbGs3mxWzEADQ\nCrXJHwSkC7AYYLuMwnl6taN+TgO6/e4XYZj+cR5QaMjp/BiRqW9vu7dOyeoF\nFRTWn2MMU67yTYjUtQQIOsMoDkrTgNacxv0jyDhLxc3rUv7XfmmxtDtWOo6T\nGWvTqPDy5R3nPqSI38aJ72YDcRMmMx45W89GGK9dJr7W0c7rDVg9Q5Xdj7NI\n07zZN7bPFwfOUCVZM8mMGJZpOb47t11E+DHYINPoCTjuryhSa2it4FE8AIea\nXS23\r\n=IkGT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.f43af5633.0_1623357300953_0.4717661516809084","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/theme","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.8415ae585.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ce29b9d4558800d5e809c69abec59fa315b3089","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.8415ae585.0.tgz","fileCount":42,"integrity":"sha512-qzgi9SEXRNL7zRB1RhUPLg2yH0wCtNdlV3dHght40oI5CmxzLKnZ1LaNxg6SFhOFxsKU0jqcpW/63Yvdr02IxA==","signatures":[{"sig":"MEYCIQDhMVb+NnRLcJek6jRfIzAKrKNfZEQSSpS792tN5cGD6QIhALy0ldYcEkOvmliy9tQ9amEtkqG4Rwi5ZAsZerHtITeC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4mvCRA9TVsSAnZWagAA/HYQAI173uEbKaFSe17xOFwv\nyojH/XxLOT3yDNa9nbPiELP31Skz7BPGW68ViKi9ExXD2qGEDhpi+OBv5BjE\nTJbevqi1xk3vP4ohg1C2Ey1hWQyO5SNYtVsJ8+a1WDRBkrpqoCRwnEAhLSw5\nu3wjXc9fAoExVIMYYl3Jl3b71odYaOS6Eg1IM86C0yz9vBOZ0LL9Ln/19Cc9\namIyW9cujD+BmrtNF0bmGT6vB5EIklwHaMDowVx3QR60DGW+ZLbCBU1ktYHW\nNV1f9lsMQPSnlHtMQFojiTHXk2DwnAH1lTjBtQo79thNpRlbAtK4EOa4Ki1T\nMBbMdsLhin/+Nvzr4Ve6ZnP/BZ5u4MMCClV0Tk1YUTgyhprAOkIpTHoty8ut\n4V1qxj87KPFp4KmKkrv/ZTuPNkjY9NA5j7o1VPKwVZYw20KrymevuVYVL2Ad\nCEgFmpMKDvjF4HYwgOo8vlcYhzzEs5pNtbGmpo1emD3a2zAScCO0sur1JUe2\n7vgJV/MI/pMZOqcpVLNXduqOhJxp9kjAkePziZ1E2cBAtyJcfwWvzcsZtQID\nL+ePMtgWBty5CyHFFg2YUOexQsRdnV9ESWx63MIUz4BLs7KsWFipKUNuTIc7\nuXVNkrm123kfG15gvwMk/EYpMtZO5lx5181a52tmpcRVA6x+wqQ5YlaB64cA\nRmNF\r\n=1LAy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.8415ae585.0_1623427502835_0.8566804607237168","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/theme","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dcec24c312f09c04b12b54023540f8fa0893518","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.598fcccc8.0.tgz","fileCount":42,"integrity":"sha512-Xrq+/7EyGI7zpTmS4wPgtNNcmspnQldwM19zZmMuIoPkKQbbKNQPlc7o1SDx8xAEQWQ0xUOmpGrhI2lT7nCV+g==","signatures":[{"sig":"MEQCIEz52w3/wS7Z/KMC8mAowfPpl5hygNsYiNQ4sxpIoQuQAiB7TrA7g+4EN0z1rCClfbgd6trjbcawKtvBc8yOs9VMmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9mHCRA9TVsSAnZWagAAuFgQAIBF8abfU2Dysi0fNdaF\n6NXCZhkIhGv2yCoH7t918HC9x5Qn9zOPPFB5FFGplyPy4ShS5w7HBM+hUYX6\nD2APASpgU/0j/PSKBnqXkCOS7kFeaJFukBbaqDV/OvFIpTVNxgMvGSwcRRTc\nKh+a5mlF37DpqLgE+oQSfgHpagkrd9aNcAV18h5JSJEG7uBgL6iD9hEH7EEg\nykeBRI+TBMcD3g3rTymHDmVPpA5aF/19gBgaxbEoTvPzx8B9sJEPH84uZ7xP\n5YP3YkwPTb11YxKG6d2c/dkED7/upAIrbur2B3AlUG/GfeIUa/BwPJy7aARC\n00IJG4HhBBmqbbwVlSImfHk7Q/CPXqHAWFVm9oC1vFX3cr9975M+qILE+JFg\nxkenbRTu1dSlMKOtQMfEfHQ9tztB8ItrrR2c/6CMQXPwMFoQb7SzVoFTdert\nddi/9uHL7OVB7mahAW8y2i91GG9JpgHBrUI21/YVM+JRH4uEyLVs6F2MGnp/\nO+ERAyzNJha8RSDeWVK9j1xFDBSA1MsJatJUu9Qk2Q7FwX1EgfWrNbQ9pOqz\nyQIBLvMm04amsXZQWJnKxlPjlMlFr/xW4m1akFj8Kul119S8YlJtT3Lylcdi\nvxhooMmmRBjDelWGdup+tZHHjJW4x95V51qETPQ5uhI3aZd2e5d0uK5UE7sQ\n8Rnx\r\n=crbR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.598fcccc8.0_1623447943393_0.39613678874441605","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/theme","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.5d0605188.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ad1a4fdc55023a4a62d5c2401dd7f4a4c816f0e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.5d0605188.0.tgz","fileCount":42,"integrity":"sha512-yVYvqlhpGBWv1FvYYYnxxq7PNRd+G8EnBEAizs6srNT7xUkCvvzLyxu7jOi7czk+VxpexGgRicPwgcMlPnssLA==","signatures":[{"sig":"MEQCIBja0kiZyMdJ8NuBKsloRo8e2Vy6w3A8qbGR89I6rRFEAiAEAmCfCHaNI4tIBrrY6cg0GC2UAzEt2VQHS06LBrkf/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5QQCRA9TVsSAnZWagAA3hQP/jE1sJAl8H8cldCGSSYb\nEBvUtir7QJ2zsLhD0Z+NJ/pAQll7y5rj/8u2ZQ1/1NLblVg0nc4imT6dP1Fw\nn6KJhSABYrt9VuIh4MeCd8+MbuMVHfW6WycDi+FVD4YM9PZb9pPi1eUjRDy1\niyk8ygRe1I/ayi6vLdZv94V8n03DkCYxPEzkFbAxyU+ajzxlT7xpLWixUlq5\nxC4XmDEKxeM7YUPfCT8lp6NhGo26tGoqsMlvrqHs/YRzjs/MOqVKbj5M7uye\nvZ+FqQXTDaQ05ujZIpUWir0Vvf7vc1ZyC/2tZLOlziTneEEvXbXxe5qvOn70\nmLXJH+Xcl3u7bCwMQ1eO3xKnOSy/H+GrJEee/xCVKa6VRWBHwI18XYafBbwC\nLqiMEkAyyQ6VSHTIpsoRVAXYz/+89q558zL8y/kDesRD1NQRtws0QRNh2EBn\n4vO5zJ2mGnCCPyKDJaSQOJoT4ETxUW2knITSrduwOnd0L3D7I8DcQSqlhfD+\ndAy1WvxOTdAYjS6y39h+Ye7SHhx1PYAOJAS7eAC8jFl3za0HQTwgSdcydGOq\nRfw4z5S6ERHu307JWM5EBoGrxMo50hy1429JkpJmgHF/Ox+c2HiFeHVW3qxP\nBlKOChbN/QeuJ99AQys2o4E+hc8TKcpXKmgGDXfWsbm7xAE8rxHNeKkh/0gT\nmbjr\r\n=L223\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.5d0605188.0_1623692304672_0.42052172831526513","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/theme","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.f147a2271.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19fdeb7ddc42a0b730132a359b8f21058aaaedb4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.f147a2271.0.tgz","fileCount":42,"integrity":"sha512-QwtiLL/lcWAdIYkIMHMuTLQXwC11nOQq+4rmjUOcTaMzbolYG25kj4a2XezrMydRhvYfVBnoFcsvciI4GPG5Rw==","signatures":[{"sig":"MEQCIBzEgW/EgtiA47drjhTFQfCBjNFYl8ZcXHMfaQznpFkrAiB3laEfWdA/woPEMd+4HAeIqkgxljS9usshW5Xmn3ZaZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6tBCRA9TVsSAnZWagAA3NwQAIRqWec85oOyyCLN77nb\nLUdJpNtwsVUmtqzZX5wl6mPoXUhzod7eOBVF/VKRHGSjFtJiT6dETk84fjno\n92r7YTa8G9g/ONkUcmAxPRMWIkLq+GpjCC6ld6bpy8bblCikDG5gZWzbC6eC\nfrIj0LvWR1q7YmgNmTznClUzfPLYqjjngveB8iJoAtaclPNRkKpIXOsHBb1K\nN12BR2Mq7mfNkNiLD9QMu0ScC7X5Jje7DoUH+yCsBoo0DlKabpo5nxsekYit\nJg/0JepWGlHrr/DDQk8B4KYMzhLFfGmCC/MH/Vqv9tJAZRyL0FkOhgWAQWFJ\nwMdXgZF1SOUeOf6W9uKlylq5e9IkNWxQ5d0MVbdlpOJ2tS48o7JAtJklHucs\nyrOMZFg4v9gCWVVGe1ZqHzA+W2KPp1P99LuGtnfy2156nQC6VQi/BtgNcpxA\njroV78NdqJy6nOKnnPoRQprH0ZGFKULe9Iautms4ygf5Xue2bvEQDX54Usyb\nUn2L9mxy5PFX5rWqUT2mo4RZRwvLmBBJW+A35R9NQRCxNaCBgWji3N0Gc3Nj\n0DVaRKXTngJNRoptfjpR8dLzv8oQNpsefNBSOISVJXUrxrlrtJf77AWzhVsK\nRwpDRV5QrXDqNuMXhe5dugHYt9zp69VC0j243j+tIQEx0z6ipLMs4z0UdheY\noRHx\r\n=cpep\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.f147a2271.0_1623698240983_0.2683245966135548","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/theme","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.33579e00b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6ad3d7ceab95f53f82a7e21d82d5b530e48f360","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.33579e00b.0.tgz","fileCount":42,"integrity":"sha512-KfCCmq6+ReAhhA9YSvAEwy+bZfIS/bl03+5eQEcUTg9n1oTDIqGfZCmlCv3LSn4KPt7mogqptrSOlFDWG1wzpg==","signatures":[{"sig":"MEUCIE6DI4iQG4W40StaSIX0jCHzI3kLXnj2O5k4PfjAa11KAiEAhJi2BHxunz2+pCn3SUMt4Te4x2sxxk/5ZTnmikJW75g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/J2CRA9TVsSAnZWagAATWkQAIFKYdzFW4VviAggIrtl\nYfvEunWBltFgyyuFv8fZ4ZtK1ILqc8CF0IQwn37e5KuJPOli3ZDyx/DeXzD4\nIhsGv5+0hBH8vNI8s3cyqtM5LLwPsV4i1G1wXECRMg26dbaPT6OSyHYHRUe6\nJhxNDT8Oxa8mTWrP6+iBkXNiqiKTj8mW0hPdpxIwpZFggaSZ/mBm/bqE2JwI\nmCB5XLMyIUuooU0QzS+DizrIaZlDcNaYgJ8JJEIYWuZ90NzmvfvOfJRkXPpf\nmxA4hnrjLeObvpA3SipaFCDafabzf0OPcT2dziNxIt3KMVYrLXamYkVf1fV5\nVpcKImIZ9/subUqbhf3xsxTvor23ufP2f7NrBgCLHJGRjXTdxKYMWjROaCjY\nbhjIV998QsBvrbcrKpzU4hLAFc9GfzPpoET3sud8msv9c63lLsJniYS2B5a2\nZ9NO5P5o98s0dQcbdj1UKEy+psE75CtR+Xg37eoYKc8BNdCYZD8Yx7ZDP2Zm\ne4s97UQON/zQnnu7oj0odyxpGMlpAZOfjdcq8fr8bXqcJQAI783A4/2KOkeI\nGoi0VH4rCmq9z4pB061FzCa6Q+O8Cb0r2YTkqjzsi5TkAM2Uf5/GyJHIuNgB\nKLZVglBBsHkGWCzbD1aK79+hCe/OyQQBCXhKvbVhsE9zQwJ4eqrlX8YTMVfS\nscB3\r\n=RsKO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.33579e00b.0_1623716469925_0.4990418614441394","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/theme","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"217521854ab4bbca359f890313bf450be067d4e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.a6909c0e6.0.tgz","fileCount":42,"integrity":"sha512-DQSplMnm30TH/sf799ISpr2AJgo9QQf1ajQ3EAq6B7jpF+jCfTbuXkBeFpx0KVVSGtzyCr+5O+1qkMX2kDtSqA==","signatures":[{"sig":"MEUCIC61UC0H338Br3aWfSuM5TRi9Nv+e4c1uDkwejx6BlLEAiEAn45mnFRoFG5+BwozFt7BBQFJlEoEh50421WPmOwBMe0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPGGCRA9TVsSAnZWagAAck8QAJ5dhQGXw8acQJSOk+Z6\nZ0ArSoFi4bhYQf4DZTR28TOqjrEpVk5BPZkr7jru87JG2xBsAbqJUogz9J5I\nYuooWo6K3y9oVUa1SLomPGFDUiNm6H55RTh+BEdv5Qzvbu3nOnv/YTebooeV\nJ+FMwJPUl4JFyk7Q5jwexIrHMZP7/+7t3gp/SMUwgI81Q7TFUqXglz9P7r1K\nVThbps0CiVDLBBeFKshw7dyB1lmLN59fGPFA7sYzbxSNiHez+tF/u88Biy5q\nbHoO4zygJaq9sLquiO3BfmAtEuWX6Xghc5u5axcTFqu2n6ZfIkaihoYXkTzn\ncvxL1HP3L2P+7Gyul4c4KFk0SK4VZcugcS/F3Pu9WgOjtyknTNgnfJPM+NoF\nBGGR/LCxTq/ryLGNENR1SAI4aZGeCDx9SoTRHfd59sSUgew9pBeX4GUhBn8Z\nHC48Guksq9V5POLcOiaerXTScVyjh8FLKAJSOrvi1z6ji5eo1LjTjAV8nCkk\ntTKem7ja35EOfQOHRHf5hcb9TX3xBBwtMQ0Rp5R4mXNaDtaYbOHyzIy/td4F\nNdQW5eFCmhvuy6CWt2nzHZDn/23dkbmKZoCaiLP+S3yIT/c++zOBc0PGMGjo\nwCgIf0J4ah4LvSneUHgrw75Hk/iby/pkXqxJ0ocCgnkoDlOcIEryILfjasQf\nnoKD\r\n=dSm1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.a6909c0e6.0_1623781766194_0.1733678691490299","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/theme","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e4146c27f709e3777d5f0a4d8c82da923ecd81c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.c18b5925b.0.tgz","fileCount":42,"integrity":"sha512-FOyPiMEnHeiciUgI2PqPU7z0Vf0cdojaFw7WQJC+qA5HyYjAWDj7mD7qbDicixutvao+eOVqdDa9GE75Nr6+iQ==","signatures":[{"sig":"MEYCIQD4xqdqAWgGJj15/Q1K8BBUQaoLa0pl9rZrNw9OO6tgEAIhAPtKefpw6BqW98xoTA7tFPedAQARlZRVdwoJMjfDj3Zy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":222568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRV3CRA9TVsSAnZWagAAnloP/2EZ9tNZd8LVkBQbBfCR\nVjQw1l+TvWRj2TrMzj+FUAG5p9Gnwz++pIoSmxonn1v/T8oU72PjW+3zypvh\nYO/hrfdCDhR9u/fNfQs7l5k613/V01oEfeL3vC2WCI5fxx1yOKulIQHLXOPi\nb9J8u5PxODCtlzzNL1VhonMPA5MEs7/5+AL9gEcbcRLhPn3leHADAfyo/jUu\ni++H1q2/dVZZLMtj2Zjz3+wk7L4wgFr4h6T7Ys7PtWc5qfZkD9RPag32ghwb\nu85spuuN9ezJU2qW0BSqPKYhb85oeJkXf0Fbaos4YH1DEenuluYrjNiVeRYO\nybsldEam3san3zCLhu0bJIlNzzeUbC6Qow4sCvfMzx2rsuNP2tv+nWTb2Hqv\n7rKg8qXlK8HgkZoLuWxSku2XbJMK5fXGBCh2avw82iTH5oA6LM3xHQTwJeCA\n+1Biy1sXeiU+VUNMDT+CKKUzqFqd88N+Pxispgg0ONavUwlxlS3KFQ6F0PGi\ndAMe7i08i9D8huKwBf+PvNJEwTVMntSBXDU/VUR2RX44yy8dTdidiwedw73K\nQiNR3KCEDEoyqtn5CVJ4TOHW8Qa8QZC6vKpvOesmYR6A8foodMQEK21KDl/8\nclT7knBabwAfnX4YBe1gQd8Ycig+HHAOD2cWI4k0RVDWS7M6qKTZpca0drIp\nMC8n\r\n=iVZv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.c18b5925b.0_1623790967747_0.9845690027138319","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/theme","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f427b895bd48d7ec734618c74572e68bea4364e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.7ea2e830d.0.tgz","fileCount":42,"integrity":"sha512-P/yGTu5rY0S8JE3Zu3KkzuKioEUVNZ2ZIyzub2XSqGtFkyOI2pPbfiGJa6y1HVmE8OrASz9Jy180EjpYFwZwQw==","signatures":[{"sig":"MEUCIEpUVrSTqTuShg8yWutEt2VP7NQLQyKzgI1Wu66S6pCOAiEAyXQhMbUdueAlmo++PxwdYrihDB9aK+9HVmeDiQLOtuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS6XCRA9TVsSAnZWagAAh3sP/2Bzgepa4hJueRhUAtMd\n+cWwbWeLJlfavCImLqpKnMm2Pz79Pp9kSakLzELFtQQDuv3vCvT1djDQCz3f\n61OUXVAHhYXt2WbXZXKwZ4Sbd0og8ba5lpWa8aDtfsQviOafujUD5k4whm8Y\n1NRVQ/fi2n7eQOT+mbyoqflZTwdO/Ahn7RsESeTsWzC4ogiYB8bXwAL4OAmq\nUvSUA5Jbqp0vs012Vtu5TqqFnlD/fb1r3xdCpb7/atuC4Pna3Rc3/s6NT2QC\n+MafgXoUrG9++z7MTPmXKM4wpFTmtM8+PWckPyO1r6vg1FSu8YlM2LcIVptE\nvpoU3NZKFALVZ11WVX7NXjlkFAx9M6/Att45jbE+Zveh5iSzIINT2nyUj9FI\nAuefsTFPQNX+nQCjdg68XJ1tHrNu6lsImkwe2OlBrdxRQx49c405a46ueYJi\nyFEHtz9nu4amWm3iMsxqBPQ09pkouCAWjZ3WI5lNTIuWXG35HjsLyg/lXZ5E\neGzBKrLrR1jWYfspzKB2c1XsU40PU4kHg32CEvRwbSsU0QKZ6cYX7Ry8b5BX\n6/7HFUIOcanSrcKWQXdgcnUzBMEtfkUhiG8rgoU1mlz1fiUn7gyCvumu939i\nIWj2i2i8qg8QHvl7znXHUB9h1G5aenBNOpH7nULIbq5iq8+oPh71FJHCusnJ\n3VIb\r\n=ZawU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.7ea2e830d.0_1623797399667_0.8866937672873829","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/theme","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.271fff902.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e680714933ad50cb3850e564c1e06ec77c95dfb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.271fff902.0.tgz","fileCount":42,"integrity":"sha512-Ev8J/xNEVVe+m4PpMM83dIdkAmHPyLIFryVuxL1BaIdtG4HA/9tSOCbmhgiiOL/zVpWnKZSv0r7nFo9SzrIYYQ==","signatures":[{"sig":"MEUCICDizk1Y0t1KuxPIII5q5AllMYsWfZzKb57OpKSfCM+cAiEA4WjaMU4OKQB35MIjSwJDG/LFzsN+JnRAnbNkd0y+Lno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS6uCRA9TVsSAnZWagAAf0MP/2QIAyqTSLMPFai3xghK\n5wrd6mZGsyt6qDCBHk4uCYIgxLXnq+4Bk3Ihm/ehFR+xyDLwzWjc71FhszH6\nWNbLlyATWy659gggQTp4nIoBPlXR6lEvPeQDA62HA4ynS3/fQcJeynfSo0X1\nT0zU4TpNFTI4fCokFbhsEguf6QEYeuc2f83fF0Ob89pxLCNStJdvkVrju8qe\nNgc/NXO21dksC38c/ghLLHsBlVb1UzLwKeepqSAu3Epnmo2NP4S1zuBmAuCY\nk9g4OB0YKCFZQjXG/aoNpMTL5xTQ9sitm/CkdgTbXGoEIGcV1lPdk8+VYv0u\nQTcOsBBMMacRuWWBSI6tU6Ozi92p7YGLh+PLFMWC4krXVFdkxb7zk+0hf3AQ\nvrwBIveZ00WSZhiIYOyliDVYnpuGJPZ6fwa2L0DNGe60U4eIxIBf83ytOiAd\nf+ZLN2aBEN848CaRy4CVDSL+hmwv2yXUQCukWUwH2m/jxuuQtnib4evWRwAk\nXsVciGwJaewzRP6eMnSTDajsN/NCGaRfiWaYKBU7gTgNejWlzAdfLL31vHIG\nQDP6Sw5g665S7YJ9TEI9z+MTNd9byICNDje4RwhopmLsADcQyJ85EirBBXGI\nfAjE8maZUiGvgyIcZ2ROKoa2k1+DKgv7MvcDEgKcjm714dUMGitLSgwxSU7v\nSpVy\r\n=PzZO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.271fff902.0_1623797422282_0.9163890549772915","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/theme","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a35f2195d6abec858ffbdc1c5947576cd3fee23","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":42,"integrity":"sha512-YKHxROfwK84pHwIDtQrfS9vc006LxhUfjZX17MbuhdzfvtlqKOavXvl85u6IrvVKFhB51j5lcWHFb7vb6lv+UQ==","signatures":[{"sig":"MEYCIQDmqi8M4LsntLPjwa6Uj2HMyTpQE3hFAVOPLtQ5ticXUAIhAMg4dYaclSJfFyA38x+hNJl9qghqs/2cWJN3Q7arKTB6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymeTCRA9TVsSAnZWagAAD9MQAIViKEI4eXvrVqaaTiTb\n5ATkPeUaI8TT+rz7vrJdr2Zp6kUkLm0s7FpPHW5M++UzJUCfT/V05B6JUvZ1\nvnUu8TobQowtLFCRQoDjcm1dOl7xaFqTuVnZinwo3ugAFa5XZOWqO86bxyQ9\nxHt0pjqX5xvxCvmCMXCBRMFfckaIIZhvX81Ni5g8qics5pEp5m5V+y5F1X1o\n+pHaZ3J7Y2HTNwwPVi4dZSxOJYLMSaRvXiRdxPtTwANn+o4hyLbjT0XyLw/S\ny250S2CpPJQvaRcXMWifom7Ww6G0C8Xm7MzbzcvlfD1s7s637K0y4bhABBpR\nl4ZMegxZWrgv9BwUqQbjGh8ca92zvfTwRf6fUWxz0At4y2DFLe59bbROmtKK\nxAwGFMWWvWBpn/jQ6wj60I4kfC7W5QXodmSeoXE812Jkja0LjS2c1GDM5mOk\n0w5dmrPATY4oKkz0p+SmliWE0ci9f1mDEOn5GXdTij87HL6+U2hYZhpT1giP\nIzMF7/n+DC+ymvJg4Ot5aWVe0S/4y9rnK0hTztq2QxbPxbKy/tn9n/AnMigz\nIo4F/MyZnNg1NHPNxjiuFywNGJEEf5/lQdG2Tu0QaMxhLx6G4AdMaetgmWms\n1ZgBwDDgs0NWnc/PcT+4KGgNUjNwcLfijcofNoil5/z3UK0zambR4czAF0Is\n8DWF\r\n=zdQU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.d96f0a1e0.0_1623877522758_0.708808586813259","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/theme","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.a6183801a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e8f0c0497b6bd88ac4588965cc0ee0c4b703dd2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.a6183801a.0.tgz","fileCount":42,"integrity":"sha512-Jfv1kcHOBRwywF6MoWs7VXcmrMiocQjFW5+u9jyX5nqGXEwZ8YeDLnVroCItt8WfBGDlfxFOl9MkAsBSSyvtmQ==","signatures":[{"sig":"MEYCIQCKplIUQ9u+U97W5OH0YqkZ3pNjP6wvQqi7Bwu4GDI7OAIhAIGwvDjNyrOxzaxDDwv+qg6Zuml+h19buy/NPL9T29eV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynV1CRA9TVsSAnZWagAAAGQP/A46djq78C7Nu7WckZVB\nIOz4vvLKYGITQW/RRBL7pW6czZK3QsNO82Ew3TvFFRoJK/IZIUuRPdQtCJ8f\nBaOaOoOboNUxqI/MgO58G2jPMSbuYAqJ34HJMUgu+uBJ6mru+xcJd5UGqYJI\nfjGIMvh3oCae9xZDRFRCZq1OzVsZlqzLbzqReVT/IPUH6tsT1tqrlPgcbwlV\nDWZe+HLfPred9GKJiKMfWaiNCtluJdl5ZHAKBurCkugLKoTCVp7vJZKdMACM\nyq2o1X5kA48gdXUOphfLnEvT/tY7R+y7zWk9vRaVVJQgZljIZtF320UAGrvi\n7eWN09P7mBfKhRnKqdTvQRr6fj6OjECawDdZplI5bu9Y3fMTBTDbsTeZXkDL\nLiJEThU1h5ee+yEi3aqCubf7TtiQ16pYIOWiapEmElW+mKsK0AQIqpJH+PO+\nYDAyoOaFNpldwnt3u3VYk3DpoBoqWIbvIiwACs3NW6z9qMgTSeULnqnkIHcI\nXkxbH/ZMQMgkczk0AOhmeBAd9L2MRkIFV0DQYomnWmjTKSeNOI8MBwbMqH/S\njtRxojPJemQ4ytKI2AVuNHMeDUF4Ad1v0PmGHe0eUawsyL081iHmXaARxnXW\nxMCTZJF+bfssPrgBCjfo3LSUAzLnTT8UI453YmorjsUdD6zlu22mGuTrYvqA\n0f1D\r\n=RF5l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.a6183801a.0_1623881076919_0.7096133293221927","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/theme","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.940550232.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ebc488fc319b1a27b61c18e70ae923edfc67826","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.940550232.0.tgz","fileCount":42,"integrity":"sha512-rqcmuyxybuPLM766VAZg3rDX0nRTHLRaQEvaTSyV6AZDJ+lGA7rMbyp620SFCnIH+KIfcw5oMpA08Fc9WYj8JA==","signatures":[{"sig":"MEYCIQCZDth49bss3vKvKjoJbB0L6J0xQ3npkwizxUX39AY99gIhAN2Gi4ZntX9Hlrcv2Z2kplQky7PNWL45RKQaURXvJH3G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6TpCRA9TVsSAnZWagAAXuoQAJdLIq1IDtBx5ZMLDqxu\nyLihO2Ij4j8d5ZE4WNL4Aj+8E7C9SY/qItaMnSF5hFBimyOA3o6AC6lCdshg\nheoHYtnOckL7+yiU5C5fWV6+QoXXLeFsQdpURvSepkufO/1FsIqFoOZU2P3I\nTXdJCmWqPFbVlA4iVnfWqIba3cbuSchJpVagaTEGKz5OXt1bTisjzVgKaG+o\nxr+1vf7NJtasZz1TBG84uQ7wAJBM3hjjE7Sdn0H2skW6ZJ77NA0N+X30aMxV\npWeXKN/rWYK+hd3zHjL2apMfTj6pSWXX04A3rA8HI1au0T8Ki0jLbCw99K2K\n6pg9Qo0pGIZXKK9JUcE5Ok73vIMMnKKXsnAAFEPTWaLp1AJpn0bNOlRQrF9F\ncGDV9ZY71e81U+/J/h65KsZMWkx5fGgn1AL71PyQC4wq/RaBRi8qdi5JmUUn\nVQ89wKGpzEkhmLSfbBgDMNaG58z3BscCPtIV2Y6D074WIWv6enT7Qukt20Ph\nL53p/ATbRYu61qY2CZ+RP9kWWZHieenuCbKyJxP0hWAjowI4Ku60/DCvvjxx\nt58afvvWiY+qgpXzsBXNaAlK8hHvbtfKBt5jVu6SB2mFkcVswkpukBBD27OM\nFqnfMMywNzr5kHanVVh+A2UdFi1cYhTDbjZaWz/lZayqe2g5B2HHGmsnPNlp\nScWY\r\n=J3Rj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.940550232.0_1623958760735_0.6998972869196949","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/theme","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.f705e8048.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b84dce645e7b0b170b9219b5c557bb3b108da3f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.f705e8048.0.tgz","fileCount":42,"integrity":"sha512-6LpvpuuBYfr1eW9LX5X1pG6i2YkeABQVaPBxHsMwq3ycEugpDvbtnTDkzcQcFWCWBodSy43Y2ZaYIfdq7eN82A==","signatures":[{"sig":"MEQCIFfMXE0h9Ol4t3toeyFiicOJiyVEGOAiTzQ8RU3RTNBMAiAKBeyvEiJHTe7YyA02nwNfYaRVbZfRZYGWW1n6xqLgrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLp+CRA9TVsSAnZWagAAiUUP/2MYczuL9Ldl6eWOZ78L\nD5KnPB190FX5fsIaake0aNy8ACS0cWxAnp07OuJ8+mj/558fFeEmFWoAb4IP\nM/Bb7qMOtwIDKbLpCZzn1KYJud2Hz68p7t6KjCx0/SN0y4QWSc51Y+0H41hY\nqHRHOO/KkFHMLEDfYp5LX7IHwKXXolVx70L+RKp3HXNAmvZ1AUelEWjrjwQA\nE+FnagIa2Dckn8XusHnbnTWPAlkqZbzZVIqURZsFh5bqbOK7zEEPAzfA3HCu\nzJ1ejo1xuuwja2+zPdPQiVCykgbqubOgH/WG5XuaiwNiQQenp7pRvzWGoiS3\njDVCNvtuS6sMTXY+vBjHz28vwIsenB6liSKUZWn7t4kH+BW0eT7eP6DDfd1Q\nWtHaoJ8elEan8CC8vXUoe1dQ5D/k0npDSyVOHsdq+b/V9zoByEKjGAej1iTe\nQLkUkjUG5BLS1tDjj7cnTV+WxN6v2NB3N/E7/BKSSQn20u+icDJ7vbw9GqBe\n6JE7B2Bf4xqdXGlubMSjJ9wOpZ/MNhoh0lheR7x3PFVU6QoMkOsZMtyPeH/2\nmidM+ZVfQP6yeOEW5EL5QAaiWfkEyVqNLTdApcGp9Xufa5xFGP1jWbNPlVM/\nGhB9JsQb6HjOqdxDkIAIIoa0DiNI1f0im5crNvlU9Sc3/gvg5Y8RUZj2roL3\n4IAy\r\n=ddOO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.f705e8048.0_1624029821389_0.7223285452060415","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/theme","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.08d791f37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cd0e2d8d00a601269ec49c9143b3af849a1b3f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.08d791f37.0.tgz","fileCount":42,"integrity":"sha512-LFSdHeNIil+mB1ZQumktHyC4IekwjJwwbnnLFj5Ag5w4Ez3MENzYkLXdll5sjJTOu2nb2ryPSEcAj7+iS3e2Fg==","signatures":[{"sig":"MEUCIBBpeWpcAyMti/9/EDHjBiCeXHD/FrOvHvXcbu9UN5rWAiEA3griEvRPEI0pbDKmcic837vO7tfXDc9s37aZOKc3iXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQvgCRA9TVsSAnZWagAA2xEP/3vgn36X2NZBf7CBZ4iI\nHAydERwsIQGX5C7+OGkVKtAXGYMduMzPF7bD7UA2UXzyD3vBRHyV3arm0vwL\nU68jo9SuDyLruJJbTWzvG8MIJUd+kKBy4ePqnMWRfkWRbtydDueGphMKctCM\nX2ILZEp1CVOXkY7wFEAa35tULqSOCfzffSebJWrtwM24qGnXJhzhuZYwhtxp\n7C3Xf/o0FXmlmPGbK/C5jNXWX2kL81rqSgl8oyH0sSxzh5FsX74DRYdLk9jd\nEu912tmUa6NdGNhikNIA7u2JmTUkN6islw622efpOYvflSnik//VOB6dqWz5\n+IrmNS1oOlVsNoyBg6+FNUZBrESoD6qqMVhNDlyutj0kxJiqfUw2NL3FcBIt\nSAG2tZZ0ejze4wk0fpLWZjLzA6Z/yG+zZEEMfsBzJRTHhruGwfjvUpOno+q2\nChdBdoV08pGo1BW/iWHv43lbiO1ily/7Yx0mBj8lDRT0qen8tUzZvYF7VRh4\nOLXscdBgS1aEPU1XWX006RFco998oZtxYJUkpTu4+slLqGKKqm0tBFCuFTBk\nI9rKz3h6LsAJddZTGrqNTRGeOcCaUbeK4DRKsqaJ7AFKb/4d8dK8n5WHFK5y\nuGoC56raMfR7wELQ7jEyvLnhP9jfPBLQ/pUU8AtMXIP6WOQpLAln6ZfHz9/N\nLf1+\r\n=sVm0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.08d791f37.0_1624050656124_0.48996331027649553","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/theme","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99ea9ae9014fe6c60dd50c76010a487a5b952e56","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.e38d7440f.0.tgz","fileCount":42,"integrity":"sha512-16KecR6C55qwyp6paigNwIXaStly3Eo7Z0gebdQtf0mcTjzZXYusCHPWZNFf+2x4ugCa3tB0+e8zJxRzyP0k0Q==","signatures":[{"sig":"MEUCIQCtDh1N69qngkebvepCRxuHIBV4VL7VMNrFnqYullk7BAIgILV65mDM5feQ11GuXB2C8gWxGZFuNr8xllrGHKhWPYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M7bCRA9TVsSAnZWagAASbIP+wZALIKguyFM/iH7LCLq\nnxyxm/pbr9ZD0r1jpFW18PlXA4r8aesSpzYhgTe/iltXyRAK0x8q7kBPGrb/\n/cRcgIY0ChVnYE62PHODi/9ka8HeVsanVknGp4AhPWwrjNwFR5JqTklYFP8l\nZ29Y8vO+gtSYYWcGx1o7gU4i4MsEdKAE19zz678h2LK0KQXm5Zpsh826Od8o\nOsJ6JrK3wzzj42qb6QhEcksVLciG7HIa+foeXA/r8X+LmiYJQUZw9IbWWBzc\nh25Mz7W5txzYYtAfhrN6FljSKhLdlkeNQOcAOgLXNvS+XS4yHquptOdwVcgB\nqAKj8HTLtpiSms1+n7AsC49MA19NJMMZCmeyNtpevd5lUB7iAzdIS035Fh5y\ng8Uh9Q+p92w27pnaMs3aFMivtxc6juhcI8f5FE0dF7NfBVQMfgq/dcWxbCNt\nQqvNjh6p1fRGlrbPrnoU9KrRmQpP/n1N4cs2xI05Rcd8spYOU7qnwADYGGXx\nB26xdicouuBsIBhsnMUa1RuRoN/aoskszdxau/kIbSQzP/TrxoP3dMUbbOdl\ncsALEIbLkeCsVeecwNUO+4sVcMOEv1E9MQjLYmoPH56+IlgRDfzCIhfIGIcL\n9xXXsDjvptGVQSytvZ+TfkKz/dtrAS4tyWcWzW8NNa9UgipB0b/4TlxBH1CV\nfgM2\r\n=V7ZZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.e38d7440f.0_1624297179379_0.3836496296921925","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/theme","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c7bbd8d554293f6853691ba80f0f0cbe5b2fc4c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.75900a5a9.0.tgz","fileCount":42,"integrity":"sha512-UOIBEt9eN4NCkxBX8CZpHsJasvYZXaKDax04F5YUxdWkU6KgI4Gi1N5GAPKElDDdPDvV56ElmFCUt1bA4hpfTQ==","signatures":[{"sig":"MEQCIC9AxivS3/xU0GVkDSqmFgrFN2wrF39zSn3eMDSUwXwHAiB2PNFSxiVmnPa4FwLXklPxgWkyxQG+Nucr/5PRfvLgow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NwQCRA9TVsSAnZWagAAm0sP/3HKdYZ6Oi07ETcjh6QM\nOJYsQSftn+7v6RBYquaH/A4HWMyf+sudR6Yi8OUT/JhDUK8txcqEpwSCpKqH\nDYJrD1dJEWyLV8gZwPS3HD2Rfwlrq81ARvwHq5mBWb3BiIOBjArC87ssGZek\naEKXUGGmVGvbpIxE8S8FLp17XEn4aZX1B5L4hCx6Xs+GajHheNmeBUwPPIHT\nIHU03NjU2lxM56P87QUNEyWGe7WOHkGPFOamSUchpi9u1+3a28CBbVJCpnBt\nME9u+tkgkzqdHAlC8UU3UXhocRLnc9SI6RPtVldBl8gpaVH6UdsBQJfIZ5I2\nndHucJSYX5Tkt3xjpKJWNu6W5J6lMmH0Z5ZnhRd0kZmXf2/lqr5Z4vyiOEPo\nmsjFRKTJPFwqQ1gyKUlZGSX5h3LUgRDqAVpWnvveDmRsTRQIWYzExlaPEyEB\n9BXmSPdHCtollTJTnLnCfVku21TecNfjlZfzGSnPiajIMvjOhlQ7Y4PSqjXS\nXrvbhrDkzdnUm5eONmO6km1eb1GWpU6yghDq2rH+VAyqRYs2CLVdgJFw0pAS\nSHKDV1QeCGqTUKULyrp7ri9AIQ+jwOcvMC7xrUC0CGTdQnM67Fy+TQye7bat\nyYOHiiemj4SUgkEbYJbp9OcRgRd0jHu3zkyuFMNccsK67+0SqmdbihGvJGr2\nZBMw\r\n=hT4s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.75900a5a9.0_1624300559677_0.3128519374283505","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/theme","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1f6c86bb039212bf4c1649769e1151629c56cb4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.33e6f50e9.0.tgz","fileCount":42,"integrity":"sha512-D2czuXo8YIOwSMxLPxEY3PkSI5WLQ2BnCkFXZR1eySBQIhUKmFxVcahDyJDnoUy0p1W3uKsDjBYfdv0XjKGZHA==","signatures":[{"sig":"MEUCIQC7Kv4Ot2RYgpFqU1/jOVilYyTdvAW2uIltO7P7/8a3VAIgdMUOqS4oYZ+A15TL24GilUlbIA/DTGJvcnPzt7/oBnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nwhCRA9TVsSAnZWagAAP5AP/134JvuHGbHBiTKj4WYw\ntK4Ze7qVzPMjbv5V5OfofqvanIQIyWl39lF65y9Jba7UgQzRk/44fO6bKYDN\nnqKfkrx1KxSxgCfM7P6C1jKDx7OVC6fx9VyQDnvjdEkGs23KDDJ00SAD3tY2\nN3YmiW3bjaX4E/ABKw2FP5LC0tWJKAKpZVytDQ0YYze20HAhrP7oHAldTCTv\nOduL+7VKP3jqM8oXgQZdra1x1TCPvxWMCSxMNB6GesEg9O5dewU+Jli6vyZ4\ndazhfLdGoPZoEaooG4arVSULdDOBkVFjVz4PPF3bdFuxpv2k0aXsQ07BKRqm\n2cjZom6s6MrxUusW+XY4eKNRh+V/JPSj2PVssNTLAlV9lRa4Q4Nr/XwLqjuM\n5sMezJQPCOG3FG/pGKJ+G4sxKyJN2BLH3WCbuuXXHaCfNlVImFHa9bHF0c18\nD87YlwHYaH4LuRTDxCZqddfq7kCeTvDJgHVkRpJJhcrHXSusQ9WBtvSxYPwI\nDERjz8vf1LZJ9QXxJge+6RmGaMMOxuN0swIDn1MuVnIlDvahjn+YU8/3516Z\naczHKOUwul/aSFFe51eySzeVX7vitpL5ujV2+i75Zn1qZkID0yxsdqX0/FYc\nJv/YNhFu3oe/Ty269acT/9joB6iz/D/lBwOvK/hU6wyCVsCqy9tpgTKBfFZb\nXbFa\r\n=F8rn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.33e6f50e9.0_1624407072488_0.607266525283819","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/theme","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.8c685301d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bdad1f9d1aa3049f20d609ff25d22837650ecf5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.8c685301d.0.tgz","fileCount":42,"integrity":"sha512-dphVUaBFby+lPzrOTxTSCuCkWuNkVEDVtJqgYXrz58jVwwTufysrV1GxRCDlje9z6dpJHomwYGgpvHCK+ha6OQ==","signatures":[{"sig":"MEYCIQChz4KLHWX0vE4pyV8jgS6M1rUKSuNotaWN53l9iZsatQIhAO1YwBWojCsgKfUXjg3G8ewrwhBbw13vxJ3EdLYQGKdn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03w0CRA9TVsSAnZWagAARuYQAIG2EQoY3kd4T9gb8vwa\n/djjP7Ogk4UT8ALOUslmoQKkKjmJTFhufD6G5Ivg+lQ6qg5Tq4otNoBatMRq\nsmsQoXV2G8KAjPCMdHEneeUn8U0eqrzf9tGGoTB9rTV9MVz6dqlIfjz4/APD\nLX0K7eQIC09q6H8UVtNowXO0HEhNHYCuD8ycl2dY9er0JmtSrA8hPeBHzruv\nhU22dh0nkAmpUSwn2B5+S8GluPGLPLXEyUIViNMcYhHgAmDAk7jJ3INf/zHf\nbQU9gzk8pUcavTf/QuT9as8nbDFoRejabhXqmDK3h+sdD77WzZ/fALjXqOew\naKdWH+zZPeqxkhFpO3rhLiQ9LThph8d2Oe8Fnza1lK+PNYvFR+5Hm31/2vfw\nsIgGNWZ85ZOOGpHe7HqxyLBBfjanaLGnzvYO0ro2mnJKJzcwrV+jaJ599jlN\nkQKz4lEm9s2WRy23vq+u6Pa0+jk++ajWVZdBA7ih7bkcOlmnjBG2zbeTo99s\nkEi806zSHeNrS8mRex6Yoe3PNHqID4h4JAClU6gHxWKu8uZ5Hk3aBfWesGqG\n6EP8JR8GyGpoh61VHPsnzVZkfB4HKzcsUEaELWRDtR/koFV/Gq+qRsY7U810\nKE5tAVuzb1z9qqL7KLl+RZBJ2VKUnZc1SLTHce0utd+W7GbRQO10sBN+DU+U\nT5VK\r\n=wlvX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.8c685301d.0_1624472628368_0.8637410076575449","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/theme","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5096740b29dcab4a5f58e1a73529f66f8420a0dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.8c7d994ae.0.tgz","fileCount":42,"integrity":"sha512-5F/+EWKtWMskFi47f9WeEWNLnLO/zn6E6ZjwBCLsysAK+a8iOfrsoBjTvOFiW6OydgWPyfHp0UV1aIe+j9oRgw==","signatures":[{"sig":"MEQCIHIn58bL2AyZWP2LyB1X32DDhgCO8ptJFNuOMg39YuyVAiAHT8d66YHEfrcFmgJtveyN2tJLzVBaJ6hkh8fyl7uSMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04rxCRA9TVsSAnZWagAAxMcP/RI75hsDH0kU3bgQG9cg\nSfyPQiLcsjPW7p7hE3nauau43wslbNnQjuBILYxJuoNnvDoh3ZqvlP38avHK\nrgfk2t0FROXpLg91NUK2RK7CslJ0HewEIybCBpFpiaTzo1pPWGHsn5lHmqWM\nTbB68fjJEyZBBnConS4jBJ41PckoR/MQwndjgg/NCCJ8YWDL/BFSPp+Bl2vq\ne4MjRo9gZBfe0n6scpCwzo2LNzypi05oXfpB+DKqWyXa6Qr51YbW2LqU9+Yg\nRoBfMqdJi6Wv+We0Iu45a4UN2Q8QaC7M85T6mkxE7Nbts4COk91DcApNRuSD\n7CviulndWYZfyvIptROn4AG/l4m3qKuxneRhZIz/XSIj0bFT5n4xEJNlC2Tq\n8KHRsAwx32W1iS6BHdcIuBKrNN+3F3xiQdn360PLC3pty/N4mkYsYtG72bFA\ntlgHh+tux6bnYJcZ9AixAAMl0wlWQtSEn6oL7Vx6OoCkLwmpY7mky/p5Pgge\nxpX/BA8GbdZNMf9ka7GuwkwbdjRc5kAdq4olwyQqSwSagbDOblP5T+FUS9Rt\nBqnfMPz3Ey1/Q6yEmX/U8Fy3SCfj678bxQhGtI4LcuZ+nbuBWMv/KsDf+Nji\nAOfxDACXZxVnn1OYfCPwE6Uc/Wln7QMfkzIjdzHDL+7qBLtIE+YK0vl2njCc\n9kRV\r\n=5GDl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.8c7d994ae.0_1624476401107_0.3242896821600685","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/theme","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80302fae795c29f8d1b0ee01af4ec16cd49f79fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":42,"integrity":"sha512-warWU/zgV+gKAjXy2R3tYpa3yRdPJpvyVQHHzoLOS7KTuI5TIqUH0rAqpzcKjKtzDCemdtK6/EDz3X4tQ8s6IQ==","signatures":[{"sig":"MEUCID7CwJAJ69OSjND1/fMW2LCzdQv3GggTkH2EcYbmhfTKAiEAoWGTefmLWHou5RzSnidRWjeEd50Fi8VlvC5Zu3QnRUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K9NCRA9TVsSAnZWagAA0gYP/20DxsJW0gqGqIzYs8/i\nRkB2YBwB7qnSWVq1DPmMoKvTOPXQhcXOtAbAWohIWD8G9wNrUtqhZm/Dw6f2\n8Bw7uqV5JuoQ5qqa76NB5emOrHMISP34MkWFzhtqHU0egBRkYO/NiQzuUIw7\ncS4pyCX7PqbAx8LslUKG/eNLKvClVp5eihIlueQ0XoYEfe+jto3RkkxawTrG\nL0DdXcfupgOgx5fWLji3IWF0QTChmHIOMnP7pQ6IGENT7JCfFaGU6pEjz9pA\nYcrYvZTCjFJ2JSYTEeyx3r00mtye09e4T1clx06unJz3mlvKnY56nDRb8dc4\nuFUYjyjkjIsVmHDe0rQuYm5CnOa5IafbirB600XznOcKJ7NhNerlqYFXoU06\n2McRtsa+WxSiZsH7I8QfbKSsnMcVpD4i46TmgLUf2+8Idwn0U0keCVcjREEn\nXDO4HoIUduuwaXndu5WWSSpi3OM+sSfudH7q5RObEuYmWpNTtRthOEigINeP\n6sp+Xe5yXoQ7Op2eOpuMY90hDbCTulpcyUN5UgIhFpMWfT2MzvhnGOkqo+7x\nt12cafTKDeMzZ+/YXHzAZcAp2NJiNFbeNO7fHDeqzXpJQL7vW87yHJvAlc77\nwu+JO5b3L4OgZm0F4j9I3Dt4+fMIx+ULfwJCZvLL0U9ya2WXSRubCNc1RfYX\nA5os\r\n=9smV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.4ccd39bdd.0_1624551245189_0.6024336314237493","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/theme","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5c1d29eaedae2d526ae6eb1537692cb85d14ebd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.17553e9f8.0.tgz","fileCount":42,"integrity":"sha512-j9IkCnbrhqMTY0N6hmVKSbMDufQQjkvSzo2JPSswrR2VqTJnSckCrpIV6W9oSw9105n4m3R1UyoBi95eAVdA+w==","signatures":[{"sig":"MEUCIQCgKvGaHtpzGFQKT3RzjRB+2+pTUwxWZJ0pYp5f20HGNwIgYNu+2o/5PrGSNW7CcTyu4GUNInEyxtfdC9PmRTaNBiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lKACRA9TVsSAnZWagAAoRIP/3XWkv5WxFN8DZT8NmfT\npg1h5wH1/4fSLcb6s66rZ4Whb2s0FakDhJnNEPDQTOrXIKo6F4rPAIBsUqsQ\nTKtUJeJ9ajkHTvp3CUTJavJweBEjYjcl6gE6Ce0WP0mvLbgKH0DLGs2kkTge\n7gpKKlDoci5E+btWePpwPQ9XPvvPJ73ZeFLudJPRYWtxwn+rqPreXOuYGSv8\nNRd2Fofy2u4qS41AEW195CHfYht/rNdB+rVRH9KqlAjPfStpcruIqiuen4y7\nuen/4t3yjXi88J8cnxlASjO43YPfGL419xhv44iPiA4RXXXMck+g4BVsRuGn\nqkKfXpdK+ZArIUI83FMPqcAXWXffEUmoWjajtPC4ghHQEYm3hdp5aS0Q/KTU\n2laVcUuYKIC03Ocs71kbYQ0NXjmSRGa+HdoxMtBD3rWyqWAt9Z8r2lXAxRf/\nM5WYD705oHtfFctpWAqLLh0YFm+UEVbnzi/zcj8jfggAaQ0GlJVnIc9GR8Cl\nEtPazqR3xkexw46clXGbN7Ps0t7Rjs12YrQpiEwbe9OgkKQHsGZm7QEbOrd/\n7Hg7fafqa4KOtVie7aBMz9zvgAHRQqRFvFWXDEv9egf+d3qfNzt7CW/Q37Im\nYSyM/ZBPq0R0XVI2+SZNkIt3AP047TwHaX5L0ESccz1ait5GE6GIAKXYudjd\nVnAu\r\n=h4X/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.17553e9f8.0_1624920703742_0.9883668012982314","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/theme","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6485280d6f5eb230b6728e6c9ca4dfd4d811b48","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.4c80072fd.0.tgz","fileCount":42,"integrity":"sha512-nlgICARZ7S9VLUva2SZGtH9Ln6hN/vTMhnpTSoKVu29xmaebmGOmIQAl9UoUohDdhUNYAc7Mx6SebE5Hz4S2KA==","signatures":[{"sig":"MEUCIG7JEc9tPGi93fIvbUY8PFn0vPiJefUTtTPHo4lkQ7TdAiEA1Z8JH42vs0hkG4fIpvfuNbtwNOjgzdlzVH16Hwkxw0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22kGCRA9TVsSAnZWagAAfmUP/1HgpTEByZ0+Hs5hBNew\nf2V1E/2rI5EiuR2aKt9K8bHOys5SfoBi8PqryggsG4eauTofDoJm3aX5VzbM\nw2fspV4oK9+rZqLgE38Hhi+Auk82tZjGbipZdxY/IxCXpMm9ohgc1xs7neOW\nz7FK9wx+LyRlKNynkefakklzDBfF8JHoFP27f7/CfCxmbNPZyUEz4Sih+TH6\nVV8rCp3fnG6a30dqA8evDvoix4ti5Ydv+zILdR1MryjZ2yB9eQi8fgpN3jQs\nSqwBRCu8SesE1xUd8NcPTPDT52VNFGHldTCJLof15lBl8Ttz7tPrzFAaruuH\nPH+5tHp8wFd6BGsZnO6XazRE2mgyOouiyySmo0WUIIfK9sr2cCZbp4WFSNLS\nTLN1u41/EquLudmuc8pMMzxjJlv4qx8hhxmsf1hEDSMg41sDptHcXOVUOlga\nYKc06C3JQQkW84/DND3BnZmNAMAg4Y1cmBHpu0usaIbgmB15pGb9IiqgEibM\nANFUg/+lfxbTrmOQ4L83FYACz14neinTZDksD5Dyj5JY2vFEaOSgJ+Qno6dm\nSJ6Ml+P5rPNN4IwESTBnUfRWUJVc6j+Ys70AQuaO5hwKVzzJq03p7OPLlGnF\nUFYnLzxz3zk4J8KJpKITVUMrD0CnuXwbhBM0L/wFsoZt7HOwxkj0oG44y9db\n7LTK\r\n=3pCJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.4c80072fd.0_1624992006315_0.7072515776522164","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/theme","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.796811db7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b1138a7b32d65f2650a02fc994a9b88a4beaa7c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.796811db7.0.tgz","fileCount":42,"integrity":"sha512-X3yGy0SJJY8ibqbtAC/x3YP3Teff0gRXvtFwQryUHFsBLVvoqzSkBL0cYnAmKba+hLw428fV4nfCaLrNZMAkNw==","signatures":[{"sig":"MEUCIQC5I8qW4HoTN/KWPaJrIE0kLGvnOlAJYciTGq1HcyeMywIgF0pBSpcwmF+rxA0Rmv0sUGMn7uKian4Y2LSwerGWOpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QYdCRA9TVsSAnZWagAAJoQP+QEHkIDUyZBw32uxZ6gT\nSet5H7gaP5CGmQuDWB9LPvsZXnuiWWRj0PSXDdTHwXDeGHUBeqUXiWf/qfnL\nTssrZw/BC+UQ05Tv+PdXRL46D04FQSEcpv1NQDlJAYj2LlnFLv5OVuw4MpIV\nXhzA4IWthU2rLwxdY4tfv32A9+SHLninpWyI0SO4Q6TagpAwJCZMSALDV5UA\nOYm4Q8Hd2QQRusGTWTTopFCQTnl0dodkzW0rcZQBvuDVBqA5+cM7Rb3u4FYG\nDIFutOaMZAB/9NR4WRG1iPbls6BzlBFOf4Ske5QN4it91tJpiAOLPiKB/eMx\nIu9V/zJtij9gM+vRDPaxrb33ne1wDfxPhyLVMvHHbP8cK3Ru6DotOJh0n90+\nnv1VERLiFfvsoTird2FMnqAM+bTzFpiK4O510zIbmJHOkbwBRFrgclHRV2fR\njQ1yye7Vl4+A4P4ZTKTzjIB21rYC1H6upDqNuDIzwZh+6E1f9bK4zfqPFbs/\nTCC1/7F0528UnXO8JTliDs0NZDlj5pE1BVPb23d+SeDrmhWULd90pMh/tujU\nZvsvyAy1hnXJ4niUGFmUxqzUKWjaG8vcS9o4gy5FrRy5Mg7J0JYVO5DEwH3I\nbE9ik8wSgY68mlaBlG8h4FkkpFwxmHLMz3Y31H/G/aPSRAS505QGM0P/3R9L\nL11R\r\n=k9zm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.796811db7.0_1625097757207_0.5101950424128365","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/theme","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec745d002199ea920531c295f88f680f53e36323","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.70e1efdca.0.tgz","fileCount":42,"integrity":"sha512-XTyeLTleVvjeG2RjbyXdwUkfREXNUvYdIJegVWAr2HK/OkNdKAzBDqj84k3Ju8rT7n3FUZkCpL2OaMriLFIxLw==","signatures":[{"sig":"MEYCIQCLZzwGL/KsnngN6kuH1cSc3kUs4rJw+iPh2Xp4ooUUkQIhAJWZmXMTg5jqsKXkm6Dy0M9GgTW+EcGx7HTO2RUMk1RK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fXlCRA9TVsSAnZWagAAfnkP/1uco0HAqkPBk7rj50qS\nMbCbvUIxJO3df/Wba+DK9aygrrtXB9K2UxcErnyY8eLF0QdzKQ6oWo2YYTy+\nzJemYrOB3xUMMmaV4iHG8f8J4LkZk5KGoKLrdBF3hc+6LTkuEj5/o9El18+h\nFaXg4OZedc5RujzmXGWfYRLTUDDWM3sz9/aDos9jo0yhePimEpEThY8xipS6\no6DPmELGJl46uBpkx0SE7J525jrnatmm6/XLaEKBsxaRaOa5QLgkxI2Pex/H\nbtFuqGHAYTz5IaFZka7P0efUxWhNkVWYDQ6vBHsQLUQVXksxllr/JX28JQ4Y\nnpHm0dRjjct/xdIo4voAuhfAlF3wjGBfAP6YeDFBrfqTU0WZiy9uAFsuS5FD\n2435qXx0Z05wDriL6qDrTeg/4CAVBzdR4feZkoeED34PzB72JzJfWgEQvqQc\n0b/fu3EuZVISk8k92kezn85elwbphEOgEHmHJAo9rZALs+y8G02na+2o7dOW\nW0yylw8+QaYXJI9iib8peQzvmTNRZ/jvaOYFW2pL9+ypL0bNe4LJyrjcUdi4\niKmHV0jwkK5z3VB9kPA2hDyil1FPAZwY1EuuFRWHUWts5CW2EqDdUJq463p7\n5tENHhc+RVDSdPIr6zIR4AH1gOG1Ot5SVtl5UMwey1d6MFGY68In7suSywM9\nfOUT\r\n=EBfk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.70e1efdca.0_1625159141126_0.9619903691367493","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/theme","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.435866d32.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f72b1cd9e97693f302b321dd7a8ee670175d88a0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.435866d32.0.tgz","fileCount":42,"integrity":"sha512-XFmPJmDftIVulZ14Jw3FT+swiDMu56CrSwQumaUx8oZQZKkf/ElkjSyi+e0LArak69YyBJU04+Lp9xOX85yVnQ==","signatures":[{"sig":"MEUCIDyxrMn7CBxwpa21OrXI3A6O9DKoCto/rOynpMNdSOT7AiEAtPLxA/wwtnN3Shtx8UG/B/hMqcsGpiantSJBT6a42F8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31jtCRA9TVsSAnZWagAA4GsP/2oVJwECixMBsPt9EQq1\n+DGmybt+RBPdoMwck5Ax2UQcKrLoDC8Wko38yLhctcaSpng062AjSV0gAGR5\nKTwgS1hMPprzMZtWIwEcrsOLDWmD1QopEcIFB4SJ70gEFmg0mWmDc0oqOZ7E\ny9iGa1guFylzW9KRf/u3tNDrYZx9i7kuS0TXgRn3Menux4DUEC0phA7ezOsm\n2AIQqXFNfBNfQ5ea7PvaUg8MISarXSLqfhQkPc9MXvPYZYNPdObBSjRcI/IP\nmBA7QWSEnnePrUl2tMZUliByjPOLrnkJ87cL2hTekFoJIyNkahKWAQI+ghip\n5dxF0sGoo9+22MlDMAsw7aAFN0HwRj0YjeH9/fmheX8wJfsnJyGSr0HSM4I5\nkNKuu2lowFcMkaE3jngyFmH5Deq03YDMhRGDixr93TqRdXoa96chVV4kRg05\noyVqJE36kuWp+fquDxbph26sbD1XDNQRauq4hGEcUpUISIPU5jnEtqdqH/qF\nZ1/7j7H4sdEUtMEQoZmnH0F+FZTE7iwTdrpI58B3R505d2g7NCBwTU3StgfZ\nt7nSkMJFseeTmy5MaNXSThmuodYWnTB5qimxhGL/BsLEHoYDmzzPvDriKJeg\n+2WxXdkFO06ARh875Keo9MzS95RpVsmVW+J0i19ByLeGIRy9a+m9C/d+w1ih\nMFQQ\r\n=DAX4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.435866d32.0_1625250029055_0.20116949946966045","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/theme","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f433edeaecf4fa0f87e5dbaa9aab319c6e20c67","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":42,"integrity":"sha512-0xKKC/Cdek23UfPnbazVyHnmrx0h6rmz2EQLVWYW3dHzFaj8haSvZlDfoaqueAdKMPOeeWP02hk+yRm9uNo/Ew==","signatures":[{"sig":"MEUCIQDe7NOcrCxAH+sk7etf71NI2aRQtUPM0UUtwxfIg/9HggIgOcxfeM2QAG6xfpwqUIkC9fWxKLloMVH2cv+ISA7Z4AA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36hVCRA9TVsSAnZWagAAVnAP/jv6Jop0bh/efF0d3tPm\nvebj2I8fATjaTDGr3tWdGUhXy9t9ETEeqouqIQym+F5TfOgJ0V1XGvx2hgTZ\nRdv1Ao/XvLJegjidkIbIj+1nSILFK/oJZVrxisLWFrxKDTT7WcPNg6cAXxhc\nzzk5TG1L2eYcu2SJUBZfkER16074Vlfls4PRWKhJgcW9Tl8j+QrioI22iPCa\nVhzU0cPz7eon6zXrDH7h1ZT7QM2G6hK0/EUEu9uHYR8eww7aIumdA/I0pEem\n0crpjPYgqjwbJTeGtVGZiyoHFH1wGgxbE8oIq5pffnBQ0E41lNIu3gzgQ2pc\nV7xLeVjd9nlVwdzyjsabXSEuqEFoILTfVrHU4U6GohA5HG/7am6uy1fcTMgh\n+MVC9EYCRJBpRFp4qC4jtGcVgISDyT24qdc8R6+tIE6L3UGv+wAFKQmh7GEk\nlczzApuLE4cnh9pIUNo7XCZ/IxDRZY2egNJLerwsEbjttQjRavIYjyrNxNnO\nA1bvKc6NXCjMcIr31qsKoYZVa5axds3gC65RvvQ9gKFoe9GMg3dpTeujt03e\nyeHs0nBuyqCMKk4GtYyiDw08l8odGlSDQjxYfdfufA+2d+ClYz/+hkJZzQIQ\nFVWp6lAyDYPkW2f13FvKN/pSx2aA5WaSulOhDwe3lniz8QJnDWkb14uah3L9\nHglY\r\n=Zhdu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.d0f9f3f2e.0_1625270356709_0.02305808308827295","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/theme","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.adeac0549.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"beddc8e138b6edb3f51b58c7fa5d2bddf239831d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.adeac0549.0.tgz","fileCount":42,"integrity":"sha512-qNZheEk3/XuwgLa8X/cMr9y2sFq/xOKGc1R9BkXttmEeHgl4CTJ3e1EafEmddqYYo/1BgAxlTgMMKCGn2tZ8Yw==","signatures":[{"sig":"MEUCIFnNyitw5cAK1khY39EJLOtvO1zUOwzXmTMsdW50M9+vAiEA6RJ/HqVKhdz9Xocex+kJpB5BHwLSKSwPPrL0oKSXp/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xTqCRA9TVsSAnZWagAAhuwP/RgipmzejicgMlO23VbK\nHT1d9Rlvuno2YHo6lYKNzQ5k2bfKkpb1+ztktoVVGLeOZHOoSOPJWBitR7k+\nvwiCGO7neQeAg/GFdcRUNnI6o6um+tqT/mjBIB7t4qeE4JXMivs3gHFPibi9\nLA9OLzGXALjf8cSgZkL4QpyvLFMSSfuWVZ6seTYVSi/LURHxOYpYUDel1L5+\nWY+Nkvv16mkz1myQKxyexnAeaZF2PH+NRaWi+rfdmX3pwW8ZI34A/4+INnMx\ni2mhNra2fKB4R59Ap0OxU5x1+Wl9lQBmg8Db7FDbr2S7vMdrgjUAWL//xAgj\n2wP6ICTuag2VYVR65wbJkx5ctkpXqa6RlIMHP1nc5MG1ofrnZ2tXcN/QDMEm\nndrvp3WcGnS25ut3CrS1/S9ouD0UMhpOuUHZZeaQKhF7xYu1faGirFliFTU2\nHpXhPZg1RmI9JnKly1UBNhQQUGVfi77GLXlUqUwWX9zhwmM+Az1/aGCcOu/5\nYLo2pULxqeXq+pWjQs+npGnks+CIs1i0hI9ayD/MTaPVZ7rRsrIgB4y8v1/B\n9TGk6CG3d+ZwT/j+vbwjS0LOXPkLd/LgH8Nt9AmSrGeTysW+FbZEksd/IDip\nxge3Ha6kBaj2QzRN7T/sgupzOjpRAnSzaQn+zR4BF5WCnE4qPapdq8So2dnF\no/+I\r\n=yX2f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.adeac0549.0_1625756905924_0.09555463255162366","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/theme","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.068fd5028.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5558d837ef86c85f9bfa0a0b11c6ccf1b49f1d61","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.068fd5028.0.tgz","fileCount":42,"integrity":"sha512-TlgusFPrj6WnwKgQzGjoMMAVAv0+HCRuPF4BtIIzfbZQBSTNm5C+mgXjOeFV4nUPuqMPB+ql6cADsxSXLZiMeA==","signatures":[{"sig":"MEYCIQCfFlrhDe0fHUc7EwoRkGgXxySgX8X6tgETSIH5tbeHlgIhAO77osJbu9DcKPynnhK5wczdLOs7ZEC/S6EHFLUwEtJZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50vZCRA9TVsSAnZWagAAN4UP/3rR91KaIidxYIWXlOUh\ndhXT/osLXP+XtmMcMwNdSFjVxTAfWSjgku+cEk1UP23kiY+WxQnmOr0QywxU\nQi8GMVirY0Q+EAgGTDbuFsLSFMBXdrn6D8obFf3rBAgujamq7Plw72uMHBzU\n128pm6Ylazdp9cG82wEH2cj2uAov0QoZvpXU+MZlMAPIbjFzCqCLsV6RMMfB\nOJMhGUbANO3eGvprcY7nqrxHk/ZstfZAxqw8GIqJpwICXnLZZ4Fj82qKRltR\nny5N7iQK6lyUfOct4uxe9zdGOIR7pJURRCQ9y5eWNh6iDW0WgK19uNCMo1mO\nDBKaimms7tLzs1HRrkcbvBzt51OWkVSSVXES3saQzYyu6sqJXhe+euNDseQy\n6Q7+TuT4kcVSn2PcFmlvtQB9YnuuV0l9z7TN95u+F9ESKZWuye6BTCqwQFsR\n9juKYXgBk5l2J7Wo5mM7Nvm1spc2m5cTCDsM7qNdG9quaoubXa3DSn4J7gvI\nkJmbGOdvHe6iteaBgvDlQ679mQj/rkISX72FSSw9/DyH3o3Lu1OoT4uBfb7I\nnGnhYsALCPg8hWS61eNAEHuzsI2tWC2wvwmKE97whTVSHV8ZB2on7RVEMmUU\ngxY/n9aDlZpXZur50V1XcvQkjfN6JCh8UfVVZE10cWVpjNlxXEZT+655A5Xa\ntlqT\r\n=vUr/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.068fd5028.0_1625770969061_0.8200546181628392","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/theme","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e98d1e2da99d983c8ebdb1b8e31492df01c2b119","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.5dfec7a14.0.tgz","fileCount":42,"integrity":"sha512-jMwFRbCY16XWmgZZgUAG4kVGyLXg+WCZv5Hjg8jZKyTdaZE+/dNF7p7vHHm7a5WxuY/Gfpo6wx+EBccInKnsWA==","signatures":[{"sig":"MEUCIQCboiiJ71p3ZWLtQY+WrpvgCZFmqWC6LjZijqQJcoPlPQIgKVR08JX4EJPNazHqa7e9UumdX5LtaztkTH6+LSAZn8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KARCRA9TVsSAnZWagAA+DgP/Apm/7Iqlsh+auskGlFC\nCfGh2sG/vnntsv9yXKsIPzaI2u37Be4dg+K7NFDKpOK8TNEBSGzclYo6FZta\nN9PpaBdIEM+xUawNBvhfjVdDnBz/OFBCtuEBpu1wnxppC7FXRH6lJvnhU8u6\nOUFcP9/gs1zPVPOa5F5aGIq8z93KldrUzh8ePlDlCwTWH93qzgRu83w91xGX\n6Vh3BlMujOuTEsPwgOJlQd3z4RCLnYOTn4Voj0kPT8f3U0yfBDBfaoawSh0G\nUestxLn0kHHdfZCtyXCkJmn36jkYNo6zrbs6NI3Ftgr9V7tKcAt6TPSjCEpR\nRVaoHGN7eNAOEucE+iTSf1DFGmvPbukLRf28qEUOFRK9yacpwXYeaz/ngL2q\nKlmTi96GZbA58+ALCw6ZUssYw2f4htnK3UJqvqDVpAGC6+dp6SUGhWORSaql\n9GYQLSniKxrZmnyWca60j914kb1DYELJgDtHA51LtmRIqgZBROBZ+9zEcLKo\n2q9nJcOQmGs0g4lI2kl+Kjvw4INU73ColVgHFaSfm2k9pBzlh0IIv6Io2AwQ\nSGtc3uH2ZrLt1THacfq7N0E3Kn9q8WzCM3SjAeFGnUrVRp+pImzEtTJZyVAy\nmwi1SNDJliWg9uBgVxv6+iTn5gR9DauU9vqG9ygOtV/UQjgYF+rQY8xv2j/z\nMoYt\r\n=z7C8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.5dfec7a14.0_1626120208657_0.8929571271385484","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/theme","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.07a73750c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"587e284d986e5747341aea7c33ed5af3ef4ce71b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.07a73750c.0.tgz","fileCount":42,"integrity":"sha512-osUtcOZid3A8h/qGAkgJnXEhOFfsd82L3o351UN+bzoJNi+RTuGohgjCiXe/KK4PlFiOa00b1tG5U2XE59Wh3Q==","signatures":[{"sig":"MEUCIQDucIt85VcNJk+izaOTSKAXVkJIFWwJUe3Pye6cMHPB+AIgfp68Ceulb7lxSgZgKg5mFuX4SlrNV9PwP/bre8A+f/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KUJCRA9TVsSAnZWagAAQi8P+wRiueFvWRPsu2EjoIXg\n9CrTrFrAst2VV38fkpPMO4ncJPz48YgUPBgo1vUhOkBu/U1LXriEmgb06Oqp\nLZtIFQNJQKV849j4hhyJFmC3MiYVX6czZjMpSDEm0IXa6xzf9hxLsqx+UwgZ\npXpcr7OK0AVIJx/8uxjSJZlvj4sOndnVSVbke8grE/5ZN+jHYSNlc5MVm/jN\nHUiZMStigJ4DHqKJclihEOOOO9B5aNd8mj7WqXv3HKaGc/SDd+kG60dLbRgt\nGjjy8iUJ2WfK8lrSwF7ihFZrr7E+ECbwSVhrHc854HVZHaEavYrhDfT+0OSY\nS9Az/aJd0+uKhR/s8tpN/RCZ/UBIFgRzRmr5IcxZEoBMAksSTmFpqRkKdAMM\nR0VscXf7zz0xniPAZaUko3XHg4jQvcuVLIkKPAI4iJFVQRu5H9XOAeQlyyaK\nVb6pnY25dGkVAhlHg3o5s49K+LeDA+Zm5VVRTiVbXNLAFFWtLynNX/e/RHac\nVU2WKWAC0Cpz67yad99eV/YsOhVOQs9UWkjmLsMPjhTbfNN2Mzado6znKZ8n\nfP2jjEFienH1U50yEcQeFrQ8LArZHqZfDfO27d/AZevHovXEm4UT7mjP+EvZ\nTlxz3/4G3mwGnc0tM+67HRb8EYeq8GqTb9V9RDweBaAfsG/2PFQmpqjXLfHv\nED+8\r\n=VYz8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.07a73750c.0_1626121480730_0.25907501674751043","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/theme","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28d8d179f818328b69139b3bf72bf31f74c6fd3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":42,"integrity":"sha512-5anhbZ9WZnOKvJAsL2UcITRhaW9JCObHTvi53qjc0Wz0/cHn5ZAZHJCa0kP7LYiGsMzNOBZiUA/88RkKTVAYjA==","signatures":[{"sig":"MEQCIGSxo498DZnVXiNveaNdtot8ET5EhbUfciN7rhb5ev+vAiBvN3neS1q7tCRGMfGxaL6E3Qr0enLPZaVFoyBw7JKCjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PFiCRA9TVsSAnZWagAA8aoP+wWh0QXYTffuHh8bWNUJ\n/QdkC4i/ua3UVexwOwbgZyRim/xkoZAoRAl41iJKZSQUqvZnPDoFVZ08z+F4\nkZaX0BvPQTblVZC9qzaKWMVJK/cSWhNDWnlcyv3ZmOdXsBPHd9gLM9N0NrvY\nL8JrrZeupH0vWzyHAGAek/pGAKcLe0jyM8Xtu4h3HkF1kWeq1udQ1VZ6dqow\n6BKIqGqPhVwHC1Ui2fT6606vE+w+TxUSfkXQov21VJASgpIQSl+xHDaMj8VC\nVAqe1aoZvHQ9vwNUBX80p/zkGVzh/3wfvNx1qmOXPRpJw5i6goQu2NlSDhVP\nNL9xjQ+O6SJp1u5VoBkRAMFXbAt8FFwFV9oRU7Uv4xi052g2BnSuiN5dRaTh\nZ7/bnD7M6nsPdpJ3bKmPSMq1lVNcjkqXW2+MRscwiNmxAXRh54JjZqz++oZz\nm6VXMsaa3Mmg4z+TIUZOfS7aj7FU7inMLvk27MZkFc30Uwr1FLGIFnPb1S47\nVg3Q/O25LZ+1m4Q0hL7Ms84ene1gVhI/vebRDe+XrMHGxBMx776bo4N7tZen\nVQze0ScYwdNDF4beB8TLZpnVMbfSCbBM1Ie7v+4snElGqPGGfR4si5Tk/ltz\nmz+ivDhFQ040UEtCoM34aoaLFkjCDwKTj1oovGVPSVDLb+6PdqxFOP9pbqdH\n53ey\r\n=wEKC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.3e4c6dca1.0_1626141026228_0.7471109233909949","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/theme","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c623909bbdf8395e69df1324c2ae394f7882918d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.ea77795b1.0.tgz","fileCount":42,"integrity":"sha512-amYQXliPwDAo3Wh4pqMIPP0ecxQ1F7HY5NfetQG068G4h6Hiuc2iW5XkHmz3JRnAwl4XB2Zltf7UmNZEWffctg==","signatures":[{"sig":"MEUCIQDl7PZldP9AqRz8IPyTIALQEEX2WzaXHY+7NJhEnQwwNgIgecz9LlpRITGodxo2PTQlsqQFWnmtaxJxyWgIjYZPIa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bXMCRA9TVsSAnZWagAAAbMP/1s7E8Yilp9XOYnAyyCc\nbWPxHlNWs+Od3XLbnOCSTI660Y3MEbL7zeY5J1VZRPcM4aPFpM0EhQd7jIvD\nmk+p59XdQ1Fb6heA7M4Ipw/NmiYYHQydS4Zo1wa73+TKSXbV97b6HYIRPerq\nTlVB9H/Xsytifpzrlt20F16+detKKNF5qKyxFaWQkwOjLFBQT2W+HBfVmeqO\nBI5XiUXZsa46+6lhX92vgB8ree/jSMYbuYxTRO65x07QIDeO6d6t34eMOUdJ\nODCHX6EYBd4DITFoid1Ci9hrEPUdRGq/hpS7ohOSF6AnlFRvtZUmYfhrlTzI\nifUxso+K1ji05aiMCbPnDgWFOKPLnvOqGqUYOKHs1JT5BQE5voTLF1D29XXS\nc/siy/O6HCdRhhheZNNa0hkkq0BvCm5+ZvEQ51Go9Ag9umNy8zGMoa23DJCY\n32BLgkBvMmyoB8eygkrO4vlvRgLNOyKPx6XSFSaii7TiSzXGqNCNmudMVvlM\nwne7QNGqQQgY795T6/S4+17o/UaAoZHtBGl8cxZx/PEqUdXgrAC6/bVk4AdE\ne7XY4CIfRf60wgG/SZ7D1iByMJBPHmxUdfUjrPyNWZy5JHdbTXPfICAbJhBx\nTXFNULoay+6QYEDQcdPmAuNo9aTYkdtABgqpqLUl6ZE2wbUhUEF22J58lHQv\nRZzS\r\n=DIje\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.ea77795b1.0_1626191307923_0.004907752779730767","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/theme","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.15a179fad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f3d13011143cf0ae948c5ac9d19af0ce5cb16ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.15a179fad.0.tgz","fileCount":42,"integrity":"sha512-toVcrZFY/Iqz3N9GWfSTK8BwmWoOua4JFmYBdrHOPtQRJmL4ozINNKyiEA/OwLlifmcpMEKgXu7zL5de1gLu0A==","signatures":[{"sig":"MEUCIBGkNBiyJWEIiymWi410wMz0bspPbD6nIjZLhUtnL39LAiEAvl1WMVR1HGdlkvk2d6IIVfqTGbHX/EoauZyJ0ApKPuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7daYCRA9TVsSAnZWagAAtDMP/3NR04UH1G2y8uGIUW6v\nKzodHsif2whoM0K4b5mtiTDF3j9YJ6Fx6J5FGA6Oh+K+y23peoo3jnpyFXH6\n+r66vWROdCIH/ZeQiLA72ZwIUPuHg0oWbusf1S2e2FT9Z08lhIA9A7hLK0Dv\nCPAw9E4CaiUPgGCPwQ1s+5WEE+YnE/yRUpA4Pyv3PcA7Ly1JlnNKe5wL7y03\nTSQyS+xe4yMf5A2rioeddCECrL2BfvDf0V/JlDFODO9/Pxt9xxItZv1KsqcU\n/e6Hjd++OmYr+TkvPCri81jeR+RUmB/SQiLfoihxEvV4i4VyE23U2EC1dOyV\nRP0XicP2cqfN5K42bgNfeIZdIqQlmCoUiSHIKJBRulfY9NZ6vZnkyxWMZmjD\nxxyc7BtShdnbSLuctXG6nAJDNoLWqpfqz5MfLlu9Kj3SUwY3fiBKzdAO0/x4\nDCbKPqmGEkWNTiU7PdBC8O6j3SCQrgKU6YQOlwF/a+svYOd+VExDR283w9PR\n//3rnGHPai0Ol4GiGemAlQvGv5gH0PKrNY04PF0JYxP/LDTDglCib+IUcBuA\nbrHdK1bCaL64rnw+e0lp9D/2wv/LF4Qv/q1AmX5sRWTM+35fYUAZEgXROGAh\nChlX/HpoTv88Mw+bb7EbAcfuYt7K1aBzua9VOGm2DkTMFqKG1Cg8h77N6awr\n7zpG\r\n=oMwh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.15a179fad.0_1626199703901_0.2509694580795774","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/theme","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a45641c3e8680ee67c6102e92931a7a4aabfb37","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.c73142a1b.0.tgz","fileCount":42,"integrity":"sha512-0CUVBfM8mAz4dT5TKCwkN8778xJHUAPAPd63lGqXdBWq6hD8UcCv9tOwQvPHmk5TnT0OPkMcJyH3ttppLzspmA==","signatures":[{"sig":"MEUCIQDuK9k3/6yLRYN38KbY7u7Eb5bzPxbb/oCrcRX3kbDacgIgSA+aZKpyhjw15Sh0PH+OFnc1QJpr6v7FFrnswL3/smE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d7QCRA9TVsSAnZWagAAdOIP/3bZMlVqUu5KLCmIm7Kk\nCP6f5j3dBQwVUqRqA09364IKfLFd7edg/3JuUG8Xnj3w5VvepZ7Ev66YNvke\nJxa620duTdBYZ0LmHXIWy+cc0ljE9BUZYE61NVIMWmhRXRic37pvVWclzymP\npTqfeMbnJCztGwD8G4g7oVk3sfhp1ISJp1POISs7g6O2SLHc06VgUFKj8ooQ\nv9YQLVCos6frPV4RHy/dd4wrFrdK3KfXtpA9vUs9MQOPgiVQUm+Uqq6ASERU\nrFl97d/meWyw31dPpb1pP+yVOodhLMehuP187EqLGWZxhb/+P11Q8TX6nloA\nDeClBx7H3rWv3Et8Vt/bJ1qEE2K2I9Pz9WIYTcOpTFgf5BO2tm65hjGGhk6s\nlbRUaAKTBndt8MQHqz+NUO86Sn1Pva80+ZWe6O0TKkMPBsygR/ipbV551eT+\nDIB2VKx5pmzJuXdsHUHTUECdb49sI85DpT+xOUGRlxGiM8EzRoTWoV/WKRBw\n75eOBbInhS4iqJ7x1ncFT2jCS4KTTLeTdH2X50fDLyXb6ii/S10F2OJZydqo\ncyf5NujGV0/Gul7Z+9NPM7tjpDfJ44+hdxaUsVkUXyYK1VOOZ6AxObZThSvo\nbmxpzMM1w68Ot5rw2kyyTC9HbP0OQ54fD6YP/3beMSUj7cRLfs/Mir37RmHJ\n+WPl\r\n=eTjB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.c73142a1b.0_1626201808361_0.8514177118121504","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/theme","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.d923db73a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40dc27677166611d94f0ad5b98006d43a43ec307","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.d923db73a.0.tgz","fileCount":42,"integrity":"sha512-M8xI9DfQUxzUtvKLToZovy3OooqxUMiYyFtu3SYWFkLBiDmJmjexsX8303JgHABUguadZ8gSmHErhq3x0mNNtQ==","signatures":[{"sig":"MEYCIQDs6+p7poIy2yXtkEiii+cNjx74qekYPI4OPF63NNUr6wIhAMTUmmiVVxR7Shz35FR7TrR2gDvT1SaWpPfKKXjLEgYv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f03CRA9TVsSAnZWagAAIncP/0rsgzex4+375cJK2MBW\n4qChxoXaX14r4Xi0GRo+RjsFd9CP933uVsSysmMWHJRZ5o18u+6RHt5F+uPx\ncy9/T1fpkrbdeEHaPFO1R47ryiGRMtFLZqoGOf9AUaXfOWRP1TOFwtQ6rsaK\nf9YBQ1yDLqK3SkHKdo2UHgObyHLRZLvcTdi9C+IQIF1nyz9p19H7dmhSVNmz\nxUoDc87JOl/i3sYBC9h+YDY+MxtUyNAKlQOdm+j+dOIg9OwEBxWasR14wenk\nrvL56ReLBFNWJ3qk6nHxnPm4P082VRMwHdt/cnH7Zv/jKsprf3H04lvJ0jGl\nuUxHWFryTwth4vTjmDTZ0ErVeVpB5dELXVYTa/+w2OnLQaJu3jQWfESO/RjJ\nZ6iaUH0E21xanz1jvWK62qAmcPrXpM12ZozuxEScSjssCIy1x4RCDunhrlT0\nnRIwvq23Zn76kbVba7elyWG/NIsLwMPRZd1mJmrJjVIflYR6AROX+MKeVzhr\nEzD5O/C0awQSSfv0IyicHzpVM0nSjqMwvkKqxqZ+hEGXabzgF7yDGPA5o99E\n4d4jF5oLGgVQV9bLhGTzw5VlYFB5JcS3vjwgGVn8aZ1lvm3TWOg72xfdg47S\nY/5iK8Xt/eix0SMAZD20QFhzhnftArdYxW9HDPfSij+4l3+pQL1WW5W+B0yv\nIFYD\r\n=JXYg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.d923db73a.0_1626209591208_0.15478120909549875","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/theme","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a99ff4e33ffb72ec1ac616de31533da02881d278","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.22d29cbb4.0.tgz","fileCount":42,"integrity":"sha512-r4xYCgc+CrbvDxCINVqXwAFWQ1WgV3s2+bUse/2iw53YqyemhhtzFjfp+DXLdC4zJSOuObWC45eaDKeseLMGMw==","signatures":[{"sig":"MEYCIQCcrySKnjBQG95CRZrF4qWRy+zxkOcg2oyBR6SMpuMoeAIhAMAr3h8sVJHp3vPtXYWZmocknPIa4M7Ji5/C4DymbOsr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hiGCRA9TVsSAnZWagAAVbcQAI4LOJkaim80VzGXG/vq\nCwu+h31vlDfTcZElTY+B8iDMfwxZOtmthp5hSs2ZspjAAqWb3RwCr6GIQgXE\nztiXQvric3PTLhynB0/dYiy7pbw8OqNY2wRjSDSnE8vcl4GSQQZdJCblz7GE\nhvkn3GmC7cvaVxoqQ5F/adBpzRdMlrQqIE5PO+2Z66LL+OVYcJ9EV7AbuJEB\ngzEDfF1mGjlJExkokbDHvV9SwTgWZ7WPpiLZYObZdgZgilHj4QsxzQamnuCz\nqDqzpDCyp5gIDi7a05AJsFeK/qaZQNZxTmsbClmeoKSOh12BwQG57GBJiRgI\nPg2QFVShjzvrVnLqjqHXLUwQ1VteqSCGlBXY/4tSOJ+A2jmmxbm2E185DYiy\n9Zzg4nuHzdZJ08BiKUDYRC8lFI17T5YT8teAFqDj8JctIlSAX42dELPmm8qG\nZktdGOCF3gaY/+8Q8K7h5z+h1uN0/jpxYCp8KkP1PECBhHgj9GCbIcg+GkhI\ncqLpgSghSwPgWX5qbDFYwetkXRfuZncebnqBs3RmvhK6IV9vS0AGrr4l8Q3y\ns+dTI77k6XwJShua4o3nBCZ8MLkCR03SPmV71iNqwI04W/61v7/OzFT+iBFK\nlLFisIIAUXFrz5Tv8tJ4qTpI1JpQPL2xEW4cQ6agr1sTTg68QNcyqsO5Jt8L\n4hRD\r\n=V8BY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.22d29cbb4.0_1626216581763_0.2639481679402622","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/theme","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.2749604bc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"121d554483cea19ee857f53733f0c8a866b3875b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.2749604bc.0.tgz","fileCount":42,"integrity":"sha512-pBob2RNyUViMuuq/F72N7sPYKZTwKqCEv/P8fZv9IDVEoAwKDUA073Zez1Dcta9mHzRFDpXFgT1hzxaOtbzfsg==","signatures":[{"sig":"MEUCIQC2zqMf7LdUyY2ELDe+GbCAf7cRqLyXv4CxJJ4Zv35npwIgFeeYVcLtrGv4wAm0j4+ULqTSno3EhE8MTEoodIDDTEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w8MCRA9TVsSAnZWagAADsEP/0n5lWXXCvAPxH2cIQOj\nlQg0Y9wns2ehBk5mYs1Ixxdpq97h/h4gIsT81XYFTzZu+UsEYjiiCJ39FrTX\nk1ulSsU8miAbMRa9OxSydhdUSmI9MRWS5zoqfh0JjA5ujNbELhszh+HbIYuD\n8/mqh4CaRv98Mu4iu7K8yULcn3AV3oZ5fnzhUY3OhQJkHSSr3Hm9kmOvvZ9L\n563MuUjSwa52pZa8EdY81uhwWl5uQU2jJv7iK5m4AYC14uK6bRGAlWJ4rj3j\nPh4wrQfp6KIj/eI+Mxw9XG6OhSc/bLqNbD/vSn6S2+voi+qn8Y+d9IhGHqtD\nPr3WMCaLTRfJJDHs37E/3EmgCGpqmSTTrA745wxRX2qAFJfKJLuTyPkMMkIA\n/9MVbBjlwuRhwqieAz/MvBoNLi90OjSn0LaPxql0ZjPmjnb4I942WZRopn04\nSYOusl/V3G5Rt8k9SonOKBu48sZqdFsrVXFpE8hjWmwcMLv578w83ZD+da6c\ngNkOeCHe20EDSwfM0xp89zD1C5YBa7E6jVLzLwvUu8hdzG6Nnqihx9+IwbCw\nD84xUcnD2R9QI++Monl1xVv7jF300wLBiPGQ0Wc6gVNXozuL2j4Vtrpci1oI\nCe0OpqlfKvLqds4s53AyBW7ffK2VBDipJedCh/hTgVNm4Rd/jDi8JjTwKZzi\nFSna\r\n=STs3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.2749604bc.0_1626279691608_0.4626259506807602","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/theme","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f898b0ba756c183219750776b3e13b91e5ed1de8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.e1703bed9.0.tgz","fileCount":42,"integrity":"sha512-05+5+3tpxcUAnUAYC3yrDrxPzh7WcjIyrd5lbaMY3PhXUcxPw86ADZ34U5Ldz6y+p4xtIg434lI4+KhZCgwdcw==","signatures":[{"sig":"MEQCID62YCIf21SrF/U3/BDlNr5n89rA/nmawOFx+/o34sojAiA+qHDfXZD49O6fW9BKCk1T4KAhjFsWpRemxvKQS5Z5ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71tlCRA9TVsSAnZWagAApA8P/Rwm7Ol37KfFAwfulQeW\nAEBVTVLDjXP7royfDggCQwPQMWETQ1m276PZPG9qsZzW6LIBRShdLdDrd11+\nUxO9qEJCy/4qG9dQlWqwiDQLXonDwuMn35caKPXlZmqzTyRRXK4WqpyayLbI\nVemuN4HXeWANsi2WLdhju2hRR0kgl86jAjodHVRGWHhvzor/H2N6kXurrPh8\nTSiLZ38TDqIC9DVVtYUb25AmMY8AjejnPVn4anC6Y6kEEm/HVXl9ixFChseI\n7q8sPCujIO1ONE6s4lVobh5PCuMHwVhrFcEB/GoeiwapZpYpeRJGit4HV2m+\nAE51DHxiYsHTaxoxQRMHAMq81FbXEp7lmpWoBgAPYwlDGG57l4J4CwTyjYrI\nAzrHqWhDqmIcagdpDVc/2nUMBVEh7LtZHw0y0kuWaZTVI2yQZnvmcYt60o/3\nT40Vjewh7FA+saALaiy+fo6dGHRmZsKrh+P4snHMO46qApzlO4uRYrp1jqIx\nHe7l2iuQ3WoGL8cWSz4BWbXY34WXOMVu8BNMhs7bvUPB8WCdBmUG1ZaF5aEB\nA8djuah+NrQ6LXeYO3RdSM1P4UaJwvPlprliQyvjasrrfaL4NblTswBUKnOI\n7LFUMxgAhs4ydzmAb2kDHA02kaKtZ6yEyQC+xfWmGBB2JoqP0ugjtKZUnofG\n9yIb\r\n=iY3v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.e1703bed9.0_1626299236786_0.10123811998113297","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/theme","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1c21b8a6d1eead165e7b37d07052b7835e6d265","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.de48eff0d.0.tgz","fileCount":42,"integrity":"sha512-wHJM5C990mbXaypXh/L42K45ZHK22KBROpdOtsjmKMLWnUkRoDpbtyQ+zMikF1vQNRDdUwYRN7/FodEDm6HDIA==","signatures":[{"sig":"MEUCIHZViRAc1BYu/D80ABcQD369zpnua65l+2FOIitNXJGCAiEAjWtVqbfjH6eUkbd1DEWV8cZeP89CZJMk4TnXdsG/CbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GtICRA9TVsSAnZWagAA86cP/0OOm3ezUlyA11nyfVdh\n7etRYiQRffeiY4FaFfeGCuG/GAErSmysCkpue/RLojnIUOgNkIJHyP/o8KVx\nA/A1+O/6IMqiVltE9ddEfSjCboLxKHwPThgZ17KnN9EypwZ+UsKw1m5F8YmH\nOvpHzyQZP/7cm2137hI/ARpdc08glqNgO8pk9VD4Po9LhJXKAnPqbrw3ISVX\nA8En3APfD+ZpaKb+yKzHpqk2camNdb2VrZ9ZsLCCJWTDLssGccaekQz4Uwnm\na/GnS03BCb54vuGoBNa62yZFtJPHWtNo44sK1TK6Citteo7PqY4I1d4EfAw3\ne4o8c5SLgCZbMNQekBu0Y1zG+X4q4bW7ya+ZlyLf6HA7xWJRDT5211gB4GFZ\noepMrFTQJlghsIJB4fvgqBjZ4FNZFyXgCs6bcF6k/dnJ3StniRM5kxFV2Enu\nDpLYYTbBbLsfElxU33zXvSD0In+G6JvUi9QHdFk3pSJJxmf1nqvGQRvKNBUS\nMs4ep0aOOvoq3r8fXRsKr8NxlC1qzfyoVGXmz9XQEBF++qU6F4Lk8vuPbCyn\n2WkcQguu+UsdMhO+kFxRN05QR8aBvaBQpG3fHU3ewyp0ksXgpdYRVumZFDGl\nKs/bh8T213yv4DpFR5GoKu90AIAYpaEmAmE7cJWoD1pLhA5zskMxXQMwLdd9\nSkUC\r\n=2ZtH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.de48eff0d.0_1626368840108_0.2343268414109445","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/theme","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac5e3116ca82a5f62213bd0e138d3b295d9e9285","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.4f060adc5.0.tgz","fileCount":42,"integrity":"sha512-/Xu5XiUkCg/7P0HtUTf6bN27uGS/iSC8j2Q+Q8TNDJrN8RGXl+D28K3lmRY156UPxTbwByI4EyDJRc2ORB+37g==","signatures":[{"sig":"MEYCIQDL5RDyoWUlg64rtaPTo6QjCXYuxnbI1op4faLehglddgIhAJbcVO0gd3d5TSorUpa9p4xfJlgY06IJLEhJoAojRBc7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IqlCRA9TVsSAnZWagAAKS8P/1Z1pt8BDIMnt4tDwqrr\njFE9R6EY7bLC2XQeqfwxhFis1xCL0Rv9e2NBegD6UA2t16FSXdH7zrFsytup\nU0TfiUjKZt6SfzJJiD6lyr6exJp7w4rTbOK6wy7xlNJXxhmtX9EL6pQ+jlvA\nrYmauHUATbjI9ddb4DawktTzeHa45lbJFa/llLjp3BdJI/TT7Niwa/1PyCXt\noNDxsuu9vn5ZPPcX6cQqun2YPNZNIF2bRjDxBRLDDukJtTBVOKaMj1qxjdSf\nAidUpgxaIGGQ6ozC5C0HK4YuR5Jd9tn/bYLfJuihRNPx3GyBOkQsKbEeAOID\nBq2wo3yn2W/uX8gpgo40wOpTGULfuVduhMJw7iQKqU76RzO6n5JPtb0114mr\ni+WCVnW4o12Q0qmBw8Lzmg6KFTNSQPKJCvL4+d8UygIYVXYS4IqYZPqAVkyH\nzYEnltuIfWdzCQF3TbLXAcCnEYMpOeYudQGCUEZmfUOF/AfQLALfpPegx4Mp\ndWWPH4LF/Uc091UhEO4sR/GhuNeTSrwUc1z9RFSaBet+nYxw80ZA3pH3Z6rU\nPc62TXp0iB1thd+YWV1Ib+QqCQfUI4gwkS6m5lPrhI9Fq5X0lCIQmOmoHUfN\nJK8o4LFB/sQnLKBM3Wdjec3EbNmfwrcYkDPC2ax5m+YhmLThO4ZDa/2H1+aL\nhXLp\r\n=L1BV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.4f060adc5.0_1626376869039_0.6916069065621093","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/theme","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6a156931d3758ee7263e7c2bc1967f5f8e5fe2d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.bd25779b2.0.tgz","fileCount":42,"integrity":"sha512-uQL48R/jvLbG/fYNjLAp05kRpW6Rx4LgEBT663Jtexnq2WXf13oyTflGcY05ciybT1jmWBppo+SOn/RUchEvDQ==","signatures":[{"sig":"MEUCIHiVN+1VslB3pRymOKBRzIWjr831Lcc0/1m1JWje0+lxAiEA6A3vQ/WatN3Ba77LCJNRUkm4hsInZr0xbWRf2n4zV5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J19CRA9TVsSAnZWagAA9PgQAJRogGJdePm1c6bPIaF4\ncGFVD+qtZw6qBKOMxVPZtW6m6ogQEhvnox7RyHRziO/eEVO8a7HBHW5ReEth\nKugMiCEat39rfWF2xX103VShAxr5jmJb4ouPnVrN81zotbyfusWKojC7VlJT\nCAEHJO+x4uxBhBuYRAl6CfZpYP6t8OQZRRgF4i3Yc2z3hUza1c6j+EZ3pFP5\nXGAMfq1abfSDcHmrYCs5fI03PNJXmA13kcKZzCrQeZAzax9lX5AieUgPQ1oJ\nEYqtTHQsnvaLzCSAQR7xTVr8DpgwMXSsyd9XpcfCyiILiOSUPNOkKBd3+mei\nJGfqI+rwXg/O2gkkopgF+MJ9t966oYTxNktXudiEmI8ukYOmvdFBE8/DYeo6\nC3z0BnZTs47zIR9QPj87fo6rGNvX8D6eGA0mHN4ElS9cZLSj0MADCf6OPorG\n5fA96GqBjfM2qnIjR0HmQk0mqzZ6+HGYY9xEhJOqOh3dB2272A9zrGEiDLy5\ntkN/HM6ndHFgt0hjBU5F920XJ7pucbwbjQv/XIRnIFIztzP7ZuQm1F+YoOgK\n8GykqWFm6ZcFCTJuwtx0gXjyeoOAB07kFyAfaCMYJVYNxTBg5vX3/GVv8YO1\ncFrqP1USy8gCY8R8Zfo/KSUnuSs+OdDklKzJrDTyxIv/bI68CZTY5RuYu0e7\nOFMw\r\n=8v68\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.bd25779b2.0_1626381693059_0.8400879519407518","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/theme","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58cc520689b3c3c3a2852c42117376b0c363cf75","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.9f68a932e.0.tgz","fileCount":42,"integrity":"sha512-yyr2MSxBJzYWwJg5AVBdLSeB27cQ87e8LzwVpOCj1GZvCZYsrJ3wCQvamQydG4hy/T6c+pPECAlb2I5pJJ/07g==","signatures":[{"sig":"MEUCIHJWNuMnuJaqolsIVHf23GNl2xO4xGraEDU3ietQMN23AiEArpoEIUWZex4AMW3y8vaxIXUAPOCT9s/zSFeCDtgtoU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LFcCRA9TVsSAnZWagAAxXkQAKI1TdvYdZ62jDYd/YH6\ndD+ILUB1c93VC6G0QIRSyHhgDb2CHe0PWSjnywdSO77Y4YgAhIytcaj4HeKd\nAy0JzNA+6C4sGZTdIenpXic1g9q38llDcVfbqz2WfjyYmOLh6nslO1wbnn2i\n3XgK4i8fh53fplDPrualclzTnX10/MglTtDzNqWBRd6bIe/AWtEz0M8w+lFR\nkBS8iivsOrukFch1a5PueeVb6eK4O0cBNAFOJ+IkEcOCkd1/1BEFwCLhOFG3\nJQO4qO4sA9/J9ynYwpYvtYcyvqopBoaM8/0lOyf7KWVT2DwbOKgWZz3LlGW1\nlNDc1quUu3pY9ecNso9nwm9Jrvdb0/lCOjPR/imOWzb3SE1KnWgKgbXgfFop\nQ0FtGIW5vntGiYoqAllAGkAlqMK955ayK2uMvEWlZdX92sW0m09U1PzHXCE8\nbL5o6MR4iOPlEvMomnynA9fTYzQ10E54OMxHHrmPggacPnzU7HposY+SmTPw\ngFWrn9nb4dWytVwaoAONBXBVT/QFZmStZpNfDsW3kP9qYFRw7t2ZeQSrl55Y\nqW102rhIVlehkHO9RUKjx9Y6HgbXhz3mkFZ2JsxG3vfqYMboxyUOhiUZJRbI\nrVNYsmTvG0hMLEZmFW3D2dnYPwp5gs2SqbYAqnw2fjl4UpCaIhWJREE3t7SY\nRb1+\r\n=FvHo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.9f68a932e.0_1626386780101_0.28377950635790894","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/theme","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7cffb5214062e34b4a9aa05ab0c0cbdee42e52e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":42,"integrity":"sha512-f1HheLnwoWpFnHawpQHdVsK2ja6SaxgqR3gjN4CeJm8GqHijRrHmnmPN9/u+MWioF6F0tAviTOVPF08gH/kC5Q==","signatures":[{"sig":"MEUCIEhucM5Cy5VlUs9yCKKYLpDw3phGM7mShMRa8CobmF3cAiEA22eMyKMWHG/JSB0RF7z4pESyZL54njhr68yRRCTy0ME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z5ECRA9TVsSAnZWagAAcKwP/R5X4o+B422NhxZ/699R\nLJxptGP3x9HYDjc8XbiDb18gqD7KQ0UeEq0JzkrQGnBY936cZsKg3xJJfo7U\nzRZG1YkHaVR85ThXWMIJnBmNQlI+fU7XB564R+o9z8xHBi2kpVUeB7j0Nq9M\n9VzEaHW/MyNo6JuxIlbaZMsDVJq7Qd5hZKQX8KA6/bnT6E0nv2IVI5EsBkrq\nE4G4sa9ZRcG6tV0KlD7DSoQ8TqwJ4yTUwm/FqTctIcxi8lKRV3o8tfPun+a7\n60KvgtvKkPkl0q1dFkuBx7pztRAQCffRqCGL2tdpsskwDKn4U5uzB0IiozwY\ngoLkqc7ph3gi/qhXZSICmV8x6NTDMXT9wr+lx30XfGR2hSQO/t/HwJpnhD0L\n5umv1IHNh6GAloy5cjZn02rVWpjGaXuQS7Sv0qDxXUwyx6zn0QXCbMSDwRYd\ngIfmHgXITWa1HAjSk/X56M1Yzrii32RqjFNa3BvKhVGsGTxPflNjl/AlUscV\nPbTSeNzbAqblShAHGU74ssU6K61vX8MG0mCnlujCYyptJPb9pcYVPZPY+lkE\nMwbyX+S8BEBevyaP5Qghne7NOE3epuCiG5DDfZhVedkIubfDffkBTPVCVCY/\nLNIqAlIhpfKcUc14DiTsJpuELl78b3BvK9YPIKecyEEXgx+Mh1WUiE2Rn4Hy\n+EmC\r\n=pxCl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.4eecdeaf0.0_1626447428074_0.6398791994351756","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/theme","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.7239684d4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f69d7739c9b80fbb8256e7184c7860f8692f0de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.7239684d4.0.tgz","fileCount":42,"integrity":"sha512-3r6IQLQlRjweU4ESUJBshy9telv7USV/zorOI3KKfGnim2dxyh+FVC+nDLO2LjstJvNLy+50Q7Pmo3dVkmGYFQ==","signatures":[{"sig":"MEUCIDeYwArUiE8l5jUmRMEPU8OE8OPOba1ILVzDGFIZSBycAiEAw+ceqQ6eiFAWXTOFr3MTKPUbwgDV52pRpVMJVSEoEv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8aybCRA9TVsSAnZWagAAaNwP/1K2EOon/q0htH60lC6G\nSWAb+quJMoocW8Wvs6y7LWy2OPctNXeuB4cxIUPS5hcKL+Jsmk8VKVJ6CMPg\ne6QCGPhIeEnUZXIWJXZcc9IITJ/F040EIPNtirq7d6UN3GWervYNiwl/ox4w\nzfg3E/D4wPA7T9JzddXZIPXCDtkoRYg8UvORIS2MIw4TCzEqpY7Fm5ksOM3C\npwBywW+shCYE4OtcBfbg0PmFKyz0W+LNTElNTzaiHQ32WWJ5tiyygIzf9zZC\nlbpRQXPAcL/rztweFZ4KGcEFRwTCzBFhQnx0gp+WFab+CLaEM2AURenYVHVi\nWz9rXAEYvME/Bdmyig2dheUR5NXa8ZMy8Q80TTLGI+uzA761V+P6JsYaSxqG\nYN0J+Zmv/M3Ph9T4+JN+0ZB6Xlu57Uln3iIv9FDVVtz3rcAU10ZeZNvfv5VQ\nVjuHp6INS+g7nH0IIHa80QDlUURdIjAucEJillPHjoOM4hXQobRmlRqle8fk\nfZh7v/Jv+FBHiSkhVgkQFteaHyzZljYcQvz55pfzf8pHKV83IaNze3fPL8qi\nr2AiLq2zFhppqd0CFm8Hd/egs5aVCgD78fOxyt+6Tw6cX40ysHcVZbYZCucf\nZZ8e4SII1t468mbZupax+kqobIz1XgLc0JaXREhDNuJzGsuLe40Lo2UNQzPo\nqMBy\r\n=UTXG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.7239684d4.0_1626451099204_0.6517398229891644","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/theme","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3336237ff736a87f0145fd6167d8a6f464093034","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":42,"integrity":"sha512-EnNjePeXrbx4Nua0M0eCmVjBGERX4jBdc1M7xukheXIQq/8pJAzC00L3HtyO8OdS6t8v1knMIjbri7gVc9Z8Ew==","signatures":[{"sig":"MEUCIQDSupuq/Nn5cWB4mLW9FMYe9SWngOFzORaRBxgrfr6fCAIgUQCgZg3vVNms3t3MD0WJV6zarUbTfq6j7P4Gmpxj0VU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bAYCRA9TVsSAnZWagAAFKEP/3vYbn3DGAc5MoZJ4nmm\n75jtQwghADpT4koj4Z8Rf70ZBZzD32Wx0kjg3hGfxtudm0nJalI6cLGenP+H\nN50ooYJDg5p/EKd+10qQissqNY1lXiz6In6bbgQUP6okHvKvHRiVnCnossIh\ncMppK8yOvuf6yGAHhi20xDxMPaAG+rCu0caC5HUsV4dkFB4cQYOyJyIhGUgC\n/xhK3YbkByKYnXp6r9r+TWkNp04lYQVFcikr0GAPoymHuAK/QdvXwVCxEe/m\niT/gZXjiRE/omzXRm8tPZm5tRVIotTH+DW/jzZ19dO4jjabEWcvdS02w6s8r\nbmuC3/Ac0gCTcjkgiZLGv3o5yakFLmYTkdK8B9ePJGptaXFrofvvFjW6+Kjn\nnfWMOigUA7p0hxYhHAhip0sQKrSYhswC/6fnvWHOEvcv1Bxzz0tKH8eVxJDT\nX+REJURgwYuEFL8tZq+S9GqEuMjStuPK1c7Skxa3NKwwUTP8Ui4yS3NGtJ+6\n/cgpj3OSudRW1b+cbyHpxJ1tTvMsYNRqeJpnYiGQjV9n6c5XYRMGojZ0eGWn\njtoAqIg9IfhPyQMXKxY7otze6rvhWqK3LGD1sWCOVIGMwh5rYy4XMt9s/GoH\nPr6YxXwk8ClaajG07cq9YeGnjVpMM4b3ip3ttLiw+E9fB7mxXA7OV89gPQud\n5EI2\r\n=9l8o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.d5f1f7c72.0_1626451992392_0.9293695115859721","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/theme","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27e86406b2e1050bea55bbaa811ca84b060f3036","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.4d95812f9.0.tgz","fileCount":42,"integrity":"sha512-Y2oISxHFqkAMb7x9EEX7r1DcDAivm4vv1u7tEXTBB2UFEwVTRVuDEeVEqONzRKPPQaOUcD4/BoV4cf1XDpzwyA==","signatures":[{"sig":"MEUCICprP0FFbNXg8KSfaCLFu9cwTWknn4gkgkjFBwmgMbSAAiEA0Ywt2X/nXWzLBJUo/RPq6Ebd3AOtupbl31g4pO+WsWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eEgCRA9TVsSAnZWagAA9WIQAJig7Y9a/HfDKO4in/iX\nS2OYOCHUNtrS7CDW8C60ZRXMG/pyRqgEJVl9CpFR52vmDH1exiU2EEtLnKlR\nUMmsgH8j6q0aWm3IDFIhLuQBqKU8makJd3I/Rgt4TBVY90LEUnUqzD43/L73\n0nPmx48nzOZnsSXY/D3o2LTnfNY+Y9GdNcHqyX6b6/rAAF85WY08SYnPG5yV\nhJ4qqlLX7Cdzmk7VWbcDOwBxJyRYvwnLBVroNPwED6BttHyMG0/oWRER9Dc9\nBG697O0wDw9E4lXW9tdpc/USW7ILymTFVNa3MUS+D7YbPp2dO0jQqF76G761\n+i+j4kJ50OzRMy24NO+d5466W9h1KRWVg0f181qPy7GIj+r9ny9obm5wk7Hx\njVkr/8aUZnR+6Qpsug9sBdC8Cq3TT5Ulc9IbpatzM/J2IAI6N2XR52+ii6h3\nDRl2sefxsX43S2AoA4Rz/Xl1ygElIAKPsnvidy9fZmgwLUQmONZLot1wADvM\nt3wWyvpC43PDN8kXvsQtH/N3gthdfi2Vgpky4g0i444G/nK5rWi5OmehIR5u\n9B7bQ9yF+VDZ5KWBgaQBVT6bprXRlluSz+d5hTE4eMOljuR72lC2phL4GT5l\nJ851jUsnZ47WZdZdoMld60IvaeFN49hE/vfgyIFJmEBKnOXM6l8GiaFIEGNK\nj7UQ\r\n=eiwv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.4d95812f9.0_1626464544463_0.8263813689113755","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/theme","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"265aafab59ba3528e9bba7ae1dc9081c094f10df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.38d1846cc.0.tgz","fileCount":42,"integrity":"sha512-8DPo4/ASj8Xr1MYL/TUR2AePMsmD3jJ2K6VVLJGy45Uadq9zmH7SGdnu5T8duMCqUd5NPHmzJvt7Q6cmCKfsaA==","signatures":[{"sig":"MEYCIQD4fELLEMs/9g9w+b9uLLzSp1rB5z89urYG7JfVKkMFygIhANVOfBb+RWG2YkBCvwIJb72bTH2AHY9F5cb8rh5cqn/R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cdHCRA9TVsSAnZWagAACG0QAJR4RIOXjnj+xN0PyjuX\nMw4RdWG+pLSRFBQfEWAmpqwi5q0OgZOGli6UyDRIb9kf+rsVmsxN5sjDGb8g\n++O2Z8vQxuItyubm2OII33ZRsEHzDG3dyy2trqogTIwn2ZZnSRBUvw8gtYxD\n+0jbKVXTbe2+D2awX8UbUMnFUdteMfU7i6A7l6WosbCYF3gp8Z6/C6JyJWDb\nDGmztEZ8aB/6WlT6noni8ucDDCqIco3PISmACa+UeLb5HjQmsiiCN07pKxcf\nvdmxoXd2ACyOonUOPpu0LlYC2QhDa6VeEyC+oenTjCY5kEf+QUPiG5CeCb4T\n1L5q1YWLSMINNMMSeKzb0/98By5QNvXFy5Ee2IcOPkq0ntgSCo1KpK671kIN\nt3zPMlh0sgIJz/d/NQPpRdqI1O6IT2opiHqaQMHdgN3r3B+DR1jPk1uv/3dU\nm5il8nu7RhS9iJJoBmSCIjg5rmMkovbx7DhUbsuQVl+aQV/HQnEYscFk92Y+\nk61SxM0EOF0OeWhzGMJyqYcPp1u4tXNikdhRsZiJS8r54V3ME3H38crCCNPW\nN5G/BUx4rCJz9e+OOIPH5QPg41QGAnlZTE36mccuvCkx/EB609wHfpcZufA+\nsaPj0WF3xN922zrlwDp41QygSN2IRyaeli/oJiMIfEc+eHhPzKsO9gi5i/Pn\nGeYY\r\n=Dcdd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.38d1846cc.0_1626720071541_0.7950602546396532","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/theme","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd8443032441380a442ee8d623c600ca4e75edf7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.3f691eccf.0.tgz","fileCount":42,"integrity":"sha512-H+bgDNRM/1Piw4tOsI+tKD5jJ22/wCjOJRQygz4iP6tYivsjykoKrxnwt7cGh24FTOEyee1dDMLxYJWWdmMoLQ==","signatures":[{"sig":"MEQCIDbexH4eQr0j/1rQPrbehtfUogQTewzaFIJJoo22w9RIAiBSs0p1iQFk7MpP7Y5VjwiMin5fIb+1EOHyKUmkQ/6CqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vTeCRA9TVsSAnZWagAAM7YP/RuQN6tns4Awy/EHTIjh\nTh+XoDkCTUEF4dZnhS59cpy5V/2m12wPjBh3tZDIJlPJOE5IRtsMhWrzI8ug\nlF+k0VWGw8yr8hEwbX+if6xEyXLQrE1nHGQ+6Frh4VlHTLU3SDXcFENqg3bN\n5UUsD6ixLFVZfx0k7lpAms5KoW5UxYXaQWgx9BoZyt4Gxt8Mb8TLXcyIRc6P\nn5txNcNfQaTdFaP1ZHCecJeDhwyDjVtuIAXeB5SuNrzd0l3U2YaOChLrFnUl\nSFzvhgbiPe/4aXrMfij5NfudA0c5w42tu+PLzrF5vNkmL8ocKbalyutRdKnB\nPteMVp6HwTzqpJ8Ct/jARN/+lEFNCrUnUNSMFnCL+01nzEGsKCq3i4aTAvha\nC+K4LLG+eD2uKYIve5KJ82tqkxxApd0t2fWSqN1kyANmpxOHEi6I3u1GMpB/\nQYl+wT/BHA1gpHnglJxRKOAH4VbncUI+HNolA/Z99E1hXt3KOnCPpmsad+xR\nBgrJVOwFWIbXX6DNc0sXMyT+bq0aIgQisPEnaTK1Qlw3HohyD+cSGLD6JXHt\nDlX3WiQJnytMWMdPi9j67CGSNrY+5wiS2YKSCu0DD8xX3Luc6tRj+08c1wnV\nYaiJbHPy8fm66NS7OyhRRA9mer324S5EB5kIVLtfMGjBgHjTsvTYAnvulk9G\nAZtS\r\n=06ME\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.3f691eccf.0_1626797278514_0.14827548554949876","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/theme","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92d0ecd152bd66a2ea1ac8555417158040fe4184","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":42,"integrity":"sha512-8wK060+V/96z2nKDWaUrXi6NaL6fzirtwypr/Ueg8PKcD4FEMSCmpEUVn49RNV43OD4PJfoHl8k+kcXcB6OVDQ==","signatures":[{"sig":"MEUCIQDAEdkpakJV0lwYF3IDvFLl9QKB38CKtbjymOo5FguxigIgA/xPCufZ5FOc4h/8yEoIxqKtfW/IP5w42Pad7sZ5zEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wAmCRA9TVsSAnZWagAAa1IP/0c2NsdVWOwDYctqUHQw\nB2DePjRqIkfRt5+US7SJxyQIMbj28yjY84R9h/gRKb/n0RaArSThcJKVBVez\nIlgfP5s+oauoMS9QS41VnBiYdPZYH6hXshMLloJiM8Bvu3tXn8VtemJOcQHM\nV/FN3kskZs+Xdag2urVtSl33IuLR4UtYC9fPDOsHFA4fX/wqRofFpkGnWR5t\niNSnpOshAxNxWp3hNxOHEqLaFKvJlwH6ex29EsH7fhZ+1YgFHrPGEjNQWHRf\nxnLEOG7OsMTm5CE9NN86VR6P68NWGTGuZ4fRgQhKHQK9WpVH/A5TabNsYfxY\n6qh4JdVwiD7AtJqfGnmPRvxoA+gufuE8uMGFSl2P1AQMs0KSZ0fmCFit7EET\nFiwuFwUzvcN2Ln6NAtc9e+mHtbey3K5Y4Ke/4ndt1v+ZG0Y90n05F6w+eUxO\ncrTkt/XmSsSptu5R6cHs0nMmV8pWQNMBcehrIVb254ggiB2qQDs+SbXrejss\njdNTKnlJxmmS+2NH3yaLlMYpnN6q5sow7FsumahEk+QehTqtZxUeljEXc5nI\nItJRioo80hcw1Vfhxb6QerA11mJ2QahEH72vBsxnVIqyMl2m80i3It4XnMUd\n4TwX/8Cjips1qHS7RKZNFVo1DzQnZc+RwuEVTNE5mK5yNse6sjjUrKJCZTCp\nvSId\r\n=37Yo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.ebb5c73bb.0_1626800166622_0.17621271879421774","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/theme","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b48c7cf654c2792ff3aae6663b050fbd57ab88f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-nightly.778a0e8a.0.tgz","fileCount":42,"integrity":"sha512-lrxyvlfajOxod5Jp86GDWEtxyhQKUQVHnEeNR5B4uchRwSehIQIFNYMYacy9m+3fgLMy6gUgSuVumkA63P4Yqw==","signatures":[{"sig":"MEQCIBJs7xysm5g/rYOSksrdbulNoNTh0keNB6i/EsaRt7cDAiBe2i+ULiFzNDPrUTQITTAEHY4/kdHyPwuWTf8hzKn8aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zpuCRA9TVsSAnZWagAAenQQAIrqF1V14quizlTx7GZO\nYtPq/JmEID1sn/2jlf1njxHpG4kpIWcd1SgRV+vcYHd0bosZOBzj3KgcvugL\nnTn8rLXzTtBQ7kFEPwEFknhSQ4p2uVVOBUzv5FHA88fSUu+QNNgnSNZsmqac\nOXWoHJC/Plmydt6liDnXk8ex0szOTWrxq3NhFDVtXHnBuovMWkQwCudBFTKh\nSO6fnSBdkQj28qJUucCVz0UVbqqZdd3x9mPlohGKuTY5/rueitr4wp0e1poB\nEpsFiN4osVkVYezoLk3wu78TTsdp//XSWNKjh84zvEG3Xxa+Rb5aFOtCuvwe\nUTjyoM2QWUJmslGAuFfd529tASEEDJLYxEUUxxaAUwBWySXX2BhM7bJM64jU\ncT17KUYInI7RKgxZjuqXERSFeIknKYCooCoS4pIV9ECjgfgU7G52fRimLqaQ\nIm8b+yB1X6gzJNTjWpss1Zu42yF//k+k9sWXtqP4pAbxipI9ozZIGz/wCMrx\nFoPi7yNjEhFi0VmdFJNJEFnWEvRyozEjQdyMvuuFXqb84VvMX/JYAMYxrcBa\n0AJIWDnmTrJ6EL/eW2kHYUmWwnltK4GwVCIKjYHMwhA5aqtmkKt/9uMhBsJv\nuYE/vYz/X8F7EO/NiN6ghiMRkC1RJWz1rWpnx1I0y6o+RF4Bt6tsFrITX45A\nMjtS\r\n=kuc2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-nightly.778a0e8a.0_1626815086190_0.5029013196718013","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/theme","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.791311bba.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"530664d5e8a6ac7dac76856fe2bb2d3ea9aa00e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.791311bba.0.tgz","fileCount":42,"integrity":"sha512-VzZk3zkmkxJz7M+OBA4xd+stMXYD6bWhhBsH0D7mZJwd3Vz10HQkNrspkjlbpbuS31UpUMhuG17xVh6B/+KHZQ==","signatures":[{"sig":"MEUCIQD+UZ8JhukOnkZQLdSdeg/V42czzevr2Zb9zKsGKouKNwIgLPm5u9O8fh/4RsPZO1rFU8X0a2jGsuE2ta3hP0WZW/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90j3CRA9TVsSAnZWagAAB9UQAJaDCJAjHeUe7YLfOJ1t\nMHLYrPPfDuU21eAN0gX2znP/xcZ/B2FiwAulLKT8Wfpuzv3IuWdEOTfBl8A8\nsBEKkgxOuzev6poUTHFPR1vp5P2dKAgKI8/8JGPQNOLHFYLpjkAa9uG61o7Q\nmxBdv17bMmOAisiu6x7SFcJx7BnSPZIR9A2F92CBPsAC8DwudvN1q38Mc6Vo\nEBT/etjdRWaZZg4OqqDF9G5/odrhtvFsVxlJ1gCbu3P11Gv2LzhYcB/4irfx\nSZc6hAYIkI6QleK+X6vvpqK+BjviAbOYVFxiZ/4nokYTuas4DSPDZ6dfjxyg\njFzXiRvM9yNsvfcA6WhpMEGesqzgANzPoLmsmhxyHr1DIwaStGHu0mbul1OP\n07dd3K8N39pcpZk1GCP3bWrohqKBcQyP0WjgUefDW+6KBqtmbEfsjaxZK5xG\nzGazIbcfo61/H/0U81cv9LVjK7HMNVcpyrBWyar4y/TvQ5V1bv3fQDS9RXHI\n+KV2/H7zGRldPSqCRD0/W1RK0CUvkSTw3cZj4dFTeWUQpo7VL+eFCP0dfvfX\n5ujBWdgkvQp9Fnvz21A7ekpD5scjusqoD/YU33o+7ee/99Ym9LsyYcbqAPvn\n12/wAube2vF0ZhnvB6CrrYkGEj4kZXt0j3nbPnMHv1u5PThxPeaCALqZ+I2y\nI3bm\r\n=D94S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.791311bba.0_1626818807630_0.8343040540245545","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/theme","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd4753fe1ccb8a68bfc24438b8bb102aad7b4c50","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":42,"integrity":"sha512-EtEXhOsqWRO/pvCrGfZVKXpVafRUk6bNyu7eB5AkK+YQ63WsAfPQkSzEyi1Wp3jiKBpDa1BGbJg7mRw5EJDqlA==","signatures":[{"sig":"MEQCIC0zC1cLCzYGQIvUwvKFAPaPekLUq5QkQTRXoO1ssub4AiBOzA6/xmusu7vMoIuYYRSWaxigMD2uJWRA74eTa0PBug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D6yCRA9TVsSAnZWagAA+eEP/jQmJM3T9Psi7u0tX5cY\nvwF/kbf/jKg4zme0goe/qmKGzS5kn77vr3Xm7YsUykH1LbLNcTZK2EdiuIxQ\n6bgipuZZ7SZIf1kxicMNm1DB9VQE1IVK1gqnr0XNZ1YTb5qMXm6Zbd5IAJ0+\njM9RL0BTMMlhCKUvfVCsZyQBI4s/iSQfFVES7bUscx2eUlInDjoLWS2knfey\nOG0Vtz4UHrgZZQkJr6kwqCvhk07nL8K56iJ7S7HD0jmcasXUTNWpwMqZ9IuN\ngN+33TZWYYG3Z2OqvnH+bQXgZnS2Yi3aXCnD6DhP60fDTX5NQzGGISwyfdAd\n2WcuPe7ola96bO4SDoNxzDa/yBEZ0AjyawYpRiKiwCc50ckG6rCNyPt2+/hs\naXVXBHMFOzeRNDPCOjWaEyoLUX9P0WM1YkseY0aaR2E5zxgJ+wk9JTXtRLLj\n0y7M99Y7ONiVpPzLE0AU4IeWUJi/J8R/WZeCVPx+fOWg8T7vnXlxORZ2HUNK\nxZDeWI6cRaQ5wgsYzzaHem944/qUQh71s/oL934CU5SXpk1nDH5I5uH+f5RR\nUMFWUvO4fVyZcylz/GCefGOb978kMzxeCBLONL2BxQ9UeUfFB675OoUAPvAR\naU1YqWr1Bieen8KEfcodHNo04+e2EOH3dLuXiqX+p/8UbZ85uGILvfG463pk\n+kmA\r\n=Zwbs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.85e9a6ac3.0_1626881714446_0.11561384918687456","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/theme","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.6b0442278.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1838afa44163d8ff15ef2c5fd399de4d70fbf54b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.6b0442278.0.tgz","fileCount":42,"integrity":"sha512-gZMLDaHK+/QjDIk2EIYduO4INOVykLuzas452W7JNmVRE3LnzQB1FcRbQysly7Ho7q4cBydAvw3wDKno+nQg0A==","signatures":[{"sig":"MEUCIFmJzjayGxSBx0ST40rJdVkAi/pt+Br5CbNQkC67Py80AiEA3jcKtgakrZHKI47CqP5UiZqpkwuBEWn2ZzZjjajMTC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GwjCRA9TVsSAnZWagAAllEP/jtPMsBf98vKEfO0Z9zd\ndiKjYNBZIZIOFg+1eBgws8P7R5AebYYE3CBu00E4oEZ3y4P3hbn7T7ffv9aX\nP6a7gmN+3THujLljpV6McQRlC7/K/QJBzrK830P/DKlFGjm3PAuKbCvEenuq\n6GKeAPWc/EhH8DpGBcIwf4bZZnkfT9UAk4wEic4IB1pUyYvyHOOp9seLak7v\nYs1B6V+9Nn6XLMF6HBZL2RMzUcx6DnXCfbcZi172KdCzkew3XconGR2YKABN\norGvXFChRwuVS5dNyHVQ3e3D93kd6PhgQlBQVeeTCJAuQFTfGYHk4ihKaXZW\n7y+9OQfLzTr7QQaps5a50L3WlPchXV0rOqzGe+9PK9YU+ALqQ9Le6SpBuVCN\n7CbFf7LebicGFofI1dVLmWdZQdyU1J0jwq+8SlR/+3cZ1IbXtE8ul94WuUuG\nn8boaK9CV7HIw/JI1LmeaPI383XP2Ej6jV6tmLttHZM/piyo2F/orwyNbB0F\ngrNeq2FVXvZHzxfRA1utPAV3G2xLDiOELkYOXxjZcsfuXsCLsUwtOS+kRdPM\nxgStmCAUeBm7gzFAWEEOwdox17YjZCSDo97GB/4N+y8Q3B4aNM2mPf9oqAEU\na/RMhvHOdgDmEoBNKC8AgEHRrlcQHwXT61OzDE8sDf5YJUSUDcaDgmEQxzkv\nrjxt\r\n=EejU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.6b0442278.0_1626893347731_0.5188617368667214","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/theme","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8985a96a9b5577b630b588d96a2e140a5a429008","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.5f00e454a.0.tgz","fileCount":42,"integrity":"sha512-kewi7nzIwqQA8GWJGd2q6f1Lhvgb4xHLhmooF29xGnO68dAsqi2CTZbq9h5cd2zEFgQ+2+WuQsOxXqzbIAD7Cg==","signatures":[{"sig":"MEUCICLQ51ZXkZy2AGRY0/05c2x/ApRZWWq8WRMlJoV7jQsyAiEA84/GIk+6ZUOKsZgK0L+INSZ5FVDD8+tVanCZSNCcEl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aVmCRA9TVsSAnZWagAAO3MP/icNfiEkk4TAXo0+mJV9\nmdQrOZvZ8zPG4kzSEEBuZhg+dyAiYtq1sQxxIxJR7p8S7dy0ZX8LknNtcqfT\nFmVdSGUg30JjkhzERMsy2hLz+ShYxYsqJGXrm83CPjnvCrauBUj9tQBfa66x\n1TlJXoVFkC1xkadMlaeDW/mIeXUqK0HaBcQQAWGk3P95a8+imrbPU+4zW3uy\n35NKnYW2OAQkWL3N6z8uqRD5IN3VzE92SdGaiLjyrw/Mwaz7w1cjcWyF9GGP\nLTUJPKgJM4ALW4dBSwfaHHYxutSGUx5t4Jq5WaQDC7On0t00c2qpwxAzdMSl\ngey+R7C9mUro41nzFEvTeQg7jdK4+Q9rOlZ0mH+lFW8afZQdWi3MbSmXK/Ly\n9jp9o48VZN1I+A25pzIs9f02rkq84SJCxhUdJ1qH5fC+JMo+jxJMMWbb4y6r\niKQUgilQOBqQ+tMMWpOHJBAAMT9wXugvWms8Q3ZRDx8YUlmqfe1+BwJ5qdiy\nr2cqKASeDtk0LUSfFvkKTlabAvhw1ACLdyKYj2DKU/j5LVuW1UNfVM9wZZmf\nvJWhhqNrFUL7QB0XdQ1Usa0Scq0Nd6QzZuFiocmAvFRxQzkuaYsuWJsuJNsh\n6ar15KO8n9XpvTCgPNR66I/s8J/2Udsm72BzQwEnSn3/+hJ11mbhSBiUAzam\nBQnP\r\n=CKKI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.5f00e454a.0_1626973542452_0.5200493610246795","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/theme","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"399330719814cd4b23ec79abfd7ad8bc7ef2d939","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.90e08fc6b.0.tgz","fileCount":42,"integrity":"sha512-TBWig/xBxm0cvZ5rC5ojmz59/lNhcLycdvykDsMGWjx/R9iG5CFYoX2MQWpX6PkBSS9RG3xPijXbG4r1lmNiKA==","signatures":[{"sig":"MEQCICh7+lI6syk2rwu/aSXKt3ocT8ewn9ayY/9wK7Cbj9mdAiAW7bswfMkkjhOoMInFb5nKzc0NJIcSlyelQpoLaWpAPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gFCCRA9TVsSAnZWagAA7igP/1maHoU8oyC5EBfpKWF6\nZjeyylrGmKOecBZXKdA3DcCwzejFs+GzlqC6Ec5urjHusJKzrOjodq5UMzn4\nZTwEg9x1/YwustPNcxKw7mhFTfx0WZ6PQwCaJMj8pYOD0ETYhbX5YUk5xSm+\nxUTKypNr+xBBziCKKNcNKILU51RdlFlW23FqiItLbeQKres8aYGp6o7lcrpb\nrWFyvFebgVjsWaFBL9r1ORSzrKdaP5qBxp1s89CcautvcVJvNw14540Ii1MQ\n20QI8hlGrMCK4Mj4o7/SsmV0EHTy/vhJPtIF9jg1Sa4tXYtlAJM8h+XSuG0/\n3IqPz/krUF87BYgD0689s7E9nd4DGywulLFlfDoLvwdDa3dsCisagEQHyJp4\nb0wCJUhgfyUVpIdGelYgmsrwMw8Y3wgPqTjzgQEj/uVyr7o7X0vok1Z69lau\ncaWV26ZmuhMTzb08u2DUQuEHZ/Yhqokm6jzY0+QSRfkHO4G81tIgy1RFRP57\ndTfSVhHzs08u3ehdQJdN1APNlAfpZyHR/N/jSUlCjPM1nLPvqGFKMii25hWt\nSKRq7/U4BOCVF4+2DIoXpDx7KmJ0NB/GBdeZgstllK3YYhy7/g+YpreUWHx6\nzj0N9ki+B7LXM8brVq6zli+z9i3jocna1JbBbDaiSzO3lf41vfb+4pPalArI\nZZ7a\r\n=RW4q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.90e08fc6b.0_1626997057745_0.2306767015001625","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/theme","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2c6c3dc8bd2014a723e9f76584ab6d5c2983f51","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":42,"integrity":"sha512-RmH9fUuw9fCoelNj2v+Z3uq6zSf4R5eEmry0HlwkwADbuS4fvpyEFkK0GrvXaCxEZH/NGX4XFP51KmtE7QfDhQ==","signatures":[{"sig":"MEYCIQCrCIKL6QCBa196ZwqNxCueNgdb1IMrdox3ToFmpS/GgAIhAP9VaSOOYcDWMfs3R6wGK7v3VPmVu9qvH6Ri9tvAdfkA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wZUCRA9TVsSAnZWagAA7t8P/1AllROPjROzUJFRMVHw\nkLS+THfiUupKtBhG/SbVToBWWLAHhz04qK1x2/EfKdtKIVmXuN/BLzgD/xb9\ns8AiQqRq/OnDLZBKkkNBCAbr7zLGmZphrTbbj0mDQ9htBxmnu03SgIG4tM6L\nDXH4rAo52mZSENOrB5dU3UdCWcjNuvK9gp0rZ83AE7vAAF/e+GB+6ve10spH\ng2PcR8tZGN+9uDAv36Zz/57/Sm50Vce/NhyC3Eks3w60GG1MreVAGgShE4HN\nBgB0/B+y17/BF3MwbHS0elqKgFXfSp/EfYWRfOT9sfu84iAQXpmD0jv44MdO\n4WtlM1h86MdqRSjqdq77bb7fjm2c5+9dieUaEy4UhS8o0lxvrLoKM2akUKy5\nFWGHqghbmGbDdNhnPhCyNEiHEfGGg9nIKRHZDWcj9KdOAeMaLIxvk4dlPo9c\nviVzNPV58GTdqjRqlwY6nk4dJa+L0lOoahFJ8R2mftdOQ2IRRhmdSY//Gvon\n2Z074CGId0DvInKzo8Lzz3Uy98Pn5kmIqOIriyIjp7EWFQIunizBDubL/jAy\nFxsemBP2n8Cc/7TQZk3EnovsNW5v4vqaEuCx3jeMvqteuiuys6hVNbCUu3E6\nNhMvzoOCXzlMqJWf2QiZQkLm4f1dUeGaT5d2nLjDPX9XSp9zAExL8gV02oNB\nc7sx\r\n=7EpW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.cf5b9eb86.0_1627063892225_0.8830321762170401","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/theme","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3dc98f4d3b3f6077358b07345f92c8bd9ca6d0b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.3f36ac75c.0.tgz","fileCount":42,"integrity":"sha512-H+QRMFDSrig3x0BQwHDtS3mbRTu6oXaCLJ8Ms+HMSX68txXQV0quISlgUL6HzAOr4vqRvAReD4cQ+07CQbNskw==","signatures":[{"sig":"MEUCIEMbdIGvL0vcPtkv2a1Zi9kh0T3NW+2hmBTsNFA6CemlAiEA58Y9uboziTa+0j+Ir53EKoBbp0qgRAbilTDPxI1zonA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wsECRA9TVsSAnZWagAABNYQAJAkCyWPvlBlYaDAvYnh\ndtV3jwvxWkGTJRkEGMN4QJncDFHuezKioV6a8dr/jckfZd+l1oGp9xX2Hux2\nzY9NvM6WcI5LiH1bR8Fdfx47xa/GyQSJcVRFd6VYVpKzvnK0/piFlhTqtz6o\nMAicjjHJy0584QWpOpvTAWWC2FNmSgeyS1wKOl5TtrrFBBN3oDn0M2+26Za7\nOPVGH7AwlNJdVb8fEDIsuiKBRUEe1qJ9neVs/dgIagEYvqpyf/n1Dwneo8VQ\ni5/bHn8cTunLhy7WKm4NQvsHT7PXgQP5Be64p6GjCO5xnXE55UpNWGKOqsPL\n6fOW1DqPZE67zwiR3pEDrxJPxz2bqInkBFLVFZrFjCUdMzbQDn99Mu6lTa35\ndehlrZlvFnrOt0GeAscYMp6l0tSbU4LMLb+IAgWP+sVJnXc/ItOYTant2NJD\nsh8ZoIBSwCGU0/bCS9po8FO97IOWfeJeJ+IUEpIApIaxROuwrQ3hQ1heIyWP\nMZ20LjJm2tKdpxkOAMaM69n1dLeUu9PuTvMG4IMnnsrz6r/4FZMjDiKwpo9n\n/5xDvsOaj3vB9ZY4rO78hZRmkZ4JlepeTH/yZs+UTebMlHEzj75O2BOhBBnu\n6L4EeWqUWDKktRq5MBAdxE+BDhDHCM54eKzjmNd0HGjnB3DPSzzSaEh9dVeP\n80FI\r\n=cRbE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.3f36ac75c.0_1627065092319_0.005522389649795567","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/theme","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d7a8e6558c4d0e26ae492e7d5a8a647b6fae4d7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.ea1e1b850.0.tgz","fileCount":42,"integrity":"sha512-ddmUVQUI/ZcFdhoLxBnCRZTUjRBcp9ci62z/VlZlEcxJeHOwRvQTFRlOTV97WenG2sPvsEqcFE+9uCqByw2whQ==","signatures":[{"sig":"MEUCIQCuIt/HPE9gh7oxGEd5xGLUwIftGDkNbpfJnNCMQcYutQIgZRuhWE45+3UWRVa3bGxUmhnpirCU1zmtTAoM7oJ/dGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H4pCRA9TVsSAnZWagAA6s0P/3tGMS3e0vBAaQBzvpIE\nstYcu722esUbXYjJZVni4khl9S2ZoLf9HgssGtzCEXkvZL8xPtoOa+ptyf7v\nnuORhkj69rA4EqohozRiyI4ydGIEfzQG1FWLCCyn8yqsq9HnYe5rp0Jvfmyn\n2qmm7F6hc43zeY4NjrVaB/LYLiP36Idiqv9PEwL4PSnIjDGFvk7WoqYTxvWI\nYZKleIP+SxRHNalwAkklCouMsLZ4CmfI2u7Jb8BEwzfHNoQPiiec/T462HvH\nbI5FRZD3RqEyQiv3o3ZkIg8LO/VJvy+dG4OwFs/6OgNLVR9qQ3DszPSSowZu\nIiAYvzl2+yxPzUta+JtClc2PjYlZPkRssOj56pXJVHbPqadu9ydjEWv+IXRR\nuXUbcyORfeBb3v/ggyhJuFynPrLdyc2bm1pWydXiUIAh6e9lku/mgEF5xqBQ\nlZz6BEPo0+ufJm+q6yBxIs7iV7HRKl9ZzcpVyJlt+A8CVCeteAbwwSbEeotl\n2cp1gwmAXi9C/lMZAZkwvLm4bD7RVc9yUWT6Ba89IgV8Qcg7XDynlLJHDDGL\nPUq2pvxySnTFXca6R+2ydl/dRg7zTgBQnMWkJvgkEN2szNMtpZXkGO5VP6TY\n+9QroD/z1iMgsMiDLBy7IyI6lJx8QTAZoDZ4tVR4dXpWZ5JpzHLQdsPNA6ub\nrVGw\r\n=ZLjJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.ea1e1b850.0_1627160105484_0.420917931535685","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/theme","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0-canary.22f390c43.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"befaffc47892e6c17625683ceffedd6a4ba99a08","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0-canary.22f390c43.0.tgz","fileCount":42,"integrity":"sha512-wHhTvdr/qup1C5pWVqX0pFacUbM8wgsNxT7r0hwru+VIexmAWn8v7y66IHcd2E23eQCyftW/Ctt/wFKMrPpHxg==","signatures":[{"sig":"MEQCIAwDS90Lc9qJD9V0M3mb0tPr7OgVSD15mZobZehmCv4fAiBmjOfo/9UssIE0fSekETnn1C5upAZCaBWiZxIa/md+tA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFd9CRA9TVsSAnZWagAA/p0P/0pbJ4p/daeS2X4ouUj0\nlG+TtFb4VxjjhhN/my/n97AbGM+zbvVQHzWSKeBS7NzYBOwjmfctIK+GJ9Fu\nJu7967p0CrAXXir+nLANZcQwRFGIGlfd53A/isowNy2+6oInaIsEnJaxSiku\n+Oo/bRpKtzkUMHx4qkmUc+3J8OnJClUCkr58kMwZNXiVudsAKzoyPqGlSY7Z\nXeex9D/ZPCgwo/kDScshUMwkGjNctrLEAiKAvp1t5lab1NVUsiqJn4bFwt3u\nYI7jt1Z6D9ds+/1iPX2+lOwBkrssBRMYseJFs4beQzMyovFnbWJKPxr4ZKYw\nUXj9soVSKqx2TvPXb/zvVm2jJ716P1/S/Wymd5gfPdeRz2Y77xOOiHT6yVOq\nAK/rkhy2ubKdmZa+e2xezM/7nDad+Z2ac10u+/GqF7Skad0y7NWT0dFvT6W2\nF0w161eJBKHb9a9h5SWqe+Q6vZH+vlLQDAP7G1Dh1BqqMIEgnm9tIcuX4i/P\nxIoXjko7BsjQ9DyZH3gHnMc5ZnLdGmtAl3h5iD/95HGxEg8TE679ZBFeDI3y\nVbVjVIBnkayDXLtVdTpzNePh2GBNpt+gIaf8f+O7Zi+kFuQ535LUNfRrnQ5S\ndYYMfYcqWAdukqv+yBDAJd+Y/Pk6tz4yi/3Nl8tGZi5CNub0FVTuy1VItD+S\nIvHS\r\n=I2bA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0-canary.22f390c43.0_1627412349743_0.4086512149239876","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/theme","version":"12.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@12.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51c11892fd8e6fa244d2b14a8432d14146f1cc68","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-12.0.0.tgz","fileCount":41,"integrity":"sha512-E9gFLpOcwtJ2GiPg8S4w+9eaqFNgLO67Yyftcu1XgswAHBFiI7qAHTDYH21H4W88RKlf3sTNyHtzigbTenPUNg==","signatures":[{"sig":"MEYCIQCMePWVLrxwgjsKWD0nld1XIMJnDlqSGcGI2Qpn3YTJggIhALkwcx1sN6OumtpG+2eFduoTmgA+8uZpfOaUW2auEcr+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGM0CRA9TVsSAnZWagAAXFMP/Atfha63QdBylhmyVbIX\nr2ZE8FNodhS10OymGx7809hfFUvRyAcBHDyYqG5RMUfAyqXoB0K3WhELAvXb\nVLZYNu5oCZJCS4Mrcp9aTohp2ekOtgLZtNwULvhmvbRXLvFKH8Q9TQKwTTbX\nT68Pie+6IcEkpj846g08EMulqjnYm3grmDteTUfBVTCvXxyhk4q1cdvm2aT0\nVknfTalmg4Fr0mIYMBCobUtNirYhuWZWpufyS1TEne0lsW4qKOQ/Xr2DOyBV\nvM0HU0/pH+BM9kj/+peNzXl9ORljZ/y5KCOS1mz7C5GALLLnCF1nl69mBIjX\ne1ZbK53iPHryhMdxIiT16DOZtDqmgsbX1FV6F0LGniDwkVyjR07B4buACgq5\njJ/t0GsDGqaEjOEW4UI/iG9JNK3mqMUs5CPit28jzEs27cyJ5I1N62cPF0mP\nm0nI0x5E986zcJ89nsTRKdwq2GJjS1whGenML+XzbX6BzoPrq6o19K+neCaj\n8VVmpo3RfeQMLTEBn9UHGQNRa+jy6TQ8esVJG1IH/ZiCLbyBKHGNqXXgqK3+\neOEEyg2I5yq3dMQmeLJeqz43N97+Un/344AZnbOdfa9Dwy9qe5QK6YJUIbcu\nab+ymbVykYed1obpqE0XAA7lRkGVTcYBKWp8HYSCTArwlxfmuvsZ7dUsbDuz\ngdLi\r\n=wecD\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"^12.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_12.0.0_1627415348544_0.013622630162450688","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/theme","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9675bd1bcd60a8eba1823d5fe0ae7760079e576","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.ae85f7eba.0.tgz","fileCount":42,"integrity":"sha512-YXSTlyV8wYA50ZzUZsVh2c+/09riI8YraCV80AYFNE6Ew89fuliLiFIFvZbgfvfGTr2awnj5FC4O52VrtblEIA==","signatures":[{"sig":"MEUCIBiE6tT7Mg8B1t+U9Y7ii7osRqB1M25usE9jkVumwoNBAiEAveeEAqgtQIp5rPzdt0DG+uDyOvJj5e3TtM1u7HFrjFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":228924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGORCRA9TVsSAnZWagAAOysQAIOIkai499Bu94NUd2TW\nYSGc+1XUFxRbZsHxpi2nZfFdM6j8ae39DcbMW2JwpFj0Bcxmn9MMuYZ4sh//\nw3DtOzDI19TmRmPNKmdZjzi9kc8BfpjSvBpnBFfC+aaFls5a9ThADQ6zKjPr\nJziC3eMhuR2kWpyfoNB8qyXWlbzmAcNh2U9JpZAz9XzaM8eWf+6fS240BatV\n2iknS4J8Yz/e1eHU9EG9T5aVU7gxPqoXTjhMEoxQMURbRWPvXigxfgj4P0Vc\nNSVRdGrumYFouhPogQlAA+ikSCr+KJka0igd4+nVJ1A1D4E5gpxD7OFq58QE\nxwbOujNNYzWyOv/X5WXOa1bhcWGG9D/blH5M1wCLIjmu4ivHXpGS2Faqqyus\nl//zIpQVLZbG9DgplivmRwbiGuLPECQu/uoTUETk9ttBZw62yUNUh2m9dlYK\nmCos8KSBcZgMrUeharUDHvuqyi6uX9ZDIx+KLCQr1oMvSVoFRdlkPhJBLLBx\nqPVKIO5UDs+gSMXGNq9AZy1L8rXW7jUkgFV1cEGzXk8JI4lcvNy/qOC+qSDt\nO+JfGPQLzlp3lYDEEoo6M4LiNm2pWZEE2Od8kKdD+u3PXSVPQ69AE5Tre/Pg\nqHGF1WRXY4knTaECdn9YhiZpafh7gEF5nCLC7QfFzGbeqPrEv9G8qmxVcsvM\nDpCq\r\n=c0yg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.ae85f7eba.0_1627415441709_0.18590683438074418","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/theme","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.5981207f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f19075b516b0c1e708ece7eeb0e9415e65082d8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.5981207f7.0.tgz","fileCount":42,"integrity":"sha512-zejY5z9NDVzHNmqid+tocCTSyeuuGmpHjNdKecMEzK5PHTtkfjnDzc8qBjv2UIipvR5AvU8nBdWNhOVwKUSDvA==","signatures":[{"sig":"MEQCIFpOstRcEttFqAp58SD829vw+rlWdMqShyYVS+osFAaRAiAc/lmBSaxd8V9fQkqGATdUfk+DCdS+H5pXeEjuamLiZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJQHCRA9TVsSAnZWagAA7esP/1p9AXwJosk/J0OOGT9I\n0CmkS4H3fCttOfuidCop0tNCkFA0d8mWfaEh43QJVjzNVlc28QYpIBiO79q1\nIPfbXwAe+Gwb1NPqNVQaRe0jP4BgnwNP2hHlabDpNHXEqzOToHGa8QRDxvPm\nUtGfDsINqKN2oRomSePAh4eH1STVLua95xYMVNutKGfBXelymlicD99azKgD\nKKWmOSJv9A+7WSu3kyW2ALyJFvz5tc3ccCiZK+1RMZSO8Q0R+GCMmPNWmIXX\nBNqxhlDJJzbaiYtCfH5iWV1k7fOvkUVo5EfKUTfhodL2ZW8zOp6NSvsMvTyZ\nxiSp9eIUWiX4yay7ucI43Z+DjYUyRk8gWaUBz1JRhzAoeqWkctBEqNf2Dy1m\n/uu41fJNegr8jQjcAFM4C3vWIUHAvF8egs4oAjrdkoTcj36X1lqJ1EfIJQDD\nsbMsAQdM4T5Nd1A491ajEVR2TgYbxAaGof5Jyvd7rm2YuKxbvOoIyww3CDPJ\nH85BXGXRKoC3MUzbQY/wiqthjNOXJeBKV3AM0Ic99Swy45mB+4Zbw9oc8IXN\nqH8ev9z/NManCfpdFYGr5yoyYy+CmJpqtiHfMDrOjdCkuvzkI0UMNpmqDRRx\nVP0eQb4n5U7RbXbO8WQOkOX9fQnnNLPTpkQsk+hwoErapBo6B8biUdqisxPT\nYCS8\r\n=B+aq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.5981207f7.0_1627427847627_0.11793321544985935","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/theme","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac936f54984fb1d36b7bac2d3e767988107ecacb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.83bdd0222.0.tgz","fileCount":42,"integrity":"sha512-6wRpDGL2XFQZd33fziitFSNF8zuaSrpWcvdXwdBZ2erfYw/luEq8Vrjj4bezyHcN9wXetEzk97dB2vG8NTJwKg==","signatures":[{"sig":"MEYCIQCheK/9369xMoH/+x4u/xfDXypHECNgBCs0ju3zwUXZVQIhAIa95APFPASpc5YgEHT2/5Ps2fsgZvpzjx+WKW4Wrm/o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZLvCRA9TVsSAnZWagAApG4P/icWC+VDQudyZgG4/yCv\ntemY3Q4eZO874c99LQUgm+dxYrkOGU8T9nhTD4drLrP0SLSg6GU/7y50Sdte\nJ+N/6vIn2L4sxS+dPksdc7qZV8Qke1zZqjUOgBJIm5H4tbviVeEwXK0pIXXX\nGiKxCNN8J39/7aDBCvDWMPjqcEzj8RPDKWonxPDlLsaAG7xXYGukhzGbkFWQ\n+TO6YRVwDbD4nMnC/+tzz+lZT1nOtK7C0/y61YBD+L+My1l1hr4kwS/paqLl\npEcZk66J0Qpb+e/OCvLmisK561+c4Fvaxrbsnx58Y++rdBpkXc5S9aFksPOS\nBU9nPuXWCW+dqtlwDJd+h2yurR9WM330io0AUWg4ue+9scEVPFmLcNujesWv\nKi2f5K3dDMm0SCltMGQVmAZ/ooqp28eVWToAVRYxYqLoU4tzpXXxtCwDspFO\nrchjJQq9dN1PNlj4YYM6DNLYcvVre9mDEF0Fi4NxUlVm+siUzArsQcrq9rKH\n76ShlGC/SD7kP61uqjLPpScIpPZC0l9stoxIPX/LQR718WzUkdGt4As2jXbo\n/ZJmqsvGljwFFzcMnCO7+BJhRTg8gSL+bNR28SAb5LR2PyFP4164bPLe2T5K\nve2xn8VkJXm8Y0kNKpmNg3hInxGSYrkFfKtCb5lOk4vp00IgL2U8Qosy06Tb\nyoX5\r\n=5D7e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.83bdd0222.0_1627493103038_0.26405560656261784","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/theme","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.28656298a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae8adf1dca7f1d60e261da17285283d6b7ec2f01","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.28656298a.0.tgz","fileCount":42,"integrity":"sha512-fmuA/dg7jd7KmssZbAdB95ccamBZ/Snqj8vgZ7o3TEa7Xwv7jHJTLcY895QZB+RKQ5OEJPSeqnXxif8XjoV6Mw==","signatures":[{"sig":"MEUCIQDP/ScsfPIf/4h/gXk6Z4B1X/xOJbCvW8djeTqD+L7rpgIgUt/5fhlX4MiYHCNPjvkhbM3e9UpP2AOOpbUewu08P+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu+HCRA9TVsSAnZWagAAs2MP/RW1Vk/kFo8RnHm0cDkV\nYhUB8znrEJnUcOk9skQmnRXMGOKhGkAe1FeafY46ZZUFm3ZQdCDJ7KDwWPtO\nOVJ7I8KGOhmMNFz0RxOCxTzo29desouWPKSzDK8gVm0/VqeIvSlCUMxWhJjJ\neoleNZ3TAoXDS3UlZVLDmqq3t9m6hcudbA41rmk6uB6B527sADLC5zMh61yR\nDXIfXFtVpLxeW/agZe7XdD0VrTRJOifsEVsDXTkO3rbwLHV8Icq6bCFgnlmv\nc/BK/QhSdi8/n2SR0Q7NrQFGEtHGkkTmN/ivEmf+Lb+cCIVO/i4UeeHQ3/Pr\nCjQrS4fS3zMjILEPZkvEUSTpyg8+3lubKtv6GZ9qufS1YvhAlCkpMnv/9pa0\n5//e+98DxAv4GUOy0grtAWBsN/O/iOR+3Fhe/lwtTXEepmIDUfFlwZ/iM4t7\nYJVGw0aCUD3y3V+Kn7Fu2XYU2swrj38y0Nt4Yns56YziTSEHEeAXQlJr8a3u\nkI/0RigQ9hi7hgfHcRQC0KPM0Zu/xF+2J3sQ+iIWgThItJLFC7nnOSnc9Dnd\no+ZD00frr5+HxBW3QW8AvP78FEPRWjlQBJynSUTWVr6YTVhlpMuDl88C3DhB\nWGGiuzf6/sawGsY3VT1jilhlvflkx5MxQzYSbH/5G/QyRDPmpiZnf7eRdzq8\nppyA\r\n=CzLn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.28656298a.0_1627582343661_0.7202277471845866","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/theme","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"722706ab49a64a5f143cc9e42e3067be3bbcf849","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.9e797daaf.0.tgz","fileCount":42,"integrity":"sha512-8JnhTLzib5PNxsZX0itEvE8WE+xD1TJN4VF+0TTiwCvWVX5QwLPeRFCx7Mu3+k0SgdRC8CI4IrgqOrcXZuE3Wg==","signatures":[{"sig":"MEYCIQCJLH/gkOtunmoHBvPRn6zOoC1eaB3ieGlcjKp/tDuiuAIhALx16IP5CsstU8ZBlzy0bGdyCl/cBZn9LBICU1ot1u/5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvS+CRA9TVsSAnZWagAAFAoP/2lD498HzHjKzIjlkOY9\ndSrQJH2G+HPJTUwcD7frw9a7B42YfAzPXn4ncInwoJen0ScJruJHy6ZxtVXH\n5WjyO6qF0xzGo9arWuwKgsvxjvR+h4FfC/drTUJ8sSyc+ZKrdGeRm3AsfJZJ\nDl/tqE1c6KCd7jCcUXEIqptGJCidZhHXKITCf25YWrZJYVOqkEDxwHTrpThl\nS70GojoR6B5aj+W5IQq+jVorL9ffFcyaymUYzPjbb3BxQsLNAq9dBze80Hrp\nHn9sq9rcSUwkwYGKXleoyQLe82FLWp9ojtc7Na4lrBh8r+UkrAo1AMOcj0sd\ntPdTnOQNV2fUuIAJ0eeVNFIlOrGC4mGhSSPog0QqtTOYZfp0ozyquB4LEjYV\ntuIfNdlFAV1BbPsI/E3HPeYzqy/c2fmGJr8uzX+umepov88MlcxC/93LruDo\nVZy4MrSG1F3hEdceAYshp9PnmX3kV6/IfjW7Fjo3ZD+/KhktCrTvHjCNbC8r\nxNkd0oD9vAptntvRGxHJirchvn6LgFndJNz7P/e+U8TWkVyy6HdF7ewJcDKi\nLrM+CUkHCXFXtAclx8jt/cV2v//YMzjWTVfRDuMsPjZdLlFaVVIbv9UFSnbZ\npSuolm/MFmyGzrFoaWszu2K6ndjykWs0WRDNqdTxV8yoN1mI8PuXooqyk/kH\n/4JA\r\n=WKHv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.9e797daaf.0_1627583678864_0.25689814168548475","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/theme","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ee9a04ee2b062bacce9b114c1fe0ea1d9d662c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":42,"integrity":"sha512-Kvmxq4HterHKJwRQ1aTUhyvu8RmW9J8/2XtxM9XCPF2B6gXgFu31Uz0a3KY6GFJF8BduCzrWM4cpjJ2vFEkp1Q==","signatures":[{"sig":"MEQCIByvNuFA09fGFy4nbfsLtox9GxYZ53+FuKaUianSvu1zAiBzHDuK6/9TQeWZJ06vG0MMdAhunLmbkIpCeDViV1Ocag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE0rCRA9TVsSAnZWagAAJ6MQAKGcLHnNpkkZEkWaz2gs\nR1dKvABzMeGxuUp7Ym8HebFU2vqr4yPqYrDjId5k5u2h3/RCJgHFusDPqIj5\nduwRlP5Bui4MaqBAr8nhi+A5NqZCcczeTItmG4E3Rrgbs3AyKTytsq4hQnZH\nQrRvI1prqUHHJ+jHfMViHvavjGropZmOJfTSVrbYKXz7rJIFFS1IgriiG2t0\nf7Bf+N83R016D4pP2DjCHRWvGL0jbTdsQTewPDDpCGWU22kTLbaLsRLEndZo\nxUAbCB6AfJZo/iTlf3u3LLXm2a/MXh1tEd0LA/BkGolM5BYHWxx3m/SYY0TR\nA/mHrS/m9eL4cK0LzosRzmwJ9njb57uCNbxwHklsFvnvhHQa1sqS5aulLiXc\nOkzLL4z6Huy/HGfoIMyYF7AWYlAKV+bR6TedA+nhmKEgC6TOYPcO1nC+iPt9\ngu7AKBw/Ju5osQ95iWhf6eu78aSsTbu3mOFfO8aCBA057q8Rs7VWqVB4hAbl\nVvdh+5MDbt+Kp3mBVdRAZOFrPuY06LJ+6b3dwFujZtXEK6PaOVPbzN1/9Oob\nsQIWKfQWYkjGwtnxswRSLmlb8maTr4IFrgncU1IEEpCy14t7emWWSpfvAFS6\npuQ1Z7WmQbQJzocTTnpl+Cp+WLKYsThynd4urE09cj8WSE2n4ogBi8/RW5wE\nNWee\r\n=Co4d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.adb9f1ad8.0_1627671851175_0.23170086848419325","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/theme","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.cc5377458.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a55625e8be746fb1ca94df03733ca853fb499245","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.cc5377458.0.tgz","fileCount":42,"integrity":"sha512-vfSlp/RYxVaruVnGhvqb4Ucwu5cDxJu+CtuzD9XiHzGRn57loukTtTWe2xmFG+8gXUCwVut8GMQzjxth+OPs8A==","signatures":[{"sig":"MEUCIAICaRu1H6cL1rZfwgH3wyMO1sDonZdEra8/6YVfMb/1AiEAzC5Ont3nB0HQL212p+LZWXgkwS6Un3b9MpWOPljCQyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBG/7CRA9TVsSAnZWagAAvzEQAIpSWjwtZvfjdGGnmP4v\nCPQyuJ2Qe9ftHf3xfij/Qph8KFdb/NsOn7AuriqeYI4Uaztn7jyXhjAqQYZI\nhbnIo5TzfJWuWMsrlgvZRKxrQx6lAHVLR2rEpillgbx6BHReLRfHr1t0cRWH\nuFfT+qmcRdpMo7bsCRjCKwVS39aKo2B/VkMrUvhfpcThsyHmgXSis3x1Irfo\ntFAlmA93K1u6kLE+qJWzzB/E1k9TEGbodkGLDojWaPnmbwaKoNYMcc3+Kg1O\nt6rqKx8yIhvP5iKFLoUypy1p3uSNaSRcMUsStB0zivisRGUP2qtGTpYbhJfV\n1BjW+/FktN96rFmsNMFwEgBhqW30F4RVlxoVFhccy+1W6YbZ9iczb9MAhAG5\nztCEk0VSnDF8GBtdKv0R/+X8eqke85sC5R93aUOsaAq+g8YhCjVzz/Tj20Re\nlkxSYKNlBP0S0OHjHZXKlLxhTYSWrXzcftfvwCsMSiJLO3z9Fs2C268ADs5D\nPPc5Z2/D+4Vk4gYEOle7J+7vNFR0zrg4+qpLmkjPqclJGShkirYsj9NBEOmV\nTQ/uWC/Adi2dL6JTE9m2TkdxrJ08fQb5BilD1lyyxlajyxs+Akotb5nsrN1r\nm44qvevan9l9z27vKfIyeyDGP94HgMWAIbqqvajHiGCSc817iz4Xe55Mi7hG\nZ/+s\r\n=FmJU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.cc5377458.0_1627680763324_0.6429246053975521","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/theme","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.a395972cf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71a3f269a13556d42803b54c782250df9e3ed563","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.a395972cf.0.tgz","fileCount":42,"integrity":"sha512-cqpOSaMEAetlntZuaPAXZjoB9oOHN2A2dHLMUmx9NOFeM6OE5lPDnArvH/EC9HTrc4Yp8Um0ueNTq7CcAq74rg==","signatures":[{"sig":"MEYCIQDBuWyu5oydZHUt7CcMxlNkk6Ogu2eIEg0rWU7fzljqUQIhAPaCYp7CZb6UDoo+3/fUYKNUDyTqH5QIIdP24zFIIM6r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbOfCRA9TVsSAnZWagAAT/YQAJPBcMztcAnheP8j+aOb\nQ6o1TwOqjHKKFWeLlAcKjTT/EaKO5Di7f7UH1e3lKz4ahMOQfflPsrdxk11Z\n7DTJITLqPeHKA+H/zokwUnYkOY57qKmf/bTfibRT/dsEG/8dcKtg6MmfwQyI\nrjnBDGOtJ/maelECh4inOMSgNUTdds/QCzSO+aCT3s8pXgVCEPq6q4u66G1T\nx42Ibek1/bzQ2FC6HfwPY3tIR9bjblwwcxw0ZVr9KSrTM7GxhznXN0ZzGKwT\noHHFgVJIHJNvBMwrLkLJuZSaBLRZvXQm5FKHCkVVJDoz8sq8F5Hi9Xtf+XqW\nkAQCza/W4eBnT0ovliUdGHgBfR2u3ibIIp5EKR9iD/iessGrsDiHnwzCqPSl\nqOv+bzg92VbR/hJlTB6VYFrcHhii5eHyvAu40cvbAWZQ7sO4NUglfPD6U1x0\n1T6oLUZPcT+BBu4B1yfVGwEdzYG8ACb7PA8BaHMcEnQpiHUm9Ma38XiPTcSy\n78+dz7JVfPdYn37+TKxqv9XYvS+KlCZHy60j0T1L4gxVWDytSpFxnlN5N9UA\nbFbTSU1Z6Iic4C5x6Tv20vLPOW+GswCeYYhTAmWx6XYA9wiI9LoZvJhmhcvw\nmaDadSTO0Jln04VYEIB8Pyf7ekFhT3Nv9kz9/Lh1Xz7z8BnWOnRj9iV7Aklr\n7irp\r\n=INWB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.a395972cf.0_1628025759125_0.31682272490577024","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/theme","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24280c57b72e7e2d91496ac023bce51fc0a6640c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.7c96e6b98.0.tgz","fileCount":42,"integrity":"sha512-R+BAuXDm5itjPi3YrUWDS6i+jJcbsFsNs2ZxWwAOHSaRbY3UClodzTD/0jnWEYmrdIcHfkyMbY9cYhHWYYXMsg==","signatures":[{"sig":"MEUCIHOjUBYYSyHa8X2IigtWTj0u61C1kd0LzwDydSoUy31zAiEAuwszWH0LxZZuqTQD9JurEn9AGe9x+txttrPIsgabaSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb94CRA9TVsSAnZWagAANLgP/1wLtSZI8Px93BHBpX1w\nta/9ncETzQRIfu9/fHrJuYB0IBBGb0jpv79j7e1nP81dD/hBypjOrn+h2KfG\n1DbGW2oZfXs8o1zJR7X+qv5aNkcOXXp/bmq1uBZ/OZwWGGktmuEGS5tepPH2\n0dJKPjJL80DeZBajUnC6TJwBEc8WFnmj+lfu/YRcJKJC1vsW2Z4/VQCKU9oZ\nlKeSU4nN1sSHoBHQecXm1enm4fnPSgSNV4r6uYEBNGeVUGLVLYNOUwYMqU2t\nflFyhxIkLuleuquTZ5dSoBVxtN/gKhDnshAI1TKTXQefpbofnrL2GtNmmG5k\n0bmVslRP3rpIHtjm8PAt5yrTQRB7p2QzpkjScFOxaWFASiklC7Xdnn4pPQvr\n2GEc2awZlzWUAFRP7gyMUvsAsoFHObQQogFqnzm8xL5E+NXV5HuscloG/LQ6\nDAS/9pHDSys+LJsfac/rCqXTaTVHofe2klspqDh8U+uqFkYFyP8gAi5BFb7x\n+k062auAUYPznoCwmEKlGVyl3/3QCXcFTm/WSyMAR1pu2yrjB+Oh8zfqj/o8\nDV+sfw2OIVgbH9A7nudhqBpfuY7UKo+T2j7pJbJxeAiWQCsCppitK9mCEy3K\nIBS3p+dr8tvTp/EAMnfSwfgHc9MfD8VcERo8OqX81getRUnZtZOUZSQHcvTe\niDRE\r\n=RoFY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.7c96e6b98.0_1628028791951_0.6291907992394388","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/theme","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3b5a66fe96428e440a386361c5ef0e9c76c3617","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":42,"integrity":"sha512-uQAE1d1KC2EYRkJeXTvD1AApjJUrrlRAksHkjeVsRC+VnZmUELLtpy+PgReyWxLNaIjqCEuo3qs66hN1tPNcoQ==","signatures":[{"sig":"MEYCIQCtyzBtddQdqodcEEK3BORzm8J6l12Mph2QxqHXpCUIrQIhAOLETQn+m/g3b5kVoaNb3bxz3dCijHMYzAuZ6okmT8J/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCynICRA9TVsSAnZWagAAQU8P/302AqTNEhgRkFU97WWb\n3FpOj1NfmFvXtDaCKSXexAJ7vEnELPKeh4c92P+02uncCabJ377au6z8cNpa\nuGxSC6Yn9X0AWum19frrJbcSxkG+Bou4sueHn2KFoidykoe78gecWK+86a1y\n8A4vFwXFGLwxumm9K86Xu0vPkXt5berKufwlWONxodA1T3W1jaD48oGLrHZK\n3WhQLrSWVRv6qX4V+1vMZpopwmvXP/r7CTVKcNaIkw15YCeAv+oTtjDOSJLG\nbCbIOU5wAoWYU/WGb22eC/RTybFU/UruhhHXywqg9c0mfQe/4VNESBO7ENVL\n+vYBwFAmlCXVVFRdLZEwhaxS8eldOGPA4YWRd198DoQkHsMCEoiN8ETexUuw\nzPtoggwM932A8IKV4XzqYELmY9qPQHEYRVDucfdPWYC4mKlIgYG6BBU1MEIP\n8R1nYMxY2OA3qekVygR6/AiZ7PsCkmtRLyuHgji+izi3KjPAq1DRHrar2f5B\nRkta4LWdTy7GqY9BXvVsnqMcNERvtp2/hkMQ9eNOgEOFPCg8jdIBjT6RVwG+\nvYm9unUTIZ/3gS2CpaMef3gnaCz/DaNg6VEzujqu68bq848W+v9RWH77LaSn\nENHz0tfRLdv3APvhIYw7uHGgiMcq0Ram6+duKehvEkj1bYgTyj4urHWRF8sa\ngk0X\r\n=uDW0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.a80c8b2c2.0_1628121543906_0.020516933531708803","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/theme","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.3dd611091.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f45326eed03961610e2db8340dd729044f2873b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.3dd611091.0.tgz","fileCount":42,"integrity":"sha512-5wrXvry1/CJDPdqNsGCekIE6b1r0QCJ0pyqayLSj8CEiaurDlT86isjziC3oL40tOr4nYr1vUfk386jY2oZuZg==","signatures":[{"sig":"MEUCIFRk+to0Y++nvQFyX9krqRF/cuLrwY01FzXH1xeeTM/rAiEA63bhZD/elQl3j9k943Je2TgazvNboLE1QsDTz3GJAEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2E6CRA9TVsSAnZWagAA3ogP/34wzATuFDSfea5gBnul\nWKHUK4uG6tJXZH3+a3szjhbRH3SOk74F9uS1M47dSm6XD5kyM+6tGFmNRKJ+\nYwndakqqrT9DuJQC+UNsjVhPtD2dUfXXC4a2E2ZpPDDPEgBkZm5HabpqGhGb\nTdoZZaJEFFLI4OBgoUha+pnao6WU9HVGzkxE9cz2o9XlFXpZHl1yr7JoiJ81\nzsISBT8u21Hlpc+v/qERbqso+VfRwFWonUclDzx5IggqDEHS024fLdl29tNp\nv5URDKSyEqgbgXRde7Qz8xSZFTwqiyyKPA6EIEHmsuE1eb4Cg+snckpkGHGH\nMq99iHLcsreFFzoSTUkvyACTFotkUB5Wg4Jgb16JJWcpH7Dmy+NIfUHTfj+l\nHu/WK2X7PviiD23wxUDNRZjEL4TirOWQ1KdRuFs0AWIbK460Pm+Muiivyy9Y\n+HOvd8Q+eAUxwGlVYAJxCAF+wy0n4AjsicEIiuPVWE8F4JPJQY7sW4ys+iW1\nktzG5R0Q9zj1ZUGa4ODj5yUkXSwDdLDjHNCbG9JackBjN8hL2EaLgOQKrAfk\nZ49RP31FnHC1tI93kKs8KsBIxO0oDgseDM2kPgRascl2g0f6+zKHyaFSsklU\n3F0G9FbB91tFnNkZKAWfcIjvSPwGC/j4JbVpNH9IHGjU6AV/3cA8ozxMcIvW\nyxfe\r\n=eqph\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.3dd611091.0_1628135737914_0.05195917512145498","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/theme","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c26e00c8e0108a72b76fec4aa695bc74cbde144b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.5dee37ff6.0.tgz","fileCount":42,"integrity":"sha512-MqaLBTrWEaqSbmQuXP0Yvsg/bweHNzT73PJ+8OBcBnh1Tk+2s7BUXSSY9CHDAsmZWIF41nS5vBYEp6TYOm/S4g==","signatures":[{"sig":"MEUCIQDdJRahqlFUdaNswwYMNyvbUXlh7eSXF0Ka88a6Ai+kSQIgIhzL5dWv6m0eKOjmQiRU6O0Q4flL1wUer1zllk/6Zgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCLNCRA9TVsSAnZWagAARJ8P/37l65ZKWRzAfmoziPNG\nw1OqXG9coGnrhGUqIvMc0XYDJvO2ZU5p10VxP/go+vQj2l2EPyatP8SqG+zO\naUiS+pYFk2o1L53oN3MpytKao++M8F7xYRVSkR8oPePNp5JhYd7QjCklCpDc\nE2rV/AsFtK5CZbDNxZ35BOfhkezBeYOyBbaJT+kl5jwYlFY+j/KzWoJKq8T0\nGTKJJWOMPgI/Jf3iAFT42AyF9deaaaQAw6N8M8jQWRwsdSyBIW/EwYr9vnle\nSauAQJD+n8onnuwtPwwviOGs0PLkf5w3zPvZi+FxsAGrNpUCPqf+KgIA4sQu\n/X7FCNHMhdTlXjrvtauup/WZZYIuCHK02/B/IMt5pivUZYiUZEF/bmc976GC\nf3nL8hkFERfMdb5iCBqcznFCYq1c/SdyicFcSVPWxIqwvdjXcxZgwUu/3BNk\nYSz8kMXIkRIJN6cDa4RUJDhJ5gcZB04uqnGKP0LcR9cbodQgy+gSVhPZHNgR\n9pzPxk2hfzZj4BUCsyEDGktVwh5TNUba1G9VeMtyUALy1WurcYWCCz3YPAY9\nmR4K657jitn2gkVv8DtusrWsw8FHLgo2B1++W1dkEwDpoNRxVZAUinJpUSmk\nsyYXRFuoGeHbyk6YMv7O1STL+CNpHMOq2YOkbOXuCTxDXh+Oz/9lNMgINI2m\nw4J+\r\n=8Psm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.5dee37ff6.0_1628185293134_0.5617185486985798","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/theme","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dd6e8923ac9fa29fbf6e0683e735af8a3f88606","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.bf405d22a.0.tgz","fileCount":42,"integrity":"sha512-cnYKMLWnnfxtKyf+YGS2JVaVDqU/XBzLAEkMuDChdCg7de6ymcvolmqVYjfNuHhh2SHf8K8lpuQ0qTWXli3XcQ==","signatures":[{"sig":"MEQCIGyXHRk+VuV4sGSWQfJ3TcY5wAfo+mn4ntknQV4LhvZFAiBGcR8djIaO/pXuyQPQi63YYHE0y/EJcVkcUMfSgATwhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEdUCRA9TVsSAnZWagAAQdIP/RyvobJnwHWgCdzxaaXc\nQ4dXEsjGORa58nCieTTVO8pSTG6dLbPT1JZlClgKfGHA+ysyHKDLLJKZSuMq\nIaLyJgXsgdPA4mCnDhI3xlzsZa8P3D5y8lL+BxHmbVnj20vAoalp/MgyFhs/\nRq3c53qWFl/izoDuxa4YaFKapHjSDt8JI2opWt6ZiNGNM4yMmHJ6Xyeb212D\nXnLT7wCI9BVx0QaT+h+8DL/t+tkmWDlUSJ+Fa9H2KCMi/XJ1ZpN3Avp0A49O\nD/bLTJnvrgpNOJBQUAecrMxD5W74KdWnYYDWPa+S1SFlCnXEGliwmprkXFyU\n2wiKAqxm/SEhJq3QoZTm9ti8VRgbdjnMXzCw2t/jbZLUaczYuVGFTP/+886Y\nFT/eL5Djp9dvIc4soMzB56emVcgCa6G8FOGX1ZLcx9b7cIclgOo7oTCmggN9\ncIIGmaaQfpqzcJoLyl3GmHlBpmiZaNJGpl8lgdZvIbJuWOD4AsxbUI+3ORxO\naa0ymUdGfC/AR4xkjbJwqQWMg4jsfhACyrysWECVNuCJuDKcw36zQH41v8YE\nNb7Fp5X/W8jPksPye9X1ABEbERMsET7keRUCGTYWZzJDJvztnzo2WU+b+iuR\nHozEgWYxqySE+ZqR3Z+8zdZNWifbGaDkzbiwtC9IyAj17aqoEEi3I3lwshKp\nlGof\r\n=nY8+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.bf405d22a.0_1628194644051_0.33850952994499206","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/theme","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16f15b14086d5bbd5db37fe53c676628af4df238","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.b47dd37a6.0.tgz","fileCount":42,"integrity":"sha512-hO6pe9ddUVqjS8OHLIxNrjmxqjKRglMmwG34N0orCiraa6xzxman1XqaU/lXYDrhnW5Mcguoi+pgGf1eiZnSOg==","signatures":[{"sig":"MEYCIQCO7VFoK0LQedfzZXpQ41ofHUkzctpj3Ochl9rOD6wpEAIhAJwqEgv+YW6LZvKDU9ngyZGEHrUpRxAN5aL2LI3FEF4Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE7KCRA9TVsSAnZWagAAObkP/jIp3L6ZfpnfSlXoyuFn\nue9SJ5dkHJYDI2xJxC0A/q3h6Oj7HDzk2gWK5HOEruGPuKeRbRJ2Ter4+x7L\nSqD8Wh9bZdVfCpu1CaV9NZd8yHtLKfz0XfcvR0TjiZD3INZ/LhyMt9scLRrA\n6iXbpOVmQSFHqsFmqFvGUTd47+Kukp0c1XciKsQpE0asZBr9sCmON9laxZbI\naK7C90XGpatbvyuxnwkqdxji6wTLsgEL7JJoLK9+5n4wxsf/MW2XWB1PT3JK\nMvQwqSwNengkNp/VLsStXGlcNiCHiwCpH9eUDWTh8pk/1/LVWHmo8XjmA00s\n4VJsv87JbtBB7KGBwYlfgwcY4L7flmC2F+YM2Qhejm+8YSvRcu2E0s5sJBoc\nNxt3JqaQyY99mTG9Qe9j0Bg9s4kzr63IV7YgMvhSxgxzW6k4OdAHRknTqPbp\nVvoSbtVRzzwXQ2SqJFRiAeN3YDCNBJqc+n69BrLJ8jdzVIZ7A6pRIsI6NzEG\nOncjUwwoEu7uOqhgHz+Qd4iWfgaXQc99/EwOGz9AOR/SXWqW5cu+2fdvhHGP\nsx9RCx7v7knX8jmryH9CeIt5QLjg/NqvfgmQkU+9ktSCWuwTlb+kA+W3fTQU\nG0mtGpMKujVSR2dmVjmgGc2R0o0HPTJ7zzb0SwKY/gXTxi0fiCgIBMcP80S7\nL4f9\r\n=eed4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.b47dd37a6.0_1628196554690_0.9591162036493293","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/theme","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"069a92d4c26b81ff22ea2a5ab6c1658b09b74ae9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.6c82b965b.0.tgz","fileCount":42,"integrity":"sha512-FdTK3vBFaf5gT7nchIZ7XfP/yzU1l8g2dBaUC/qSedpUnTbOl0bPgaZMZxvauyNq2VpCujnzCNktXxrw/AgIKA==","signatures":[{"sig":"MEQCIAkmBpnG1MHEK4DV1l/XRbUNoB74BnXgPBMloikcE5QfAiB8MSKk5RHblu1j858jnFRCB5PSgxd/dt7FZRgqgriA0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDV/RCRA9TVsSAnZWagAA69gP/1o1QHzQHlskqPqjQJ0d\n1xz16Iiy5KPWzp0IuzMQc65SQxhg9v2vajqjJ9qpApcShD0xDDcwJ0Bu6Q/t\n/I/T77XDN8/oj2hgOJ17d5JXeLB2eF3Cldt3hB1IOx0TQ91/qxW97P/NAUYt\nPdjbuhEagjLbm5HuHUpP5g5NOmpuTDdN3e75bv2uep6kI0AZqCvnyc5xz8St\nO0Gqyg8vs9anGGMvInkZZexCv1xyPhrVPd4kmW3/mNmTvaIc3QytOqDMlUC1\n56ML6SMbzTyJ7SKQ4z+ivf52FKLT8eduvLNIfr8+xZSRVhuPkOsYoxgha+Kz\nDfXxmwZl8PjqZNlutlo0EDLQrqkSk0c4lEapRcBxcftM6S27yGBRajDjiapo\nb7bUl5ErJIQIEIQipvd5dR9JA8zqJpEu8SAusvyPp/Ociny27+mjaXhp+XMk\nF+nvA/WN2+8n0pjiudmi9xh2JUuDRlzAoPFvESb8sqEcMy6HemEtyGJGE6Jz\n+34OSc9J31k/h8i/YX98tXaoVSnNNHFYUjvUXEib3/4tYk4esgsrEzsRcZ8e\nzxWpkINJJfAWUGnGBqHNWS8aratEXX35VayZuixNgjtfWs9X3qztiozUCA5X\npq3pmIIey+2gKc2wTl/JdxZzHbK98ZEbMYT1Wy8c4EVaMhrlqSxZtLMEoc9E\nhAl1\r\n=hywf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.6c82b965b.0_1628266448893_0.7217857502592719","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/theme","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6102f90d94faf50c37100176bdfd1c68843cefe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.4ca11fe76.0.tgz","fileCount":42,"integrity":"sha512-fqKcuIdxL4UY9rYjeAsFT7tOzli0gNSGnwUm5I6WxhfLbThIHBksBGvHHAacjO7Ma8sx1YgQu4ApLAHq7siBjg==","signatures":[{"sig":"MEUCIQCpsSpFMW7AqKdaIFT/NkOgnf8hAVdqvQTyUgagFH9mowIgaGByTCPqpIPYidhPYD6jU1CCrRetdh8gwLG1TwMkNL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWwhCRA9TVsSAnZWagAA+esQAJ99yDX3ztX2iPtCD1Hr\nRJAXN1LIP3aOfVFkGDD8nayy8CYI4dKajNPFPolwWVBH73Xv8soJsKTg706j\nwrNMrqTBL7WnmH5SS9TedeV3CPtkeh7J0zMLVaNsQ5iErYtqrH3QQ7Tjtbyn\n7GZDREsMWCCAi98XxA1p2gkUZ03gUNhuf72yLTaGKDISUuauniHwQda+pLxn\nBSVUBE1L/mLHCWZmpBVZmHQ3YvBhyx2wW3snY0kw1KmHzlM0TgzXC6NcUfRT\naY3DQEbBMoFqj6VUPhDS0bhkVGa6N4Au59oqsJe3S4nOpf7OvFSWM0DNq24k\nWcUT/TvRz0PSg8Htnvfi8bTDHmIzMXEIeLcFnZfMFxfEjsTyoX/AONdlu1B5\nlSoIp72qbHUWZQ6pLhNoJviTSO3pt8BhYotGXHUkwYFbp73QIWdMFqjFaCz4\nG4DVjeH4w0kEncWeQIX5ePnThWInqqmrCORHWh7H7UImsuu4MvWcS3AJfjB7\nwRrN7YI/QM/gmmHnt2jiYfEN2FcmDngOlKo9TYS+3pr7bpCbOCcQ+rgoVYON\nDL0ezRfjn60itTBvLcF0iUS4jJT4HnwhoD97hRhY//B2XRW0g19w+2i4qvKh\nX+9UPTOmb2uYVtUeLLututGZaoRS0bkL6sSghlwBNh9O9Fs/ECfbboQSex5e\nDB8H\r\n=u9E7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.4ca11fe76.0_1628269601352_0.8933211285203435","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/theme","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3a4f1d6c2e506c198ae7d4d73ab1aa07e4a204c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.510cf90f2.0.tgz","fileCount":42,"integrity":"sha512-tE/e0KqWUd3rNm36CPKPVbEplEFehTkSHUrCwcuVGQ06ADXEUgXHVRmJ9PKwQVJZZHOLsTbyIrEJR20wPYiaQw==","signatures":[{"sig":"MEUCIQCiGWLggF7Vk5S4K9p558N1cDBmluTXGudDQc1SthZUCgIgYNQjVJVXe0TPuD4gMchBNeqFqOO+eDAUJX5QQhNzjrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWL0CRA9TVsSAnZWagAAq8oP/i6omlatiP7hojuz/vjb\nH4B12poqPcz4ORJfDIAlHZaOfA1Che9RR8pbP9ZeUaGO3Tw9WzAt9P8279Cd\nvaTEP67YKSC1Ac4F9TDVsuzS/Qsv5yOR9QNJAqhkYbT/8f8ALvzIZg7JInRz\nlKh6ry40gWA5Ehed29SRJrHeO9TJjQ8RoS2E9f3CCM7pSyL0vrxHZYbGHtOs\n3e22g1cjf8EDtTtDnK2M4aFpseshQFosCSvwsrxKcy7xYWabHWKWdaHFL7xh\nm0agcxgvrMZrHAsdRbFwp2DqyzRQTW9xq6BRgjlkGCe22FvzVYHYDFWgExCH\nr8RP0bRrUGfh97Y1K/66GYIeMCtmhT3OfJZXJJMN09iW1aSGlmkq09moB5A5\nivXlFSXHuv44GgwN1m9kfthS7Dw9UkGP6RLMFTe4qBH24oSebD2sdEl+nL8l\nenQaEqDEgQq3ezfZY/0yVkHbcDdSD1tZgb7ryxNnrj/IHz8EsQvSLVrw3Po/\nSQMQIE8dYTOimIdiBz3eoX2gjZ6J0yZLruYEOJ6IURXCN+0cr33Mzt9HpnzG\nEeR76YzEAZiUHqRan1pQIssFMt2qRu58Jikc8bgkDsG7I7X9MiiVvBYUJ+qV\nrgmile8jEMnNovK71uVPuejYbSCVdIlBC18tj3Vg4i2egSoQtH/qO2OpOxvp\n8xeJ\r\n=zW1a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.510cf90f2.0_1628529396120_0.963312324835089","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/theme","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8187ed9ef6ff55a569127aa73b8659cd850ee0c6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.17580ebf7.0.tgz","fileCount":42,"integrity":"sha512-wIihjKcmHVwItKFu7cdBf7QZSQG3eTfJAwqDtWkzyOxkp+LO2/0Uh3NWtw9DFwx/6MmRO6c9srEKNcdygqtRxA==","signatures":[{"sig":"MEUCIQDbL+9kGRGHyK24pLjqM5JcBofXQQmvkPQMY0iCgQ42jQIgQjLvjCEPADD72IQhAWqMuZhWfGQZ1l3tR89dkj0wV/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXEECRA9TVsSAnZWagAAzGMQAI1u1W8J+u1W5VBSi8rA\n2hoIAInyGcGaEdUgWjF0NPTXTqreNeq0iywj186PvPqX1Vj+D8tb5bidF5Ph\nwQwpBX61xzliOrvE81Gd5g/jPZ1oYARbB4C6NRjNWDOq2yuymFcuiPMdWmRF\nZsAVC7goeBjovsO4fK33aAh0FG+ktmbRouADysz0T/dFQ9BnCsOw3c/vJ1aq\nfzERExU+bFHZaIhx/xDnX/raH+Yk/Sr5S7FXytphpsOVtdcQ2xEaDGmPtPc2\ntJXo4U1Hq0gNbHZ1dmX6SkCawIwqXXIcVIOCd45B5fnuEUcacrAOXaQv+r6f\nIOF+GGQAymjy5Lqd4HYtTpTG6LET4pyR/cwSHqlDBuTsewYzzO3srDS3+4Oa\n8/37rilPlufaXfds+mc/ut552GT93SXlqeQTz9kX87yZzi1JR2Yd8Go6h99P\nmPyM7/lW0gIOzcoiS6dZp9PlqHAuu6P6WUhe3nU5MtWEoHkR5I6wyfL6QgIJ\nuSUv96ZPy1xmJK2NZ3fRoddFjioC2/eACeWSAZilMEAWW58wbQmIFao7Z/kE\nb8zpI5VL+uKloU9FN1OFt/chNffRkOO/l8/xdD2IzuyWmwWzWs6bKPiwcLoX\nVoQCgNiwTe5SlkVNp6JBHyQ/2umeaIvLph+FQwH96L6CDY5s3a5KUZp2iNuA\n1Ehr\r\n=If0K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.17580ebf7.0_1628532996094_0.05335409134983071","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/theme","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.7249a3060.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31e716052fce2101403324844131fa1e724b69fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.7249a3060.0.tgz","fileCount":42,"integrity":"sha512-ma6dEw8RxiVxGnzj2eENb/J058yKOTg6/q6C9jBvipI+WHOFiZq6byY2Jt6tN+r7gmG405FI8WxrBNnixu/E8A==","signatures":[{"sig":"MEQCIEWCKr4S6M8vBRx1ECzocNpXkMaLLYrRB/c4CXN0GlH5AiAZe7kFiAFeOPYMD98UutFsU8h2v2J6VvS+TRe+s3mDrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXIDCRA9TVsSAnZWagAArP0P/A89xMWu/Jb2XbAtNYjc\ndtHAjs75f3K9RXZKP+Ph3Gu7L1ZKqGVztw2KEKUcvIhNAAS6oqOg1VH36BKp\n+RxX2sFdvrIRG19pMIHl2DLVDqPF0ZCdNpFSsHgITl9/5efofmnSqmaXq3t3\nerHNlf1I885VX6yVHCHUHalNwY+KXQAfSq8FGWNxSGfORobrMFmpao9xcXX2\nGQXc/6nz6SbJUZGy9VmnxL7uKH89QLESUwhJff3SgO5vYtYa43vBmpf8w5C0\nrxRrrKWbV1mSxua6odG76G31+t4wkyC7H7+sbwZOFpStcsiWQDp8YBrSSo54\n8utellHFC1M0YqGAR4FbPYF3+4EwTPKhrSJwZ5eM6I67XfaM1Vmkt3ZkmEoq\nQOoMSVGaYFwLFl4Rb8mGFW1rHXCqrPJUXSZ2VPYKXx17g0EA3/BpxVcudeqI\n3bUvg7kFDHVzpBQwCzW5QAcf7gFwr4sZLGL2J5omtEK1pU/m64ze1FCoPY7h\nE+Z86mBLOPqfRipu+l+kBRjMWESl/Bm8737myV4Un7SO4RYcbCxJe83WUYh9\nr65c9Hkx7Q+F3ERxd2Wbz5Q785iW22sqReVyz7XdVx7Vg0Rre1nSdXnl3unC\nTF982wfOZ1sDD0OAuI7wUgPJmFr/HXcCWOu+YOUKa7OXAdm9RKKdZK0z02qM\nrbXa\r\n=hmYM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.7249a3060.0_1628533251374_0.9771820978367369","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/theme","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.4c405863b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f1158d5e6a8dba798dc5b8b72ea2708818759dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.4c405863b.0.tgz","fileCount":42,"integrity":"sha512-mCgnbO6NovSFJ+JcZsxDzbDcz5fNrNJo2c0fZm+FJbK9yOhRPVOwwkYareiZM576PLiEMnLYg4VHqWmShYdAWQ==","signatures":[{"sig":"MEUCIBu4q6/eKQJzcReRBNfKfZKhdTOak715a2I0foprKtSUAiEAtZE2i7iiJxBRNHKYIfXDwKPznm2U1c2KIfzBAQaXJec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErn1CRA9TVsSAnZWagAAIEAP/3gQuN+WapTDkYopkNgZ\n6TCV+9GM0kuSHRdNTyjnLTVKpTEQrbqMf1ALrORIj+qyzWkvuEM4EA7sWPv+\nbmKgI+uJmFLjyZKBdv3X0IaFMPY7ganvM+tKmfJwnzqgrzR5oRPVPOlqsg+g\nNSNFyZNRaFZ8TevBqOqTnJTj1OIJdhKQAqf3/zY6XYM7a+v8FA7HRcg6W8ix\n/bqGQjgZkr7lHDYKJ6vPoWJjB5vfK5XMPpqLdo0lwA3FHPQshzBDHvUfeDR7\nFPQr93Ow+5TbR4LJ558cSJi8Lk0NZs+hu1QnOUBTBLIx8NGQldW1BK8L2gqF\nhL7qc5n/SDSlGdCxH5rTCoyyNFrkIkDAJSR1rAVSwVSNp7IuTRvL78+YV3Lh\n5tVml4PpOMkyEzXYWDwMuG+ALCSJpXGeFWhhmJ95IsY1tfeQSLfEVH0PV04U\n9yHVF44skrAuLzlbgZFT2bg2ELDqJibY2esh398kTxPOSVN3lftZ9IEEzJEn\ne1r8tReblZdqRSEzrtfRsDjkZZy5E6ewQZVdBnodUebRo3V3AQI94WfvPZsE\nPHWjKN/Ep+ZDb3TUkA3IydBIEFMqOaMbGDVYnaV8rymdw/n8nuWsL3ml/na6\nYI7PnFixZp3ORxhK0vUr4eay1aAa37UEvFKE33fPeRuoNTciwyG9yuGLMq4q\n7ZeB\r\n=qhMP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.4c405863b.0_1628617205311_0.7800889725575746","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/theme","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb08a0e9266a7064fda62dfa24f0a95f2af33cdd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.f4241a42a.0.tgz","fileCount":42,"integrity":"sha512-dG4TuQjVgzoGrCXBOd9xxycrzYs88BrV0ogvUTUNgpwhx2yKvkvUm8v1Cg0HC7VasnRRMdNSIHy02P+SmUZ+Vw==","signatures":[{"sig":"MEYCIQC5Qa8pOPuCYdwNpjCpypZEpyB3ZkiTKz+UraUjcBTbrwIhALbhQeRcJP9meiIYqVQplRc6Sb/eqDOJl+Lz6t/eQYIQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAHGCRA9TVsSAnZWagAAAk4P/0T4r5HWXXV1s7cVTFsD\nbqiRzSup8B9A8+6edzIIVfVi1MyIOIisLtwC93NtT5rppxr63Ad/WL07Q3o8\nneiUrbtsIMNiYWqiFWFdxuyJBGaX+LyNWB2CNmXhQ0vQzmi3BUXp8obs76Jw\nWISUWuX4Z4lazhi58MjFYgKJKMVXul9TOHBcrsJpEjvBkxfqGGfTX3th0HwJ\nAIGVc9AA4IxMYYvEbpBxv0kKhRlpPfxZHhiYF/MtgwuD0HA7rmneV5l+XMjo\ngW7Ftq2Bm5kz1f7xGqLw7o1X6oqide8uhJwlSXs+PBccHVMRjxda1YR+4fHU\nTUv+R/uvdBo2YLK3yDyaQsRgHuiAH0x9Wbq+kaKmtO/Tv+2mj7mdbzb5EEwc\na7KkvgOTW9hmf08sRSz0bgDnJmPTXtfsFGsie6qwmVcmtsNMbajHhnQUWTtM\n4huiwkqJTLHVbCYasRrVmx6FClHkZfGdxpwdX4Ls8ug39575ZkvMtgmfmtp/\nMN2nJjQGJcmWZFccbPv5D6k36o8d8BxGv1uqDUXgQLRTDfXs7kz/6E36f1nu\nhGfKFZ+C+rODRz1Iuc5Z058uBgHMUvUlHCrgfnlQuEXGmljVxMcfO5WrSTFo\nQ+ZUQxgP0SrKHAJChdysfSMpmrPwSsgGcKqnEqUWZxLfCPyR2RIZVm+70sns\nS6/k\r\n=B+mi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.f4241a42a.0_1628701126386_0.5233000949084663","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/theme","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c780cae8099201b0c76e36d17140136c3ea0de4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":42,"integrity":"sha512-DmXDklFTAKEs73uFCMX7tQoa1WLWswiwIgJYgep4MdreBbx2v3l/0Q6FoxR8WbD0ZhG4ZU112fwLtbMBjwf9Eg==","signatures":[{"sig":"MEYCIQDHKNoyy/wTMaOR91ZG/QpRRmOThsrh/eHHqbuilRDxzQIhAKJMYMbqylsaus+2AN2tJqO3vyDA9VLVFEDLupz1Xnlo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEDoCRA9TVsSAnZWagAANzoQAIsC+RvBPdbHqiazFxsd\n1ZyRHsPrbrLaJ35+STF9axWvJwNM9UHJM1CDg9XE8nCH5BwZqg1k7v8aGPv/\n9Je41w+5//w0z+uQ0Qj25SEeT/QHC/wcxE4I0ONJQ2QA3CkxDzF+7D72X0Uw\nKxyw5dK/Kkr9yxMrB6l2kN4aEWo8JBlwtmZq17b8Wh7IQEoRADMcOE6W6IOq\nq29AkH2aZAdMGrwKvt8ZPTNLhtvIT/C1Y0ArGJhMBeOh6RCZGtd9GeeDQ/hS\nPFvXE77kzDCaEkF1UT/I4JWwYDYlwMvyAH+Lp+SQ8DdhtX0Lz2ThS7FuLfk8\nX+D8Cv1e0xkCk2JaZFx8H4zfDESTnac7N6F8ADt6WUgwmUW0bIl3Bd+q39zV\nV4TrFLy1Kl+kSQub4fsaTPsNEXYXVA/66+W8CMKpkpc3tkoD3b8tVd0Ar1cj\nnvOnjKrJF9nLBXZ8QcUV3mXQOoiZ6qspsiZfjJT35l99d9jPSwIupBq7ZLP5\nXNHY114L7QQ7+G+w6eTL1NgYVgj6Y6ELV2FQ79JVOIrWQ2T79MIJNPCAF3uF\nq0MbqKCVqRcVgseEUyJmleI7GA8pMtYA9EKfmZpUcSB2NCm53tw9bIQ1dCPb\ncSTa/nLx8m5clh96gF3tYE21wUhLKm2xLYq5MQpFFcIhFcdZ5pyW+pdngEIn\n06iz\r\n=dTQJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.0ad12ed3c.0_1628717288041_0.8347956617463734","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/theme","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"855c7c818b6fa9363b5179d7e7ac6cf4cab04622","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.077dcfcfe.0.tgz","fileCount":42,"integrity":"sha512-isHHHqjtZCI6QW4aTNcgYadrs/oL1G1r7Uol40kidTuaWkfwd8fmgH4o9wtiWSz1NAUGm/L0EWJCBdjTe6mSEQ==","signatures":[{"sig":"MEUCIB16zck727fh+6pbPnb/kjrNfJfWCARCN+HFFh6NKIjGAiEAtTmbiubXBAoXt/wISv6W1c04kNteSioh6sXCkG/WhL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWBeCRA9TVsSAnZWagAA88MQAIf+CzHKIqFosEE3XG+6\nklsY9CJoeSGz9RRKlaLD3yEyL/g9oSuaIalslV9GUZ4ICkBtjWQr+EqhbCgg\nvdiFUhSA2NxidCJPBPsIKLvcFEh0S6Ze/uxCxRPwk25fYRCMnc+X0f7wY3p2\nRSsam9mBFRsY2lFtidRyqebGRvC3NwIYjFwPQQEys1O26PZsIZbOqbMoQPD/\nXGLhUYnawXux71Jvq+5EUraOn/cy/yQvhiwC+bjwVKkHFzIivBSCNAkqDMp4\nLS1fxpPkw5/z3WSVknjGy4F3rHiqbrxYjy64Czs5e1CbjMt0vhkrRkelc/D6\nPKFD6DkXBcH0lCjdlKNBWHFoMl0nvAUDHa+L14SjALOmZ+qrqdxcBCGirBcZ\nCuagirJMUbvyZoS3Ie3U4ZY+TlvkpZUJb8gb/limeKJn48lr4scx2AY9hknH\nF3Op1KyI+u3KTEb4Cnsd5k08+wa3SpGRNL5WQ2WH76LT2OZ7jjiWlvrWWBOZ\nxpY6i2J5U0lNf09zgRBGSnopV1DXh/2IbVvRgegQX8yH5Y+1MG98gx+AeTI2\n05dBFanMw0mZ3pMrm5uLjZMyIjsL8BFbfuKrXXySzy/4hpSBoXPVTJ8iQBxx\nUXRViuebW59TcWX5d1srhBxP6YrBfncEZ+mILBw7KCVberfYKP8Ct4q7tAnJ\nw/mt\r\n=88Fo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.077dcfcfe.0_1628790878210_0.3055876889402058","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/theme","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.e3346766f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2487745bc4078167c52353a3e9df8ab143f03b7d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.e3346766f.0.tgz","fileCount":42,"integrity":"sha512-lUzgpg6kMkhFX0u7jM12VkZxUIjq6vyY7cUfhYhD0Mar+LdV/Jq96AnpyP+yHSkSs281tv53utbnDDKVrF72DA==","signatures":[{"sig":"MEYCIQDiSoSC51hwDgyjnNcp7UsQtrXLUXv3sKh+UYXK5YEALAIhAKoIrwH27x2q17BF1yHaKgb5sjitohqSZdA6MPE28Thg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsuiCRA9TVsSAnZWagAAhYAQAJEd7sxGu3SvqQLcX1FX\nrCsRpqk4iG8vETZ4Pa82SP/mSDChVxMlSdIiSuRvs8CJ6c6PPhBXpxcGSnwB\nRCjEIrnTx55CxClYGzjj64PcBc/3A3d1EOllzE2VBTozhzYg+TFwVlChzpAV\n100VBs+k8zA4OlRaPS8gw0RpHa3D5+xb2a4zbbr0fSisL5Dze3ZjQ9Wws+sZ\njr8ri/18eCsunICGEypO5tGrXqQUaEXH1JEBZ7fmEtV2acIZns6IeQ8mBNx2\nhejRbdGSnJBZh5eQqLS50bO7BKwKemm/dxs+KMGl1XTkJXTBvVIu7R5GjnBP\np+IfMM+lXLlWHsAYtqJfTXUlDnUJcWLMOzwae5jILKr9CAXELpZWhP1Se8LM\n9cF0tn9o83JET24XeD7tU+4QAaoXxp5siItyAsw/VBvlIwyw0SrU1OBaSsEF\nCywh2Yiszl16ZzSkGACp63Uc8V0HIpfnEW0D/OTRWVbh1h7ZfFiE7e67+7m7\naQ20v2I7khD66AO+srxN1+rqES+Tx38eEv5iBFEs3W1Ie4TbDf1pngKSJqJt\n5TGP3ChIOjGKFHQ8AaGtZcfv7ELMMPJKBgyLpL+icnmQ+UFp3aybd3jT2Xn2\nqcPg4w0KAG5SHlEKQPoHwbZkruho6yqv022X+/1di5xeiENAkC7f7mYaPhzB\nOkph\r\n=fTzi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.e3346766f.0_1628883874127_0.06930707505083755","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/theme","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb9da290bf2bf72182796edb65060e5545f16aac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.2fb068fb0.0.tgz","fileCount":42,"integrity":"sha512-LemvaMA7kCYB+PQbZKaI6//CjfFnKlOc5MwNHB1WfbIgL1g7a8B4brdmoH4hE0giU4bblguOWXWEA0ffo9n5Fw==","signatures":[{"sig":"MEUCIFpOP1/65YjD5HqWiWwfpP/NDY2ebQgr8i3YeGT4ySU4AiEA0bYOIbalY2sC6JvQ/F5Amlo5UbLmrBRIxeU3eyC3nkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsxnCRA9TVsSAnZWagAAe7gP/3Jh97vs9Cq2NtBsniC/\n8SMG60jWzpqTH/wEquWNl0MSjYKH3dt5mcJNNivuNVLVdBNBdRFxgXVud6Nk\nG8mLxdqD60+WPBKRIgko8+Y3ibaQMYuErhuYcjJMR9ARon9+MAzcgMfIZv6O\nRWx88ppdnpgf327FHfBfGeG1H8KXCuaFq87ZqI4giQWw79/QWYvANQkqQAw3\nCybqKrNyvSKzSTLQuQ2yq2kmHpgyuULSHX06a8bXFglfFqVQpuPxr9cOPdW5\ns9thPt1/CU30irsgHYs7TUsIzFu2bJvdZ+zy8UuSXc+x6uDFgX/f6s8YMV++\n7r5S7SjhmZlkxc4S7wkFbMzNtozmWVEaTTU7d2KcKcXEG7sZ6wmLE9cICusR\nuk2wfU1uRuJiRfN88G5gzLlf5uv3Cd+JhEYSsfTdcS35rBzJF4/Z1WrEDx9T\nvdwCTHcok5+6Ty0PpxYys9sDyEcKSYdgcbggpzL6UnwJE+1ZyApiZCmTqwys\n8h/9kg75I+qo4ApX36mDGTzTVInyhhMxjRJ+u4uNYYfzjnLTh+bt+ehxZqXL\ngGPz8fjk6DtjlEoybFM1qpBGjkCzR3apEJnLj3VxIL59Zl5JXkLSSti81bLb\nfcRfx12kMsesUEk0ZGcwyQS1mFxnlLW80Ja+hzjo/+gOBQjRfADyvaWV4gdH\n+aqS\r\n=prVR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.2fb068fb0.0_1628884070962_0.0822356742777075","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/theme","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08e392bfd740d57972dec50a71e9715adacce6f2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.fb76c5069.0.tgz","fileCount":42,"integrity":"sha512-Bx5hCpmldGvtq8dS9rw9m+IaVfx4tCpr1OMm21VJRL74aAySlkjA3UL9ftZFNaJWEft2738I7/STpi7f75j4Xg==","signatures":[{"sig":"MEYCIQD5PMhWhF1mTbPiafE1rsdkw5eFfCs0me4qk6jAw4A8cwIhAIjmDOvDErEpdrV7+dkNWGbsqs6HOptcNbQwxihL2u2i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsV/CRA9TVsSAnZWagAAv/wQAINEy00fvWXhybYSLwql\n+s9/YXMhLjJIcUL788z1E2xG/V9rC8SbFhHGW9CWwG7Qh3UyKg4fgK0Or3dD\nS4ifYjN17WEcM+8QRt2Bu3ho9EPCXDkvYt3nP2W/TVphEW96eD9sWTDhWZwn\n6czJsa0ooDdLXz7nYMBgmGdpf07oDlnnlHqibWH8E1qeg/pEpt6Q08giAU7b\nnnoPbRnXl3ORvWKYMymzJWew/zyl5Q7mvJnLL6k6zg6qvUp82zFYimWrcIRn\nHBtqdn3q3CxaMDY4ZA82VNiCXZAEYoi+zifJgOcfMIqtB/O412lz9UGA+Kv9\nypZxaIf95mlvAXTiV9544ZBSV14+M9csqkRPGjJ6ZXTK7aJB6AZksd+UDNy+\nOzP2f6IU2nZlPEt6VXabhUbztcO3rXD1u7z494QpKIg35mDoWkv1Np/2XHFk\n00FQmoRy1NXlRGaunungTaq7GjkVX+ZBJq0Iyo5nJ9D/PLrlbQecWH5f/L9h\nMZ8vlIv4ti+LFrFA1FlzREHPNSgkd2W5Ch8v9EC8yua0DM0VzQjTjElfIxk7\nFL4+tEO8uEc1jZ912IkF4RhbCVBRmfnFRYbgS7no2CMZFfT9btFcWQWoY07w\nh3YfJ/osAfVb86KDbx/CuPusy/T0vhTQRijNRMMk9lvyN8Y31BCaefWHszKL\n2jww\r\n=KxqF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.fb76c5069.0_1629144447579_0.8752725579840099","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/theme","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.457d89aad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35098ad7726a589b17d071e37487f92b841ed038","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.457d89aad.0.tgz","fileCount":42,"integrity":"sha512-Lo21MxMzYLsqcfN+9ni8yDbObYD6b2qDxZvfE2TDkAUtFnYjMIXv+AB31UZ1IH1FbhhjPmicWco8MJBNKlIgNw==","signatures":[{"sig":"MEQCIElZ0RTDQ50MFj5HHYxDaHX2C9LfI8l2sRYWC+wwYyipAiA2x5FieZmW88z23Zni8Akb+DwBP89Q6a4K4WpaFhL2Uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9PiCRA9TVsSAnZWagAADDEP/3oSBSavSjAToC7BgXME\nFPSpx3y5Y4akSKa8kAnfQUVj8d6T58Qz02ap05nrObNvGv7CwrPs1tTDVkl4\n3Ub8NXNporiOpHEoWU2572Lj1KKjXMf6uBfxKoIq9qRGG+iN4UmoEiomK8k5\nD1oq/ylBoW1gfuN4pqI80WMUyvDZFFJnaBj1xFGL0uxMNk5K4yikRZZRBvNR\nHCDGf1o0R6A2Wxks26SwR1QdQO119cTXzbrLIgIVqWIwdPbswGqrhrYAS6iv\nBhHH6xM2jWNKBEOCltAFoa7eRSog7NDVUGkqowX2fkGNXYpOIS3w8zVwdXEe\nUmDMlmfNHmA7N0gQjUDMHtZe9OBjHQ2H2tDfU9xP7EoaaN6xkDyEERXfBAte\n81z6eQfYVRh7R7CbVgAO+pse2yJrjltIg6/gvVMA4gcUnBG2NnuK+cxSc9TG\nzM4aMLvbJ8N/1jB/Y/S4Hi+qZUlHDftmvKkOCJydVYt1VsK1kd5u2Ow7psdM\n5oGTRjuzgeCL9gb29t2nCYVYBVeVszJyHLwmnsTzFLsfBBMTgSnS9Zt46vjk\npkTnizh/o3bWRwBNMedfNLv9blkijTayQJEX2JxMBJxNLGRQkek1HzXC+5gf\nVImKPm/izh31me2ml2zTHuUpdpSRaFJlQaXN8fpSHZFJXLLA+Kv8yMcnKrK2\nm/zc\r\n=Qr3l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.457d89aad.0_1629213666643_0.5114899332303808","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/theme","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f99be7362e965489e30a1e95e4d65ee4fb57ce47","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.0de2f2edc.0.tgz","fileCount":42,"integrity":"sha512-qkTH0bjQPb2GWimij+uUvS4pYLhJfzRk2XRdIBkR9G7ZHMbP6XMDtbPoHDd825PC7j66ZFct5bJycdZH4v3F/w==","signatures":[{"sig":"MEQCIEJSi7DdDJk+v1MMmBUJhrERYGA6P5pWHl/TylHhKpqmAiAFE2GWZGQiijFoljiPDo+tCB5HqNkYOGRE/d6Us8DGRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCHNCRA9TVsSAnZWagAAf60P/0aiLNGRimSUNO44yoiM\nMm4gJhjEJc/eKX/vq2OEedRmjv9kYZ2tg2vtYnhlaxBhC8S8ltKm6KrRS/Gy\nc24VbUV/ba2cBZ2ybHWBZcWGjdcIa89uDnzoh4aKBAR0nUzlTSkQ0fYPGXIY\nKM4h4aX3Hnb757LSpMJRMiQF1Q0EFfDDB6ESjyCSatOm0aZbEzTlnMTGfwY3\n3e1Cob6Tul26WGQga4C3M2io7MVFC4YXmj+d1zsvlcOuSVvypvreSeVhuJV7\nZK9GW8PwJtOSHGMupAVj5xTdIyQbIQAvoxYiEcVzQQL/M2WI1M4lvwZD3UYf\n0oFKoNxRRbO/9LC9sELJO9NKjmWSEG2f5AaqbMML7dJdSNyvmaIhEAoUbIy3\nEo/gzNd8ailwsTysYxPFIFfhkhScA2G39uIqFm8NawAClppPmjexmja93avW\nMkjbTDUS7PL7Prbyt1BkqchBkpoCVA0GCwo1yzWUMYwc7HOxyGhcY39t2kBe\nNwOizmDHthNxQXj3DVTjjZaicvOyv2WzSSy9lTLDmi0ZyiNp2rKtG3vrV0Xc\nLVYO8RB926VUhnoTBe8VYUnGbqoXOrRkt2vzjSmcc3smvSgjCJE8zsEMuDVc\nkEMWAUxq+n/CMni9YoO8BElLoKfrsRaezqfdsAlUO6Z3jhOX0PHD2KTIR81q\nV2TX\r\n=+hVV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.0de2f2edc.0_1629233613200_0.19540022209586105","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/theme","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60a64b03340dcc53445aa07e12b0d4a2f12521cc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.1f9259b9d.0.tgz","fileCount":42,"integrity":"sha512-aMyJ9cONDTM3zuzsT7cqPmNTPHWF0Tpmu0E6+9WNKlQRapuk6+39LnWL2MZJ32crm2pFdCNJokk3APMGyX173Q==","signatures":[{"sig":"MEUCIQCGdUOvacq3oKA6bSGvi0RY6Y8KYBj2QWfVfA21P1UfnwIgJKB/8r+f8AwIPo4u26i80CFlEspqqO7xK3uc/RxaO7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDSFCRA9TVsSAnZWagAAizMP/3yzLsaweIt9B1rqyEUy\nCa3Y7tcaS/U4gExBvzileCQY7J/j/GtOSwHnUAeSAYli8yZ+0pCaLgtNmALf\nRzZ5Q1saT8Eza1nMWi5/wdLhBaOHDponzX7l5PEe2xN0p83JW0pQyUW7vbkj\nfEsVbJDQhg4htTVAAoqE04eGBlre4b2ll/8AWALlyvoVlVMFTOijKrPuUjK5\nXg9DrFF86uOyhItXR/mnmdGnc4PefiOX73H8ILdRUX2v1CKpH0c41t2W6iZn\noJ8ZrYpvKLBFYyJhfuvCH6shlpBf42S9Zp9WEDhzXK7UbEi5fmV17PmTeZQi\nMPZdjlD654WocV0Ana3XTloyw+G+CoZ3HpkID/pq+B2UAE6YwSw0vC8A+sTk\naQbWWX4Jag106i/SXJ3GTTAvPq48O6OOJEWnGumxtwENpa/KVa7Q3b6iw8Mc\nyAQmhRfz4Q/BgxIEAo4FZsnWTr46QBp8F0rdfgtSWqSpE3WAO4+xII2k96F1\nhwAYdRhygezFJVXQJDi/rJizzrWN+q/WIGof8ywIzCGGBn5IYYKryW8A46NZ\no/y+wqr0DxjA1a6v9D/tTqkX5TqG2hk+g52y3W9/P2ZOGhO0XSypAyDj6rDB\n0zh2WAJ/c0FDOz/5UxRsUYwrBb72DJ0A52MnEjpUTO6Gw60mMDPlUGk6mT2F\nK1sF\r\n=0iX1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.1f9259b9d.0_1629238405444_0.29054678566681913","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/theme","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.3b9290351.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4f45e166f6052d2d33f1a7c6bd58dc4d706eafe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.3b9290351.0.tgz","fileCount":42,"integrity":"sha512-NUhLftXMZsf8yYjrCGqqoFEkLTYvdpDw0UCnde7jH2wH+OFPCn7JxgigVpfaEeP5DTFZbPivIfVkym6PyCKX0Q==","signatures":[{"sig":"MEUCICy5AdhjvXV7Jd7itM6d82kn87+z6oO9niGSd/robyGlAiEA6qTbitsgToIn4rRAZD0clbp0EUfHlUefOdXi953r4g4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJkiCRA9TVsSAnZWagAAaF8P/jrjB2P6/KOuV+dtsXBL\nN7W3vMpizirBGBJpz9WKRqGpinzfQYfUysZsFcFjmBl61xCJgpWL/b31erEW\niG9jk962GCT3VXopN94nLnNa+TCxcCC/jMt/bBkdp3/4l7A5GzyF6PoA4IcR\nQKeu9pX6EpRKuwgPd/w/4B7L3Y9LC9QOXgxu+9TpGoGwl36IdT8ZJu1V7a+L\n8Y+6gDv/mRca3w8gbJH6kCCRIer6CvSdJBZHW8QsssHJ78oUsKplLwqCveg6\nVvk1A2y79HZjFynvaOhZ6JCngPhdQyzJDyP7H+P5zVt08nt1Uf1kS/qRC2Fw\nwhEdWbE6N8UX4SAXamQHeoMxKyCG4hbwvBLcYaSJhoco3lkSMPPTUptF53KF\ndVFm1JBcPGW3qcp0srquL3r9z0zM51Os0HpWHzEiFo5nLl7cR1f53RKzWlt5\ngRKzONXuilJs/Us4ACSgdLbPp7VFfAIdLb0ccKxIMByhUjm6BSzB1mI6WaPI\n7F18jgZiCtb0yXUbESVi0w1pK0TDP+UKMGMGwr+izKbTQMFBgJQzr8RwqJ6G\nMkNFZpMKgt4IGLlEj1uyY5VG9FkzljOfWz2mSEy8J8lvX0TUB+zClrSIwnRF\nP2z557Ct8dt2HK6U9DgvttjWUsM4MleKGx0wt7vJziXOsYPD9hexc1TcHWE3\nFz84\r\n=E+xB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.3b9290351.0_1629264162447_0.6995389089762274","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/theme","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20b25a220a867bc054105d222bc968ec15a5f032","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.43d2eed2a.0.tgz","fileCount":42,"integrity":"sha512-fuDTY4CV7FGeKOwOkPcBLoUBwODUBGiTQJhy7MAEF9a82QGQjH8xPiK6vukC6NxIwpaneE9ygXTQKq0dsMnLOQ==","signatures":[{"sig":"MEQCIGNQa5wytrsOdZJxQQqU/9Pw6z9lHXW72dBMsfBKh6xCAiAD+aTe6HZ4WffrorGpZa0Ydg1iLB1NhKE+BhN9JoxBjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS7cCRA9TVsSAnZWagAAsVQQAKGwrxmaHN3xJLjBH8GA\nNxEnK2LjmRGK8I0lNNsdvu/SopWZr7vGo3x3DE+3SmcRfKw/hw61PaS07S6s\n3VHg5791JVPWN9HVmcvJ1r1oMcDzbhWockkhEep+W0llvxk0mp8oGmfqodNy\n0aMq34U3qpZuHyLKsLwotEhjFfuvKQiSZ8jDc0RRUNjk9NkCkp6uOtlrVUDq\nDNjyCeZsQ4VEtiHpd+gKUl90m1+JjTBStC3K8NP3KWTsjaz15UfmkqXXxnG1\nLEOuNU60rgHKM7eoPE5Wkk0+gqk+rL90ew6bEzuoF9V7vE+rW+Pj3Bllg9dk\nWT8k9JpDo/ZdZP/dmp1A5gNrDmyYPVyL8QCuPntsggZuukSNudJ5Ejaso3U2\nSU8jG64C+vg3N6RYa+JSLAfiPhQb64uhFACRayJ5Ym2+MRx9O5e7Heck3DTO\ns6lITl26SeXEFWfr3STg7jCp5R/7yBNGxqoUI1goY2ilrq2lC2Qn991xqm/P\nBv86c11HNHKG5epsANBWDUY4vohhILdGZ5rU0SCbjzgT4ptrYCysVC7MqcSx\nIxoXUTEsspq5pblF72QQvcec/bkOG3YwZn6q24w4B3+4VXiEVus7Z8VxEZoX\npz+VYPjp9f6hufM2kJiSOtIBEb3LpUxS6+Bn8zN5r6wtkPW17Ovyd1QNqo8p\nKTpW\r\n=HFXU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.43d2eed2a.0_1629302492117_0.8793384193228642","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/theme","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.0a9069300.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66e4a2c604d21bbc57866860963b1e011c000490","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.0a9069300.0.tgz","fileCount":42,"integrity":"sha512-hOnNIL3oy6G19JbYHOrj0dfoK/zQDiowAZnnJL/d2EMeiaFYBxDWZYkpaJkP3/PIoKWzTlHpCD+Cr52V23Ol5w==","signatures":[{"sig":"MEQCIDKle+4Jw6n+UDhE+igvHcgEqlESBZwVs8i963Gau4ZLAiBMrc4nj8FZvv++Bc6tG/JUP9/Taev6UKJFhGAanzUJ5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoP5CRA9TVsSAnZWagAAb3kP/ikVgjL+n8mYIrTxlXua\nQIbHZSyPr+tSDXmjo0PfIo//Rjci1qW8Q8lLIcDxyjkvVZZQ/FLXQkE+7z3o\nEY/G5VlmhVl3h2nRETBiN2SB5uI9/eBnNTITUm5Nc+oUWn+ehiK0X1yfn7+4\nAdYtFnfKUmARrO1hZByLi3FNmZcFTe156tr5LDOq5O4nwMnV+frAVGfwh20C\nWvDlQRQ8dhiPHUvlzbm5k57QTP8sKJ9D5j+J02ilpuiMbh1vQFyyxHrxDR8O\nisZ4wLXLZf9GfMKL2cs/Q11CvgW1mPCBgjmKGnRMLlasdAVy/I4EOCOPukaA\n3ZSquPJRVcbWg9hSnFZC9QZgNK+TrMgkFGo5E6YgR+y+72lLF+QmuAkz54zs\n20jaP/U7ASMYkxe6ecelR21kfzixMQDCMXxn/qGcjrcDKCi/Gi49ggimouz8\nHvFH17Ge5DMHaet/d+0JZmEiqBCVhmhh6kNt83/+XjlLJiClExp+Uvqa62mL\nWo3laAL2Uf4UGrd1QNxAo7EEm+cf9EavnTWOycRnMGz+LMdmfxbIG+R9dU3I\nd6rAp+dHrUASsQKOH79tKRr+2Zrg/+ptXRsE14x1cVeCwLZ3HbcuVUQ3H8ep\n6rsiGAJqSkLqu7q+wiNrzIhNKAC95U2v2CGe2YVvLCg1mfjv4gEHqJlHWCJk\nHiWC\r\n=SNH1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.0a9069300.0_1629389817436_0.5795808974263761","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/theme","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21b71d2623916fd49eca3b6cbfbb3102758d47fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.7da413ed8.0.tgz","fileCount":42,"integrity":"sha512-WQcngdxSCgPoJ1I6VCKjPJa6jRgKNh/wJsCUleZ/hyFX1W1wqmNv24FaD4PAWHb64LvSBeKRFB8No2WDwpc1yA==","signatures":[{"sig":"MEQCIED021CY1L6kj9Q/AWPSyIkG2DJaVVpgw9ZFGEtqfjdXAiBzhjvSJkVKZeTdX9gYUAkg68DpjI6B2V2shOcIIUMcxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH86qCRA9TVsSAnZWagAAg20P/irXLf+L81baaE1cBqf3\nwgV9hsarzqu6PF/zmmt//EoOnGti1WJSRxdq9xdfiplGRdcBrzXtf2Pgq8FH\n69DbJtRvei8hOGO3zAbTDzP+qfZTPcVCXXyE6KDtD5Ucxp/fLDzUpFZRSy5V\nnVOMI7Lzq9nAPfIsdLTGCMhSjQEQNQ6yqajKpF77Rl3MK7cDv5ALnY6WUqh9\nclq+oaXVBzbGjzAgLmhdY7CRETBomhJhOcrne8DNKF7VvkUozmlvXABCYjwu\nD6euSFf9cZE4ukvNkXAHcb5c+SWnLd4sqzTsyQGFuWzODIMX9ceESHeqfzQt\npqQFratq6NryD5mlxRvcDlBOVvUglye5Y+EbR4l9C5YGezQXPZ0pK7DDwz9S\nowRkBGeLWTBk3uO9Lm6o2rEPTDMYBeDP4avddIaxf2799cR7lbA0UUW4riLD\npFc8TwBi6zo54rErHjm18LY5farS4/57DQ8p6U5WlwSX/yG4QQzTCy8cftPX\nBZE7+NhZIHlDJBFKXhI3I3ICK6dcMfalfhItNWdgSppOEMyqvN1AXquPmuCd\nVyzZVwt8oe/NhFH39kHUkXQcUo7JSHkPpEgeIdt4bn7Rl3lLA2nLaIRR+3Bf\nKMyC6l4OJLtEBXFrIiKC2F4ycE4Got1Mi8lpo3WE7kjwEfSXtZM8mVooefWT\nZQ9i\r\n=dZek\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.7da413ed8.0_1629474474782_0.05217790882003981","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/theme","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65ad5f469d3f29cff5411a3d74b2d97a31900228","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":42,"integrity":"sha512-LVtcxMCiOZIIkNwWkIcvANOcHWIVgOlRpEZgU2Lu2EEmjjnD+LDwMTtHCBDMAhVSSHlqYXBqDo77l8OndM1e1w==","signatures":[{"sig":"MEUCIBxpz+TFcdgFNxAqOJI0pIBmn0PoaFqr9G5iKlA/tIwNAiEA+YcxZAo9VbGV7x6TB5+JKEo6OvfSgZJXjwBjUDGGcXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAMbCRA9TVsSAnZWagAAzVUP/jNgAS2F/MIexBDTpnIm\ni/LiIjCs9XBG06eYBWbIsdMHeiMxUz64SWMLT8pCHiwywjM7G9UYPjSL97Ah\n+amubSvVAuZgcL3c+7Dr/s4eLynimGlXqc/JVsr6XmvG2PWLDdOYQpUfXqGe\nulhk8QAlkxB0gBnxxhDJeeRqSAs9KN9RLHVYw/ozmcGp2x15f94Ya8a/Clhv\nAwnN/em97zfnCPpe+NsPjPbIlghSyZhLCJa+sottOGdvzye3wdrzCeCg7y8N\ntHzyXNvti44SCyOMlud4jaoOO+LoSl0b6KKESlzkTj/2lwNfXvF47hAcBdSX\nFN3LOeWjui2xxaVGY91azD1LOemIZww22Cmd4u0i6QrZwMLWx3wJiscjhiYJ\nU8rX42QAu7I7wGR7wt0ocSAqxnneGy15uJIrPf5TU++S6kwYAFLpMbAw39i+\nrAOH1f6RxAV/i3XbdICxWl8IXrp5S/90aorGplFv4ln0YEV0huJGGy+PyTtG\niGw3u3QWEIPg3q8FSatJiPJ4VGfCAp4iIe1KNnVYxOG+jiuZZGtDNZ3Z67uL\nwRqXPLdNBwjNhto8f1kVcCSIRyY69+huHQDuGicnvm/peb3HnWzbS8SAITn3\nsA6egOWFXxaA8MADuuRi/N8ejT54pS6/Y9CedoBNHRx3z6Qgdh/mLS4uMRC7\ngHEh\r\n=zmDQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.e1e69fd8e.0_1629487899530_0.598625783372974","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/theme","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f034a8260bc937e214a590f52d13b19a3bc8dd17","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.f5afc16df.0.tgz","fileCount":42,"integrity":"sha512-uN45aZ73lYd4iKkDGnJ6Zgqo80wFDv4BtyV8g3UJ7zN9wAhmOBC9N3Y2fXHqjes6xpYNPtRmqrH8G7tFLP6NSA==","signatures":[{"sig":"MEQCIDCvf/CQKCTW6nFEsujdCisTxD7BmeOJxs2B+zmFp1teAiBvcgTvbu8wsgZKZsU3vzFSqjk0/+BA76ER3xSfmlc0Mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIA/WCRA9TVsSAnZWagAALfIQAIdQOmOiZtOD5Rafg79I\nXYR0tg5gc5TCsC3lBceFjXY+MiZ7PhGnj7YH1JN2kfwyNH2N9l5rG3H9Gcny\njE0gndWLybuXu+6iuspDMt+fQGaHvVrNEt5ZtpCfHoS4fLxR6QkrkrU+V9m6\nJZQoAuYOuOCNbZuEy4G/5MKRAcaUlnz2CdVHhQI64PEd27MZuSuyvBAlj6Dn\n8rJTgUZ6omyFu4YSuozGo16tvOcYIykPLayzXw+7XFHJzUyVO9VMsgEMy3us\nIcZpVfBR/tCOjzQ1y1qvt8Qk9ucA7lYIzTXtXF8jo8ffXSuR0sreb2C6TNu+\nej2hPHF8uUVFRPjSf7TEf5CdpmGO8NwpDVWkwIXdFtFrHDzFC65pyAPoeWR4\nd59PFmPFY3HafF4ZrKoAfYnItAxBZAc1sDS/4BNVRLfTZDtxoIvYj+9zLJ0W\nrzNW07MhMGrRIW/nY7i/O6jHHnbMo61NHSl7KhJ/pAbgJvaDGp5Zz9eyHQ6E\nYTRdrworQoYgk87PMuKxJLPcP7377cNO0WLqLRURnU0mlap4h5Y7HQIP0PTK\nu/Kj2hUlhuRAGYas+uOGsiUVlV3yGGCz+p9Cn4/IG86Ahk8A+fQWKGT0oba2\nkN9MavwjlXq33lNebc6jLnOwWzxZeN2qCzS7jT0Hgq7jkFisC6xraRHo+rLf\nHf6M\r\n=2oJR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.f5afc16df.0_1629491158661_0.025672666370201602","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/theme","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4637b7ff6798a6a559f0c3e1a5f22b85314dd6af","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.28d0d75bb.0.tgz","fileCount":42,"integrity":"sha512-wOaspig+TBe0iqPngIomFigK7Yu0mLQT0dI+eG//E6a/+Mh5XUYEdv6OK0McRPh8LtwnjfaSpexvS/g0j9K/Kw==","signatures":[{"sig":"MEQCIBPyV9y0sxoy+QNv6DDmWhSbJ3tjpumrThfn5lCx4T1lAiAGE/n4DP+t63xjg1eXtBpb/IAjxLj1LoULQuwpg2TFdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICqBCRA9TVsSAnZWagAAy8AP/0V0CiBTYCyCPH9qd20C\nv+RNc9IPUiGSu66q+sWjWAY5ne4NKjPtXA0IpnVKPJFLMN40tTgiGjltzxxf\n1JoAI60Wb2xqwSS48zCnBuVDug2BUQbk7oFQzt1BlSaURP/GoVIatX6wsl8h\ne9S3y4MusmJ+IGS+ONesCELkmvyhCW1GU2FZYl+uL8d/JJHGso3yFyZRSN4l\n8q7z4B37qIC7nCiGg+83dfVULCnITyNGLUHF57DJmvzA5hRPYyLJeCFDh6ZS\nC4WM6aUNR16GHYpFPbo9uoB7/K3aoh7OhbXG4n9AlHHdMJVDIL8XpaeBRIk1\nHL7NEKBxhqL0E9TV5FkuE/7x8vnSl1wwleK52DKzJdG8raFwHao5s59DWtEQ\n7rVMfzQS7pgjrgMJt1whNqU2BwnyiPF9e4pjIy7lnbnwpU6frAPUFlWg6zP0\n44vF6OavjSgYHGmCg2gWjQu7Z4rQcsGxc1W0aVmsoPR8zv9UeBSR7Y9Aqjyo\nET6XQEcvp/RwnIZGvIiTfuyoN8rIzE1Lb4wYCEWRNFygM1QfSYT58DA9MTNO\nf9coigi3ZIaU+T6h1QsJJc+QQW7707pFglLrksr6zNJSnqomt9xko7s62BK4\nI6eol85eTR402hs82H2eLXvUwPuzelmbKLS9jQnwqTKz28Zq6UeG6yUyoUaO\nilZ9\r\n=XjNx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.28d0d75bb.0_1629497985014_0.26407466718062245","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/theme","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.21ece5360.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd2084de63ec28c562b76edf6ce5a263f7f22bb3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.21ece5360.0.tgz","fileCount":42,"integrity":"sha512-b51+b3jYt0OaPBQi7ePIaCyjWAF0RxUHGdwf6m+3a7Khd+OMC0snGQp2Mhb9wuNtOe7nACWmlHipz17IjVo7tQ==","signatures":[{"sig":"MEYCIQCo7SrNl8eiuZoVonbkRtjiuw+0OsRH9AtC1eAkX1tn/gIhAO4qaPxhzfZDpbeVEsAwiwcNk6F9AkkAUGILRt+Bonu5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID4nCRA9TVsSAnZWagAACUAQAJrDE3oh84rP1GTZKb1M\nwVPu84tknvpSad/+q+PTS1S92lz+BSSBIxUBqvNxC3Vlne3xuaFBd0osVYms\ng5/S5qSWmwms2eCjtSof2PGeS31/oq/tPaJh9wVt9JaFI9z19KbstJqCRsXm\nnllbKLFbPxXlL4bShNMX65Vrj8MoI5Wi4FkeCRRapfWcLAB9xLCwubMNfB5y\nc8id7WdjIY8e6nbHHjLufmJxD/6Nv0JIXEHAbMGsmPTdi/9D+B44OSg8DFCY\n1FXPrjU5CBrvKC+Ispp7gKciuSqKvSDIJ8XJ53GhHy2GM6vWQz8VI5eLOT0P\nTGiWEHSXh2wWx4AR7oCOVcBQMKsYge3tglV9tXNpj8XqCIvAaDWCu+tLRqTe\nImIuPTH/0JktB+HvGhYzoyBhxvei/d+9w7+ABAkU0h/OJ66KXCZdZD8pkJx8\ncVA2Qyuob6SqMF3ZJ/mn6C9LL1/nNN7H2nN88eLiPMIqh/uJFhqVPTzLJUy0\nlRNB9GpH5kEGvBTD6RVDtuFN4noq5tN5D/6u+MA7KUrYEAJe27QD9/rthZTR\nXLlmKkSfla2of4ReG0S1a7Y7ti8+Rigx0RkvNgk5ipbNhnLm1t1WAe+6Jedi\noy6ZlvsYS09dIbEQdlCpidoXnatUTkpCt44q3U72O6ZnkQJB98l/BDBresII\nFRAB\r\n=ur07\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.21ece5360.0_1629503015180_0.7173516368933215","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/theme","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d95f3912e5dbd3cc842df4c2315ed2ef31cd0450","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.8de07c02a.0.tgz","fileCount":42,"integrity":"sha512-9EdqnxQsndK+nLgOJA/qw6nwQhckW99IO4vwW8AXGSXWyDLWRcHrkq89el4TUr1Gmi/m/IO9+EvAKPJBEz34fg==","signatures":[{"sig":"MEYCIQC61mAs8wO8BfMFyY6kYZ+iYZcgZaMIQ9RY8AEmjemtNAIhAJfjSYPtlXQddUuTrIOG1c6+B9NHJGIr9kl03RqoHags","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI74HCRA9TVsSAnZWagAAtnMP+wUj79nu/vUvwjAa5VNb\nCnI8MN30tLyAOdaHjt3ThAt3qAXdgk04bvBy9l1GjEUqi6Pvw5DWRrljYUvI\nqODLg/bsElzwqfM26TGzVTzGwOmuv3K1lsV0L96Cph8Bt7ClrqAS0C8zRWGh\nYKDl9oXV/re0SBslJ+Ia+nrb6aQNdn9ke7FLBRPFqrA4KfIatlRoZ4GvYPDC\nulu7hxnzV/Nblo0B0MYpuyAIYym6KN6UXXOAZoujAeV9077K58rJk9jZzCos\nIAtV6Hy79gEg+LNpuaB5ly+fGxBkIARXKLi9SOB9MCsa6PbpZiJcGc50DrUq\n/Ui8NhUxVKVu6eCJa05Xy2964zjp6hZSLjbMxgDAyKWaUjO/Deyz+BxoFHg3\nAt6uXbGCJc4V624v8r7wYAxSkX0AylLovrtkNtha/7CY7ag7PY1Zym0iFvdw\nlSmsUQ+ceLhtyXb9TIIRKlQeu60tgJ7WIkO2i5aISVvDqA9Kl/qui7veXOU1\nXot4Hq+Xt5M5qwbcb6h+izodmH1gk1iy2gbOV/EN3L5z/EkaZV5RpzueaWfh\nAF/oeA88YnSXo3lYB4qvGjFu6TGs3LzqK0vF7Z2TdHf4N2a+/UwcU3t5G3Ni\nrj6/vFHGxQHF+Xyxf393LsCQmS4iljIdJ9wGZK7RV+hF/d5JDvE+6RW0MiqW\nndvQ\r\n=C4IF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.8de07c02a.0_1629732359167_0.7354552119297189","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/theme","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82fc351847114fd321564f80f278a13801834c1f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.65aa63b0c.0.tgz","fileCount":42,"integrity":"sha512-7Pdu+kPNcC7hGOj7gitK0llQn8JvE+diw9BCS5LgdTi6eDiOe8aGtR7iJ5uenAxkhiorxGXXOERd2AaprGvOzg==","signatures":[{"sig":"MEUCIQD0xC/gC7H4lzNXfYtyHpRNxjrc0AllK9CEG4gvcXFPTAIgXprrwLEkqu/tousxrynNEjRMnxXDC7JVq6on8N+6xGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJQ/0CRA9TVsSAnZWagAATGQP/RGIbe+RJKGnEAlfxJOb\nyyw4xqmt62551ZjUW0SKRxYvfQ7NHkdHJDvjETahWuZZN37Klc9d2MpKbfgP\nLPMTW5VMtFOoBnxZr4crd2SOEwzNpaVuf360VtrBCsls6dN/RfKxGhUgUJSC\nRzWnMqkmkjF2Kpg4KANA33NVIE+fXHZ4WvnxDr5+lcMLvfo3gnimRfuFbEEk\naYV7cAl54VaWHSHnRCYBPkbEasPUeZ1IcLX7RvMb3LR6zaAvg09s+6SYi9mJ\nyVk9nrkh46ISuTaOlL6BF+flKFFY55RixhZ1CeFSG+KnNvpGH8gXlYsw1Gy9\nTc3gowr48jdzWYJvWdSM+liZvbd2vJGHz6JVaw5v8ORHyaZp4n6y2j+zZ2rB\nbXDMuXSmoTgvKTNPeFDR3VcdgGywQ1KdHTzpg5Gg/SpwqL+43GdCPdPtbWwf\n2kjPfjJF1sMN5N6UGoRTKK+rfokCEkCNOhVUqFJAtMoHQxPQ1tzG1n8HgRn0\nAoOqzdtQNv4IjI8+nRjI90zaQ7Kq5NUhs6ZrKRwt+3ZC/sYJpqTpWDknA0RP\ngObqgZIi06+yrA8KKf9eQYPmbQVFdBDNjachgtCrgdPB11Bb031szvnCtNyW\nNViyWOnQ6Y6VuqXKMQea7Ta/nvNYZlONj9Pjw3aYr7cIRnh8PaJMaEMyTxGk\nDPuQ\r\n=JPtr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.65aa63b0c.0_1629818868606_0.40844633167291144","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/theme","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71e7a3ca86bfd17214fd4f23f8502ec5e44a751c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.15981e9d9.0.tgz","fileCount":42,"integrity":"sha512-tlyZJpd0ESFX5wYXJmN+c/Mhfq8qjNkfSrL9m4hln+hgox7hkmkt6MgTxKG7ib48ZuQ7dy63bcbWl/kHU1rhYg==","signatures":[{"sig":"MEQCIEUKxcQS+cmF7IYLdbpmZDe5Hxvh6BvatFYErqm/zLDzAiA4/k1ZvtH9BX+Yz8a0Sh1HO/ii7m5rKYYLohpgdYyNFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRtbCRA9TVsSAnZWagAAPVYP/22ZwC2RUMRsHe9524Nd\nSnPGIqFN8641qZCmBaeoex2ikP4q8K7Bu3MOmLXlsZN4iDqY0LuiNVpjhNYX\nzKQz9nRyyNCzfiUVjI1al4Xptft44FQcLcT9QILzpKXOOJoXxJTZt3FJvF6z\n7AZ3PiTWBKQaKlpXS2mbI/QVGomoXKG+SBNX8lgYHCgeP8BTbM5yMb+mfGDK\nPFX8yaRJEkJVayh/5ytOHUuYPtR/BtHRJN3E6YJat/TdhbHqRQQIEU2mxCFF\nEm29WOAj3X1ytYw+g04fIyNXuxf/H/Lnp/U/Of+Fu12y4OgDBWqPx5ofHkPG\nXMSaa0UuK0MpcwK18J+u5WuZ3IR4qd5/I14k0ciqw8DcC/jNug8QNEMYNXVM\npn11X3MwpShiaOH/khGS3l5RozDsKT7VjmVWyMKZZ2rP670WonGRlJfIY3qs\n7eCJPzQozrIKD4d2yVa6Uxm9hBM0n+jeQ07jzXh6MpNKk9d2nu8Jf0LWnGGe\ncA2wuf5rj8XtkGRqjIMdX9FqWr6RpDUdFiPWtRPUHsC72zHZaelp0+rzHOl1\nWn2HciWuuAHrny1op1OxE03SS75PLzSE318l9oSJ7EZfYtmSVoaKKTnOtmbA\nzLaBZoNNCQYOMlo2niMlH9Fhq9N39ddCugJyNtJGO3Dp0m13J5PTfSyjiE3w\nxfTx\r\n=T6UM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.15981e9d9.0_1629821787406_0.14578986239801472","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/theme","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"573da115335fb98f2b086f73defa321d999ecee8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.fa7520f62.0.tgz","fileCount":42,"integrity":"sha512-9XZgEXsTltm4koRAaJ+6XGNzIjuh9R0qXUeA89mRO3ENWCs6WawBm19cxBWMIdvmCzamuIXtY5RWL3rUIuh5gQ==","signatures":[{"sig":"MEYCIQCuqHEHpP6Oe2iOEFqDRRr0E7ktAJqIiQa9QNEYeUoPOQIhAKhLo9bPSVUW2cyVDiz0qObFWKMpYhvA4uJbXQoab74E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXJDCRA9TVsSAnZWagAAby0P/0JkJBGHL7pfrlXaIwff\ntRQfMv+hnXJ8OSo+v2ydeKwCEawsDdujIIQiY+Dua4u8PaPIdVMHdMmQ6yMr\nCcd5/QBVf2nbrztFWTzjixa36FTlpog/IjXXOxByaIvaT8jWNg9jrkAF8t6D\np/vAvgEBHNgBLhy53oSKu0sAhNW2TH6Qwt4vAk6LsywYQC3Bd/RqPEJukyvW\nTQaWflykRpl6jQgDzO4ppMvHEWs6Zk7f0HhGiJXAEeBjZlC9VazJxgUK7Wz2\nl8oDS/y+M2OGvWESEbxmirbD2MLAzdojFJAfrGxIBz3nZYRHYuMVIT5IhBYs\n4L1xfBSBe7VIxt/EAtdkereE8GidCWQwvAh3+61hWmASuGp6eW41sPfJK/LC\n/RrhyePPjV5Cq5sGd03VNrBxkgprdw7ag5ohO2qhWiIDLZ7a1MJ9RXwbc19m\nxGeqCBPasHq0fFWHHSfahmKUQGfgSwGOOeDgC7oK6VnAm8PmOGGO5c+Xh6NN\nLnR0JiE2x1wiutzp8XFVe2Vt0mjSKU3GeyamVhGq8Y+dgPz2H7pAe0txa8pc\nZjf6GN8S5qQQ9iIA4hk4EMh2BZoGZIKfLb6G/Wbu0thHU00tDrZczaCFnQ6b\n9IGZrUd9K8nsyAJsWoOqJywQuMqpes3zF8KeCLwbz2yTjt3I1d4Bn9ozUGnf\nJeuj\r\n=rxNr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.fa7520f62.0_1629844035065_0.48375802173932914","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/theme","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f22873300e054f46d7a142bc0b6e235525da674","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":42,"integrity":"sha512-S3BxK0oKfYrhAofl4vD9BLxyGrPghiCC/kWt0duaaXDAVy58Xbrd4JdkfQ5YtIGsQYUEdyRIxNxE6juN1gS4+w==","signatures":[{"sig":"MEYCIQCmBn7HflspqeILL0nkyFG1ts/7hT01ucsOYfUarDCH/QIhAOR0LC/RCbD0yiv2juEHZTOs0kzca6Q0YBwqaI4t66fy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXcPCRA9TVsSAnZWagAAnBAP/iXQXckrGFsuaKsglXvx\neG3TCAYwewyPzpz6At6N57fXEEGXC7vdMG2FohvRnV48MrNOKtEM6pQh6Hqi\naI7ElxOSwbxUPeWIN70P7xaCTXI+MLgOIXEGT5c7QuRpeIIiyFiPzX5iV18i\n5CxHKRyRwkXH+rwau4gZ7jP8vWfnkR3wy1K7x99kvXLFtYdAojMx4vfLZasN\nBqLkRAFT9OzIgsW1IWwH+mUb1m415/enGzSY6bPERZl5dkuF2kYZJAY9hKeo\nl4BeQ4QXQGtWEze2Bcequ9OThsQak0mthb8RDeWimcgyTbWb2NGuGBEboqRA\n9wZpHY/wxVuMz7R1Csztn6002hyUx5XtwIL/Fj41i25Qar52egDf1+Q0ivjp\nFJHi11bOMghiS/up7fNa0NJYCv2x4KTkh1Wa1WaS1vWVjh7k/45YAXZMnCz8\nSLLsefox9fYTxtvGtosqOXHZaACiTDOUvj8AuiwciYhCPkh4l8XkQ/lEEUv1\ndebVGpE7+tJifgd5oePEolbISeH2JyPQYm+SgXeMJ7SGo+uAI7EG6+1Nvd4y\n/NYTTXWWhjgB9Pna9VqkIKbgVgUretXMxXGyy46wbtO4445duyHQSa70OE4e\nupMzfeMwcgzlKPkvhojS9HLERJzSm/JmfyEG/hDHOGcaQROHxktM+GljY8tR\ncCk6\r\n=N9Qb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.ce25bc3ec.0_1629845263270_0.8666814391672153","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/theme","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0d4b8896e78feba26074b1860558fdf5871c802","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.12f5622e1.0.tgz","fileCount":42,"integrity":"sha512-vCHoazz19KckSPkMXgOcDnXElSf2PyBh0PAUVY5oun23K3z+FAxIDUFitbRNkCC6HvDs5AwABSopISM7pqESHA==","signatures":[{"sig":"MEQCIE+yzUh1/OC5cJSvZwW9RS2lrArJwAJagYlbBPrTtrmOAiA53YhRXbEF8ESxwKqHcUlWiStqgSkxoFrT38ckEDzSFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX4KCRA9TVsSAnZWagAAE38QAJI/0YghZp4ZBwaB/V6u\n1/eM0YDfPPAiDnGXTeVdDVsYdJVrS3zjU1QrIp0wFrM0hvXYEv5fShfk+883\nD01GftBrUhu4BZT0BDO01/a+jlkzGxm73JJ+DIaJuZO8uCaORZiHe49sMOny\nybr9+1tmqy41SBfXCQrYiC+QtQcYT6SNEb4Jvi7G+3wj/cYI2hChkOVvxb83\nYc8uegLppj7G9cF9SRuR8M8YMQV2ssJ85s/jfsSsQfJ5MuYNabfFNizn1jv0\nMV/mUcikeOVL4mhi2ouSbNTPS6er0esMZpWHCvkABE4IIkpOdkmZCFBqjtL9\nPrFHM0AaGa0jJqiiuvfgHI7pjpJyU082wMgPC0eQPA5gX8dnHIDIxEf0TVCU\n1oi5rpjYYTtOrEVjUrUZE3SkPsrDWit3kiyiTY8U9gx0lJp3EPr4D/GuKMRT\nlh1wphHhJO3LGu1rvMWoB361Xcr1Thv8HOReE0h47SXoNJKFm1z56Z69u9yp\nJv9tzPiwRLAVfT6tey3YZaD1C2Zik3XD4LZIU7rjkH8zs34OlUq+EklGL0Uv\nqi0bKoBRDEYpNP6NWCyGKhuOfpcKkY0jh2HT3M32gFU1J9R8BUJ8wIo9F1xA\nGWG8ZABrgYSnDBPUqU36rD1j/ErpyBxBgvvFeiqNQKBa9fXVatb1KMwd29ys\n7hl/\r\n=DIoo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.12f5622e1.0_1629847050159_0.7451654295095476","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/theme","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e9d06b25394b6649d4f8617115fc0c84b230e73","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.d97f8f133.0.tgz","fileCount":42,"integrity":"sha512-GBJnRj6SrJe6Mcar7dbst6qmHuzoacWIBhjzDAlga9aXhdPchoaHUqF/O1eDRjpCgoZ70cEG9LMp3YqTMpKL5A==","signatures":[{"sig":"MEYCIQCICgIjJCsJGJlt7yFp7vRd+XRX9oFfmOP4Ux1zSG54/QIhALy3R67QYsQxwJW7M5gji07CBdSTQ+PbJlclykdVdBZ8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJozECRA9TVsSAnZWagAAs2UP/08fKxxmZZRfwR980Hig\n8loW1EGmSVNaVHsQSdsqCf8dYAsYy1ULBq8eTECuGR/2XfNu5JSR+Hr0YjZ3\nk6SUAwLeLu2vutFDlc9Rxn+ZODG8hFpnArgzZyB+scbJb+WwN5MPXkeraoR4\nFkzOYduvZ7fjZzB/JZx9yI8qqw5HErv/1UFqeqK5jMYmFf+shR9uUD7IrwRP\nU8put36oV31IfGKVlEyPcWFmggQBcDPLS0IdFx73hZYAQgLu3l6nJPEhOEtE\nQvYPeufIfAYql6is8N3eJmpPP/j33TdyTVMlFJWlFfBx3FwCs2zjpWbRt/OW\nCtLtiaa7BLmsuGi8Ok7YcHriPEDIuIpzbXUE3UBRhV6G3wjRbUN24earEGfB\nwmQejY10DrnsQrOCZiZ3PDix0NxOsLeD+MEDX/sIkXzs1Q6epHl3bywU+CYL\nwyNyiV+zmn5FDgB6u7/DDewtjHZF9lVoB3CPr3wzhgPmmGSJ2EX398zlxYmO\nlloGcK1BvkIuJAjLJxAxdaxisraaAQtfKr5yPfzJ07X42O0gTP0Yt7oKBjof\nrzf6/LjXuSrMBNm3ebFW/J/yqAS7XzfMeJd1+wGFj+QBilUmisOXMarTLgVt\nLfJuZH3k6Pf9vkWsUDWuu3i+rzuYEYp2bhU7QYgogxqUxtkvDzqSLWlD3IzF\n8hQn\r\n=/t4C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.d97f8f133.0_1629916356675_0.760154777373347","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/theme","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1c089f92bd78885969f1adecdb10ce24ee2f88c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.d86fb6fac.0.tgz","fileCount":42,"integrity":"sha512-C2zotFgBo6+Ugw+1tTyBhn1am4iC/vlHuEq8qhahPhqgTwK8JigR/bgehXBbAl+65bO4Dz/o0u8uwA33jousug==","signatures":[{"sig":"MEQCICF6R5oNefKpuYj49npXdjhjJ+sVUw/8MPsjkF9pG90jAiA+qnh/4yZLg7L6/hb0941z0OZizl6fRftqR7v8jAd+1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpGXCRA9TVsSAnZWagAAODMP/0OTKCzQF18pBhy7vw6s\na0ymKFlPf1rt8jnzau9PlDasowovE2tGGz6uVpkleIM2bTE928/uJ7oDPNXx\ns2AMaDBXTlpoVt3M8riBMC8xXWqZDyUc1va1m84dwOZqlLZ5WRJBtFo36UTG\n0eb8cbQj1AJHIQvDe8juPNmLhgnTdMv/8IchtetxUk9geyOpY7hfB71qjx4L\nzTaRQAlkesj8EIHna77L5SIRWbMZVnFeST9vodcCBFpQB9/qhArH7Ly36Cg4\nCQSh5zxdLTQ6Yerj8jigdtdB6eMJRcMqx5w1Rw3UCwL3R5vIx7rwuTbuxDp7\nnkWgLbSami+Uf8y6rDRs7SY68XyfTYjuwmcAYEpiiCvzin/6yvmTTTH64dCO\nZk+FiuRo1+lNRIyJXE5BxfotZawYTSL8auUXVOX9LuSAhuHxxK5i1og5A+Nl\nBFLVMN6YelzO2AqhrGWhlHx4MoBRVPs4OKcuwDgFHoX3i+r57bs8EcTOBRpn\nY6XNECijb+lQ7XVGAl5SoaJd0YRwvH83wfXmPVyk20DYYZWSO2UDo59nMy+A\nYF776VFW9xgtziFAwgkK7rWtaVma0H5MoubWuKrQDkMK2fpPZgwsEukNrpmS\nSfvLhQRfJE8jisZZLbKFxT74uNZb+hSK57ZU0+0OpBSOtPBA5JTge9c3X90g\nlcU4\r\n=ZaZb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.d86fb6fac.0_1629917591373_0.935292677335358","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/theme","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"224328a370957eda0ad27824fa8a9e9734faccaa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.e8554dbbf.0.tgz","fileCount":42,"integrity":"sha512-DD/mtlpzVq6bnN63V4MrlAxBq+WRIoxziiEVF4oieD6RNF5rIE5RL3NJTDD+2uZbYsJBxJseS6RpQoH2sflgcw==","signatures":[{"sig":"MEUCIF2RpUg10O+XuLbx8E7Qg5j8JA1+lFmnm8DlN8TA7bsmAiEAm3mQoRZDaoIhgsmtAah01GZ1aaram9C3+A+dqGLFwp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr0SCRA9TVsSAnZWagAA+bgP/2Qt5M2tMfsTvFHRJAyn\n9Yw2ZpiYImvaCXeCg0EIXoesLd0P06S3CjTjCpDObX4CP35+MMf9O7Bvg5BB\n/AYeOXEzj2hQBVc1UMgMX8k8Q6krSWOhP3g+AlcH0a1aSnwZPYIM+DBQnGPs\nJdyEhSHNib5k5y0J3xiEsTemcRYCQAko0qw82mMZGEcoDXQ8M0AUnip3xLA/\n9dzve8ILn/vRh3GB1UzJQIxUkjgXYxqncqbHQW7hC2gGf4xkUhiJQXs9BTwM\nqyfLGFQK6/J8RIjgb9L4OnXfCwL/FsQW/b1c/XyesfPnqFa10nCjUW7BsZvO\nUfkLDYYpdhMV6hhMJLFZYi3nZT8EgCf/f/Fw075/fEl6IRNC7f9GUx4QJFyU\nU2xWcocPdpZhocFrYuqdPysnacmitLBquAuyt1Rt3LzOgxILEJAhzOeT9yka\nZ7HGe39d3zoq42UBEaYPbZCkxaI/bLyxGVEoJSjK+SR5WW/AtmQ3vfvgZvDC\n+rbyIcKq0efpWGPAQtZn6SU5OPbYK8MO4BYZOty1O/ugS2WGsyU6w4KKI62r\nvMdfi3JZjFpDPcqiKjpPYsqYgGnsoXWSXdG91Dicnz5D7BZMopqArimyC3eN\n8E5wBFEIsEMYncqwhzeK7wnujXF7nSBdK6AisClNaJt2rHq4qQ4GYTNqP5TD\nqMa4\r\n=ybv0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.e8554dbbf.0_1629928722634_0.39069406650354477","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/theme","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c2ac71d7d5e36573211e367bcbc84f7ae9fa166","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.877e3fb0d.0.tgz","fileCount":42,"integrity":"sha512-iS0hvozxrSLZQdctULxGBn2b9OI5n9N+OMmVCfNapqZZ6C0TePZhRTZvhFbe30RLX/56j3YXCUI0Q25ktV3h3Q==","signatures":[{"sig":"MEUCICB8ZYZn5qzWv6fXHrg1bD0GRdsxb8qUyLr3Itdmy0kSAiEApYFSYBtDAbs//Oc4SE5Fcd2uhvOUujDM7GadEJAMRfQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7UzCRA9TVsSAnZWagAAB0sQAIU1fdEKL3g+4HADQiOK\nQ20UWxbt1hOnLLB/iiufgHNoX3xUiCqq9wLMqCAZ452l1OHx5l70Tu38wzP/\nnSmd/Fpjj6PRnqUMLM1s44z5pXxfP59x+J0aLpOXLiJjYlF+r587xAE0A8hB\nsDyJsTedxoHAhQAE9UBobEQfbSKOJQ/UlYxUrBFHldr4ViauWrEGAKTI4A7Y\nrJnUM2YPl4qvpf+A39uNoPhKZSlQnQgmUtTg5nyZ/FnhZ2jfZ4jjpkLvwFzu\nWYuoF9JVGA8uBOwGN/3lP8n7ujPfOYdCdaeDhUN0nUk/Q5KX6ZqgYY8aiL49\ng4c8on1r9Bz/xhsEtOx6zmTIZXVMrrJQU9P/KXqRuaKyWCaePx9BjzWG7Lsq\nrklwTf47hogJE2yFa309ywCsQocDHVbaG3Uv/lT7aS/TJXKG6FpTw9uIZ7QR\nu7OPW4kruRV1q4UwIAfmcK7Kn0Doelrs9m1vfRluWTbT+Bf/mTBh0CZPiq5j\nNuxRTuQt/nVeB+MbQe5hUkLQwQ3NcwSfUrEBk0zxS71AJCUgwGGJnCev1S9r\nBWYPnl5/DnAyg2loGeCYGKetfTdAJYzhviaB02rYvM3tJW5GnmsRz+z7vp8Z\nCwl7uEPOLb5F+Uz18Aqc8KfOLwAZr1P7037FgLNTVRogCSG8CdIbY1HvncwF\nQ1tb\r\n=VDFf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.877e3fb0d.0_1629992242867_0.23100059654702054","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/theme","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.6236f3576.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"543e0fd3666c8803af979d0016375a72c6eec1c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.6236f3576.0.tgz","fileCount":42,"integrity":"sha512-ECi5Vh7vRzRIagXtzehniiUv3zLGWwACFh5gJcYzcaNAt74ybZ9y9qq1zpQn8tS3cf/mVwF0+E6EAmIEB8SB4Q==","signatures":[{"sig":"MEYCIQD4rzHCD+M3/qLTLtON5Ycp/e9nIvCbj/msol+bpOX6mQIhAPglXpwaxqwrj7VfdeIUxtpQ8/jyLJQzp27K9Nk3Zh7d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7uxCRA9TVsSAnZWagAArQcP/jlBgpEfvdhmCdIS9cXf\nlj0csEci2lD02x+UCC0W3tUWDnLu/2rf+wXjMosvUA4FwZsm0nj28kyC3PZi\nGk+a9mttRIm0X8EWsly682UTAx4I7+tBb4my31C+g5tDBT+Rzqy0ZpmsIfLu\nMpOehfnWISKQBKquJ/BurRADeG9OtdoMpR4WdTWoyk05oqW7vGLTWCv/5flA\n8qreNj3BGbSyKAHQl59mbp6mChKiPiIKiiOd2JLkqUTz6FHXv7WbqJCiyc34\nqnYjfjTtvyvzi95xiD56/yVnYfZcy3uawvtcPU98asnYatFhEjOlZpomam1H\nFBVOFdLQnB73Gp/zODEr/0pfRk6Gakhave8xVjZBic6b6sUiqPfdIT/ZBuK4\nlkFUxQR4inUZ+XT01Hdql5bixvBHgADRMZrwKFzJ2gpOYXw0IWV7PNg9RTns\nT1pgyvJUhXfcCDug2tWm1kH+t80E0lF4/HTsj/x/Y1PcW0kmo1ZrBTZmmJGj\nVU641ywBckUK7GPNzR42Mh88boUd8kEqeCvKS2bfXgggq2FXgSnAzrFMqMM9\nq1P0G/HG3YXwLSEA5WP+jc4UTHvCz46VbSC7gV28OxzN7IGk7vCCu2810ddA\nkOZSKlc7Z9CAgHARG9KvmBpQMOJJbFkQJpKx0DAqj+XZ9/jveMr55swc6mN8\nr/KH\r\n=NX+7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.6236f3576.0_1629993905131_0.9637531177014627","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/theme","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f7cc232812f3a9b4796eaeb97461d54c5912bdc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.1d19158a1.0.tgz","fileCount":42,"integrity":"sha512-5kXsDa3nvDVCGZk6h1iAULOKC5vrIvnuS37Fq28yy1Zj34p7jDH9C858NMLHA7SWqywERWhyF85TIPxJKgBFXA==","signatures":[{"sig":"MEUCIFAFWGgHeYO+ICknvharzWecA93eV6+8J5GolwzmblPtAiEAsd+PpXnmptlcYRX3F6F8C+MxlevZJI632+kam3pjESQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8qACRA9TVsSAnZWagAAV6kP/R436E0F1zJrXq/JDu11\n6mK5p1V8dxfSG7OBD915fSGJup6gUc5ZbYDf/VIVNSXyNr9+KtePIU6FWvUA\nKwhxv3L70YjTHckYs+RTMN2qAoYVEFyg5kxH9zlYp2nAeIw2yOvYR1UIbO+S\nNtxmrYHmMHfvrX4xk/VIAXpyZoMTQB0ds5i02FmO8LmzR5jWywNMj/JkW2dn\neazzbX+LN5bsqVmeNZHWcedJcoKhc0koGgK5v4okzBNteCslxL88OlHaVVgm\nIXnY1fSpS/l8MW1GNKeZMqvIo4bpjc/qv2DJVPRx4/15dQiQVsJUrRyeh4ff\nuK262eKnC0FqzmshZIIRMKkEDfU38ilwpQaXUdZUyns9+bih4ANUtgJYtafR\naYgINf2MtRsf6ZVeo4rS5BQvYSBA5h5v/weemY0fv62aWdoKJDby0bt6CPY/\nwOG7M7zSSz/W64eXuKNDajfI/QDCs3TjDqzntWu7xwfTk3YukB2Im6jIEl5F\ngdrb77DOOge7MM36GGw5EoysQ86ERwgYmuqD2MjTb/Ze7Kt+I/kDUXdQjwhy\nhLReoSqIIqBzs1/HkdC8HSvu+Az5ewaCPlh6sjNZnxaMvhgkwZCNBOT5QInK\nWlycOIoUTeFc6rM0APRLiEBxQP3GxW32rZ/SxMaWpznupcFBUs4rHYFSrRj3\n5h58\r\n=jw4i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.1d19158a1.0_1629997696574_0.320629977348851","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/theme","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe41e14232c5c8699b1d4c9e218ee98b54471154","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.6adc9e83f.0.tgz","fileCount":42,"integrity":"sha512-0GzoSvOTHn1BRu5VwvhmAm9QGNcaYm8uFUl/cllDxThxqcm0NCFHVexbunI01Unv3IqZwpcPj21QUf5x3pbNkQ==","signatures":[{"sig":"MEQCICYwo22YfNdn4yeZlHVRMC+CJor3U/nXVlnUyHuvhh5sAiBzBBC+htztQM1qhoM3cW6rq4/iSwtPeCO76yRdjguDWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV8dCRA9TVsSAnZWagAABKEP/1sUo6/leOBmkmJ+b+RY\neNXF0yMBovDsJgvQsqfxZZZjYqjUHmfTnXf5vapTCaz1RPMFt1U64F7MKDCJ\nVrE3dKwvf3eoL8W5ys5P+MjBZO6U2sva5ZajOAsquuzoCWG+B0Vob6+KdWFG\nDRkMLl88zNStEdYFa35iI/sy8U5MvmKiF9pwEcshrgYe55WjMz/Owjn3dUfX\nq5ZQ6uE1t4SWESvoAa9FexfxgKk+HKV1+vTFUFZ3IOOSWbFTnIiXHxRpL/Xi\nlL+sPJFi2ae67beJ+gZZh8SqpSYKw263I1IPuG/ehQD5FCjoog8H0zCGxpYJ\nW/2XISabau9ZSwXftJ0Geg9FADMIOVFfW2IbYruvEHoIFq4pmUljprzf5BUm\nI0aeTbaOXd8IrQ+NQ6yYqov9/bxJxy9jdTrAaUxcVV2fnWpgiL15uMBeFXA8\nTXZDcWza7Q9D+oRsWtr9WuXXFqaOJzhfCLL6JAuMg8ulDslU0pRptHEmHmtC\nQkdyozKTgI2WEucEkEKWb/FM5CWbYLVRCrbn1LHbaE5lYIf/s9IhUhotp/hd\nt2V22fX9pmtRhBSUCYPfjnJJgmoXqYsxc6aZq7IDeZxX9wa0C8LQ0d/gVy18\nQTNU0By8soOlhaI8alsHoSGAf+dO/+/LeBcmnnmAXZYZkKKWK+otAPcAaCaE\nYVlI\r\n=jxgZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.6adc9e83f.0_1630363421071_0.04900738091365375","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/theme","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.d082790f0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c270c28cabd1d92afa39605afea2503ddf0deb2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.d082790f0.0.tgz","fileCount":42,"integrity":"sha512-en933QEQtGZEBAfZ0s4yUiIP3Fzpa7grrHnVy8vXUgUJJp7IjztFFNK1B9DsZc8Wp6vph3VbRIg9GOkfKbrgqg==","signatures":[{"sig":"MEYCIQC4JbHun0KKCWjxeR8IS3FG7fPN5P1Qt/U/mQG2Go+BVwIhAJnXLy9eh7QjhdCWc2K3N2TASADGoN6LAzJ5+oKiKFVo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/ZlCRA9TVsSAnZWagAACJsQAJaxe4bdUPK8X97KKaMt\nDSZMzczVg7eWLKSm909ACSYKRHe7cFvL1TWWa3N1pLsr4/F38s8i9PlSsbYa\nVg1zPkLL4j7hh4UpU3r4SkW0kCCpXgtJYt+Mt5u4LU3lxZIeCqYboeZan8qX\niQgrdFqF0fvt0KwIeR79mASA/jMPllKQkKYsO/w0QzpbbVIAgETGWtqiBCKE\nHjig0VD0iF0PBz3ChZh99JGKTK3owvbkSyHM4BqCOdqz4KwUga3Ayto4Eeb4\nuDQ0vof3hxtngZVAH2w6QRqafCL63rnqAdybmZY6+MM2WAcc1KZEbKxhAt6S\niXNbblNHjqlhae5aImLdz3eJm1aL5mQihD7/eSSeziJ9Fd7bE/BagKfGZISH\n4n2u9qqMtIQGip+CyovnQ7siETu1oXuOZ/W2y/paWCH0f4cS7U5esLZMktUB\n1LJsDRbAShC2XoUZ8QJ3HxCmZYx2MaHa09nyOlB/ePO0AZxXcZHO9m88l8CY\nLiNMMJi11xv5uxWyds30dz6qU00n4RagURf2E1QmzTXJ9qYLovRiTYLPBi4M\nVfreXRmBeybxeduI/iJjvNfeQsEQpqoa43GCchk5sgFksd4oRUVhyZgXvgAh\np7YTlYp1wMch9/h9R1k4NHxqukGJTBwllzMe8GfBowTuYibrR6BnpLUCMRLa\nM18g\r\n=OlIi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.d082790f0.0_1630533221793_0.6878115905030733","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/theme","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"458c66635da622e73c6db592f817a149fa29ac74","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.e2c4f0196.0.tgz","fileCount":42,"integrity":"sha512-izPLtRS2K8us6rpFnw4sdd7dRuXQXyB7LJeMZSnQfiRDlTUv0U0I22ycP+gtbuddCBqs6ELl58MkZwyf/4hnKw==","signatures":[{"sig":"MEUCIBxOaUkH1xyQiC2GgjOqmYvfMZira/UFy99kyhtWnY20AiEA7/C7ZtedJJqCSlpQtPMSPdr3SPpS+QsBcOaW1s+ldeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDKYCRA9TVsSAnZWagAAWGYP/RXd5GzdlgKkP6+byoBb\nKyvtUiFXdcp4HOk3mfckbURFMNdQmJVHY0+96Bx5FHWdXnVmZg8GRw66zQWa\njmbCR2IuNXzyEw9YXyRd3SsVjlMTl+/03LXWaeEp29VnEYsb8ZbM93pPEWY4\niXarHvyDvrVLmuW5ph7HFb+/7eA8UmED57F0S0bBcrK1NyKHiOqr8PJeakCd\nNuG4vXdk5LfqUBc+frHIBQWEW6qjnQXmePxAHdRzdDQ4XfyLRiRRwKwX8c/1\nCLNCP+zhRJnqZR9CWjgrpYpfdGuY2aKZXcdCcdIwcOjSyGcZ7u66YVnJv8/1\nfcWETxQB8jdU1SPiD05G4Dves+CW68BgvxWpL9t5QCQiNczGEYWclu89eX0v\nTCdxLfZEfTncbI61FFI0M3omd6YCX3dLmaOjYFteqVoOUnlnPjgA85p4r9fZ\nSPFQeXxg/bG6hBPqmw+VFECoorOakbJODiScJ82rycaPqEDRn9nGFJQ+F2Fx\nZZlQAhZ3T7c0LJlSeNftYhK97ZOxTKX1WGh+TZniK+0C7bpXGyvckBHVt0I+\nkzEQTz/iFNego4tpeL0jQpnFtVzBXmxYfV/X6lblXAkyS1E4jxzjg+Je+kc9\nSYkfxVwW/+floY8ENajvjJOshwc+PBsv0nZeag6S99s8vzz7vODQaONeou2W\nrNPE\r\n=wunN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.e2c4f0196.0_1630548632684_0.6716775506197641","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/theme","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.611db508e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6d90041aa1b14de26a2004a52931e195eeb7188","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.611db508e.0.tgz","fileCount":42,"integrity":"sha512-FAcLZZZTm+4F0nBAD9RMTw8gFor+46a7CTEpJcSc/2pufz7PFzvn8gXS8pIIsCWZB56C4DwbYp0dLJfa86LObA==","signatures":[{"sig":"MEUCIQCLVtJd6oSqX6NJPY4aGZTPsMzbtEeIMOw+T54Vm5CCwAIgTMrJ38jJaMdagOk5xwzfIas2Es1CwyR7MKWnc7y2TKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEGICRA9TVsSAnZWagAAiksQAIN21vsjmOu/h19kTKX+\nVsaWkPfbXb31cej7vwS/2z2Spy2wQ5vskbl8JxS8dB0zvSvQ9wtdnqQswAQL\ngBqbaAXfOZjNIcwnfpAY9mjtWBwWE8Byf524ZH9zraKEhw4DaL80TNVYfkxp\nfSw7VZBS/twIha67AFDPgw1JMgfDZcI+lrh/BYSwRg9PN5hgkqBCLwxhCxhh\n3pheXFe6WDfi1q36dyRwadIquemyv9U4ChFMkJNQbpKQuAYaE8JP/cWG58wg\n8J2TWBCcDgvqlQDgiiCtR2OZnN35JhO/RGDvn+HChUisFz+whpDFqD6W8Hm3\nzBoTSbkmlZtBk7D1te7EUnFfgk3LjyhKKlWfQwJOS9atadd1VOTiPSYcpzUi\nIv69EUiItiu2lMYVIjAexvSaS/yG6Uo2Oqqy3B+OcfMx5LI8iu6Z27jnJh8a\ncGPhevXL0Gs8LXY882mUJCHP4XvI+DWCGEfiu7cniCoW/6RjSAvlbP2Ga+B9\nn/oFRhFzG1ThE6K+AEeupsS9rkc0emEsnRNVy5HM9g3CRXqtVCYd3ctXop2Q\nqJQ4ijrM3Jh/hoL0qAV/TWKAyv9tCVnmLRu0FCRsQxyq6/FumXOpnH3fHcYx\nHib4HSCIuYCm0SnXlruO6GTV/706+qyhML47tc0wsiD9iQrDR8qRbwIAQ4zg\nM2aS\r\n=zKzp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.611db508e.0_1630552456328_0.9851826426158159","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/theme","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.d4706933f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6768a74efca45a9e88dadc0f15131a870f0fc331","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.d4706933f.0.tgz","fileCount":42,"integrity":"sha512-FXQve8EAX8hIaeWm1CMvoyb0/L8iVuXbwSrhJrn2v7SB6y9svVSfFDHfAPPqhSUNgGYipuY1fqPStBgdSIXzbg==","signatures":[{"sig":"MEYCIQD2IHJfT6IQc0pLwSqyoKM2ttSwIrwvAUntmJI95tc8xQIhAI5zvSWDzJmNnS/e8wkLrTlsuhSDSf6OxMy0aXEa27Hp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO+fCRA9TVsSAnZWagAAPrIP/A8r+/HaVingd5gL5XjD\nuugEzQERbVktGCjVjnw75Hp3YB1bU7BVpBv5JEXH19j5mhCZjUPjS6nAx4ir\nnXTGEA3NiW2Fo9QyL+xxAUDZVL9/hOXNPto9yrUNOH5XjjyUlRkTGXTdyAWe\noRG1osJjU5WrnZ0WazhipOQXzW90oEbylY0qF7VbHCVYw8nPNrPSKKGqHimj\nN/dMMQ1VIYSqCrurVuFqy1fTXAGNt1JX0uh7ot4rx0Drrtk7cu5YA5wwsB29\nd8J9FCczZ8C0+G+kvW6cnY0zmWKNXkv5gIdcoiO2bsTaH1t9ceiMGGU5jCrY\nhUIkRQY40LA07dBLa2ksf4dOxAkTyZQY9tC8JisZst2uTvzKwvpmOwEiVat1\nQ2MDP28Xk9NdeC6PR2u7xbNw7Z0X8NeFmk+PSVcy24Nx7haJgB96CCbQPQT2\nEqjTvaeMw+4CrLeAzAYyKh0G8DZf89C4tuYt42MYYbeM5gZy9ffKudMrVyEP\n8L0G2D4uCbgAdXYyg6pWwPH4EKFGNdDq+DZHG/pk9HTGfAKFnUDVQuCJCHPo\nUZWgACYRVQpcwGXaKwbRlo6O1gf6JE7DbsY26AnWDtWoopiIuSKN3L5t9z6Y\ndcLdY1yH5E8/bjL+AcORDaUJ7AHapSBdFPxTymKeGME5EzhiEPEegDDLQIyK\nPzO/\r\n=ep3t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.d4706933f.0_1630597023115_0.29764108649675625","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/theme","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66ce95b24426646b8d1dcc54dc832da184d6698e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.c16fe03ce.0.tgz","fileCount":42,"integrity":"sha512-M2RldE9rEpRDhj+iX5Sx+ANd270LKYwmwUcGRW0g5PRS+7ZGBQhKZFLTAvOyGJh7KOtFQ9Ao6HS3ndcm5waoEQ==","signatures":[{"sig":"MEQCIGWp9IDLaT8MXBwfLxyONPd+JhV/dmwNmtN45M9htlDSAiAbh2sOrTyaIcdLoCy72kPOiz5P2JVjatSGBR6qySNmbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ1nCRA9TVsSAnZWagAA8ewP/3QwGUEG3lJ6IxIjSxlO\nGTYUX1uYK8MKBgDhnYrRDIvzZF4WPegkC6djyXKsWpEdCya9GUNe3ihOwD3E\n9WZwer4U3rc6Qjyfi5C1oaYbt/al//rZJPjleEk4uBh1UYmYFe3bK4pwEMb5\niZHwyPeY3d03Ck+PhqZFQJaaVGPRiAHVb55ypjVODLxJWnzny3mBfyzLoOoP\nFfB7vHTPnYEFQ/K4vMYrl/G6xy3LB1l8nZEqjfNf0s6OAALw/uUKeTOvOqkA\ncyOdGQsqAWnjeKwMnBzmho4HL1udd/Lv5HIdAOT+Gr7XalcKFiX6uFI1Bx8L\nVwdCx1ihsTrOZb8+qhR12mfJHUPnAthLDQoAU8w+x/aLl0hwa2iFTJvWhGMb\nQCacGFPL8tO9J4r3SEJA3aHFwefWDyC4NS71doyLgyLImiL98Pd9M8jGuBqm\nxmdZXfaajvgAhwquDXWNEVBZhoyOi13w6KCO62qUleYywgqrVgTP56f40BuW\ncyGpCta/0/oUE8WyvY9NeZ02eg+4BFftH7+jHAVDkGpsQeMsFwp7iaTrkHYA\nNF+d9zGWShtGrauMviBmRDp2UNthm8b+3wUioB3pnmYRbOYH3RwIlB/aBqL4\njJvEVXpkC73Q2pnm3Q/cKqHWbaWq7Mv4COcL4yxEwWGx7HyfTWSMCLq60qjj\nvEC3\r\n=PI7K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.c16fe03ce.0_1630604647326_0.06312372626202989","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/theme","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.9203a958a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba9a4d3f439a8f2f14d8fdacebb75ad5cf63e11a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.9203a958a.0.tgz","fileCount":42,"integrity":"sha512-vPqOhA2qML125LFp/oF9AM8Yjf28AmccwEptUg2Dyecky3ipPbTdN+vRzTJ61oIzjtZ293g2Cc8wm7g6JkEc3A==","signatures":[{"sig":"MEUCIAGGNyv47vltkzCCqGjlOsrVDjonKDMdICbnCkaw6fsGAiEA547CUQTlkQPLf2B5A0Eoa0BXrSFRcsJbnzs7eUAcLNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWIqCRA9TVsSAnZWagAA9k4P/1PsuYJR1l9l+bj9LFUl\nV1l9WPbSgoAl4dCI/Ipn9fpkNwapVtL/5onJ26y79yddRkRY/Bfs2YRShf3+\nPxYtw211Bd036OXlXLtHlYTiMtCFsx+DBBOtn20+eijST5eY3f8epMw9pz/s\n3Ti1td+XoLO86zvGJFzkDup63NxeB6rMutWlKFRI/KB7Tweo8AOM8RUcyc7w\n5xYyfk5fiSC3veJ6hXUPkh5GJHPchRQCuyq8En8dC0QZN0QvU02hjcgI+sEB\n9COKFwyrkQ65ifhuXFOn1ILhGvw7wL3WtiH2X8lkH/X3WYHJL2KheQfNHRYH\n6Ser4nADscaim2QvSpzJUJCyETZehj1lHCtTgR/TYpwBl2oH0OgyPZc3ZPcg\nZ4WNpYRgGOUB6EKrUu6E1CI3NBCCus/YNyPKkdLah2gnSD4iyzHIwzXIftyM\nzTkV9dzCPLmnkb/ZFTkEF39NiVUoxYPhl7t+Svw4qVDfGJO+yzjNpwNRBpHQ\nBys/c7SoBaXJPbfwc+/EoZRQKy5FYXe1XBwpu0RrcKYPCEjcVnDMDv7/D18a\nNyF1LmspA6sYjkhpGfp0UuBdspZMPBBwVtOxTxZ5E02ZmRx8G4ioc+GcP38E\nv39wwcmpkZ9bPGBTZoGj1Ai8X2PHG1T02FIDNh90vrtlfhLFoSmHnR6th4XJ\nHTto\r\n=zf4y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.9203a958a.0_1630626346286_0.029828010084475665","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/theme","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f15ad33244f7bbf20ef6d8b1fc9238d160bfd67","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.fddd5ae93.0.tgz","fileCount":42,"integrity":"sha512-jRxd8AxbjP+nHD2TUl3YKDq7CkSjUDHsTZ2nBe49OO7+/3OMdf32qCuZnggEB1rWOcGhVtvBM2YEtILwHYW2Fg==","signatures":[{"sig":"MEQCIEN/yClaBGtMojJDdXnMyWQd/1spW4t1EJvnVVSsIG/VAiAydQJlDr013NIcTNoUQyyI3y7mF7mal30UiuUhrvPcgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc7MCRA9TVsSAnZWagAA+kMP/3BQlzmIDqm9whQDaYrv\naWGkVbulUdx8HvrITAx5AbyovQtaAXgesRve41tfpWNFZtHnGNL3XX+YTwUQ\n7llSJxfcQFGzty8nynJrItwtsldyh8Tq/nLiOgZZfXb64gt0fSWfQK7kl3+v\nWnJvnc340erKUBhaL4ZKgWMMiyCax/FDSL4BeeUuwqJ+azhiLL/ovhjNTQU5\nr2wgAAXR0N8pbtEVQ1dk5Jr5/IKj4mqKhGzHdCeguzXBYqfk98Vjh1HrrxXo\nbH1mK+x1AglVRF1271YAya7QqU9Jg5/D+0Za2D42Aua67aqeR/vCXyYMFIrt\n14zVv6VNtO3PEWsdX2S8ekHk3Hlu2TVsaNIFJw4JT7N8/CwuiUfzcxPaU88T\nh0T3HY3sBACOnKi+GDbnDSCRpxvk1Upag+iLWG7kIoaceU65Is0olDC04IPr\njpCewBOEI/caaYF9RZWCYGycbCsSfyJHgEMxHlyOcZBysgyRYearyf6zWpr2\natNP8kmb/3vvcQq4z5Wiaz8OblwMmoHvvyspG3lWqPHaRSDQeHY5UBJk/lnx\nnuxlX08mB7EDT9oH7Qrto63uwXP7MF+R9r2gE9XWzzMhhunOqsr7ATk8RDoO\n9esWeCPtI76j+Ud0qjEK7uD390hLSTA9PHK++PpXHQDjRmxGzZRJqNU1BJz7\nLYmH\r\n=zzfG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.fddd5ae93.0_1630654156614_0.23447028798231462","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/theme","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.117599a8b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49794949237fd5308fc30abb31b1cf60125b50b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.117599a8b.0.tgz","fileCount":42,"integrity":"sha512-QciwN/dEinqChvWFcN1j9hJq/by8h41+SQJ1fxTiiMBov2XQLOPepCToJsmh7g3ZewleEwRhC/3jLADWsj8f5Q==","signatures":[{"sig":"MEUCIQCqicbXwjrGa5iWlTsss04mPExTedYA7Z7Iev16FtlIJQIgKRx5bKDFjoI+oa+Lo5kqmPUuMq0DEDfJhWcg7dLhx28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc8iCRA9TVsSAnZWagAA/dAP/jTk9SG9IXEIS+093FdU\n+1yZ+Yxvew4bMvfhHSiNqjmI48gBx/vUHFlqOe9WNR/siYa7+XbN7Ihtf/sc\nagEcbR/XSD58xfTF20w8xLmJOX8wvcvz8npiO0aHUQ/WhctXjFm7VZh6kTbx\ntyE+1n9IO2yE6tPrwlZy0T/vT4C2epaIMW918gS87b33DrwNNYSgPYFU1emg\nqv7N//F1nXh1iHQmnu+6zSB8v+6IYphKHtIII4N3GwnHZfRps1UEEbuEyBhI\nzZh49IbyS5vB5S6Dfm01rW9aCjnV9EukE9IwKXRgNgxybsdBuQiQIyBIGytn\njfpTARYBBZGyv8Eg5kWIbiXVKXWXDnSbckwkifk8NbCE/t78byYWjRn8w/5P\n7xOb8Jv0Twt1pXX42YFDxSFckEsWVkeAzo3KqrnyvO8tP6sVr6HD9uhu545x\nmJkZdnZCS4I6+23qqf1MlWGesho55kHdeZGN1oNPQesqaYuZo7DWCflLa7Jq\nCMXAKQAYAnRglAxT8j3/f/uPUtSMHAvY+ANdiRknvMgVrOPddg+0aNymZCCH\n0RxMywXt6p7NKxxb9Dri8uxWAs3e1VhRx2pN3pAFJBR2gVCDCMHZkys82obN\ncTKm4WSdK6VKM2GDI/4HNpnyW/nLzea0aMcFMtPp6Zz5jVDGlXYZu74r9Mdx\n27Ft\r\n=MCsc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.117599a8b.0_1630654242088_0.3108871300391345","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/theme","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8801292de17518c5de80f1777f487de04bd8a3ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.e4180d07b.0.tgz","fileCount":42,"integrity":"sha512-Hn1L/MoIxozGdb9YZXrzB/qZTSEWtirSeMtCYUzYny78hktteXTds1WBa6bwtVBn3SZErHfj9t2a151KVWeJ0A==","signatures":[{"sig":"MEUCIQCjaT4WaIJhDByWElVBaSPRA22MbDc01RFvawh4brxjIgIgKdnCnhhYsz2jgKh7MVSP+ZAXJEaZeR6M9lLI5YRRrRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9ACRA9TVsSAnZWagAAK7EP/ijpxLkA0ApuT2rG05wX\n44RVa7GFuCsVBdY2aWJIw6oe09h5b1ztrTyx/WovgMeCR7s2PqOMQvJclh6w\nJE/duQdcHYbyvIuyIt2ztxW3grv1xn3Iu8tNy2L3lY7vE5UOhgwQwYt4GOxD\nQDb2wllhNmdMo9eITqxByL37FXkUzsb+gFrlV/l72iHqUhsj5bEKvrZ3pQBd\nyS5+9I9goFTmOig/6j25gYOuyTQlqfWC57PSCnUUfJh7doylzxsJXOne6TRr\nEty9nrqPPJSNlQ+y6Q1A3nbj9GzNC6KhcAIYnVlTWjliq7xTz1a7mNw3vPNM\nGSokFsTdcvC8jxg+qlp0CzR5XdkjHzVGRLRS1HfJlA5IKQUhcW8niT/6vN3z\nf/OLfkaKI28DtdiFeEwCTShX1XhkP7XW2D5aGVBFlQtQd5n9ocGVSK8EzzFp\nIaSffTQxsaoiGcYOTsnK+0L7uc4gEmphxrD+e+zw1LkLqYcCtp4KiIjHBWIO\nf/G+mUqPH+wwpkvuwDhcDHuRO3T0fiqqDa+l5PVvagRtZPqzi7J5OJTOBK6w\nvX/4PfJM3Wl39mOOr5k7NWDF3WsEsmRaTypmaHDoiutHQuVkm1Jnk8synvQK\nVHMTBbz8zpdb5YvxITavBsYVAj158LX4Jzejjutg6ydy/7HjZcog4SnmJSYc\nd6NG\r\n=Hj9o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.e4180d07b.0_1630654272088_0.4730701507917108","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/theme","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.42d175efc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a19a80e77b48480d3f1beccde76de633ee989d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.42d175efc.0.tgz","fileCount":42,"integrity":"sha512-mErLvWn+QmeNkIGD71+8LJq++LVrkR34nTEWv2rKdV1wim5GKWNyu8byq4B1cDT9jvqVJSNsRm+syqAsLU7aCw==","signatures":[{"sig":"MEQCIAGbmODLcmQznURUvcoCjcCXbHjKAFvLG4l5hrwvaR3TAiBtIASD4QK/nzU4LC6WriKPYealJ1zLfaMue83hxeRS7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkJVCRA9TVsSAnZWagAAbbUQAKTPHanEc1MrQdQVGlQl\ngqZSwJeIrgCdV2XQ+IfStNU4WKz+dxkwdEYnUthXrNo1bdWl5eKFLyzupNjY\n+usFCKjrz0fXI+zd2PWfcc3syIsVjrkiqC/qTg4rng7+ctKNn9zUGNibIr2n\nyXhQjAfE43QZadsdyqdJcb73FeEGzToiD8oTNb0T6rfUjWGeFYSsCJakPoR5\np808dUAfAyS3FNudokgUnOHuH830aCMVy6+K9kJhN9JKXMP7+jFGP3Ay2KgH\nKQdnNGNqbaEYB3vtzab66mPDVlcKpDsJeRMdP11+3Dd5VLjadTCcEhpgwy0C\nqEqd2/35YfjYYkNwR6TrbRn56Y2Y4ZcXK+9+nUQSWiSeWnabJmk5AdzClPPb\ndw6jGbI3KiUbSHBralKK2pj22YOK16cQRkwTB5P+0hHGJjVo6m1MHAmxj5fF\nEAoN58Fsn3iSTtO/IsP9PvBDue8GIg9h0vfQGg5F/n4BZMrZh/F3d3zbpsmO\nKEzctsnKw+lPDrgo/H/oDuYKSUD8U7udz7GBgkj8KUXz3fkIhFTkBuSMvA8m\n1eUZIAM9LAQjTxScxusraoZ0tKuVZ0Wu7x/LZUj0U4rA09WM8kzqPQUAnGeG\n6hhyLP5t+yECnD8UBglKNrj2lspCjas2OCcxdaoAW12OBAnrfuOghRkOO4Tr\nK5zJ\r\n=/eZW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.42d175efc.0_1630683733190_0.9546620713763683","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/theme","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.72464476c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76005139413334eefd0f41c8c059c8cf94c55e49","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.72464476c.0.tgz","fileCount":42,"integrity":"sha512-TyCgN1YCjuMs/IfGbCmDTrS/YljdaSLKJH8OP+AADqApI9KtyFv31/pfw+P034qbfLh7U58+rISoi5ao9wDgEg==","signatures":[{"sig":"MEUCIQCyLnKaVlVSuXbst0XXr9EsBhaWHKGKJGJw8IBpP7b8ygIgDt1mTspP2x6mW8y8NtX412ZmysLKsSBP85a9h7KPIuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4ZJCRA9TVsSAnZWagAAQaYQAJ7ltDYEyRVCiIgdp1hv\nLOI1dMyaF1pGxfjqPymnKbbt529kBwG2Ar90J2FrjY920r9tK3nCgR0XAUmF\naHPN8ReHArFUx0Cd3qv4YzhCLTZekCEbsBSy2FkmkFDi4M54RBRxGvYaXa2f\nidKM/dC+u6fMKl0yoVoy9bHsyRrNAx5XRcGHGFrKI1Te9NgA5xh9b2zVbdi0\nHg8VlgkUZAlSADR8iJUWAf1RelPVjzOD/eHWizza5hFr5KLQwZzX8GpsavBX\nfXMjKcPqOcvI9+XBmlkqNoU4IlEtaOqrGUrfUmlUr5cevKrZ8aWtwxBVK94S\nIc7grTrZExFWD64WxO+MPsmq3rmXzJ/9EkbQvtwLbeSAzVPIT2Sm4arQTALT\nDE8PaOzMPTCfuljxMjKYrXoldIPvxwRDs1bUjaLVdC8f4rC6RvufvVg3+twP\n8PoLRSLDeiNw76UeLLejy4XFzqfX/fMeSLA3GmGXrJMDBSgZUSxk4vLOHaMw\nR2oDIV3Gfq8x+ndMpr6GM8SIDS6JJsinVziCLiYD/M9WAb/f7mNkurZaXORt\n4WJK4rMQ8wcOEW9H4UHLDuPcd1stY7WSRmuDTTFhyjDa52Gb3i25wQOjrDAA\n5sbCC91x0so2kCzlvKmCK8W8wXA/bhCduPwgsxnctnsoIJCUxsDWIU8g0k3q\n38WO\r\n=/zDk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.72464476c.0_1631028808946_0.10817316317853698","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/theme","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.37d4db866.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc9c9136b4f79669ffc70e59213960ef6e868a0e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.37d4db866.0.tgz","fileCount":42,"integrity":"sha512-q8q490X8CON05ez9/K1kSfe791xvLigJVmGX+0Bn+ui3u06MC4RiIDd1sTqpwzh+YBnY4NP43RwBPQBfUEcN9Q==","signatures":[{"sig":"MEUCIQDbl3Xo8zLiXNBHsBlKI8hup0mPpVT0jeBZVjj/E7OZHwIgK3ZimGkwR5FQkFTQ3rqqu3u7XmQKW7n822zoC+M3vVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhsLCRA9TVsSAnZWagAAQfYP+QA4ax1VjVhmhyc++77x\nkzQSgBGO50TnOS6EZPwwYc+9WjjT/WCAZBLQLY/LPOm/JTVvrTbjCzeq8wo+\nPgjDpQKZS+KQkZLwnzFAKHjobDKJLmRP+OYuQxv1hkZ7trpmD9zfC1YMCwAG\nDYR1l0G/pJm27KK5tFgfIUMTqXAaGa6I3mFPHfLKpMabNdIKHxBxNH8g7FmD\npjKeP17fAYCfxRMfO73nWsQi4oAZBHswAW4265KwPx+3NWhAVfBl4r0YDZnd\nz6PwJAfQgFLSdJIfsOphNbSPtPt4R8T67cvuPZGByjPigfSDxxJ1mIzet/i4\nIOVknDc2eFEpb+5THBwAsSH4I3y9gU17xueFAaewV3iIhltZEpNlflhhxW2i\nbYRbuHZ7lF+KBZX3Hr2plWHcgEbi3qEWla2w7iwDgRjiJX4vIfk7y/61u0r4\n+HY+kI9vUp9/yqJXs4ZnYZlZ25lrygPeQTg2js2W8npEPbBl5ljCJqzeUtos\nDTr8IS+a3/M+ng6qeLrqRJBrhqdKoOW3Qrql4UdjAThCs6mBuIOsvjeGVbDv\nNK6qLImN0wJjtjKR0xNO/R/1J0668Pn44sXzylLtP2vSvw9DuXvpOlqhMVmK\nHQqIhWIg5tZsp0F6P5twS/ocRnN/gMBDo4gUQMvDXcIJt3ETizDkX7o0CvkU\n09FV\r\n=TH0o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.37d4db866.0_1631197963284_0.3352108707833157","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/theme","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.6df682e74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fe1cb164ef0130874f4c2bcddfb3b5ea34ec72b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.6df682e74.0.tgz","fileCount":42,"integrity":"sha512-RzZLsnANaukhyoPy6/fhzpQ8CKjSCPZrXmRwNYdiyIbeT+D4MCbDK0dZHY+xN+2Y+Cymqj55hEOaj51eLoWSng==","signatures":[{"sig":"MEUCIQDQs0fUWBqIvhJHzW0ebzki8590DK76Tkjx29eOUqcNeQIgIAFp8L2MZwjiVXbuULDe9Gxkm03AMn9odqsDoQENK8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOitnCRA9TVsSAnZWagAAs2oP/01GN5RyLl25C28xOXCU\ngz3XmacqzVGI49AsnTWUJn6vdCIDag6GaVkDNHtJ9gCMXLVQOBhah3LptT59\nGO7NomuF9w5q1dG+54maiPsV0H+DWhNSpOzQOhvGy6oOYIPHv+CGYhKYvwXa\nC2Z0Pb5+tZhBxpwyX5hobB6VOEz8vmynqBQQUXJvAb8cD0f/tH83r1dz65Vc\npMomKT5bUeWYOPXJO9FqMFsHKyHZKVUjbF1RvCy65Vi4i3chMzhcKA6TpuAA\ntAlWBwzoiKRtOQLCHLsofpsyYPz0hNLtPAEuJHhc8ozAkL/Iltj/5uX7RD8C\n1Qc6xCSxcTz4J0IeWG48lCZv9jH59ENLHrGvxo1q/qzhxXfHUQ+Nk7qV2rzs\nJLTtFQTaGpDkV0dqID+q+9gbDjnnOR6+B1XZKbbXxCL8ERAgdaUnOjAN9MIQ\nIawsuuddO2cLrk2EUax0U3Vn6fVV3GMTUkL7XwAA6RqtWZZkYwo20q5UtLoK\n/JDonk45qmfW6Hh59kq5sbVvFJ4aCX7H2AyoMsnHdoMHs/mDy4lFZbHso/7Y\nCOelAQG5s4yzk0L9SMmeNdh/+UQ/Oo2tHb5/SxbNNm9kkY+HyNFrjdPECLrX\nt8Fi4bmwYRDr8pRGPEWQTbUZxSC8O62XzLXZnG9u3lpMCwdeCBY3JEbVFSMv\nY/ux\r\n=HiUl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.6df682e74.0_1631202151420_0.25172223653592884","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/theme","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.b49359c35.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01a394f90042f9a84419c2e593ab2153f4abb1b2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.b49359c35.0.tgz","fileCount":42,"integrity":"sha512-gnq+pvT5pz6/PtYHRMuS4jiC01VtWrNts9NKLiAETM8q6XmzAAeI+zHNDjjMKE6y0ppsmuVx5cYTTmPK9ZhokA==","signatures":[{"sig":"MEUCIDH3aNjQ+Lmx+GZZlW9KHlsNNvUf//kGBJVtsB2GfYH6AiEA4He65/u70IK+onpilgHKLxFzw3awTREOSjiEmzMoSik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkW7CRA9TVsSAnZWagAAWRgP/RIOlRpjVaZ63yEA0nbB\nmNEG12B4nCN8o6WtgUIR1GTORam4M8P0eh6c1VmJOMfYKS8UlOaG4//dUcnl\nnwPuDG79yW+K+ZA9HyQy3LLhZ3CxtTxxjhaAmAhyxmw+IMSN7IQtUE0Ypqpx\nRKw7hETzXtSjgOzgZhwoXMuVNd6Y92AaJOYOgC/MBrgH06/0QZnciFNTW5wZ\nkLXegMkXqx+azK3FK9FCtpM59ABTRJbxfgFofbXZK87/SansyQ1joPjaP8mD\nGWFdF7dZXayiRv4LQXIHCsWE2E5EGNIMZUJJvFGzr/RnmRdCgkQqjdb6kjSi\nCxEI1C45DkYhD8JFrLmGInAFJ3XlrYMA+pOJsVQmDZjiBYYIPuOnN6o9lxK1\n6yzXlms5xhqciX3w20DdXR1uGo17ko14h69Aq5y5Bbx/g7eblv63LBEYTin9\nUDkggVVrU+/A98mQAg8lzaSw7wrGMBFZs1nL+xBn8EMCLpOeAnwkI03rnQUM\njg6+SqLl3d/qV0+txTduG0roeOGmA/NNppAXAFb1ZXU0drcykcr/7wJNaOYK\nw0b4Ued/50yDWnvvxTASSrfJ81d8Cr5B0NmYr8XG4vw00LnYRwEZcEsXkDWP\nKZiO9+1nz1EpjonuOuD/VaawYhAKhJZgek3ZKltfJ6vZecmeSBU9J+hffe34\n6jgA\r\n=qzzl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.b49359c35.0_1631208890865_0.9992151949455848","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/theme","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e05db8bab0d6b8dcb55f57e5e44c7d773cbae82d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.470bd34e8.0.tgz","fileCount":42,"integrity":"sha512-h89ClKWB8VQ7a+u7qkLDTSHpiyF+MymPRq7UI7fw1DcmzO7BQKKUbKvT6ZKdh9iSX5e0fN9zXJSvfuantSZlQg==","signatures":[{"sig":"MEQCIHC3E0EjnE8aVFNmTZcSj4Ng144HIzjDsZk9/q5daKh+AiAYZFckZutOs+kv3WBNnvyb3yDmw40zr9VR4yn1nQH9SA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkuxCRA9TVsSAnZWagAAhMMQAI61uy0VzKHnQWzH2L81\n49dI5jxIUGv0AbnqzAfd3IbdSM+/NlvWt+Crfh5qUVoakyrVkYj8TTq1IrZx\n7iVGisBu0xXBFuSg8P1w2QjDvYuC1D76mPI9vqQQ462sBnCSdQS7n8UzdBYl\ni+V0TLRFWOG7M2h/1b+XsEDFPVxxTq4FfNZAvOd+Cq1R15uXuhMuO9df7TeI\njG/vKqe5daG1vaaeC2OrHWzbtKbCWF9zbG5bSbR9FeL5mpSFhzTA/ppTGpNR\n8azdmNUJUgFVwbbJWn9/6LU+np100GNS6bQHS4o/vZHFuD54ePkXM0uloPaS\naDpW+V3OQh29658sm5MrmZ/1i8pkvi1Of11DGTybr9j4PJ0KPyUAD17t4mIs\nL26N/u4H4q0LV3jM3fQpVPevO6cQTK6I+ASMMp9M3los3xpxuahMxq2hO21Q\nbmK3sRYkxGKt/XPNxRygRzLh+5SO2rF351NpJ96HtgF0gnEDpvhHxBk8MUB2\np83lLlsDFceqJwnfbFGLLa4gkD6icGcOP5nw0Tdww2rBIkY7msxHo/nuSHfg\nl73zefNShrhIxgx/JmWFajenXn9/ETze8nU9gW2s0pIsxrH+a1LjdI+BdpO+\nbmVXv3YJatJdoQW8YHeVFJXYrXfWzV65J8apGuE2AxWeMZ9mB8q3gmtc9X9c\nrCOw\r\n=8Aze\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.470bd34e8.0_1631210417589_0.9977682241488377","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/theme","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.d48a01771.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d68cccdd5f40479d103e862034a2ef00481a0f94","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.d48a01771.0.tgz","fileCount":42,"integrity":"sha512-OnZkLVY7Fw2h4MAqN3faSIzGY31+eL7O/Lomm1I4MScps14QEGmuC3n9DzNJ7z9GeNaJBaPcPbljAucuO2VH5g==","signatures":[{"sig":"MEQCIAPK9tpW6NnRrerPaX2Oj40aNaLHP+BY4BpXtksb6RUNAiBWY+1xKhDjJ+KI7ZxZ1ycS4r+XPru13pFBegwDexO7ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk3hCRA9TVsSAnZWagAA9w0P/3aCVSTz0JlgaIMM9dr5\ntk5I0FvFFgK2O8ZHKwAe+4JV365xshrTx6yOmWR+YCx8ZCSQmOMT3jO6EgYL\nSGjRxnXJGAJMqlR7FO6I4oBywtBm/CaL8hE4nLgqbGm/iEHPts4vhfikuhmS\nKaA1Ukh3th+FjxCHX/aQJggo4wzeIj3f/xfjTCDZFae2hdHHfrvcw0fXEVHU\nLGGghCFz6Ncr3xr2uaYc7cSxLfRABDjxSEiAgjErtfswuBSd4F+eaSFA0hUf\nPgJwrKM5DHcVI+/2DZtIkN0L+7JXWdUmoH62/JkXg//EVwssiqqM0dZo5rBV\nlXSJqJZtR+GuYLT9Zsth261qDZ91cUEJCAAtwBQ0FZFeUvJw5i+ETWdNZgI9\naiepVGOmgkvchCghl+Ei6r0WxVEgXnAqsj3mqkatoxlYrkyo2QHPsNk5SMT9\nQkfo4LYrZAwWezZWm8cis5n20sirNcvOi4cNFNZZuql75+xi2GnWHiTGcti7\n76kybivFPjWetrmgzLc0UUL9v4KAZEjj6BI2aYDzylqrKoAhbBlI9gzcPQ0A\njBUXScQy6MtiLAM/UnnX971yw/oKg0ZU2KZrhC9J+TRP5tnOW1ssW37Woch4\nT1f2HoiIGNMlh0CRr56/d7ztsYZp8WAOxwwUkEve45yT7KcWkDupyfhJBmDT\nAagT\r\n=dDlB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.d48a01771.0_1631210977439_0.03733468442849741","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/theme","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.13db34b34.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f24dd7b22a3b90eb5ffaf2a1b74c902d9123d195","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.13db34b34.0.tgz","fileCount":42,"integrity":"sha512-Pjt1iWuoyOcswwHiPgDpaAfUZDlTwOEa1vbrFl2UmfmgbJEX6GYyvOK2W4A35Yu46/mnF2jLAqyvcZo503dMkg==","signatures":[{"sig":"MEQCIHT6jMZiBeNRbgtq3VwSo19cNUVCFvaqsdxodweq/balAiA11YWCOBqDOQCVKL/LXQWZsvKk5JZFLgQYNqfgiJoPfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlFmCRA9TVsSAnZWagAAdVcP/jCrAsVPThwQdc61Ndh+\nV6dDYJII9E3cwuzmyilYGQ7IXEww4sUWKj9CVMVw26Krzd+zqsJGXGOmsoHi\nP0SzMRktq0iMOv+fLMWp2gkt5oviUUeZCiw2jBgfgN4FCVzeol6NFZZPDsqu\n3OOHaBHw6uIa5qGMD8ynxelqMfmRpfXk5wiK9PtNUtx1m99W/3khQHAlb1K4\nU6ymgZxjiPsdvC9O6/4LDhUQVTU+ZJ1ymhl7Rw/64mb3ShppBujqYNKRi1QZ\nBZX1JgQukHwm/0xGblN366MrORehM9z1LzWGp73YC2uNb/MMN3/bBIRur/nV\n/AYWmIxB6VRWYFm7bKEUVaAL1J8rorOA2yfpNOCWxGHFA+jpCGJlyumLe3vS\nSEdt5TdjQjskP8sRRHekQ0uDLqTprZ2zTE7ubnNEg2x/pVmagxqPqF6lDHso\nfoUde4nUBPhbHgsw7kj9sc+QEsteztj6T4nx3vcdXkf9vVgoWUp49LhI/1DE\nI24EStc38cIED87HMh9VRlhTj/onVMqi/uDTj5MyPC0xC4FTmyLF2sCuYWli\nrSw10MIhlReeraLsqrDQfAC7V1NSmco+nRlzy6ZOzRzVOplq+jwqvtsCxzgX\nj8lZCEYUJOkIw82TfA5FlKbwBOkdvpBlqgBMwoeGb7Eel4F+Z/Gcdo5ysQu4\ns8g3\r\n=tqas\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.13db34b34.0_1631211878370_0.6206511578534939","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/theme","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.864798678.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a4b54ef5ea67e819d428e170f6e918ea6cb0811","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.864798678.0.tgz","fileCount":42,"integrity":"sha512-nlXj3IbvzE1nLqeUwC81qIgcLF5gi8WhHCXv6KfTMIdSjkvq2iPqdxBR0jGgz1STnOGQrfUIHIwMal9OzlhfKA==","signatures":[{"sig":"MEUCIDnQ/P+P2Z6fI3dU9+y4+6nvep0rsjsrv3DgFcqa8c+OAiEAjv6/AI/bem7z5mKdT0rZa7ToiGgX78dDrEcs6CJ6H6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlQVCRA9TVsSAnZWagAAdA8QAJ7uEf6dMqw10rlndtNj\nomX9auMQJYySvZbCJuHVPPuzBeBkQC1EU0hsZa31M/KeKl6I9s+7FzByegEi\nPfiPQp3sbSSz+qbt+yIXwmEfQFo+cq/g2km7cCtC7DUNvyO9nu6qrgzgDr5t\nWo87q8JEs/b0TizJLmhv+dbrV5NOaFq8m4IwI3wEikhf29+tpSYkvmefrn/9\nfaz9wGMzoAJbosiD+vReYVGS6jMnCShp8spu77Tt35W+MSIvY2bEoG25pR9n\nSvV5mjkqnRRSeGwOtYiU5lDCO88LMA+g0fj17e2+XPRHgZDo/HVxfxi4q0dp\np4cWLehZHWMqxt3lohJF9e9Zjl8tV11KNO7a9t1+PAu+4fp4oJ4gjrDcWVJA\ngdZjlaEEuv1Gh60Z6Qbb1W4e4o2/CdQ6lnXRn7t8bwxAbUNbb5XXTy2Kqzde\nHbvGRX39stHYfZqHK97OvI0wsHICIedwmCWD4PVNeOD1jGqkEV9mi+9gt8q1\nysA9rAN7664Ol0peOqpF1mzyA0hQuuCqWPq0LsXCTW1RH/gj4eFrX3Ji7fc+\ngpkKswW/XTxQvXPT/e/Xbhal8h3k+5jNNcVvYmDd+DJrL7kVY9V9fbkcMVyE\nsla7ASVaRwjg6R5QJ3RrJ60NAp4I9EakuoostRpaEl6b1wdjkjB3y3uQju8j\nLltC\r\n=KDpT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.864798678.0_1631212565061_0.21113775718143013","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/theme","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb02cc18cb9185091575c7bcb0d5bec13ef075b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.d04bda3fb.0.tgz","fileCount":42,"integrity":"sha512-RZuQX0U6ntp+hpH4KpwfidKzK1KGD6ljw/PtTHlXXqXX/7/pPs59aIIgKtYgr9qTtgvmLJWs0YWhHN3EpUZnlA==","signatures":[{"sig":"MEYCIQCHJ2LXfmEFoMZSdwS7xBA/nIv0EmI2Ve0d8iZBt0f28wIhAM/m7sXY4ah1NpZsAgUPKBfx2esND4lMIrCASfX0cUQ0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3fQCRA9TVsSAnZWagAAtzsP/2mE12A2eE3kbVzwa30+\nlQFnrFKklRRJqgXDNr9i+jnYDQlo3UALg+Q49ys+09tg+6kLBITyt8rqAqWg\n/cVaGxJpWIAj/I+ovBXYPuANy9JjyQv7OoSWWDrUpbi+lIkFjW2u6lTvtzvE\nFa9V2sBRcPuUA41oQvvrOqGWiooLpT6i0cpPHMmm4CoEnru4KmBw4FiXDbki\nUMJu1seyz3GVGqtENDERMqVeLA/m6g6uJZkN9wVaXh6x13Z72SbLQtfgruRb\n2om3JKpmjqIOATRemp3u/ukX+fwdLdLYc4c+iFF3iudZeFYfDDaGHefO1vz0\nZDqDjzFUFDFAOBrapNZv5kGUI8XVXKzLB/53H7nE9AM9FoXjca3jNtm9SQGh\n3Qhk+oxp9BbNWLKQNNq2gFaMpSDV8lUZkFcJBq2QhabQOhkJQLjvLfORm3bm\nZ0eu3vOjnKYp0CfW6MeKK3/yiGraiRBN0uSyIC2FOLuGU/SXPP8fibLCKD5u\nb5N9dcmh15HOonOk0JbzGyvpxu8UmIbidJ5ZDXTRERhTRFt2yZB1Re9eOt9g\n82Lbm1IkgzZTdi/I0avhUd/MT1ouHvlkRrgdZ4gHMHhEP9JPIvUjhQ+WheA0\n7JaBkhcJQf8kh9mxS9xBzYlu2vHRFPL5pC6ZdoTK+5hV2sVaaYw1uA9Yy2CQ\n2D3u\r\n=c3uz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.d04bda3fb.0_1631287248073_0.3775249335899109","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/theme","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2860ba2f0914de50e547f17d0b1a97d9f86a5add","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.5533f73d3.0.tgz","fileCount":42,"integrity":"sha512-YXFvbzovVWpwmBH+kFIq9r+G8lWGYfvBPxkznqnJjYbewz0vPi3UF5kD+gKRSNADYQKkX8iEBazRli4G3NFzew==","signatures":[{"sig":"MEQCIFe9jwnl8IOXRlysmYqb44c6m2mFfjr5E2F6kx5DxN3wAiAdJ2Q1kRioOvd29gcgzbnd+lcO82F9E7HKy/C1QSylwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9iiCRA9TVsSAnZWagAALCgP/juRjxeW5FJYoJiHBrhI\nuOoX9SQNUMo6zZjmvDcDBp13Fo5sbrSiy/ObjiWSCr7Z3CZ+3tMpQ5m3ZfBq\nKzizA33qids96Bzdic2fE0/IrLpXKB+OQcw9VDYcQDjV3Wj6ZBFWwoLbMdMM\nXDzbaF0zLh0wdqRi6cERxRZdp18bpNcxNtjaD2TwArB71xogmsvVlkHSaY6X\nK9iSlRSEc2T1TFFDGT6fW63lMmfVAZxwwndRTWBx9jDAiZZ5bfnm0sksm/Es\nhJ88nslJrCUwoCJ0iEu6kwZAtVNDnSui2EvYGUXDcpWePYOq8EK2wjzfaXNF\nUPcrmsfQuykEhSZt7aZ0Oql7g+kplnRc46OEQjPHoQnJoO8PPJodRqPkrBsW\nO6zQPHCnQdatrwLW3kNqgupzFhvo9s/9Jf9ndc9Xy3S2eVRgFnuH6IbM8tpq\nGI2adFofe4fHafS8vhO49n0Zoqx/g3lKw8XqWDXLN+zaovKg4EKdffpxDzmr\nG2zGyyf+bHKHCp17xxNiqwH2K2xOf/BluTvXM4lpsvPlfltTzru1x3QiAQDT\nGrK9DzLgl9kTR0kCoQB41dFctSNZqJ9/dY6UARD214eT9Dm9pyzWvZMLmFGX\nYwFBWz/jwZ0DhwJCUWTWY/CWabCXTe0vLztP3Cg2vF9YOINyWEZjOUNcYJ3L\nBVSb\r\n=RlLT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.5533f73d3.0_1631574177910_0.6415995572164301","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/theme","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.08398f880.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e27c890150936d1233ef5a12447ab5a6b5aa60f5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.08398f880.0.tgz","fileCount":42,"integrity":"sha512-amHls8okl4a+TgIc7r2HVponQhAI+SmwTJiGVtRe9v45pJ+UxXrDyU0ZYfRfN/wSzC3VXXW9aB2OyzbztWS89Q==","signatures":[{"sig":"MEUCIAz2Dkl8Cp5+DOZcGsnXHyaui9nYvsOZRdQ53h3FhVPpAiEA+vEuaN94DYvMyo0EUJBLKL2RpxEnXW9I0I3cb5hA4Gs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9/TCRA9TVsSAnZWagAAQKkQAKHsQrFpZnpH9F60CeuR\nS4okLEr89tQ4r1kMySwLshET4scWsffXg24zC4CoPT341/CiMUSqCyRWrTDl\noHI7YRHYHDmT5YmFV/dRpYUx77wy6ilYMZeYQvJ6lqUFlEh2x49TVnS1gs0H\n0YRgSHQCD+byEoSjREEWkRnhngD2QK08PZDyNlJ3/FLN/GMs8JefmUor6k1V\nTercp9zBZP3+DL5et55IuQCoEdS5e2xt1ckUTg+XVerOREoVfl8yXFHMPIb1\njvGmGea7wBk75OB8XdIiplCsc9CCoRpDOzRvWgT926ZEblILZROv3m5+b3p+\n9WzJl+7YPPZiNcUHQfg6SV/lm/6tUViZW4Mpu5L+Ow8VeLnl1ztXgwbIGvGh\nVNdembP0CVeWnH3tnivH94VzrW+9N18kOUVLUVZx9zv1rPWZJttEgisjRKWS\n5F7A2xuDeurrnpcTgGwqyrMQhxxpEBmGAKaU8zyBPxKNtbr7S34Q+nyBeUfT\nwrInqSjKNxCDcIjlFYSXBtSQczCByutfV+lllh/zLnvgMe0sFtrtGSKwPxFU\nXQPZNfkdjoSQpLCp7f0h/ilyaD3AMJyRUIQAnTcvgs9iMEZ3hgOJOz0lmKZ9\n/knioPBDqG+vrxTCVO9a4omoRromFz+/o3MRgdWGAS+rhEee95SCH7niQClt\ngQTN\r\n=9Zrj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.08398f880.0_1631576019092_0.42364765039497554","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/theme","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16f90e94896005cabb400af8d3e303660a031ba5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.818f4ee93.0.tgz","fileCount":42,"integrity":"sha512-MGVb5CVmlInoYDiKzDVK9lqHEf2rgvsh6TdEMTimiHYDt26mQvCBnlkcwOgDkO5ldQoeHyE+PLshriO1ZdfNvg==","signatures":[{"sig":"MEUCIQCCDQdXCbRYj3yhHVndVP33XLR7KvoNc1/T7W1hGguGZwIgRBtMc5OFOBdUuaPITxIGUtjGoXkXFWXJHBYj3n+CFMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjIvCRA9TVsSAnZWagAAFAIP+gPbX2hBd59dPmGw7++V\nj2LCAMUpWV1aB7gyFZOqX88Zy8rignhAVIN+SdI/Jex/1oGZzaLqFf15rvQ9\nf7kmv2zdBNx02tcvAtNUAnG7opLcygJr/oZvpzX3/zwS2E5DXgpbmkjqm0Rq\neN1bs5Q0ZnA4Hj22eqMCsktYF4WAVTcY7s3Ft/7DMzaBf+g+cmsBfgwLJgGd\nGuTBt5/9lqemah7/nkvfMYMSM2qeDOYq+iDorv+Gj/wrl5sMupZ6qTj48lj0\npuy2C0P4UhPZghSgV0jbXtsEMrGmBwAiHaGXDovw4n/ziZAEkDJrl28ZuhWu\nBpNDi8moHbkzZznXMVqEReJ1r+hgJc44iL+DY4KSmCJmTPJWqDUdZJEh2J6o\nc8XoPxOHVR1J1kyzDqNTri6CGp2QUqGmcPqg4Aw8bJjH7BSCjfgLusDGsmP+\nRMdJI5fljjOYx0z35GCGSleFmkkoZ7wtVwtVSQpEe5yXhW6cgY9HfQkaidxx\nsOelCrDrZlg6VUwAYS+DzD73cUXSlbAHqHl0ZbpOAZD4tnDBsPx8Nr8gtAm1\n8fOqg2q0OHigyKlVyY1UTmKLrNkICIDyVhp+p/wOuFgIf6Fe/K6Y1P4h/Fo8\nEl7xHVOvTw3ZHWg9SqlK34Mdlza8kJ76IkRxOJkEEFmANjLDfV9z3MiaQR1H\nXNBd\r\n=9MmM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.818f4ee93.0_1631728175001_0.7276146191405231","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/theme","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58b3a541053ddb238481faf43baa4c2b56e849e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.8355e14dc.0.tgz","fileCount":42,"integrity":"sha512-LcGSi3pkJNCr0i5O7JS/wt91qAFQYbbzr0Xc01z9zOg4HF/UthI1bM0NsOmEL4URqajbvZ9q9+Ztked8JDuZFg==","signatures":[{"sig":"MEUCIBlghF6JdXPRl6OUWyJRSx7XJQN/v2cTryZGDNNp7wdVAiEAmA+LB9U2fvI7Mu4Sd4Y/TewMz0cqwgsI4cbNwj4DYpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkVkCRA9TVsSAnZWagAANkkP/0MRHnYL9qsO3kwYjKsS\nvUkR3Funkr7em1NUzYlxmx+8LPUzvgcuU/mHvkCtkrHkGEbNYPdBgkYcJTez\n/UKOT9DPao9qpPrJUfkjfBRNY7L3Vaz0/Iulgi3EDDIAm5WrO/blgZQsGSFi\ndTan/SSUcPBS2dJBe+WoS2Kv82PtvqWZmrhnRb466BxKjqGO/sne1cf0Lkzk\nDHhI4T0goZssyhv4KH5aYA6fdxeaWoXyOO9s5Nul1aKOlo6uX8FDU+115RhI\nqzVq7PJSBm8KtgyK2HWJsZMowsSbVkjKnRnKhSA+CXBOmcKMcK1ysTP+O1xf\n83BgFTFF8Jh0n0MGsR2NT9EciqiGt05M9Co26/F5uFyoLYq294rJsxX0kntX\nPfl+tnBxDTYGuYk+sz+IblLftEXJayDt1fJ6pyubb5s3/hTJrAHlQA3ohftx\nBrAxRwEyE7dp+QNTRE74O/JRjDWyL7jLaVNwHWvm25+VTXiQ9Hd/U0vA6ORt\nDQb0dPd176TOhwtwe09ta69BG9+zBsCfIQjz8tIDrQRWYomnd/cRLmsfvAqE\no1IPO8i+vsZucKvmqceL4tkT3h4rHR5n9IE62K1eK8J+CiysoaflyyJG0w1N\n3OVK3/Du6jwDGaarO85x9xN89IcyBUv0+hzoz0fQw++0pERN6bNFXrjbeZ42\nNbXE\r\n=Cqjq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.8355e14dc.0_1631733092788_0.8648237838183483","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/theme","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36e6dcf8656bbebda4f98084d6911df528d62c11","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":42,"integrity":"sha512-2SYdo6iBT0Z3kF/JtJFo35UlUvHFf6Kg8hQBRr5810cKCYKR0DYBDPJe8JhFOiuouURSKRIHor3RUKAbdXXnSw==","signatures":[{"sig":"MEYCIQC5ZxQQuAQT7mZIpo1uitvFslJ08CzcBigOv30oKGHLiQIhANJAKJbLSPUtTovYRmoLCAaQdWxHwV0pH/gojivlhypa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmx8CRA9TVsSAnZWagAANtIQAJsFUahxLxEg1AX2Kixc\n+/7gQ1X38VP71DnclvxqPHFjb4xeSKhHUqq2E/7ltMsgEnnu2H5zzm8bvGdk\nVBuq5Kr9gVqAzT88IkBQui6ZKWVxKwV3bHfqDLvQvCeLc0CPPwED759zJoXI\nXgtT7rAsWqqksThL1Nx/XwJ5GvLvWJZzHLhTK1hgCYtcAI+y1UJlNMxOGee9\ns4rbom31PYZ5/pEBzoa1n5CcTlZ6yj0lUJAmJWLwQ/uxeg1gGHWvJh9QZe9F\neJ1B3e+Une2TpOMX4oBbyODq0DHA+4GbHOzZ4iXNo5338Qro/1gw8Z9pCeHM\nUEstanTXkG1oP0q3iEGV7VwyKXWS31KzRWgQWA9QYuOOTBObSKKIc37flQ50\nFu/TJbxKhofDm/WgP5oCRM5kK+X5tGjVMRSHobyvN9xmk/HUtNOiPhCqYerW\nQTiKPfmuakIeWQxlaa3IUhsU8xbDW4oRRDtzCDcNlT6KpTNzZ3+23nwxaFGV\nTYBIQr4z0Xwza42LreLgpEloyf8I0yJffr9Ff0LClKCJkLlBJ7VDTL1s9HKi\nhiwL6snKIA401B0VdHUVxLdbBSaElK/C/EhdstvefTMVw6GPeD88AI2rkMUj\nwGiXRq5HCuCB/se9dty9TJiTCCuI1kFdm72nVun9K01rv2btlo/QZrCyJvWR\n9kAA\r\n=RqW5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.d4e16a6c4.0_1631743100492_0.06123260208314685","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/theme","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0124bf87b8650f4fd386d0a1b2f8da25f563e24a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.65125b3a6.0.tgz","fileCount":42,"integrity":"sha512-zCnewyS+owjcEx9r+tk8z2M1+yajouUXzisvqOoffg4cZpviFaeaoIwq9TblJ4Ob8UGt8mjNvXniL7Ik0z6bYQ==","signatures":[{"sig":"MEUCIF889nWGDkNoOcgYPYOXSxlXiYg0IzvImrBuGEs3mBPxAiEA987j5pNomRUBfYY6RqaFwZbAUSXaj9gmlUS4Wu2PlGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7Q2CRA9TVsSAnZWagAA+oQP/jShgOHgb9cD/B2CNog+\nJ/UOVZAI2xCtzNmZGb5vJuJNjBKJtDzIW0QUHl3IVPEPbVD+zItV8b96ooX9\nwAFSB5xcTVjX1TQUcbjYftFLzs4y4RZvvM/bH0hf3ZnhoRu6SJagKv7XEdlm\n+rR4Stsc1GPCy0LkaigQU/BXoucIhW8WWe30yDdX0VuwF4tDvH0ZOMiyc3od\nFIJbqcIsqMS1TibP/AIogxR9NTcPjNI30uhmhgYqW4qdVq0S9OLs1nNU9rNX\ny8APGyTYrsE6X2WxecdmaQ0KChBacx9KUa3slWzNRAuzORatIYwXcwMdn9jM\n6UboZffDfipoy7jQy8/HSxkrufDhZGzUQe+d1yCqdiWbwZWWF3AQ+4sN2x+l\nnwJoUFDEMP5dvR6nyF90raRZovcslUtPwsNqrubZd4iOSM/S2SsBdaHPw4uQ\niPIH0XO36g7vWf0yDDnWD+eCGI9SiC7tI9p2UjWkuPIb4yehjmVHqpba9vo3\nMzsrl8T7Ardi3wE4PIFuyiQ7RRiQDzO0OQJrCLRq97BDn8zRglsBnu2LDjQc\n+WUmO7LsW9WlPBmuLdOHLRkBmBOZD1RJRBofoY5bXrgo8/8wSnLvONsdCVG0\nqLHNsT6ur69myaOdPYzk80gEOsh6IbejHv6Hyo0hZ9E2H/WKekPuin3Z6kLx\n5Y+5\r\n=40HD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.65125b3a6.0_1631826998351_0.9478927221889712","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/theme","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.80a583365.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b144abd09147aa4fbae9e832bcbcf175d8096d19","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.80a583365.0.tgz","fileCount":42,"integrity":"sha512-DGuVy6X368xb2AgElI4XqgOpH+ZtRadXslmrci/B770byXRWbhsox4crMtFvb94YT1eUBym6xTSiKGYGklOLlw==","signatures":[{"sig":"MEUCIQD9TxtEmyngoLN6FjZIzvovlmzjxkSVM3lbCKTCEyJKlQIgXmn1qxe1CUkDAdCBXc4CGRo/LwjF0Qy3e1bEWY14bXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234057},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.80a583365.0_1631910906780_0.1294757189657738","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/theme","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.83900936a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4afc9becf97cd76c9b254b046ab660fe0efc2450","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.83900936a.0.tgz","fileCount":42,"integrity":"sha512-Oa0bCOYAzybH+6GnQBiuQ6S3uUTsO17jvLJ33IicpAEGBNCRwkm21hIzgGYYFoxrMqDug1CtVWZ5LVTwu3dQjQ==","signatures":[{"sig":"MEUCIQC7Bt83lKtV/dKoy9u/sALTD50mWdo83NlEEfW4EXTuNwIgbJGNgW1F4Bd436uFjyiuD2Zkkou6Uy/EJAOCLlAZjkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234812},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.83900936a.0_1631921020991_0.6001683517935232","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/theme","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f22e9c3df79f53cf166c36c558c33de4cafad3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.860ad06a1.0.tgz","fileCount":42,"integrity":"sha512-uVQYeOvgb1hTxTbRyqZ6DP99Kt9+1Bpgr1Yt0pckJTJtVQu40HqZsEWZ+TDo7NiPDebWkcJ1agg4qi57x+lAeQ==","signatures":[{"sig":"MEUCIHvJ308jb4N2yectQXwVsI4Y8O1cidWJnmsbXeNe2hW6AiEAg/i2vUcAi/aIY6LL6kYdCfu7p/L+eWA83FKLf7dIEAs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234812},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.860ad06a1.0_1631921719281_0.21682726769015526","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/theme","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1493576f8327fa3b69fce734f5208e9a0b988e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.3b8d4429e.0.tgz","fileCount":42,"integrity":"sha512-glQN0/Fd4M7VvVu5wkFKj7scPsIrSBrLYA8y/h45MvK6wYph9aR0EaXBos/rCaoaoa4xMunX3NN/HgC/nY5ZoA==","signatures":[{"sig":"MEYCIQCefpvQ30VQAIEKg9YcI+4Of16V9JaUjrs2Pjk0CHeI9AIhAMLUEYgRRge+fRSstNY5JJf28ZLBu5BJEjvY7L23BlcB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234812},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.3b8d4429e.0_1632160012123_0.9123382963460123","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/theme","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c7825bab5828e25ed54fed408123de3208c9717","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.2da3606b9.0.tgz","fileCount":42,"integrity":"sha512-hdN2KxET95gHCb0inNJDTNQjxCIXjUarQg5+Oa1B+XOXXVXJg63cH1Wh3Ol1RLizP7n/SwqRf/FMAxfDivKnig==","signatures":[{"sig":"MEUCIQCykq4kzJoPkLYJxaEDzc+Jk93F+iQQ6AD0ZkwrXuR2xwIgWQ+yVPk+d0LmeKUHSwnoxrLeTWskNui5NuU3rheyce8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234812},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.2da3606b9.0_1632166624403_0.0314128599542256","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/theme","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55ffe22d6a504f164be20e9a2d2d29f428ff50e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.e8c598d1e.0.tgz","fileCount":42,"integrity":"sha512-eZxXHzQNZBIcl3s+fYu7eYmpCSBKn9JcmvxMCgxVK60hc/rk5fb+0Y6j+n9m4qLckvAVKMyJ4dgw9POIaoD80A==","signatures":[{"sig":"MEUCIC2I84QcskWGsVSHOG2Mj4JhRBsDq/Z5X2HlIRdLznpeAiEAqr71YbvZZ9wMsc4/NefQ0B4L9ZTJTXOJQDLHnxJQ3UU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234812},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.e8c598d1e.0_1632172273379_0.2733080596929953","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/theme","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"555a8577c9a0286ad14fb4d8319edd67ddad54fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.1340ee9f7.0.tgz","fileCount":42,"integrity":"sha512-I9t4Bj95ji64lR7z3BIeohIrQ5jhCOCQ939ByzlAK3zj73+GQAJoWGCGx9Aa2IWJMdxXFcSPf2PvCMt36gQpUQ==","signatures":[{"sig":"MEUCIQD8Snv5CT4ZPzx1igDT+d61/DAopOabL++IBj6I9Q6HuQIgJNmP8iqxaBvx8rxN/u+hhbpcmwAjdXWPePN+CT30pZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234812},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.1340ee9f7.0_1632333434565_0.7166673727293589","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/theme","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.65084baff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0de242d69d0aa9c4741887023c7b0c94fa5d911a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.65084baff.0.tgz","fileCount":42,"integrity":"sha512-Bv3N19fAmQgIm0CSH7IqvErCgp/axcI0+dHhEPhfLEOrFkhrkcQw/TSg2Pbr8E7MKJyhNQpT79F8/lLt5By20g==","signatures":[{"sig":"MEUCIB+PmAYPXpE4w2LzvZy0iJKZOf1YtvXMQWsoeuJX/Yr9AiEA9SMMGGD04nvYFAqh0aW5v78oXHxrRXj3o0mDE17pZ6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234812},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.65084baff.0_1632432285389_0.48004959453447826","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/theme","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d33ce0665b2cba8c04cf1c0e6c49913a557364e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":42,"integrity":"sha512-yEOChv7L0A7gyOz4AkWDF3eusBFpcQR2ERCoucWFvRRr2+4oKtjvY5eNEiDINZoyYSPcZ5qyVR5CfQ2g19z6oQ==","signatures":[{"sig":"MEYCIQDR7roJPNZPhnEEOrRtWq2ifkgog/kGztJwUClRsjlUcQIhANa9ZI/0wMqsu5dAxXpWE9131BE1Q0L3wf+v4SspFxmw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234812},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0-canary.c79aa0cdd.0_1632490861547_0.7295157233449845","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/theme","version":"13.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@13.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dad25ca7c3427d5d35f074343c7f7957cbc1eb8c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-13.0.0.tgz","fileCount":41,"integrity":"sha512-KAe1s0MvvfCGAwJliDVTvgAKuD3ESwhl7F7br4Iam4IPdqME2rWl8NPhKHFfaWqTG7PyCgMMngYEYuA8cLNTsA==","signatures":[{"sig":"MEQCIC6eFgF3w35upk9dffuGE1a0NkloGVkXQc3HGv+lx4JhAiBv/vvsPhkt/yMWpumsZbzNTEcYB4hclQjmSCKSwiWTgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233244},"gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"^13.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_13.0.0_1632512711519_0.37286301611786365","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/theme","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.198431fcd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63973d4fce188bf524eda28deb4ae1dc79842958","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.198431fcd.0.tgz","fileCount":42,"integrity":"sha512-pxLG100Sx2eFnsVyg1UoVlKiwo5YbUh1ddOEmIuBxUXX92dOvNh339mQvLT5l5/T9M+jMXu+lgXxXDapx9gJBQ==","signatures":[{"sig":"MEYCIQDXCHuc5zDHTi4uuVgHwL6mQcFrzwUz5bhJN2SmGv4aGwIhAJPtc8XQEbjEOc8AvGdUQB7Nhrf0cKBR/ojZ3drccRua","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234812},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.198431fcd.0_1632512756273_0.9736133959672633","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/theme","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a145ac88c44ef10ec9a49bc695d6717830ab6c6f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":42,"integrity":"sha512-D0E4MK9hKA1TFbxHifNilZGgHHiSIEgREqwCCNjEW9PBB/DnXvpPpGl97YXxbdiINKWr5BZD913/bUgkhB9LJQ==","signatures":[{"sig":"MEUCIAWeSonFv6Ub7tylCS+imKebTQ0fGEmI/FBGGhoRLbqqAiEAqNLurF9pIVj1JySfwo9ff3hE6HgZySRjuj31TbWexQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233657},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.9a02b6ef8.0_1632575422859_0.7662055778037209","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/theme","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d00dd89dd0307a36b6fbaafbde74cc5471045d8b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.758ce31d9.0.tgz","fileCount":42,"integrity":"sha512-cd6C4cQEebb6laNmThP6Uows8bMMxGVJCCA6x1Dqvj/wAAE2LKRVO/h5XLPtgjohAU+3p9otZCnhIVA3ZqLLTg==","signatures":[{"sig":"MEYCIQCtJ+87cjCv9ykfkk0prZ+n5dGq1xzIV4YuXIdIe0r6ZAIhAMdmxPARi7WunFSVYKHtNPyHqa59umoOq7eRMdvsqMMM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233657},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.758ce31d9.0_1632763716405_0.9377395650592841","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/theme","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e62d968eff6fb526687cf68b7a468e60fb04b48f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.86b50ef74.0.tgz","fileCount":42,"integrity":"sha512-Znrw0/0J9uaRTMTK0Eun+gPld7D3w8grhRDRM71WdCdO1Zbjx4CMkbk8XjcCV2SAwJTh4AKIw8UGwX/qD+07+w==","signatures":[{"sig":"MEUCIQDayVFq29SldQaG0xBijZI6C+DUEJ0ZCOMT150QiI44CgIgZmupPXOqajeHkgiJLg6xTEW1g+cwvF3227aWrYeGczo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233657},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.86b50ef74.0_1632850938825_0.40415088722250103","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/theme","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1563a04bb1e3d89ed5f449fac30009d27a11a29","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.b2fe3528b.0.tgz","fileCount":42,"integrity":"sha512-DAsKJIxTJznGgSyIjFVvEquClQUKPXliDLkj8EOWijIMSXRenZCSf4NqJGhsgL475VCjL+qCmCzcVF87mQix7g==","signatures":[{"sig":"MEQCIHRjD+B37x8K1gY3GUDVAr9WWWREqwLwZp9zJJ/3DmChAiBZyTJ6qliYJ9LT99sgg4yL7XMcPDt2HvUGjG42LkuIgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.b2fe3528b.0_1632956172685_0.9968537568282001","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/theme","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.586e740dd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd5246528b47ef916cf33dbc53e3f932e492b7bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.586e740dd.0.tgz","fileCount":42,"integrity":"sha512-o20s/7bI1G871leC+8/8kwA4JxcemY8IEsSpXNCUUAvmFQf5Vl/OQoUEjtZpbAFX2InmRvP8GOvRbzo3k2El3A==","signatures":[{"sig":"MEUCIQDg2cdUkveKDbTKYBhMVQ57q1EBms5FUoyontQR5BbdkQIgYhb0+s3fc6zLgjNC6Xn6Cahk8ExEk4JesrB95zvk2/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.586e740dd.0_1633019435146_0.09455622920516582","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/theme","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb3db0983d85540336ae7ab5b707cb02867e73bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.2ac92d766.0.tgz","fileCount":42,"integrity":"sha512-Ct5mFrn3zo1JhzOsr0DuEjfLGgLFvNs03AC4NswHXDENEgdBZA8s4WfGtkFIsn758dasnIc8SaPjZg7yoBJKPQ==","signatures":[{"sig":"MEUCIQDvBZRZNP4yF9aKFdhxcikMZ6rxJufOG7o2j37zn6Rm2gIgZf9sP9jxI9v9ssZC4h+fLTBDmHbvxvJykxqdMPGznMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.2ac92d766.0_1633462069780_0.5495143113848546","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/theme","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da8073da05ebc4629dcb6feac4e60a86e46de20f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.353ca7e9f.0.tgz","fileCount":42,"integrity":"sha512-1gWWB6ZuKoNDwWpeCbxu2UYWRAhuRW25KWPw4tZIOw2jwN6gqptgyyweC18vLhT/YuSvq15bReiAeo7WyOfg6A==","signatures":[{"sig":"MEUCIBkA9Z9AaczesMWALXTMyhYdi34iY2vXq6FkmPAdivIRAiEArT7pKsANw1IC7WeF6z7/0qpDjdlLtbnTrcXyVa5V4gs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.353ca7e9f.0_1633718775428_0.9102250929132807","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/theme","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb0b6147f39aefb530c14e80054a68b9f0f6faef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.c78ff0429.0.tgz","fileCount":42,"integrity":"sha512-/OgDoLvlsrBVHePIr0jM8Th8g2dAaqwe4zgiqM4Dvs8YQOcIt7przqOYquIeHSUkX9eBVdXKLnKJBAEiwEFZUg==","signatures":[{"sig":"MEQCIBml22STTwrntqSkym6u4YxJE1hEn3R3zBbGR9kf8kdmAiBjNWjRkGZdZr2AWpel7y0o058qffvyD0U3kWBHDmr3oQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.c78ff0429.0_1633972883284_0.6039977037556692","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/theme","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.261f2db59.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acc25e9841a0072a7ce8f59588eaa2c9849bdb1f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.261f2db59.0.tgz","fileCount":42,"integrity":"sha512-bUqyFT0QF8Nxx02fekt3CXIfC9DEPOPdo2hjgdtvhrNP+vftbkI2tKZ5/uRUnVA+zqQAOyIl5z6FOMg4fyemCA==","signatures":[{"sig":"MEUCIQDq3I9PTuGjZBKoYWw4KazN1CxKr7oSF66+OBBlpeotwgIgdTWRbirF2y4unCvxUXFUHNhqHFA0QtfkjzWs50s3VJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.261f2db59.0_1634749138567_0.8631557468531246","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/theme","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7eac4f564dc435f542ac1be05f5f5d2ce4d0190a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.9803d2dc1.0.tgz","fileCount":42,"integrity":"sha512-WGKybFLJBgec6jaOm7HmdnXPtcc6nBKeDan7jp3iryyWdK0Dwne3woLX7NqmB0ReHZ89dg3iAdv2bmzpGnLaaA==","signatures":[{"sig":"MEUCIBMXzw9Rpjtsqt4xBBCG86M9y1WeROv2+yYlpVwNCoT1AiEAlndhQ9FPcwNHPlUmCL/h+DqqVy8Hg4367m9RxyNKUxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.9803d2dc1.0_1634757672503_0.7070559630694289","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/theme","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.348665978.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b125c5f7b50482d9f3c19852829bf71563d80d3a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.348665978.0.tgz","fileCount":42,"integrity":"sha512-nZi7mqNaoimXD12L0o6XbITP9d3iMG3ialt8SphQKMktYLGTBP+JGWY8nw7OUkTnoOlW+NIVa7KjKVOGRzfF1g==","signatures":[{"sig":"MEYCIQD4IHTApH/urxKaFjqGpm9dWFHC9FFjcqxgiP4mHjUt8wIhAPjB/919oB6WmjRmrqjkvUlNAl1GaP3IFO/L01rZ+dCQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.348665978.0_1634827796876_0.6530255825616442","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/theme","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aaf7bbc65200156a49d93168ff846e16780504e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.b2b979a8a.0.tgz","fileCount":42,"integrity":"sha512-8bVS6J9E5noZRI4p1/oWs5+ukpw4WJaZ198fg/6BmKunLIrQS4JWnGB+xd0mL7T4rRxODmiojC5AhghE7uHYog==","signatures":[{"sig":"MEYCIQDf6G+xmEZiZs++5RggaRIHW4qt/MBd1cra8P2IlfmjUAIhAJG5bBZlC+i2wuEJ3Vm2qFKju7U1/JyIsmoJR5seIQ+k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.b2b979a8a.0_1635433890048_0.08848556461652146","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/theme","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ad1f1883674de258815c8729d8ffa7f2bfd2cca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":42,"integrity":"sha512-9VW1D9zTKZt/FdWuASnwEZZMD1m5y79bscB5UmH4BfOATlAz4IpYKsJQot71PsYW9uBA3FXrW5JOXIYTdC5uxQ==","signatures":[{"sig":"MEUCIQDSPITAg0udrwFsF8I265VxABewiRcTZOFdSPbZrZ7ydQIgViQcKP9iDqw0IsVuicCQnMdEkDU0HYaZ1EJovHe1l00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.1af7c1c4a.0_1635443527174_0.48415840827778966","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/theme","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e2d5e87cf96bc19ebde161808ed2617b13dc4e3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.4afd353cd.0.tgz","fileCount":42,"integrity":"sha512-Q+hQQxtCn2buAW2gGUBCdVlP2s1JbeQDwOdGzXC7qvxWgQJI0U/Nkwr3Y1XjkaS3JgISxVdip3GkoYG/ydhLvg==","signatures":[{"sig":"MEQCIDJpTK98DF2eA+i95xS4c2hySUee+2ayWCGgDaprkvHWAiAkmjLX/bTluQ4bafrD0D7qlQZR3okPk6/3uk1rPOu5hQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.4afd353cd.0_1635519655111_0.9145003261664935","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/theme","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.a986df922.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35301e70973fc6e85fa9942ea681a552680f7388","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.a986df922.0.tgz","fileCount":42,"integrity":"sha512-3zY/UDzBaD5eiqz5kqV13kDBwPnAwYFKjb2GRp/gvkj/Srio/K1vHGJu1ECnipQwNHDkLoGnYZto3B9dSnKANQ==","signatures":[{"sig":"MEUCIH+ACoj3+5Aq3y2c17h2BI7+Rstdq+fAUv4vz3T8uJEHAiEA0SftvTwmzWfq/0APYqSykZT+MdmW1Cql9KQZOP8cZJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.a986df922.0_1635543264081_0.24975615811694896","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/theme","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36ae6f94382db62242fe75e3dce8df9cb1ab1698","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.c3cdff07b.0.tgz","fileCount":42,"integrity":"sha512-sgO2n+Wnr62WyEel8CFV3feo+4P4UGp+hl4y9S/URvHuQCx3gFl8c9QmlEbXeywXOhrsNsvM5KiXOj/tcofxww==","signatures":[{"sig":"MEYCIQCbla7DNU1167tGJsZhrmPB20TLNlLY2xqPvOzSuwfqiAIhAM3nKRuI8g9BBdxqfCPXYIXqvfw8VKKY/SjZBu6iqilK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.c3cdff07b.0_1636484715535_0.9287373629713793","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/theme","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.468392606.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"252c00850de7046d3d1b517fe67637706170ac5d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.468392606.0.tgz","fileCount":42,"integrity":"sha512-C3TwmH8DD6RsfeoiRVbPhBDAOYUDOowfADmfk5zEvHQGaaA8JrpY11NVsWEoPZpteU7LPg6zcDwgHBJQb3ddvA==","signatures":[{"sig":"MEYCIQCKarwoF7XJXo4ot77zH5OK7cBOfnOiI8icRM0lnnhu/wIhAKF+jZI7CkPb533Ea3gkrVwiB9dW2cKfGp959koa+F7S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.468392606.0_1636659568106_0.5692459762425193","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/theme","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.828f9803b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7f8c419dcba80ef4df29600e3adefb575ad8627","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.828f9803b.0.tgz","fileCount":42,"integrity":"sha512-AOYD7rWx5XTCsd+btRKzfCUFoF7cqiBJloojTQLVAYghCYUInrWXvYMu7l2vBY3N4ThzmGzKG6PuWCOykXKQig==","signatures":[{"sig":"MEYCIQCj3wNPGSourAi260Pm04y6wUnuyOcVToB23kvpqbFVlwIhAJIKKNL6W2TPLqew5uQlYnDJvVj+Yq3En04jHeyr/eQk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.828f9803b.0_1636660212100_0.7697884622863493","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/theme","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.8795cba87.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4a128002cfee36835ea5dbc696266c5ece8944a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.8795cba87.0.tgz","fileCount":42,"integrity":"sha512-X/L7SoRA13Sur1mTcq4tDMNhhKUt389hcOyId5QuqcaxItjXutb2lmmAfuGZ50/3KKw0DXsHYzfEiWNrjJe7Mw==","signatures":[{"sig":"MEUCICvIuVDIxC4OW8NqkCQn6pylYlaqH3+ivGUFNKkv9rluAiEAiuT4dEwfHhw8E3Yb3eFVdci/ebMKUXiaZB1Wc0DKtlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.8795cba87.0_1636660568358_0.9513995686410945","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/theme","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c05b9e24f6fd43dee9e5747cad1e726c0e1871ad","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.cd7f8cace.0.tgz","fileCount":42,"integrity":"sha512-wjhoyfVJ83AIolI16aboxNCApUidUofqX3wShrcOswdMphO1GZdtvb4E2UFvPcfV3munC7uoIvmyQzitenc1Ng==","signatures":[{"sig":"MEUCIDek/9crL8xbIXvOaoQKvsp5Gl6tIvzWdVsM2AR7+K8zAiEAkbhOaVyhRG4fQDaL6aKP8HFf1Ui91pMqn7eTPHvDIUU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.cd7f8cace.0_1636660667258_0.5427668962632008","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/theme","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.207230eb8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44d6604fe2980116f85ff2c4adbd8a134fffc7e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.207230eb8.0.tgz","fileCount":42,"integrity":"sha512-p03ziWceh37xkjXc5knso5QXdfdW4v7X1t/fE6cIlO/mmH//FzbxPG93hZJrzCtOglHzuAZ0lYrG11OxEIs9cw==","signatures":[{"sig":"MEYCIQCYm1jVsgqGy6ODtxYtm756Gyljc+wX7T5jCP4nUQDLZgIhANWgdUoVKKktc7KbUUDYOjSyZxomTv5AnNYkBKt1AlLL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.207230eb8.0_1636669421564_0.7147832351422623","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/theme","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b604e0985650523d89a9da6d8200609a8eec7840","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.991fb99f7.0.tgz","fileCount":42,"integrity":"sha512-3AEzqJSGZzV5HcuCACWpiTG0siRtTZcn9AK7CdQU5fXHS+1dTBNyW+MjLMSbjtYlK8iHE3UwqfYsArNb6UmqwQ==","signatures":[{"sig":"MEUCIQCQPE01vm+D8acIsDQ3ERxwehoWD3DulRGpBYNfFZIX1wIgXdrw5SaogIE4ihyOPmhsDaNGAqHWjcgC4eOvf3X7tt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.991fb99f7.0_1636670147209_0.8840597037068028","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/theme","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.15db4f164.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"605370d2abd115ee03a822527a52c366a6fed40d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.15db4f164.0.tgz","fileCount":42,"integrity":"sha512-2sOOmCbmFwPKiX9qBYLZLuKjdpL3++O3ZLMoinkLuEAmbOC8mUSDa708IzsJiPw+Y6fdLTaGXT/HEF+ltCw5gQ==","signatures":[{"sig":"MEQCIFIdYfJvTWgYb58cB1Tn2k6ip9ygc3geLxzy0rvgJo6NAiBt/hZu1PPf6tDA+iXzAbSPuDHHywKJ3bW5Fw1fUc2eSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.15db4f164.0_1636738149924_0.4472351913317818","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/theme","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dc87aebeff3ad3398d37fd386f110b59531d6a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":42,"integrity":"sha512-AT8J5mTVS7EdyX5qKLTgnKSWWrU/xThjZWRJoWDnWN2Pu65uy5zBQG6BFrheYOq75SZDA8j/KUFy2KV7Re4WwA==","signatures":[{"sig":"MEQCIAuyBcLqhAhHAf5p9Rzt7cuBU0Cpeg9P6n8EKop4q+83AiAaa3Zu4peLB04YigKxEz6e7OvF44LIz9yLM8/HHVFaEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.8fcad5a3c.0_1636744390424_0.43884554320660074","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/theme","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"038bf747d03453a5b604ee32dca0fe394eb9eafa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.f81fb1d23.0.tgz","fileCount":42,"integrity":"sha512-2HvuDXQVzgTliCQ/8hyvEiMyXOCn95bBnR3D4yPBigi4xsQtWS8pE90P+wYQWSBoIsbpEL/XM9yVJPBnjIoqBw==","signatures":[{"sig":"MEUCIQCttoh0QEafUaBVHQ7EqoF6fJ4gwqJ/Xq/XVmSaGAM5UQIgSxzXipdcpzyCDNI0WLiHbWKKt2gGnIjv1vZ+TJUX36o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.f81fb1d23.0_1636756776744_0.49873929007791173","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/theme","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"974c119bcd474100aaaa0b2c5e5244b0b0a23555","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.783f6fd5a.0.tgz","fileCount":42,"integrity":"sha512-0lS9yhaVm7xHqbaA6U3I3PNawqRChaBhmDUTVP+YwCSnXPgsVWJhdl+/JpskUgp7FwC9IQPwX1Y00y/UmzzC2Q==","signatures":[{"sig":"MEQCIHQopEqLvsNVUP9J2GMr+yW4Itg6Istpol1gFCHlQ1UAAiAYQWn1j6P+lRDvNRPaHPPf7okDcoQqvqa685Lmth1aIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0ZVCRA9TVsSAnZWagAA27QP/33CjYki1x3MoTY/S/pk\nkQ2uH2C7c7P6cour3UTZVt6eaKrK4H7sZBxZUSHxDgvRkCh3Yiir2nPUaxpi\npsKm8yBmEJMr47ZIJmCTdNfopyg41RB0g1oQigXBNRhuMB4sBuygAgYlorIy\nk7Jn0H4F82xSNx5KLciaevu5eWX6yJY1Y4AOhYiR/jMtLnOIZZ4A8vALGOgb\ngLBrqeSuwBnzGytjVlWkIDlditPdhEdHL3LvkrTDzBp5FUWlwz+CJ+lLE40K\nsRORqtg9ZYeIwHlpLncKELXZzXlQjW8S8zO8kexkCYlQOccJisRTcG7FgZwd\nnImf7q6pwwdZhAkzvlW0e78h4QXLCBZ0wDbebCnpNdW1xKZ+IDW6Rh1rURTf\njEHaiCOM9UZoZPXc9ASW2YeKv7LHbc8gUh7iCTNgM4plqMBEx0vh3ZNWJ8k/\nuQRVBpETOhZ+FHIgzjI8h/DoYsOvThA28AKI9Tu7xgEHILi9yOa2U14p/wwo\nyTBDWFT3GYDmoo5etIHQL6Yz/TlxfA3SQ2eMc3m/gM4HuVnR59prJXg731yK\nMiBg+t+A+cOr4WhuRXTHmdYjPWZFcCw+ojfTfDH/Jh73jiJDLJobOuWgVgeL\nMOSev7mRA5qSDQ2j9PCLt64XN6cGan4RSfbW2QUPMO5VHjSpAzXZR31+jbam\ny+fP\r\n=lIQC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.783f6fd5a.0_1637041749689_0.9982774066770685","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/theme","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c488b1a6da5858a94d0ff116aaada6aa6c9bec98","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.d57ec74c7.0.tgz","fileCount":42,"integrity":"sha512-9WiyrJLrh42KZ9u/9ATgGKdkMOJ+XBz2S21Sn5CmHtrJOZB51tRY4L4umQBATyRN8bY5LRJKxIHMhHNfKCsMoA==","signatures":[{"sig":"MEUCIQDZns518PnM2l63CmoCFpTBay4O2NPD/53BozsTNMXIbwIgPMqn4CEhc9qH+EU8BJ9RpwuPuqi7IKAZMNuCeL2XW18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9kjCRA9TVsSAnZWagAA8TwP/2Z69Vk032PjDaoIkUwn\nm+7eWBDdglgJcGcUhOefV34HqlFrre4ySQUnkvpv9UXPJKG9pYptY+LImQyy\njhQ11suP36IsvMbAIFpU8do9m++sbbWgk6tZKLlBHyXOuLm8N1t6ZFimyhC0\n4WsQ4zMGEI/wN9d51Qi4ICzTyStrfORoqfqyVNz4sTymo/8kCijZKLUWnp4o\nWcr8eaMLo1/1fWkYxIWMDqubM7icY3bhrxuUc+KhG4w9Ufn61qlRSW8cNu7I\nNnQk3XsmDKelc5uvdWJMrSFoc1GYy3uZ7uoyKVF1bgi3kkESjYg7BM8thbDp\n+Q63P6sLdIPAzBs/UlAyuo2HK706odSe0ZQupjbdgYqC7CINjXdPkntCNrQs\n3A7JFDez9jMXrECriROCrAc2zKh4KfeitE5zbZCrsrCkqTfB7vQeFkoneFlX\nXpPwENgTIcON497JSQDRo5RGXH2nGn0kZSbjPbvA7b/oLF5XRkwBCsf9N4Ba\nQJ/GLaXxP5oJvDUGkLdAUsFHiji69B0esBDnQv4zJKSCp4pSuW3Hk/Ba0Gni\nV7PeM6Y8xC182QJm7ZwFnb+kJRUHOv6lTqUuKv7RYB8sFb7iAlX46EVI6fRK\nXKtrPVDDqJP3Bc6RqF+hPmi3ODv3IpZ30LYXFuNS/cqVRSy4vdxmVevrQrJ+\nEtSa\r\n=Dnqr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.d57ec74c7.0_1637079330846_0.11932725828250712","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/theme","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.554c71829.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8911b78fe22226e0a9bea02df0ad4dae73a08fb4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.554c71829.0.tgz","fileCount":42,"integrity":"sha512-jjzFc3IEkJ7YXf+kN5BAqqqgrU8R8cHCLhNc99uDDysuDTruxfbMpWtoO4KnlsUl1CRv1BwAItGrmOkL3DYRqA==","signatures":[{"sig":"MEUCIQCh15nRARq+j2bK9sQ9fOHn5sC4afb9jpRMakp2GfrGIQIgIsoDvyWbaeHDMbp/KTOILcl7M3UzMbYGD+Bf9EviS1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9nQCRA9TVsSAnZWagAAmUUQAI4TyFNo4AFpPrdFcAd1\nfLs+HRqpKmPdNlcfRpiCSjiR8Rbmoy4H8UDPiQYO6iSZMRT9rBPdrpfXhq2z\nhAFmCZVXAyCOy3uix2Cxi3AdJ+uUfyopCWds3xRYIoihRwIT8tnr5Cenmdmc\nVSkMsrI9b6zynNE4avXvx+BLdSV0mOx2hQlq321jzycSyJ3BK+gesaKI/DvX\nYUajMiEtchGlVSLXRYR0SznSH50LW1G9GRseBdi9xmygzWmwCZQFkRXT/RAT\nl2D0jWh1LCqHnMoIBr7kqZwR2TeJZ9kmT7d/lyTKVF5yNXh6rAc1QQ9o90+P\nMDg0lxVq6ZNMLtmJOSUss8CuxBvCgakzqpC6oBrmqNz3EXRekbS9cZ/hvDnw\nWdY31Rzqno76e4InuAQ4bStwJmb7BSWe33P4PZjaxc0NeV6aoK3Me37kFayE\nKlxnHBDuBBe4L7vqFPiInAQL9LFTs3LZXa0Puqkt4nMfFrUJP7x6h0C+ARVU\nMCnmzCc1dhqGKff1tqL95z8DTA8PgHWpB2RH2tjp9edvAV5Uzwz0MbTWiXWy\n6bMnkoek1osnTA1PK55xIhObDrXVYHW9XmMC5VltzTNqk8BUpItzVlXsrc3Q\nkn+L4/FFgPu3DOSliFMHidhBLGgBC98g1G8i/aCZS0rlecAwsVND0cTqdzzC\neMU0\r\n=nSkq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.554c71829.0_1637079504620_0.920607303176165","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/theme","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dc64c1515f1d656f446c889dae54d110b0499d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.3ef470efe.0.tgz","fileCount":42,"integrity":"sha512-4yVU2HMQ+/amF4EkwXZVdTh/mPGyjeNQ7ux5utX8M99bd1K3CvaqoIZtPBRa7+sxXL6X+qHh9X4GK1j5BT32NQ==","signatures":[{"sig":"MEUCIQDZtDlhl5EayTOf+J2gVAH6yN224X+UBwFViLEh3pYSZQIgVwgyrDRUIzchalpovSjnXu4FYkOSOXD6yXh2mFNrSmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9r2CRA9TVsSAnZWagAADeIQAJYkyBYeNC7UF5uKUEKj\npjA/OAjVL7/930LsV/e1X4fSzDPbrRS/U4c9DwKSCewhQhd1uHMJcyblbIZa\njCXOqy0tZo1D2mV09Uiw3gfhSfv8H6vkJ7ZIumksJtZzOrE9Ji+bknMIjW/i\npPmuxHs4y9KlWS6wPAbeMuCGpasfTRHmbMMc+d2F2n7ErjahO4ZRdGAeaAZL\nHctS20SEh7rvnisv9i3W6hAUKHDbTViu5l3KDaFtcQzJMO8PJNe1jfiFITY7\nwNjRRMmmLQNQ5HFu3mRIUFWfDa5Uptn+aCDvAQFaukuJ5oI6uQqhB3sOcrL/\n51H5xjVFTEuqohJyfLfnDKQLrQGrkBEoiH1QqEJk9yXjqHKh9GX+W7/Dj4op\nPJtVUgUThOQj4mqkpk0lXOJl/k3B6oTf73KrtbjBEKThckdGuT4RUTPmc9m8\nbaGrvk6PxXGT4tmBcd9axf5BINoCl2znt8jmms+bx0//Sy8viK0uXZMBZW5T\n6/36uZYNsUo4NFiv6cQl/jjDr6AzD9SSBkULDX33q9F+WDY3YfpaugFtvqe8\n/HMtMRIkeKo9RQBFHx2UVOIxUT3j44EEBUwkboTTUSHVGmFt9Cic1eQdZXyj\n/yFW9N+qyy1fGUV4/O1Gfj90se6y1VDbOQfi8MDZ+iAf1sBpD3WCVlo2m2qU\nNCLk\r\n=1APM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.3ef470efe.0_1637079797945_0.14530408316588872","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/theme","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05b443c7c49201efcd559ebd57d1cb84a7941f34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.61a28b2b5.0.tgz","fileCount":42,"integrity":"sha512-+H1ZIforG7WkxEg/2rP7czFQVN5KpY0MgOaxB8LbzX21ZWkCx4bCwZs2tNG44nNGhc1PS+XE2xP1SUayl/RyJw==","signatures":[{"sig":"MEYCIQDdD6DtkysYhdI1eY3rlofjt9jJxnmzlBpamtuTG4eHMgIhANv2dIyWunLAi+fKCIH1t4WL9nUB3LdG5VPQUQKkfNMN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVDTCRA9TVsSAnZWagAAL+EQAJrmNJtGAHDhB13aFpee\nwGo1yaRxSj7lZfD6FXKB0f2GBbCUwnVKJsDoxOK3YSDCAAadp6S3Nxcmn6r1\nePNqLgVDa3z22i5Eut40UDrFXTRKkrct4nJ66mqV+8oTeV86TxkWVX9w2uor\ncwKAYGh8Y7QNc+/WdRVJLNnwHCd+1om/isJI4Ny5cboGKPuSMXESAjSjB4cU\nkKczuOCmXUXe907VihyQbTX6wpbz/JUH6ywyiNUjKbArfoE+Gfc27YImU9FH\nkJxNBgM1bmgx3Vo2p0ndYv5nsg95Jl7riNxmsZDyOyHhMWmxsR22b8BmWUfl\nmx3utxcviuH8UGLwMsbxKL4G2c7TThlTwBYBk+nPu7OlXI3bfzHl5N+AtvVX\n++Yk5MRBJLRvWXgZrWGtDNQclBj7gMr9gCQ4jB5Y9jYSU9oP/SruBnLkfwAb\nDl6mg0ezXU5EmQJI+34PMQOTEI6wzAhbfvVzoawRishU20P5HGGxHCvd8Gko\nNKk1P4phNaSj03zFLkbXcr9ArM7cKhskKCLsHzY4u9XB3Xfmjc2IhgYDdJub\nimiMJBrDi5ug3IPKQQBYkqmRR20n0DikOq4ZWRZujlz5QrRV6JrZlE5uNdna\nPEU4XUPpXmJQGTZSz1Yal3bxg7kmHv1+koN2ZG5qpShoK+0uJHXBGJqrcuxE\nXaqw\r\n=EAGs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.61a28b2b5.0_1637175506761_0.5230571362113219","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/theme","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3d8f94daed2888a022a47ae3d4b79c6c9756a05","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.fae6c652d.0.tgz","fileCount":42,"integrity":"sha512-AoYRyLiA0MIXogyEf3SxfV9p50Qo1RZgK851tvOTiYOc9pEHpgs8kV/TfBuZJruTYHu/RQJe3XxuT33ct84pBg==","signatures":[{"sig":"MEQCIAJsSq01h0yhgIwV563TlrOuAB77TUWf26yc0LcnOxPDAiBN2dQ5yZScZRmxsQigN0TdbpGJfb6gU1S4yrYmSGIqZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln4qCRA9TVsSAnZWagAA1hoP/3sZahnXV/b5OAGNa6iO\nh9DBsH1OxiMFmNgS11tH5IZAoBPLlEzzc5Lyd0eLAmOGAeIsAyNVf2UgA2ko\nVx35FsgA/hwCowUqRu9nbJPJsS9Ewqg1afqeniJonQGD6gJzL/Zy9V3ZM//b\nr+RliTwZRTW3NsmNUNQAGTvP+QoFcd9wQz2Ak6XuqRBZnQQtYY5rOd/Okmdv\nYdY5yRiSA4Ey0B++uZf8217SSSPrddM6G9KOfgeKA0/FtVQ5F7AusMvtIWD/\n8qwVUXPB8bMmK8Lad0ydremfVKN6hZFFfyzOh8durZqL9Q+/8zJOaa443Yev\nj42XkwuO3QvPLFgtHFgVHdW856/Tc7ZNQw1WUZtuXMF/Am4BILfNlvVU5Hk0\nc08Gxkpk3CDgB02wMm3224R4WIQoZipuA9kyUVk6391Hu51/fDfM4k+Uacy4\njTy/aWYmNLKCk2U6iPBbofqwUXWMirtaab1psLe4TgMnKQd8cvn4vjS9etjV\nZy8uzin2UDgz7HjDmA0E0CpNFMexa5FG83QzVf2qbgbLL5QZui274f9OBYv/\nCBH0L8FgBgm/WA4GfiQSzccK48W/WIO9y5b0R3vCznh2lKvxIQDeCGQfe9Gg\ni248hDXOewkMHb2IDGCtuwJakF3C7j0UKD9uMWeH0EVnwPKiMtwMHJltqSzL\njG+S\r\n=26LW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.fae6c652d.0_1637252650064_0.28524427120416895","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/theme","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b47d2821fac02550b87c9f2d37004c3711711a0d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.978a3b5bb.0.tgz","fileCount":42,"integrity":"sha512-lFZUmFUoJFVl/g/DYhd1oqJThoU6giXmwTTiREO7tdYatJeAl2d2KasICk0tnD9RAzyURmKGCUEyS1prZF0EkQ==","signatures":[{"sig":"MEUCIHMu0fcFagDVzgfs0bI3kcVlyLEyosG2ymGtMDwMUqcIAiEA07cL5VJ0qi2i0iyFVt+xSwsAIYS4W5HPDX+J5glBcR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/0nCRA9TVsSAnZWagAAWtsP/2/SMZ7vfE+7I1MRKu33\ntc5tWdICiYNQpTFadbHCmnGPqWaCo0aaFxfKwjEzYBhOeccXxMAkDp4yN5lG\nQjhfZcFhj1O1Pgj0/+DQull2uqUnEhTkLi91c9bEyHh/UudPk4jzqQ1wTsM5\nnZmoj44L7aPBMHDkX5z5lYHANi1Lb8Q1VYJ5D09ohmpYqeCaUglSSUmTgJih\nOnSao1uyJI1mRm4+xc/XmFLoPuI6kMDwc2YcdRxMBEC35Xgebm6P5j2JBBEo\nHQqUmFA3/zUu4gOkWQ56jf7kddHQbIwiMZBMnlzltjizGekEu/LIN1wF75hk\nicl9IUacpCJwmbAUmay4EwS/TRy5V7oMnp62/rbia/ceBhHyHnx2Jzmq+zgx\nbll43/OoNvoQZcXWNE/G3rjB0vP+WVvd3xkZ0+RNyBvgjVWJwrqJpnI4JXct\ncbpF5pR2f7kDLWBLTRLOotZy9ZU/ghSt07bsFvILOWu/sPoTHBHu5Jt4HYne\n7djwWnZsBUXAlRd17dJuOFzzHJXKlT09naBFwr0WdsOylyKhFjaC4rrT5v5U\n1Bew2DibDIV8kkBNINUvmnj4PyLaAQ/8vV66hnyh33XZUwBG85/w95ry1mXF\n0MFtX4EGT9NfYx+XmtUD0ix2FsnFuf5CCnZtoEDNfh2LXP22+JxjKDR+vBmP\nCrXa\r\n=ZVki\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.978a3b5bb.0_1637350695382_0.9356200023811669","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/theme","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ea471046b7197b94cc5744a63b732d0897bfa95","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.e6f43cf44.0.tgz","fileCount":42,"integrity":"sha512-zuCoi0N53OLbcIyrATHvrz2Tb7tn9njY0OX73fUeb30kcBOqqExI/zjOSMyryg3H/TNh/Za6E6HbL0QG+yS+kA==","signatures":[{"sig":"MEUCIQDi7z0Zy0bEP8bKAum3KENxbGRrec2Ln6+1zf/wmPHeKAIgS6yW1WCWird9DY0cAKn0CpmpEGZFGMTOd5h0ZqeIZ+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9ScCRA9TVsSAnZWagAAhrwP/jTbq7AmOtmUiSKq1Mho\nyC4riQ+m2E9gYLV5aLZpUKyDjEG9Fz6r6EWuR04La2yRd1PeaKdI3RKI1knN\nE6stBPTJxPM+x2Qv5T8HTANy3Md+wPshQy7RmhhL6NNkYA+nQYJe02wZsj5Y\nRHfgxHiq5+zuL8qZd1we8xsMIv1Qpb26KRYuf9pFjKhwdR7goaatUcO52Tkj\nLeHgGr2Yrb4rUMRZ6/BJFCjlGv1cbv7l9s0oHdvyy1dIqgjh7se4U/ueIGkZ\nY59PkhllO836HI+ZluY+iobMpjgCS+ASPQNK16SPoHdO+rKYVd4XJDggGRiO\nnUH9dOPlW0nsICMBhy7iF8NKZlU85nl5wmUrf4W09hnrJBcdxG4Byrk0B30p\neXIn0eoGgH/DSAiRkbx4MkozZ3iDgfJLN1O1DpFVBKTNKToCtN3rmefEUbEk\ndQFqPZ3lml5jlh/0/nmS83PCLpQxWkfz/2X69B8p8qszscMkvCPJRyRDxK5z\nelScsbXch14umMxZHOJILs69mks6J1KrM+ScRkcCwqeXNCeEYW75KWS1v2/q\nZLEd1R3rUgARXzzcle2zjWe3UJdZY17ICDNPNd//tBSfwoBrMvV7nZ7kRZrH\ne24MgGd8litEQfbhpXNAYcVUFP6M01i5GJF5uigSFGEFF66XFZQWsjSTsx6v\nVHMZ\r\n=rh6v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.e6f43cf44.0_1637602460097_0.9566925918182778","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/theme","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71f62cc2a5c155c827c999d3d2224f0df286593e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.39cf14bc3.0.tgz","fileCount":42,"integrity":"sha512-O0K+DRxgBUlknD8w2qTKLrBlTUc4+R5Hq6X8BCW0gWfGL4j/OZlpoTDjUofoRDTu7BKPf2torHVO+KTNnmomUg==","signatures":[{"sig":"MEYCIQDoNn+xmKk+FhI0SFxopgrcsLv4un1U4CnEu3Pa0tar9wIhAO3FoefrMcMcJvcTODuTawONvir9gM0ota26vZdcROLZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCHLCRA9TVsSAnZWagAAi/8P/RFGDnPEhWa3ZLZqR4ws\nB37P1gFSleWOeyXkW3KnPenIkJZWmMwKjq1eJF5MBChBAlEH/8kcAZLuiSpS\ngOJwL2OU6LTq29FI5CIuSKoZM+MnyZDu8J0DWk4VJyvKOE3O+vAeBtfLWlfl\nl53ovIucppJ4C7WLZoT7xYsaijYSNE86TAsoAhQphm/L5nN7Fbggo5LIm1lP\npXwsgCWyajnDxTeJACf0oTxBP3rG5tS9wUqXBKhbRn5Bfc0dnK52JHk+y9Yl\nTyuGHFeufTVnL+7Na0AEn7QhzS+ZUH0YfTc4+YAbEc0NG72fJOvFnCB1wklt\nSu0FU9Q9zPDeJJvjuXMG+KWybdV4LJdZj2AfUgW2ryNpmHqpniJEXLFezXk4\nulVhHncz5j8pgwoFaQ5kRthGmEkjSxB/TLnAlTaEvgrHtPBOceWzGVv3Tt+y\np964yAHH1dO7DNkltLh3dQjYpLX+qYak4swxB4PpnBRzhuvll32GkjV1JucL\nxb0azzClJAJs/SkZXD8ThsNlm4Q7jZNH7dY+TcV8uWv0sGr6AVtBhSt9RjLi\nE335kvgvDDQpAsAl0rPc+3+Ipo2R2lyiNz7FVcKS7VsQpxrVN1m13EpBoaFl\n2e4Q3UZPgpNoG2i+eReISWrs5R4FC+5gW3GHeTgoeF1oA3AMqzTBiOn8ybUd\nKU1o\r\n=IOhc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.39cf14bc3.0_1637622219320_0.2506235957792664","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/theme","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.93134d453.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e832b919f63689ef822076d9718734e138a0c9db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.93134d453.0.tgz","fileCount":42,"integrity":"sha512-zICrevCjehVeLlog6QEksWir6xee6pcjQO9C8VQ8f271KcNv3JNFsoCx8PFLOSPYH1mUBYicOEQQvJ5cWZDkaA==","signatures":[{"sig":"MEUCIBWY4rrFG/vcgYQvDAllR/fpiU7Gtd7DE3Xxe2FUykorAiEAobCP9SOQbYYRXWBbDiLr9GDtM0bPAR0JiETix4Q8vck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQrXCRA9TVsSAnZWagAAcOoQAIqa3/mdwF0Jkq0lpaE9\nARBlRAw+Z4hC8hUOrNYP3kc7JYJxrwb3fdzuNminS4SfSqWdQalWzSCwI1e+\nQ+1GdaC13b+Av5sTYG7M4pm6VS4hVDyt6fByvbS4Fjh/dCMXX8aBU+HIyV2g\n9q/3AhNYOQizMyy07Rrm4peIZulwUNh5up454CSU9hcd6H5kjaVlvWLugfby\nnqJ1mq1EVDk5YcUNIe6NuX9wE9a/ENv36+piRkwU0rXxXL7WN0FThVnBZUUi\nQMS/sGfsAneNw3Sn+ULKXXbOzxjcuGV3oZh+ns8RXTZSxElGrtGdGaDOWJvm\nTTvh8qme7dtW/461K8WLmhyU0LVCTlxLsMGVVl/NCnxE96LzVPm8KxH6Guzr\nrxvmrIQbshyfGOZEJKytXi8yR6VbVOxghqNcr8WrxJjaNqALPxN0+HiJJYb9\n28+cjDWwGFXvOQC9ObKyjZ8FgXAhfpAAo7f3CJrDC4w4YFTJLqhy8hqJSUNq\nOD+UIEITSFYoLyfkns2ev4T87EL4It/8IdRUpZoFBENPWaJs1grIFtOP/cr4\nKyLj2KbbptJpVMAQIk87M9hH1yg8wbu6XlU5QXLTiqXIDoUIvKSG7VARXEsh\n23P7Lw/0wC6VGaWpwlyBs/xWTCL61Rv6EyI7xo+i8clkN4CSLKWHbbn6upXv\nw9Zg\r\n=Zf93\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.93134d453.0_1637681879615_0.5845172171816513","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/theme","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06033a9bdc918d8a037f7178e0cf44b7e52c136b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.bbd11268f.0.tgz","fileCount":42,"integrity":"sha512-9yYHiU5rZuHHwTGTqvX9xV29iP6BkAANlnEmxUtyYa6hEwy4+AYCmIVnCxPfMg3e70pZtG7180udbTnm2q2mMA==","signatures":[{"sig":"MEUCIQD72bgjohsytLqD6Ajk9I9A0e9JyXG8fRak5qGDMp08fQIgfywBcICbdtLiu7O0ojV6AfgXt5xAeQKMuYjLMaRUvjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWu8CRA9TVsSAnZWagAAsAwQAJ3xHaAbFEe4u0S+Q/DX\nNNbC+Yi3UVSJ4NKVaMwM7ysy/AvgVJ+1OEc2Z80Ry3OR0W0GyV6sv+5M6eLJ\nTKbjfuUQowWt6gBK+VzcusISkPbuUkfZvUxFCZvNdbXcv4s45uN9+gJ4Q73V\nCWYHvm/57i8j8vyYLEmjnBLliMtsRJxw+HKHxL9fxSr2UivOwBd2/e+byALa\n8x4w6NK0W0L116OMILKaudqsGWN7S1dVISlSiqswrUhJGJuCGthV+GEYDZMu\nJWn4W4sFAa/5YYXpM6gwURhvhLqfQ38GthsPVWMFraGEg9MMwBB5CxWTkM0A\nvbNm0rR36LqwGWI3w8FEhYcojfew3y2Ua2Lcy1eec1NO4ahsvP+3CP25IUze\ngzJkggg5jjAjsd1qYjSaX9kXWZB2z4c1RN+/uL3ZSULQAv6O33bFCKx/7AQe\nyd2vqZ0M4l3xmkfNFckPHpaT5qgzbpYEGYYzPCgr534ZdKGJaIAPE3cTvsU8\nY6e1gZgEOxplAXibKQdzyLuelfb27mMSWEvuvqPilY7Sg2OVR217yLx73qWl\nf8oEATA5lryJYDXOm5eFrrh/2Aggz5J/5XoETmj89nCCPm2WywWguh9x0FCM\nKDoiCKpO6/xoepCAeZKpN9o6usL/lpNpG6+YvBGiRQETUEHvqZWIdn4OaUYE\n6KOG\r\n=QNzF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.bbd11268f.0_1637706684257_0.7546092122827108","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/theme","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7a5a28b274ee0333b4414920ed9360420775e6b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":42,"integrity":"sha512-Na83ZMM2YUIHlCWcTgo6mGT5ThbyWXZkE/ZiRE3RsuX6ooIAa1HpahAqxKBw/7w6idI5isuGJCVLjrrpm8fgcQ==","signatures":[{"sig":"MEQCIB65PwKHYzFcpMWohM6u9gtoSKj8GgD26Oqk3NrC4FnAAiAuRY/W4VmlwsM2aKmEShcikA1Pvyc9jc+swsBP3J652A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlwACRA9TVsSAnZWagAAQgQP+wVdmNHoQkKkwGsiR7U7\nJ4xOMsvPEbgDptx7WUyUVsBPfpO9Z31CBezK7k6iyRvZbciF8SMzjGvYxfho\nkQv7K+hmYIwpXibTVm8MpR1mtufAqHeWMZFInc9EiFskrGmRfKhuAtCrnwMl\nQg0KB35V3xi1H3KEbMZuW5mvenqAHkfXPueMr70SIaLTZZnaDFQ6uwziq/V0\n368oIWpwarFT7T3DlBuxH9D/NB4CLzEoXJZFBe4JqfLFoZ8I58P1gRRnDHk1\n5Coh7Tp6BZOsqIz/75+ZTGZ9z8TL5KL4vdxyPDMPF6m9c47Jdy1mROhrB3u9\ntG4SCRYlkRbuhKQjuqpPNcyMRFEcU+kM5yTQPBaYB90m7MMSUVITZUndUIpP\n3pocf5LB/D4F/jaWOK6EH6iwzgs5zyRZBV3O5RE3+APrYWkKAqW/Lw/AZUdD\nJjHBDAmaNUDTsv5PWlpH28GZ5DClhbv5+eoRYUo+VokI+y2kzsqlCJrh3rqX\nA+yqbJKBeG/HQjeuSOKJ8cCSIX+e3re99lJXF7GM3+9hj1ZL6XFSv764yIkV\n/Zxyb/INLG7f0pSjQf/lZ/oGQ91fu/otU70GRdgoCxXL0WCJ8LQkLUcvlQcE\nyWL7NyWkKwZkeprhQYHHrORSHBpKnhH0gX/rgm4YPIy9Ehe5x/HFrZelXo/a\nQmMD\r\n=MeoC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.3db9c4d3d.0_1637768192169_0.6428663036531732","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/theme","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4df9d7f4a0db861b6aa0b7bc87eb0db19a6d8c66","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.78305b6d5.0.tgz","fileCount":42,"integrity":"sha512-2/sUSG9nCiACQAJOV0KMAi05adGtVIZzDLHds3xSJOw7XxbdoHAmT9KF8wCSIdi+88jfoN/TcKGeFYPR4dBwtw==","signatures":[{"sig":"MEYCIQC72MZ9YG6qvnmYpBp3ipTh96hwn8ac4jDCbXWfUl3QKAIhAJNubY9obCsEeNQZ/4dyUP4buTBCE7Tt61fHHWKTFBYy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpddCRA9TVsSAnZWagAA4gcP/R2Q3bcSvugHSpZF7cos\n5YLeXpofh87VrG1YYk5BJrhEfgKqxkrQc39xYWpQd/YGP96qho+peg/F65Ro\nAOYvjYgXiB9emZZxlkAtkoxoI+FslnZ2DSRmhH8T27KxLYbKrMcnWGRXqhKF\nsm+Jh5gx4broffAK5uiUPrIBGIp0dimQRjNQz5WGb+ZaVJiqrhuWBujA201/\nJuP3tHMmFgeJo7FdJ4VDK8ba5yNKSMosoN7UQpfm0+TeWcR6A53Ox1I00bmA\nFZf77vXnatgyjt+jOaYicygLNEf5b86zUmvHv/QTZ0Rpr/A0PjDJRosXYPle\nHr5AJ8iICtMZlb6uDjWA9bWVLAPWcE5sPMeqNzalaU8/Z4OlSvwY+xcn594N\nDMkZXsvESOD/JxmdPNYpu/VOYtnSqn4P6OkDOO6xdGYKEteCm4h9sgTkgqPR\nQM5ctGFkO9lEcZEwK2Lp0RQuXT2FVhAnJvJUABshzffy+YArVAbtQhadRsMd\nnKWhwG2juriyZiSh5FXLjltEwMsCl1bDnjtrKAlgo5EDGh1pI7gFGUO0otV4\n5dOWwpp4e4pXSwNPixxMLOsBBzd+wjR/0qCRbFixtN62WJqcE6Zt0AQwHnkv\naZm+cuTxeV84FoKOvxM0SNC6/Ra9ExrYtJnUxru3Xi+Fcg91mP/VWN43NU7H\n0iKM\r\n=P4p1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.78305b6d5.0_1637783389233_0.7699039202611029","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/theme","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9017716d34f849b73c3fc0c2405710f8d4c70d81","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.43d08ba77.0.tgz","fileCount":42,"integrity":"sha512-PSA5LUOGn/GctzTpAD3AemCjC8NuD7LdeLo7NbPyJ6+A4pmyyB/q/OP1Ojtf6p1Z1JPfakNASdyFft7S51k5Jw==","signatures":[{"sig":"MEUCIQDZvya7MG8yYnxLUPtv9E2snfPp46v+RTxszMxQlgqC8wIgWbwRZ3NTomIIJQuKi3QEEaxgokozg/t9G5qP7I7ns6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqvSCRA9TVsSAnZWagAAswIP/Ai86loFU2mtf2J9uF1L\nMdDYNmiAmnZlc84Q6jsjHlZbdo1D7PKiJtWor/HK1DEyzigm8IGQQuGas/V+\nT8A7IrZbUGQdH8awOf3ITh39PRuMA+gvAbgwsYPH3GXyw3DFMJgJYsh7jnQH\nA8be6HNF51UXEtumpSAltfxCROwtUq6NggXh5/c6qwgGRGjDRdZRQt9H3x51\njXvGl389Z8msz+5e65p6l1J0o7O7a2CsbNVpPGACbS0roAMMTf5IPcadyG7L\nxcOHsQFHXeilu0AeIH2yXlpgYI9vluoQsDDWnM7XpkZrAqDqtSn4AVzGmY6F\n7fpGUlFGcePG1XD24l3AMMPhVq9tJ/F0UY/aLFKJ5GT+8H3IjuiMkF5B8vLa\n9drMfMDFjCu1F7oEtVyGw0F6Uxy0N2ehhV9SM3qyv8Ut187bYv6U1hibtTbC\nzhT0K42g1fpIRPPzCtRbUwxFG306HJU7tCdPeUcmwVMwJ+kUhJS9QeCs95eV\ndPfuqwWnbS4fKlwEScYsKvnrAiOrVnrJas1IdgTKKJzVTpIiTxZelKzzl0NL\nFNrpvvXQFg+OT35pAzTyueqDYGMcNWwQ44A/CK0GUsCYDQCxcbtTaIuhvl6e\nxKkAFjc8P5p4K0vs0NJfK3kRjXBDw4V2q1QRKxyZdMwz0FJegECN9zeipqjE\ngSP4\r\n=Ghno\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.43d08ba77.0_1638312914583_0.627825613794174","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/theme","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.17a072535.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ba98a73a5004b3d41141671c56e636bd4464e47","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.17a072535.0.tgz","fileCount":42,"integrity":"sha512-JmqdBG6lg5i+MuSmImi4tazhQaqSm7llUf1RyLDwO2KhzTzR2CQW8zUjTSmTRH5QepLVq6mfAcfc2wtSORn5jg==","signatures":[{"sig":"MEQCIE/w81pJ5HehnzoZ8FX1dbnaSvXxfSPm+4jCWWk94AGTAiB9P0uQevpbpsH1q1lA7V06td2/zUb+/sfEy6mUT2YULg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQqpCRA9TVsSAnZWagAAWawP/1o1N48TwCC7uwh+F11r\nvz59Yvni2e5TtvMPtCevQvdJUt7TejWwCnfJP6MhNVg3mbQ2EGw+mocIYx3L\nO2oJ1m2msxk3v/hr1k6kobmRkVMeLQrXV0WMch5IEH57INE4mJXuq6EmAaOJ\nkc4Nje+FtMC31ZoayzxY4S35+IZg41Giw4N/7lOXw6NY3JTPTCXGvM3Z53h7\nVEd8VG6rPhqZ1RoN2NkPAG2+LvAnYZSz5ZRrli7PIRVVewgZ5TdCoTM2J2Ct\nNBMvGs8QTLeT/mchTSuxcOn3Fr1yaAjCMssWSOZsox40N+RxSdYHeCr3wf6g\nkVPhmaSn11PJE3NyJ4XBCSawgh8qhKbUNuOYJrhiE6d2uT9g/FBhlbsuqjhQ\nlpev1M0B6TwOpYkhF4DYfcXOnK5wZ8e6b6o08pGcOPcWj84lL0rMPnU+ClFm\nr2ZPoEQciEPkCOxFD6IdR5lAN4Oa0hazRWqik2EHQQT39S84OtziNWNFwW9U\nf/G+e+TCWCX0IsXha2lP6FrU0/BEu+ziKvdQoqrqb0QUYrSfxlxn0zKkhNq0\ntxCMAHIla+lIdmMDldg9pJ13jM4h8YIczHbCnnVLJQTFrBKbQB+4WowwxX8q\nsw5GLIF+vDwdSDse59Xr1FFTbJEzXB+Nno9mJxINb0jM4z/bnhtyfj/D40BS\nnMcN\r\n=g7Ot\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.17a072535.0_1638468264968_0.4506066311773449","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/theme","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.5d809696c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9398371d871c0bbf0f705797d9d60e95b29d9275","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.5d809696c.0.tgz","fileCount":42,"integrity":"sha512-49l7oJR0Oo8zAapwdpMXijYNKLQQc91jX12VeZYyFMC2yGsoXRrdan3Hulm/Jhy5RpFOiGM0umVctDxCmNkvvA==","signatures":[{"sig":"MEQCIAkE/zYcDCfsIXC5FFxDfV4xhrKx6vzGMIFa1GRhRN3gAiAdZ77qJSmVrNVdGfEhQehkjfP1RZz/Ipfrlk/1DMBJuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO7ACRA9TVsSAnZWagAA04sP/jgmE+OI4slK0jj2vyMs\n/7vmBBBqAmCjiSY7SfgDIl59dFuDPDi0hBf/KgKbUEyaMjZzsK1Wa7vshSqw\nomMr8m0inSndgmTzFl0H7B3NpEPCN7Pmrn7/g42XZRr1nwIpduKTbw3PMbIA\nsgX78GI1/velZ3T9sGW3jkqy1IcSY6/q9vyWMVOyNRyb2yamos2cXUVIG/4h\nt5f44pEcVYYveUQKO4L9LNSCZdzNnHwdh3IdaIdUG4veGHGfOS0ibhrgQvEf\n8g57WM8DLDLu+sWWvQ8cjKvBcUAURaXXmGf137/06/IP/wQQpBpKxn1bcosC\nOiXCL5Am+O7VAOSSinvU9m9RIpE+N1zg6POzg0XLoXfFk/CrQUV4E16YbmSn\n3Jxlp0itvCL60spUqrqD89XGDcdfCSoPnsNG4WlvtLMKHNjM69Is3tBPcf8Z\nxADhBYbh4Hh/ybQlwtD4ZihoKPSCeRaz4NZmye2KNzvlGcr8jsrkshfPCgKz\njUwstflX6pEIcF5nY1DJCiEINulEcSGTVjNp36W+/Q3UtXeo5sKdv+wz6ndU\nsKCxqsfFSq+lk+1qYtBrE/0WZtxFiPHOt5tOGKd+e/XxUF0k7vs7KNIijlmf\nB1vxCryn1tbruB5P++xZvJNdRG7+WPjQIFPMdV7qOkg/JxBqc2qLjew9NdRA\nZZ//\r\n=MEKq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.5d809696c.0_1638985407973_0.1894613490135486","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/theme","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f084e7faecb521379c7d9272e7930254cf3f84d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.b6510c8c1.0.tgz","fileCount":42,"integrity":"sha512-4/Gd86nM7+Ch+JgRhQVQLFJxyZ+zOJkpWzQ4Ys99qypS9WR0g19CrOe0kUmpsOuKf2NXqKpfQ/DeU0m5do4tNQ==","signatures":[{"sig":"MEQCHwygAmK2mKrP+yP7WZDGBcjSuGaxsGp4fNSImWhgLxICIQC5ELq6GwJiGLVDZ4cwSXG4rg3dotBJh4SQnz7ajlYZCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPPtCRA9TVsSAnZWagAAVr0P/i8zkZSKqw5nSIvYJBOq\nH07twyII0tS6FbkBG6XnmeYCfONc2unNg8RiqphYw9DeUC7SR0P9qO7Uq8Xw\n/9XdfKqRdefMJ62SzzrNNb4EJK/Pth+KjwCiwP65DucTSwSQw6QwWWSV4Gnr\ne/eSOm6PCPB3shKM6wqvMMitdigLGF+/xBafcYrdxaCWIYWMLhdadi5skhpa\nbINhVjGnEFBkaqFzAehXi+QZSh7eYqrIuTjmbWJr3xw7WqVxEZIuHrzyFxXG\n84AD5L7a+jKxuvj1WmamYomfAO3PtC+4v9dy7aBjP8QydqEpWuGQyr2bkvpY\n7BoB/qUIPqYhnq9ougf7cUFJoEdSFyMwnS9N2jNVsTA1tv9vqEOsFVaHhTIe\n1eoAZ2BZt+SpAIn7AzGN3KiEXOZShwfJfRpnW4mP3aqNxGYlEJaWj9tj0RTU\n71ExdXj3SUk6h0RDamqnD9uuzX45CwVZp94evzVFXgq7H6lLf9irV0is4nQI\nTYenca1t1olXQ2VKkmgvZO78YRYNsxPmhVzhf5PQRFUZE+jC72R4bUr8OS7N\nOdFg9FmMaKKQxYAWTPf2qPbZkYQwBjaRujel+0vrKzjow2SEvgHIHGBubaRV\n1DFE022w/QhjCBfsa+aMIuqvCNm9eeyBwnOdR/O6frP0ifF/d4ch2+fAIdfr\nbWLn\r\n=LsJJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.b6510c8c1.0_1638986733447_0.7880542328748423","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/theme","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.f460e23da.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19128ea3f06e07fe48e5b94fee97f30ea700fd34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.f460e23da.0.tgz","fileCount":42,"integrity":"sha512-J7ci2m4mdQmkffYxBBFekeopn03YeCSIU1J+AHawLA+LgySSpRzxZp1wweDZx0qBPxXA5dOU760HWyB1QQfggw==","signatures":[{"sig":"MEUCIH5YCj3/oFG9o2cy4UMqDswy///nY1BdkrC4c6xa3Dq9AiEAmiWpSDqzCUXogBWTZXxhdpS0o+r5pPEFM85C7VcqXRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3EsCRA9TVsSAnZWagAAVvgP/jJgF8Sh0gp8Fe35pv26\n8C9KRUw0wPDbpVBBhG7n9DnPuyEZcaXxqL4EFk7iaE3ogpycegXJDxg/1DTy\n/2CjBZnDtCOiXugTlTXc0dAWf8+NaiHMoawTpoJf5OepjjCFNMsgQxZ4xepL\nsS1hTQ/5+EVj7Qb79r+NcjSEiFVg4spfC2tAAGBqbjen3Mr+ShugpIg1yVVq\nUS7norDrYBPvNL47YIrXFthpuzFpA3EMzGIQedxSt1YtJQX2x5Jsvc8il66c\nCkm4xnWbRSQ+v8nunGY8uh99GteDBZ3VM+5U5nLfMIYXPdoIc7+rIIscWgxZ\nemXNDCHIZ5QFADW9CTQvM4klN1LBLl932wB8offlLiTLesR7sgsiguhGHvIO\nm9Eu/J4FaM1k7hbDyoicC5rYeXDOKK2lRvzdMrlA2g1k5VzViAXw1NLz2ziy\nb9m4LrV+vaSosJGhPyRsdbNm6TtyOkLXzbCHkowOs6FB6kz9KjdA7ufV/csw\nlZgFc3wR24sufLhT6DHy3UpPqCmXrUqR9Iao5+fOj7cMOjplU3j8e0WFLuoI\nVyx1pkC3CubafchkU1doBWPw+SUplTid5pCT2d1FWzc+ChZe7MWR4d5E7AMS\nHrJb3py21AnqH/BW9HIpft43Oy+1i9gTvVBrZmUEUgvtrpInUbwKgQmCSmRS\nlX3V\r\n=0rkQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.f460e23da.0_1639149868476_0.32622829321025515","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/theme","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"275b83daf348e18226035c94602f711f7ba3803f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.7d8ea4624.0.tgz","fileCount":42,"integrity":"sha512-lBO+Ztkc7jewV65bKPwJ9Lc4z9+DiEBxtT9Lx4cM+VHOuRNn5LcXSvbUuHzcnyPSLSzMmbUhvxfvLGs4PuKU6g==","signatures":[{"sig":"MEQCIGNyyGvIaaIIoU/3CC46M4r6WA7K+1ctZDTo3Xjo7esTAiAVAeInTvdCsrHekvN8A9PtXLlYRKkF4EBo9dMCsJPXsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6pYCRA9TVsSAnZWagAAwp4P/RWSxEgPi7hXSm4tMlLZ\nL6u8tto+XJE8C5gIxMY5x3UiYtoxMVf5jsyfsBx2fatMy34HWfA+lrqvVK0X\nJodpIkVDNj3OwgRMQrZ8t/y8hfXK/TC3oSCMpc9wQHxJOmML5wHQ+bPYL23k\n6jUaw8C/FSBuEwrd1ZFg3z73hpLr8lpLv3ZjERBgLVzXIKEhpTRKc5aQdpgZ\nVblkRt6uPpYvF6+lNzePz6hphycpEZADxwuIBmtnmIJHOKq6NFgNMzJDXMW6\nbyZ5Ob9M+dvgpNMRtFK2pyZ3td8+2uLOQhEdtjYK22R44B6W0eER1LdwvtGh\nabl+YRiVfq9omihdlX4KiSXobXSckCKv6qgYxm/aLOdvsOKIZW6EV4pJhu5M\nfJMywnBcsSz7AOyANHJQteEqn1HUdUlBaDcj3NiCIqBP5/2PhIxskuEijxur\nwIMJOcxaMsnIz6BarirwSxQTxQJvTjULBJMoHMasxw6PRnLsHkeh5oJ3ezSG\nzr5OJ3gQAn0x35zvlM8iWJZBMqb7hMOIrcWnVbOEL/Ylfs9ypJ7pfra2uhUx\nqDlgYTjbOMjkBWg4E/zgmXbmAx5NTkj1y/D3gd+8JKiXfNPr2kHZ0QhfNV7U\nl950PZX68c0skNyWmoUSpep/lIY+zRge1dmMlZrgzCpTr4HqwQi8o5EVqMil\nMGig\r\n=jrei\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.7d8ea4624.0_1639164504806_0.44538178657866423","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/theme","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5777f78bc4e7a53c7691cde86adbf8c42ed0a110","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":42,"integrity":"sha512-f/htwp195T+cPFhr2/bZnUpNFfFb7Cz71gG+zOrqJBmWlZYqoKAQV7cpSySeBfvfdzcSqxLwFNDkALvm8uzp2g==","signatures":[{"sig":"MEUCIQCvfn+AHaPkdm8i4x4820/yNSXSm2hhsq/DbHtV1yEKTgIgRxTcOzXLXya0z8aKrbZYuOvtY+WPWBufjJRgzX9n6WY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFuvCRA9TVsSAnZWagAApvYP+wUeIEBiJB9M2TjAcgWi\nEWGr6qX8dTWJc1QEpHYiycnPpgqJO6wC6DYRkZAHV4s1I2yDPI5Nr+qs4DQh\ndMvTcQLaM2FfD6vxjpRc1exuWJBUg8tg7XUAaar4mEeCfmj/rbg6zW0jVVcv\nkd8UUmv0BW0gdw0nvNtyZ7E5wR1F+A1N6pkHdd+HbpcL4vCqypTdU0bTLl2Q\n1WzkvJf4KE3aXezdx2nV1s8Lb7wgJ1i4FauIGgyf2Ee7vDzDS6mS9btvHSrA\nniaR64VKe6FCwY1Ft21FVsBWOL9i8Ny/LATo21O7Z8VVSeNbUD7Pbw30nGWF\nF5Gn+LHF6nYSahNfVBz66Cmx/ZHMT765ypuRU1FUwazOHLZRiEUZzVxbfHT4\nZ/A3oojg8UmLjGFp7W2Bq1tFRyxZJg/ejhMFVr+lw5mZPg/S5gj8PGTEVhrt\npXmP8GBsmsRpL+vy3mrCLm3/8TKlLzhXQEcwA9vBw8m1rACc583KUD2qYMh5\nCemoSLDXkzrzVJ28+vYX5ESMXIaewc69QGWmyJ6jccsxV0AwsU3hRab5zjU/\nCtWHvLMtfnA9kDmBbpCN+zYFx9PeNnMAMpdB9NPeXSGEDyatTR38IxD3H9f7\nkENYr0hAeV8T/uEMkRZifxKAJUMLP881stzfHctVVQjPrjwy2K3W22RYa6GV\nMfX4\r\n=Ewxj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.8fffcb5dd.0_1639472047771_0.44428696115983013","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/theme","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df69f0845cf7161d01e9568e66e015d70eb3155f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.21e1cb9be.0.tgz","fileCount":42,"integrity":"sha512-KVYr8m/yAFSItr5Ei5EzJjQfj5+8dVL8pTlxm3cAGsqwWKwdgnAwSjChkvjG5Z+70aBEOtZj6uE1P4NBo4cUMQ==","signatures":[{"sig":"MEYCIQDJtK66pPRhBlbJcgWh+3JytwnavdqNN3uOCuHWnQ4+JAIhAIfEqUL7Lwcerb2meUvA2tPrhcJZ8mXZmJjXBG4Deqg0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPLUCRA9TVsSAnZWagAA9DEP/22Ou8ysbwYGnFA51lUe\nmpfebQbLpW1A6oATSBGS8OwPylslPvEWdzwz3XSEeHoN02koi0RV2W4Oza7d\ng3pmw5DOXE4nzuh9TbKzIhTGcsR0jxkV+eznk3TTDVxDlpTZMIZPQBu5HAHt\nE71aMF47tZ65dNDMInwwIfQ2umy/+pMr95eHCgyFtso3Hgfd28zlszi9GZpe\nBjcTPAPw1/XzaJCWXQfBQSlJSLD7KX1tuEUlx+IF5uFG0kqAzX3o9RdB3A0X\nAgYGEjgI0H6VktfgcRIXuvYo12veB0gWDvZDmXAt1iY/YN78Y4gqhjaOPRZw\n4geXoM60S2f9Z7ViF8idAN2O2CZzmKxpnEalwIaiF1GSKobX4iWch/cB66EU\nqQ2qhH8LfivracbAh2oPnKXCn9FQbMBxxLq08Xd91Qlwj8PN8RPLij9URupK\n6f4pWiFy6hmzSIdjUqVCjgEJLwaOoAqoA6Jvg8k88JviRbRgrImr/DZU5+aJ\nPlqNoilnBqMoMPxkahGe0eHRQXdb1jWQB9L0SNpoyLHPhUomXgCY4k8KIrMk\nW67qwIAIODClzsS5mnaQrX0ec28pgQ6TbykUTWFXXnK9ZwyjMXhA7bqpNkjs\nSsu/jjc3t6lKfbTkLPAY4nlCv2DSjp3j0FHB1ziLHSSGMgcSuNCAjUxXZ+8g\n/7dH\r\n=aChB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.21e1cb9be.0_1639510740464_0.1730265562105504","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/theme","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0443afdb5383d97a2e39baee0575472423e1885","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.ba78e8724.0.tgz","fileCount":42,"integrity":"sha512-flahBuplxuxhWAAn3u+FE9rh+GSkwWAGLwle1ay9GO4kDUBkB6LU85pZCdvPNNt5KmrtKJixObHK4Lt2X5Lcqw==","signatures":[{"sig":"MEUCIDvkkrt/iJ4yZnzn4ATqu2cs26faZX6zDoHONlG39srpAiEAyxLfozCQRRi9Kgf/sGLvVCgPgcE/KrG5pni7mVbI7gs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumg2CRA9TVsSAnZWagAA5jQP/j8NIqyRrHRve4WasNO/\nXzoA1waXamK/tlCdT59b3F13pOwqbmMI07FaPAuEAcGZlGxTXjsb7uZP1mDL\nP+CrKYFMOnafdUCXtV0LQNAkDKrySpEbExgRnLqL6/yiUnx8HK6L2xVXXNb+\n7Wz1VdQ8Y2TSM8BkZo6fd1f0vljync0zTK2MGYjZkCRkcZT0KRckiw+EpiOi\nCEDMhuEb13jXSs10aiY6zcFA0l/3pdkkAsHcXIWqmm7TrFkubtHssgAgDaCe\nCb1tfpG7b6GtVrKflJ9HIqZJYxDLN21BsIaC/BNUkY9bN/80z8nEBQz4izxp\nRJTjfOoVG3UbthsOD7jXffHmwIW7gepwASKcJmhtE5SIn0+4msGA3PnV4Pnh\n+a087IfpBcmk3GGrapc86pg4CkYfojjGtMBWaEmA0988LdjfEOv0DymgLZ1V\nkdOtaCiorBqmbC8u4zceKXdZzJ6P1ZiYYjPc7ea0m7DWum8EhPQk7HpuzeRT\nkTz+r2rkxQekk2sxN/zd9z0es/dTcLKyRoVL8UknfL4x1fXR/03QjgYkeMIJ\nfHVM3VO2MjDyvJ52//TLdM16LojrceaITUmnTn6K4jMuiKIhsv4e8RAJ+TpS\nBFv71S28xAnQxhIvGMC97BoK3+uRVq8Scqbkz+wwi5mSOypqOz9OecsdprXv\n/psx\r\n=A2ul\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.ba78e8724.0_1639606325857_0.7351492994613527","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/theme","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4236be632e3089be3f70a100549e9b8b3c5dd2d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.e3e073c00.0.tgz","fileCount":42,"integrity":"sha512-svJoUFB6Ljb2M1wGL2FBr4D4Yd3wyBK75fdc1uaaDLKORaO5/CJej4ZzFf6XUg3C1wPSufnUx07XxQvDbdH7Sg==","signatures":[{"sig":"MEUCIQC5iy7IDQjF5zo/ketrOsQ+5GQwDHn+WQ11czrvGdqnRwIgek0jlmHrNf6b3sj4FJZuqPN/huExqBqug0XL6gQjFuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPDlCRA9TVsSAnZWagAAZ5YP/RdKFvX0wkpB9Ontu0wa\nR1oNarKeIDPmf/C29YLpobNEzP2u3dCEhvkJy3lyWRO9oQZsLY/GlGRWPMkU\ng63a7APJ31YzXjZrgFywMLa3gEUdHUwWMrxo73aulRo2e19QMpcMXryTvnfJ\nj6Cmz3dutU3kiOVNUkC5Hpff3v2iT/e59+kWsfOwpE1iWNVegn0bUaTiWUNs\nX6B24w+RmfGbR0unyya1neI4R7na/wGJ700PwLxBAcRKv8huehbom+MeWhvn\n1MOASPk/JDculKjDCqDNVPZSJpyhwl5N6UQsL7dioUxYLgk4D8Y4ZqttmPA4\nk9S10oC/OQwGy5ow81yQQoHtoQifJg0H1s3pDtGkFFYu9c/gjN0r/z00jpmI\nwaVyJzm5owH/YrFbsUzVFw5tTsSNXK2HIkxqcQgk5NOEB+t+sDsHtoHGDNlh\npReAH46sDF87eBKtXTHHwk6zYoiXRIOwePQoO8g/WfIzR+qcIC3HY8S3t05W\nwCkzvT/OGsWPiCrkbIQ3kQbr03MW6p/RJILOpZ0cv5GNN0c3ZjsXyHx5fPp1\nahG6u2Kw6Noq0nwI8jSLSAJ26ygxBvXCrgctnux4GDWvm3inBLyqUJRp0IKL\n2mgB949SmiQuEHbG9DCxNxkXNligXeQ4rmXhn9GcxF1240OCrxWqOLJyzYc6\nCrTM\r\n=O7dP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.e3e073c00.0_1640034533740_0.843900988737686","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/theme","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16531cd42927fcd0861b9858782eca96f7b60f14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.3366a71d7.0.tgz","fileCount":42,"integrity":"sha512-Da5UGvHRnoMt5TIlVENL8HKMWg7IHCLlGP3eVwVPHp98tld7L5m4YR8OTeisuxd6nT02ZnUl7TaPwZ6mgW1eMw==","signatures":[{"sig":"MEUCIQC7/vxxX/hwQY5rYBdteD3QJRabsqvOCkBkI5XrWIzdwQIgHsNO2wtc0nRHIdwbh7CAmfKxOfRl3g0fNhSBbgdoE9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxqkCRA9TVsSAnZWagAAeg8P/3h4Wc539YoGS+lC+reF\ntRiqfDV4te3OyjgcSACgcFLeXBnAUcPzMx/CNQMGBiJ3UUndZIUKtVdQq8fb\nSm4faMxrRal0WhOv8vieS8/8z3pJygfAxLlFCxs9nabu1H5eW3Q0yyQPAoR6\nFe8NHd7rJdav8jftryuSh++wZEKUlffdBS/+/7j0t4KCTk4GoMzLIzJ12nDF\n9gEevwkDi3CWOgmj9novvqyRd8BN2Y9wScbTLnl3Bnn4G8YRsqv5MjS7dOaa\nA06+GHZOC++Z/hNCvagkBGmkdADi9Vxem/q5s6BXLoWhpToLNarvjF5qI+mh\nUJ6+3oUyQnAjiucPxJowTKSzyWt2uvumyWF0juX0v2ciT1sBwXOhC73u/nSM\nKO8PYiE3wb96h52iLMgK44TCxLhd9q8hQry8LWXD7ZPh2RaT0F5Y9BXztKJA\nhqCKPUEdxAY6iuqmpzY7mwIK88mArVPFGYb7QInHXdLOcrCRaiSF3Yzh1l8F\nO8DGudk//o4vS+5eFwwkyolL6n5dg0r6CVxqmewIMFWmGsse6vp5iN+MnGXA\n+19yh9PWuckqP1rXppP7eHXA6z5W15rV40DpJQVHgIbtsq7PXQeagL7Xect3\noHkE0/obJK2aVbnWhQ35KZvqrNx4NP67mfijHx+kTO2HsXLJp/Jk/kR8QIeK\nuN/N\r\n=ZLfs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.3366a71d7.0_1640176292324_0.3450788612755369","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/theme","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e61b8c8daaf2200b291e8faad75b459e0a772fc1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.c047f7c19.0.tgz","fileCount":42,"integrity":"sha512-etZumekC7CPX6p9F4JDZa/phwFTIJEO09EHKXe6JWOhRZmEo4n2Ipi1qWS3lOG4WgeLlto5sINro47FVY4yzHA==","signatures":[{"sig":"MEUCIQCom4dzDL5oj+mwU89NCHfcksgJEIDhdA0ZvvV41XusbAIgbmBhMUNPwCNUfjkBAVRsmgKQxNhXaiHBexljrcp6fIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1csGCRA9TVsSAnZWagAAPZgP/RWPog37Ds+aFIbVFP6x\nGlRdd2lmytGBpLiRFrm4IkSlyWp3+6y1HteQXlCStrB83XkHfjl0Io/Tj0Mo\nmLUmAAKpjO0CML8aUMZ8tllLBZeTkbMDFrI9LtQqb+xJiNBf6mlKIGA1gI4v\n8RzwfsT3E8Nty5Cco+6XoKRVN9ZoMIGfsNiA8SnPOrIZW5oDsF7m+KTSZb1i\nL57R2bNbt2nJzR0I+Hrw04EZ0J8TCzO4F8aFi4m5oPSD8AsswlALcYBYqj1g\nU8r7Kd72h5echZMGrRtxLVc/+e4KVLUaXhrVj91TwQHgq1Rtdy8meGBFi3mP\nIvZm1V5LO8b8J80xhv4QMTuCVJsC1uZI6LaQDseNDN2twhsn7jtMKF+uAECk\n4YYJcMrQldR72rcTEMXeD8YbdjiU9cJxKY7FYi7ISlml6Ug3DsxIrvz6/txC\n33yal/z7PEByH4K0Vjgl3oWCsMQ32mnecpFE5q5RmpeLR0ZeqZdjoi7T9vh/\nRQu3PlcIP2RSIf7tu6uk624l7F+qUN7mVLQNXEO05o9l7ywKRMrFZ3ZLgRwX\nZKktX5UMNucwpB1s3zmcmyH0VNl4GfHqzjnRP4gJSLIi94J5QrqDUaZhlSlK\nn0swImrhgF33fKFFhJD07b/2DFFqd9vMSnUFwujRV1BQyJNq8wgMOzgBvyuh\nxtc1\r\n=IMJz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.c047f7c19.0_1641401094547_0.6602054019989712","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/theme","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dbe26517a878682645d15f0bf91e25430b4e12c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.05db65ec0.0.tgz","fileCount":42,"integrity":"sha512-r0iOodR8UxaQUiKSIS1aPz5mZt9h8wdIRFGiGFNxUXPRgfp/uvSu1htjbVLba3+KuvZJIxpdl4n6z4z6+V8FzQ==","signatures":[{"sig":"MEYCIQCbcYqHAMX+I+RZmHX8vaUm/vIlIf5BU3549m884f9wewIhAPV9MWceRJI+nulC1I3COQ9dDygMrzrC1W9+HfZSS37L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yMuCRA9TVsSAnZWagAAY/UP/jjatsjG/tJB/Oyb2Fge\nHkyF6/b/ZzN/HQ7VCmVUxQNDVPkkqSCloGaQ3GOjyMJbBjq6G8r2vdBJBkUH\nXsvSjJ55vi0N/SvhA0lGitbL+Vmak1ZW1Tv+IuChl1Mme/39udnKlJb+/RlD\nG0lBebIbzZqgTQthIua4MY+LvJxebGWW+ImEIiKdDoJepQR9zriGjoEHXhwG\nRChhRwu59TRUeIQCQ37L9GJVo1uxXiKeiPsuHmE/Ez2657ebBKsRyKh7S3AJ\ndT3TKAS+EHqdwKq+0QE4JqA6TMQHdgGx6s6zYqP5AX4gTkO9HOOBWLA1uo+Z\ndi6qtANW/x/eydMLDQwNWj8BXeoBCK8bpposdGMc4naTwM64YSAzUcZJMW+/\nR9D/BcqbomrCYVtaIcuufWdtZwaZy0znu/hcSqWTnuADaoMYm2tqi1CsGlqS\nPOHp+MgCFH6QQPs+ZN6vkly5dkYbVm84d7rKVfWw3l4HfmY7P91mThLgLGMX\nJcDKeTRoySF4BGlLYMMopYjwU8oiUW37T9t96IcpXwTBWkPWlrV/Wd4Y+jZq\nKKlMTvOQVwg7ahKXtvFmuezgEeRHmZKB2mwWi5Bq75USm34a5efBbB0cwg5E\n+fZKag4+Lg25CiuTlhIrWw7lMrxrCy1u+ZqBQxD67apOBOc2HTBpafj0oqfW\neV1r\r\n=K/b2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.05db65ec0.0_1641489198661_0.42281767602314435","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/theme","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aad319e6a0abc67bd31936e8b5a362ca134a72e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":42,"integrity":"sha512-XIyqqOlP3sFvIOAipXPPbY5oLi4sKmj2WAp66r5cN0hD1V/YcCL66ZTpJfHN/C57jPkgGxbQSxwjDcCFRhdVbw==","signatures":[{"sig":"MEUCIQCxkRawow7nTe1LzoyylM4J0uicvHsmglcNq4vZUd02bgIgGtWMAOz/VKRNCzgunVqEetr5aK61gG2sdyu6eY0mLLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GOCCRA9TVsSAnZWagAA6KsQAIF+gp+dKSU74dorIBUZ\nzEiavHasIYB2wraWtMQBQ9PKErXnpu9it/EWoyQL98EWF2U290ZxNmQ/xMNZ\ndQhotemTg2PHSLC9F0xkPAVxjeGcRueXQeFAROlaWFwJs2K/FGunA8QOKejM\nC6D+nix0+LEtVCzqYJGsvVER8PRJyqAKbLEaovNMBqAdSB1SCbDrBr6nbh0B\noR+0FQkSucVZs/yPTw/OevmG2JV7JPeIa+loh+sIon9svMGw5oSnefIMr6u2\ntz6XdZLfFsV9ZSzgafuqrzvgy2d+0+9YA6Ny2KHICvNj2hBgMAp5E3bszkjK\nG0ALcF45YM+M85pzJJPM/eKM8yml/QgbgaSVu00xIJgOjhl8qnjEjzF7kdqQ\nbhFT1RyIDSWSc9ZBcR9eAMiBkfLisDly+DGn4L3TJ9UkX0jxqDPs9Rihm44e\nViSjI5EZdYtOX+25EmM3WoZSlKeICD4HaT/nlGZi2KNsOQlP1BFgHxRXObFb\nU4x5ZGb+3ObpFodHQxzeT5AGM4M5c7qYrsLmaT6e9uMML/rtU/MbFqogljZu\ntOYu8RBUDAiiPQbm7UDNThsK7BFBEebf11sBgy46Kd1yW3N6u30NRKYFQhmj\nnGMJMSKpAievDZOP9cjrnGzFYicaXOBRoYdMdrOowYNf04VxaKApVgg+3/GL\n/1sw\r\n=uzh8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.6ca8b8f85.0_1641571202638_0.47473327031859447","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/theme","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7ded85a84f0b242ecd9b0f6ccdc2bbb28687fee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.173ee7a7a.0.tgz","fileCount":42,"integrity":"sha512-n+yzA8rT8M9yo52r03QBYjslqEMmHggVh8VGwDpt7duGFkcPSWygwjb5RFvw6CWlEW48Fomw/33pjvkxTQ65fw==","signatures":[{"sig":"MEUCIQCQ4wbnR/SOFQYxCh01nk2+N9/EZxaFkoks9BoRQffGpgIgH3HhUNTVbMykyZIQczn95dAUcv+MZ81fG+0t3HbQp3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GR+CRA9TVsSAnZWagAA/a4P/3XsvLhDEQaoslMXYNO5\nfKqQrA876hTIIZsv857wRKeKZCULMHmH78Lz55ukAxufa8dAShutVsOFd6xl\ngaPi6xuXh3zsppKj/W2mioHBl+yTo7bDjCxs9HnvW0R4LLu4F2v4iNtmpaFb\ns37bjmPFWk7dPx1iUlEC2kVdfLGM0JHhSyteYjIeIUr9gJ1Bad253tisUZXv\nkfFvcKNc+IJm78dkFGNWSFl0mdwTWAxpx6hZnsMe04tZEHM33u4Doulbg05f\nqAYU5hELqMFf6ycaHGB91PwqqMqclaiD/CMHpY5yIJec6ojoed52bXl4Cp9/\nJE2gvW1FV2jvxmWibNp5V+QASumbvdMno09K7C867XnIY/7tagb5jXadS08M\nGTb6akV0Jks1OjFhL7WbpyF8s1e59An06+tK0vvY6dKMjsW/8InvOQBuYLtm\n+wIm49V9CzGwfOGWprIo7jJlphqyN8X2MMeCOk++rHnuleTuAFpompiv4v7U\nj9EnUMBY7frYDrJ4sDz9ObDj3laxPUIGugXkrbfDMgmm5bKQC4AOaGU0HZ/p\nERN9fIiNUcrIIHr4DhWG+YOBURFtx7jPCyJOeu4tT+GdwPmsayOXNF70QYhW\ng02bAbQEyzxGyjdUlNM62rufGJQcJfl8OrTnSbwbQoQQuvYTVnjmV5d9REoB\n85ly\r\n=pDRG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.173ee7a7a.0_1641833597949_0.03898647313441739","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/theme","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fde5ce15ad869050cf8179b05adfa093225bc59","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.b704e4dfc.0.tgz","fileCount":42,"integrity":"sha512-4zijC2gqjOYIP6D3gwtWGfm2SeCY7BIXlyXOdkWHXGz377GScykpPBCDLUzYTHAdHf4i/kytCyNPrJmqUjxQUQ==","signatures":[{"sig":"MEQCIBMLkrxbIBYlfqvM7kj9QQJw9PRCThd0Av5zeE2ApWJ3AiAZassvRXkHa5NicwZ0r8YKYrMCbeSwqlJ/TkzyzgUMpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HunCRA9TVsSAnZWagAAaPgP/jLrn3lo80BaSqfmPJDi\nYRyoSSRahU8xbLAjnWoS1/bRhdUsfmsQdSSFJLMSBrnLI1SecI6+ZzzYnTQj\nPh2eL6nw1Zt/33lv6Uy4wXMImZ5XwhtRt2QJzolqgQY+tUWvfVfvcGxIf/zt\nzhzvwiYCRQv+dfQQkqxVGu+BwIvHHgmHNnZhqyREL1IWEkzzgQjOu+AwzZ0H\n2o1eo5/k1kbgsXiDScs0z9wxajeCTVy8SvXrd2zWSy3hrFx8OTHHyitPAZ+h\ngWTVOuKDrPAW/1M7Pw+mQtnmbs5gA+kLqvyTbnT1nq8c0NiC1+GWRt/vIIZx\nXXPT0YHPK/0N5QlR7uI512j8gyqPwKoFIqF0G4P0h2Xb9ygAZTy78MtVtl6P\nRIDodWqYwp9x2y620OwfyGicLVkxPtXG+Vz9ByS7NdNkfrbWbyMQIYBKezhQ\nXATBwi8vIQMMUzteB3ApuLI1i116ZSOr/Jt+J8i+AABAmcWKS+RRkDdTL6VT\nD0FQX92Q8CvtqVly6OBjV1qJTYhnOZEkfbldOaWAJM15zP/FvE+bnyxkqu+S\nIEmSDqLPj/G85H9P+WVzoBgb1beDbRk2wZr6Xw/bA6M+WpkES/5wRHWjMF8Z\nbp9NjmOtR8QqmP/sxQ3uQd9DHIi04AGMUk4D4CpMbpnKwYaNS47J0H2DAO7f\ngUBz\r\n=sgj1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.b704e4dfc.0_1641839526882_0.03458860610588288","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/theme","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45805a94ed4ecd834073f946dc332b08024501df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.c14e977ee.0.tgz","fileCount":42,"integrity":"sha512-rwgtTNAp+Pw6KWyEgGx1QAIplRtlOkBLnqwV4U1QAJfddJ1Jlz3CHdVRv2gxNRxivZCHKzDJzJfRTev+R7hlOg==","signatures":[{"sig":"MEUCIQCNa4+RI2EEEx12VrrpX7sT/MgTMIpS07tqUJTP+IbrnQIgeqYE23BMEQpym2HGkRClvc4FSSrI0/BN19vuarseDgM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3abWCRA9TVsSAnZWagAA6YgQAJBU3m+BkFkpoBjC7G4Y\neYAMsCURluDPkRDE9/jdbHoNwoByUzxmKZPLR9u+VRAvhROLIh4oz6MHy6YO\nmpvVzixNLSYgoDKYmIOjNtaf1ZkTVEkCTwLQJABc5pkbEBi0fd3/X40j0k0M\nH7G2eIIlujwUsmFXVYQGjmsBl5MEmElBTjQP/OGq7Jzz/g/TwYMe3GH8rGxW\nX4EdUWWQPx/5ihyPUvJy8jfVUyBlvrF7GlplycAZCQjqgmwn2Z76tZL9Ju5X\n9HNsA5bVydTKF6YoM+Qt43tdUCad9dtbtD7fGMobBxiKPFRXNEMPYjHIQoc4\n5SDmQ+u9XzfOojEat8GHTe/6x7WdkDnmTLwCsMcngfpQRepvkprLSvw8ZPCK\nzgiyG6qvz0xhCPEjhJxdzWwWilJUuGmoiE9RNOdPT/kD3QW6NQTR+ktcPQJI\n92s283fmDD8fOhOoRu5BkeGBYOub99xppylAOb43n3POrXXrcTs19nf5dfan\nnoflkv71fapce6xEmXam3jRvI4uRx+GeyRBgPLg2WM5vX88DxPAGWaoHhdby\nHe8tqPbCv2moT4+ZjBJGN755rH78AQifOjaDt2VHW41WdIM/C3YjnYBylD/h\nF2qSP17cTNCUyWM+boOQTXO3xxpGBEqT5zMQ6zcbKut0lT2eNRYhmREPwWTJ\n6C/0\r\n=jaIQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.c14e977ee.0_1641916117987_0.6347677798128766","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/theme","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc0a42a04ba5f9b071d384af7d7d6d2f14d53f8d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.b094eaa4e.0.tgz","fileCount":42,"integrity":"sha512-nPpjXtAYdp0y8JI8G09cfdlpG4xAnJHsJ8Um2NTl+JxK2QAxfqvSoR8j8GUI7sdJcBtwRDcjygLSDg3J21R+SQ==","signatures":[{"sig":"MEQCIEUG25/HB2R7xvXftwCTxodoXuulhgGkyHj5TNJV2NePAiBO/3OeuW3jCidt8Gx8tlootuf8xJnOXZmTV/tyhpA/0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cPaCRA9TVsSAnZWagAAEBQQAJH5rC2yytHe4LoDNHdc\nXBYo6kD4D162CVwpwmaY/tFLQgGhyO2pZ2jBzFcayjOYgYnJP/ULVA7BQA/e\nSI3R4O0MBVK+YnFpx8jDqUM6WvVPBjT51ZyeKewIvtJVvJqfKDQBXwhtvx5g\nMyZjSX0X7ZHHhSvJCMUFZ+TSy9Q1+tpuHn05XJask8v81KwtMTbuPb56DaF3\nk2q24PvLsAS2kMg6ngHvFSASiZMmSa5X5ALaNi1pPBBFRP539UMQfb98rZbk\n1dm7uxU2rrtm4ZswodkAA0Mgv1mcQfeKqU24GchNGvCAy2S+wmQoMugCM89h\nmPBLpz79Lu/cukSfyCmynF8dPNFaKzcgp4ZQ+iqJ3nvOFlw3c8LRkEu//ohb\ns5aHj8g5X4RR6G4hGbboLGqdMLd965v/n5OvzA7T7m7j9t4moNVY8+/Djxkl\nbB5cdE9mp/SqcRIDwM7/s7F+67ScgB9XX7O/vg7r0ZFg9wCgmLkfY7BHSBok\nKhXtp396zRNXNE1i+P9dNBHgFLY2L4x89cnhhPeVxp7phdZMfanEGJB/iwNK\ncK/VOgBjKGQYh8rMZSYzD8Nu9y9QF5RiGBRqerchRn0jnlWDWFW0+1DoohoH\nJcJrzL5vW16Dt1iRIDqNVJIcKNiP/YV1Dro04oTOo2ghrOpQK32TKPW5ny1+\nKUg5\r\n=twMK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.b094eaa4e.0_1642185690587_0.8757196496948716","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/theme","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.390220e42.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bf91ca5466ae637fdf2d80c5ed78d9e1ed400d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.390220e42.0.tgz","fileCount":42,"integrity":"sha512-JZQ4S7vkqsTjCWwbldFZKCO2dSgMFjjsuY8MTLLTFB4Vt+KKd2HUAyY6FNwDixFz97xRlx4DOH5uyCeESKK9cg==","signatures":[{"sig":"MEQCIFYsKGNnujnjIurzjCb+jEA/HhjArk1zMZhMQtsYKdSGAiA2/1GejbcNi9c9rDYn6CtGHU3UTdYFi54KJKmwo/CHsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z0WCRA9TVsSAnZWagAAeF8P/2KOW23kKIaZFs7NdDjF\nYz6eqO9WCYHfsAxkPCck7AQPxRtuTY451WU+KSy3Ygx6pZWWm65BZ/BY8yzq\nEKeC3KXWBg5nEL1mgPgNbY21wk1s/BCsjgDceqPP4p4+tiVsnfv15JuqBQPs\nhaqjXAZEKxyTvDHptLeNVHSMZ1hyc5sjmMVgaS2+3x2NKO9rJTyHcKI5S+yh\nBS9hqZCJOT4phJWsWzZyUPo/C0/dkZp18tye/0992kkOJH6KHYkLgeVtDcFx\n2Bdn4p6aRAGgP7LmjLvdZsmxWwWUFScxAxhKbRj2Xyr/Ddnzt6IUrqsHFH23\nfmwRUpYZJ3ExfPGr86X2KiiYO5r+PD1EnqHAndyJY1la+nPUSCTGLmFqzqeW\nr8qNeP21VH0+rx6jXX/ZGBxYcf6NhvV3312PfC5TaVPldEh5Vsl3umBLYyya\niSL3RfNfky6dKo6zIs5juu8d0SWbIwRAi9+KQO9JnX09YooWVMuJ4FFigVLW\nfhKblA8PiEeJsCVko5B7l/1KKnGdWu6lDFrEj+X0qG4uOswmLAiBaP1qnThs\nZ5fa4CFOvjoYfXMCXVcGd20PjYg8lYqGoH2g7ROvRO0NzR+kQ8ZXDnQv8onJ\neVMv+wz7bjACc0AgbIzCg9IQlUuXHPHGyBpfPCbBdlzlZMUnKJU5suRbjCkW\nK67Y\r\n=IIgw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.390220e42.0_1642437910110_0.37564137263793795","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/theme","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fedc121ec13d88c783a6b2ef785ad5036931c120","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.4b5391f8b.0.tgz","fileCount":42,"integrity":"sha512-zh197qrpma0GolGOfwWsMxJNQVqR1AYQgkLSlM+o8CHG+GeX/vymYOXUibeNrS+AMUv7gXmpqwcfXIXO4o2MVg==","signatures":[{"sig":"MEUCIQDR7RPt8BCvsebeKEwUAJ2bjZ6/931LezChlA9bzcuZIgIgAWJScmwbCzzuVrpDERYSTR0mdPNmOOxgcqN+oUA7rI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KQbCRA9TVsSAnZWagAAtJMP/0ygzVud5heGgvQuBujf\n2VSfIgLlRHKEMSvTQ8yNFNmH6YCf1eX9x5XZI+xGujaWTAjcHn73x0j8cN+R\n5JIDOl40g7CCoN3YnmJkuQ8Q0FT5oy9X0T6z+dWN+gSVJJXUFABwf9KxR3n0\neoqSmZUiilYv9AG/m0BUjdQMrLZ3sWGcnJdJRvips0lXNCTJ7w4fK5xtF43a\nWMILj+JWBmEVY27qAkX235J811n7abtUZySWAG4ZxZjQgviLaLnftrJXOV29\ntEeO7sWy7TEUhF7Vprq2NKgONuqS69UGsbXysSchuDWNMOJdkNahFW4D3gJw\nhKd8KvHMpQl1Yo1A6KNQVS8H1biZlT1LKDGzyHODD103TxW+XyS6NV1jurY8\nKyQbemBUNW+GJawK8BXRlWiUYwQ+DwdgpvVuYnWT1P3yuAifGjat91nUCRBT\nOEX+zcX6oNOu3dMazPcft5VWMSYpAMOkydF9hQzbVujbt2r7OnvrLx2evD5X\nDICMet7siXxQg06eR56/FEdBDVIs+EKl1xAosaPeWu335qejau4Z4YvPaptL\nKoJ2G6e+KaFDi/+L77edk/1ZMywIXpkaw2F0GE+BabqG6jwokH3ykJe1zibn\nBvXi7JCBpSb5Pp/lXMbfYz68oeQknOysZxrnST/rCG06XNNfC7mED1dZeLbF\ndNn1\r\n=Ws6q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.4b5391f8b.0_1642636315711_0.2766316716461188","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/theme","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c15fc770ba74d5f36ede712d829d37acabd85ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.cef6bc623.0.tgz","fileCount":42,"integrity":"sha512-AIuegihKZehkeb9lMZqPV1aXhX9/zbRE41PWz3+aT9zthtp2XZJ1GOI2sLGWwKm3l8U8beQzzqqNwL8GbVD37Q==","signatures":[{"sig":"MEQCIGICFdsXqi9Flmre1MzmdNTQv5ed+jWn756Idt6zb38+AiBXcxuZln7s6EHTjS9yW7VzPOEIYieLmUnMmwnu90Q4Jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KngCRA9TVsSAnZWagAAyEEP/jCEY0uro2+5r4I4yjh1\n/qXJVZJqGn79ua3l3+pSMjBaE/LBDRINcTZQAynxvOrK2lM4bIvFKPGOgHc4\nnJyLIrR29FzUA77IS3H/uZaxEHG4mV73MQRpWWehfFZC1JUZJ2Nu0Ri8To20\nLRfYv1vARTAooAAVjpXYINqy2Mrf1XU4uqo4sepPbFXFmSOtqAeJG8pBrbqx\nq1PsxpTeBv+PlCAczrsh70KKHfo5eBi3b5EeWlQdmhIFJ5/ijIrHksF+S8jQ\nq8C7KyGKKZByluCl0sQaSspBubRnXYkdo68honH1rmGgfwWIk6cBns4YImh9\ntqrLIvPN2XoKYALCYytsK6AlNZksiFkjR5FSh3gdgzAbjnpDd6DhowzmxqoF\njvanixUda/f40F6WYNrrIrEwaSnDgX0OtP0x6c4BS3XLLqnIb2esCK8vybUM\nSSTMNxWDmyVmlYcA1HB+rmq8D8Na0MI+uBKjpqbePbvvou7wYs9iDWq/+ogY\nPU0gkMKFvnaIscvgH81pgZFHJtBsHtiVfS0Hoy3sn5OUsD+v1chU5LXY0j/4\na7GQCvi3HIUPXr/yts+zPVPkY3QRAmfUvEiCuTMaZlLS73p6zGc+Iv+bE1Jn\nskCGi9dCGS9f0y2Wip08b379q0GNgmVvH44nquZcmP1nI1baqC9T6FpM1gmh\n3SGk\r\n=1XV1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.cef6bc623.0_1642637792166_0.8943868779103619","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/theme","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.0379179c4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cecf7eaf6344de7959e04dc4d9e29714e123de9f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.0379179c4.0.tgz","fileCount":42,"integrity":"sha512-5NmrvJbkFf31xG4/Tw3JmYZeV8cRbaL1X+WSm4iQBX1i6o608a/peS05yK5xUETwvELiNRU4YZw/42O9LvNe1A==","signatures":[{"sig":"MEUCIQDAQHa6XJ/ONmJE+zRkmQ/0surxx6udlLGCPbo0A74oOwIgbYk5MPGA80gQpHfTegcUGu6o34IVy34wrSir92gBmyA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6a+tCRA9TVsSAnZWagAAGhMP/RJT1zhZi34faezSMBvd\nn5uP0VgmNXbDW76tg1NfD9667+0AXLKahaPOEk6Tm6xO/VpTqFglSxP7oUM7\nljDl4xMCgDMCh1DNqynG+yVtH6zZ1iaet+UBFflLIjO8N/8aedZ7O5MHVMEP\n9+ueErmBwIi7bUjWrG6JxnzdL8g7xdTjnR1ocb/sSWP51u7TQrGv8R1yxuVh\ncLirAZmrN9yL/CqdEjkelZHW/0JMuo8GUpgz/OSICO+6hVUyZZ+vLNzRPVwc\nru8GQ8w6tq4wX9B+aucIf133QNKfCAV2GZ3on2JK59shzFiFWvObaUevWxSc\nBb5BQU/s/qypDdajBpDT2D2uSbN9SdO5z0JtKvalPi45kOO5itPoi+vgqUZN\nV3nbxxaENfabl1VnAVEmOEaAaejPjWI/sOjGnKqBjv6B0yBUVi4Ijxx1fOpN\nIzjYKQ1Qj9jpHT8/+w8ixC3cClo3vVELzIc8zhSrgDRegd3/M1n2PqGllBvh\nondKeWITO/5OR5TyHcmzuMDwoJv8NkKjU6b6tzUnqo7NBvPl7wGbOfre4ZO6\n/fWlTwsr4fU6wRXB5zv+nkOrjtcx5XKapXSX63q0tDJsuHM2qvy827L+FoZ6\nT5OkJ8RmawPmrBmHoPZDRGNnac8cHRlrakzOl3o8qYHz/PTcfa24csnvHUfO\n94b2\r\n=3TR8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.0379179c4.0_1642704813122_0.0961447829954738","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/theme","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b46ccf1b06b0009979d9ecc3bee2f224b3a6287b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.e62f3dabf.0.tgz","fileCount":42,"integrity":"sha512-Nck8ISakoPcL9JU3SjCw6X5gCS3XBjnBq1LUj49uhz4i8hi+hp+IYnfgC3oB4h8szDFqMHgh5m6ADuL9GK4pBQ==","signatures":[{"sig":"MEQCIB4FWQaYcsc0UFBU6q6mKiv1wwKD1TyySgBvCfggGA/GAiB3ik+plfoU774tkBIraAY2Scq/1I+OKoxrpXxUMf7ctA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zuHCRA9TVsSAnZWagAAQZUQAKGXSOmLk8hbkGlTL7YF\nJvlJsfPPaRQvOblM9lSJU4BOmVQunEfBAhnNOk4vY5CtVW4KIIEFkpOYfSgA\nV1cgC4Sf74ERvHJvpOHn0XlLLGXiGxbExBrDHx08tPxVH1D90PQicsc2J0Mm\npKCdNZ/cnhkO6efr6gcOWFbWOI11oDwr+ubTxlYRcDjiOO1TPcSH88cicwFf\nkHhBo2TVfwHkstI3eCXX1+QdTnyQ5ZYiXPU4mhIks8eymWG0Lpnyq6IK5V2F\nwZUhC013gkXfXZu8gVt24IAt3Cuk1cw/DgpIJS3oz70FNlTFQeufX2iaQdJP\nkHOz8vW0rMsR+Ga2R+7R22ZhfYDbDi/C2hiYV4j/Um1ZUaoAib3nVvMbuhcw\nTf8Y4qKnhck3EYNI0fPSLD6ZEWdiiyN86HKFd6UcmmPHUjmJ+dae6vVb7qTR\nmKVoLCGfWQFGBpzUeLDUfI2xVqC141CBS3/JRmoSVoymqRAvF98ydr0XqiDL\nKeANkDjYtMuO1Md8EdpW23NtHOjguHVczSLUlHDQkE2oVnOoLsR153l0Ehzz\nftTz4vHMx6Uyn9zJBFJ2GWlSxONNF6mGL2UtpKRjT6yQCBNw9ox5jh+SOG+M\ni/XR6JC5MyDPesmSxZeW7ZPMFMjjgB3r4LHP3XF4BT+lT8e/jDyh+tUNDuXi\ndALB\r\n=/OKH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.e62f3dabf.0_1642806151707_0.4205631007309689","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/theme","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cc7bc8509fdbfce841df483a420499b8a35209c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.3e20c1de8.0.tgz","fileCount":42,"integrity":"sha512-QL+kMTcVBlLM8XCErZu+gxi+TgzDHs02T6KwxJhO/RwzPMMGzElD4MIPdIq94/O4bpXq3F2XCxZuqohGRAUPCA==","signatures":[{"sig":"MEUCIDrqEZWavvmI+UyDwsr8athgazciXYr/oZ6YkpvSv/86AiEAsp26wISsVEpgUiEFX+LnrHJIrkvXy4kp966EWJ8kVzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BenCRA9TVsSAnZWagAAhE0QAIbSVoy5q7wZuEpLAT8C\nqAJEp8gZxqGjQpVRXIh0WYZnVCE0zsL63djuOzpSTf2SV28R6RSjr93EWtiF\nA7milzwvQziILA9tqLapV1/2WoLWXe7Z8sIXZuD1bN3IlgBa7eKWZzhWBhtk\n3ZCXcXkvR774WZP4Ttrfvr8JKD8yfvWD4GGF7QyEzJCDLHM1aeAG5/YL7rBN\nJcUTeSKCUXFARLckGkDQXmXmz6DlMn2ORn3gL/gzUv8Beh9HVRHQQgUosh+3\ntX3JetcP1a5ZvPztCptDD4YBbLjgfZ5SYeicVrtGXRvOY0l7G+vHCflJsCNy\nxKvu61WHJCPN0Qq3r5VuUPQ3yY/bXniwVcgFOjr8WyT+1aRZuo75SeHr0J6F\ncNis27pVGhLj3VC0jH0HcnIPThPcBftWqHEgoovLeY9X9n8edANybPYn0BU5\nF7iC6Wh3aURFS5HWI6wyXZ6+j0yuOGPkYBMV2k5f3bZtAfQxgOZPvjEsbV5y\nBBksmi+ngVrCclj/EYz2bu6sRXqoQPkAw3V7CbxyQZAGJZXgfZ/OPnkK6Whk\nVfn+BCm0I2/yswi9Yb6+Ak4rORG+YE4w4rowM0yG1WzqGzPCxEI5Gho8WzhN\nHDEcQo4VV9i2oL6wsahdovB4L3kF6Wqy+pgm63Es5LRpQ09xkDDRBLBOmFoN\ncUiD\r\n=3Uec\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.3e20c1de8.0_1643124647109_0.018125594769348607","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/theme","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10fd7158947443a3c5cb91afdd18616fe0164f3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.9f9d928b2.0.tgz","fileCount":42,"integrity":"sha512-rvmAgG52gaC0wd0BQVHRGZ1+E55sso233+pJDN7ksyTNuaOkcRYcrWP1QvesfLj3VVFofTDhxGmDJ3qcH9FUOA==","signatures":[{"sig":"MEYCIQC4oz/WqQTPNle3/KlcCPVN/oQBdGlFVQQ5/QJ37sB7WwIhAPjKCmGC0RSdw09uUR1kpcMffHRgyp4ZWctr8Gf0MMep","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uCACRA9TVsSAnZWagAAVkkP/2tXyI8km6zhotxOmG48\n/G11QxF1QHkv92vqGx4HizDZOssmxYt8H144CsgvHGdzL3lXptchL0q6Y4/w\nXHhN8cUkTPorexDO9NAJbQd0Pmo9cPIwIiMgulCFwLb1JWBInpkRVE7BUU3l\nXPbwY3NBJGZ4BTL102JuZULSr01E6ss/9lf0h/wEKOi1Dp8MdzPxNHnxf9ce\nwIMa7wFX04Tcgyd0ZK53Ealg69w3OKZDQXUrf8VQSg5VafqAiI29sMq6r0fG\nuMjEKRLa61lHW+ZD4RtSYL77sWCnTmZPpMXe1aO7UoVoLCOCceTzPhtKPUFf\nXYZZveKBp1Yg+ZJ23+XffIt8Ge+k7RDvz8crB5qV69763nt9qR4Gb6D6tLU/\nE4F2E07O67TzawfyKwgYqgl6kkn64zZje2RaqUMJfLDPkgjGRixlBeCLjroH\nro18vPPp9T/UpEqf9bRNVaja6q4pWXs2jvHQFoOleycZPPTbAL2NG2KY4K/X\nIlQtbUNUPcrXG+TqV2So4Xses2ACe3qKBe24Ks9SGHMA9S6/RgvULCLNiA8S\nA26D23Z+FkvwBDXOhtSOTDrCNr9Gd8X4Ex8JeNQJobx3dD04ydpB5jUQNoI6\n+gJ/lk5YJNCTZuVn1TZexCpZ1jfObZtAudBfPymOIT/8Fw/S3ZmEZqxzzvTW\nQgb9\r\n=AYrE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.9f9d928b2.0_1643307136344_0.7130098347774949","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/theme","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42c0ce4e92f2fe6ccea84f075a8accfc44ab4ec7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.a2bcb065c.0.tgz","fileCount":42,"integrity":"sha512-P4tao4o6oV40Ke0pBIjkxhz5i86IM8PgS3JPrM4hptCDeTq+Xvn8DI9+f1E33E0zsQ1N0T7BEtHKp/jWsCqD2Q==","signatures":[{"sig":"MEYCIQDAuzU26FQF4EE6WXf9o7V1Vi9drlCJkHuQuCYccsqjOwIhAIHhMhqwYuTjQF6nSlh1ba40tbAzeJ/25SYzWMO7i/3e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EWvCRA9TVsSAnZWagAAkg0P/2MApu2jeO0DzLEA6nau\nV58+lOPFeRelng8Xzce4qGZcaLbTfiiRZMA51mW3+J2PxmL723BufbwFktes\ne5c0qgUYoS9LL19FpVaovIy2kLeXYCDUB3skmTzT6+hI7KdFSsSN/T13LHpX\nsPDfbKKzC0pRhJtfohPyr7JyW3MacgunhlsV3YZOGkwOO0gNGRxI4qZZUiIs\nqQeRDJ5olFguU1tSZalDBs/yxh3RV7Wk+7ZxljMNs57M1QXeGw4fAxuMSyHX\n4ZlYu2l+8xWeV/sIeHTGGdScctltQ9RVyZefeoDRjqSlGkqPF2CdC330N2YX\nKRs5bRs6sez6Mx3OOs2uV5eVvAn36jVq5E04bvfjADteE2HjNAA9B8tl2JQ4\nICPl0SAgzp7mN81KO94z6uZEx6oMLht4aaDZ06q3ecBH1sDxOml5FpwWe9dp\nLNK6mASc/KkNUq5/j11LbnwbfzyTZo9Ed33e9423Sw8xrEa1pAaBuOzODS9o\n2x5D6NcIhe06W+HWqThLgOUNiZFe2WuB9jbmEYDcP7ssIzeq0DorXO79PIKh\nR/kd0p3Q1IxdViMTJnRw4EeBgjc6qL0quTIJs8I/pihwMb8qmwxh1L9z/fRE\nO7QQ84Bp3UMv/NXTFfcj5/JulxjUSVqnnymNJ8RzER1s4pFK+rVy2v1WctuE\n+zNV\r\n=yT7n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.a2bcb065c.0_1643398575175_0.9560843575387798","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/theme","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4da3e1d204ce1a92770ae5d1a62366ea9cb3b3a1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":42,"integrity":"sha512-5fhpx4OSZ9IJS3hpaaNA5gQDeHtSTUZ+ZeCMh/Vwm8KjUTJWojjlftMqiU28HRxUvFrg/JcE8Ozn/dSP5hapTw==","signatures":[{"sig":"MEUCIQCAS6OgavpA/q6aA5/BcfPELvRJnCfb5hta+25cN1JkRAIgaMEZF8hHnNxUB8/ecTUmaNqmu7jmye5c9baZoL00Puk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Ea0CRA9TVsSAnZWagAAJekQAI0VgshPRXFwpdosaNgm\n6w1H3YZHXB3JqLesihkzFIByx1EML2AyMm5peVaAuOvy7ocBHqUMqaZNjHKq\nxcPk4I2r9C3U0NJZFGyfKZqVB8h4MemzNKrTfNDwe8OJmdYr3Yt+V7mQnfiN\nszRge3xXX0O0I3I9fZOcNdJVRXXMJuUqpkYPjxu28JKJAG55XkCbCmqe7k9E\nse6ttsDIv5+5XD5G22BKHDv86lF4ks9yeGAAiYsyFvjBfzPwUt7b/tnZZkHZ\nJlRPwbl62ax21iT4IlxcwQbtpneGFX2IvVH/h7RorKvasUOV3r14NVSnWDXE\nMu0fUzOWMy+t3LDQUL0JGZZwEhYO4L1oKk74sOdCbQ4A7Bph/c2LfPtlB6I8\n87IwWmZbI1p6UjokBpCFeHhOsNHoAHnTonbQHtu7Oz0SpyY4CECJ1/CNbnKg\nzGfa9gF0b8Jkqrn174MhiKpCUN3rIC79E/4QsXImYYAcauJPa2QATKDgItHv\nk9+DHh5BEJ8yp441uGMiA7YAGms66nQ7YlcGQ+CuvvSj0LtBfDZz4IhmjNxC\n2Z27r0H+SnsVh4R6Ed2tOcjE2/1elRdgRKGlxMelklnf22MKbLjNucaUyWtl\n+bRtCqy9RLSgDq4yC9K9SHyM71/62H3iYNM3Z61EvhngbN9a+k/UCLdaqIm6\n0bX2\r\n=ki9x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.4e66fb2e1.0_1643398836422_0.12493328965161332","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/theme","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6932babd14631349cb05e9cadd92dfb3bc8c5183","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.9736ddce9.0.tgz","fileCount":42,"integrity":"sha512-poN+tU+AJkqCrpZhIgqV8LhegKxKOM1sKD7THMSwNldnd+RlvBMFd1t2Lr3tdoLRl6XxM9fUAr+8GRLM+Ep61A==","signatures":[{"sig":"MEUCIQCvb18tXvYqvej8MnMURTknXcxm/tVPLChHa032ypfceAIgfvztEUr71Hy8+l0r7JKRZ0WkDKuipA1FWm8IMO6VJSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q2PCRA9TVsSAnZWagAADB4P/3S3cXWTUe0+P2OwYOTk\neKVDSdRzE6cWovO39+gJr5ryRdUp7bqxDTi+pE95XgTU0fX93kYZjYz5YA9Q\nywtC85OZVQLCr91f+qpkdfzsNZf5eIyZZFwJ0OlLjrR65bDWJlPWC/bt2uGg\nI/FUKwLY3XnkBNJjlWgJThreDblqCO5y4nqoO3WJ0aWCDAFit9YoBfJxkRo1\naZN3l0IYJKWTvyEjdm7NFP9xtLsN1H6Vv5/yDH8owq0+LUh5d94ikW75/GNF\nWEthKNHr9qkuQs4Nw5SL34//HXB5vEVNfkBsemN9SqqyzcbU1ZEG5h2JSUGK\nJL9acT+wlSBL+25seeZIisYXe6toETJJ+NcVwKZSguifOlQFSdQmaI87Bc8L\nSgDAaCXMoTYyrnZdSR/EMFuVLsL7CMDaYmEvlybZbtfO7v8btSRJV/LarfRv\nMGDvdwq2pO6nFMUXnbvY4uQ7eYYkFKlCNtmUzcxqq2ihpPccvG52EZpClMCN\nbzhnBHroX7/oyDzskZfjE1b4xPssLLHx9t89G/7prYBXTRc9nauzj/gedNUq\nlErkMUyygbemwrSf4D5NdCHuaL5bclHimGMbmqJXeSYk3BjTqmUTiUUHdqAw\nmom1VZwv4GfP0wOIG/zEZHtUhEDJ6BYh1TH60nKF3W9+yWEN/GusJ8HgTAKE\nFGZm\r\n=AUES\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.9736ddce9.0_1643449742870_0.5501628762412782","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/theme","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"643e896d5bcfce5fcf5b50760bb11268b3dd0ad9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":42,"integrity":"sha512-1PNU/cPDgl5uLDNN8kV9iUO9AzgZKP2yS9Zb/6dvzYHqbLcYQ/qTMWHZ86cG2XTJtt4MRifCtsaWauRZGGqTQw==","signatures":[{"sig":"MEUCIHfNvZMmVkjJjTrHVGUNfH3GstJJwTlUFT0haYdO7nlXAiEAovT4Zf/L5ibWIPaqf0qbP5OGzzQqAB3Ac15b38WyvYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W6+CRA9TVsSAnZWagAAo3oP/ivSx2RFkxD/tjq4cCmu\nOEonLSZgGJ15n+mksMXZfO63a17x3Fft+BwCQyRzSEfdbeuROHMWIMwjwDAq\n9IN9tFwWkiSPyCcAeCm5sH1Mlo796ofNTiDIDqQVXoEre5im6fTtDFnBcsou\n4jXFeDMJZmD8+ZW9K/vdVU7MiRUzMQAAGUT/9X4jFTs73U598KX44njyxJqJ\nFiiQf+yzelF7cbHaE3NLuPFYMlXH9J3RLkdDi8NNQldxhkJ83oGAND1JxW8S\nMRCArQ8R0bqZityvNYKaU6Jx8IYAh76mpU6lqtSHZ3d1njHpeHVZ1oX4UCra\nD4P+P7TtYOptk3rAlaapFgUNQ6HmpF+EXXIYl76LcITzh/QL0JpMdKuvCwBz\nBP8kNK52aw3xi72+Pba0KgD5WNtbxN6AkSSwA88AkjLgftsiA1qufNn/eQMt\nV68D+IdK3/dfKUUMjjcpns1eLVybEL/+yy7GdLWCRuBKm26MvMTa3rbj+5/h\nfQCKw2Gj7+Ej8XkplJBZeNdGYln/USQXheX56Dy/8+IKjTrUDXiuIezgl9eX\nAu2uAptw+fTD8iUXHGo02rKu0o40X1/modL3tP5wTE7jpz+HhzBDuyqosdMe\n+rLPtQguESGJ2rSDfdsVPaNtCxQToS9Z1bnYaBQ7Wy797JSBFohzmNIkdsAF\nikmJ\r\n=u+r6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.cc4ed13cc.0_1643998910525_0.48857594905445634","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/theme","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c49a9ddcba08c460175143593d50556253b738c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.dcba26fe1.0.tgz","fileCount":42,"integrity":"sha512-aG1dImqNR9DH2a5TCrk+vOF4W6ouOjZ5c9MYITlSTw6QW43JR9f5iXaiUi2ibM7KOE7+sVOD1fWn8W2clBDCXQ==","signatures":[{"sig":"MEYCIQDOsTK+PPA0Na+PvxDA6Qz3GZJmSx5Cte+Y2QT0oUJ4CQIhAKUufcrgvfGurHRI6TLuYJTbMXeg9qBe0srHxmsst55B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aEDCRA9TVsSAnZWagAAargP/ixL/hnN2gUZBJoyxPj/\nfpWL9Db+l/K6gWVy8bwCsm7+C3Mvc+4QpJUkBHKjBvfYZ74yIqkp+a1Jbmco\nASCxtZiznSzot9HfSQtj/MtZhU3gWMbJVVrGhy705AA3XUKSXOMoYoTI6CJW\nRut0QzQSlOA6CANSMSW//VsfIc3jLPQSlLKVAHRdqB94tx9PP73CPKmat5Ka\ns28GRwl8fa29v4lB5MJbpua3WFmaS0IZFYxfHLqpbAeREqSrEbatfciUZ1y3\nbdOBYWoFGCNFAiOGa76K44ELA0sGJiNmjzGz7YRPOWjbnpqLcPGtoF4pOdcB\nDZ5lIqHJmNXtararFCPSYaUqs5EeliIyPQDMpCSOP3iNz0NfoCMwo8bUqDVd\ncdar25Ut3nrwcLRPhIvGhTMy1heqAsWUpP4O6Zt6LnCKBhYKuKiNR1k7ZiqE\nElQxyKpNq4EnUxH3/Bom9PyIljXZGWE3eWeunASCHVQSxX5LQlqtD6orldQO\n8gA2rihK/PAo9JYgYARz0lpGGGw0MhYkEgUhNZDyjUb20P+PkBiDMi99obv/\n2VjLuPKcDx+N4dw6Nh6q+RZHA3TFEQMpoT4dllTiN24x/GOuCHMWEqZmEkGa\nTYHab+UnZLeOXRpMemah0aiTQsW298a+oHnJKZSvBnCmC9yW/vBntAFceNI6\nT0pm\r\n=1kKk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.dcba26fe1.0_1644011779167_0.5988767961966925","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/theme","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c38c52eb64e8d0a57ed45369c63433a9a4c6537","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.ec54d9046.0.tgz","fileCount":42,"integrity":"sha512-P61evcYVNn9/U7rh51ZL3w4j8HLHb2pc0euo+gVuwgn2AmP1ur1M5h46uT+6JsfFH/Zh3p/KU7Tp41UOMBKm4A==","signatures":[{"sig":"MEUCIQDmVv8zBo7kR0MfGhCWAtQKp/h4yqK94XF95xiEMFNf5AIgHHZAaFMJmvOjG+lOYGWmnFhk9NcHa4O99aDQckkGB68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT6iCRA9TVsSAnZWagAAoZYQAJUlPxUm+v0+xrPqdWvX\n5cNioVPYmvwQwz9vWZxjkSaIrDUo3IP/g6VxZeNXNewlJjukX+uwLpmL3xbE\na0xd3hZ6it7QSYfofsEcx33ROrlUIjL4GMB3HSpy8mkVLQluVZDSR6I1f3D5\nvM73mFE5Efnc+Ze51tWegVkxI/1wrRSveDuXYH3JtI+uXhu77jc+gSMwRtYA\n6KR/rOo7j4JbjmXcAO7O8D09yJXNOD4InvBGm0jqgBEt3PBdFJh+2ogGevjm\nqNSH+PLTlE5Oztt5a3NjwlO9fTMn6pCfw6UCDYzE5SC3SnYgMjUBHgGTb+ft\nrirlRMtdRJ4/N69X1xEHtV9K3iq8R1810vB+JISQAn3fGLMVJXOAxbnidQyr\nxHd7EULnVbpfGMPwJ5w51qB4lWT99E6Y2zOlLiGCO4i9OlE1SYfW5mR0/oVX\nZ3OIDt7+McyQfk3uvME/iDDzdXG5x6TlTRuy/KrImMjhfU6av+b9FNbWGCWI\nCDRq7QHWVjgJqaZzFdnCGg+mLQjzyCNSAGQQwcIg5Jmem1WyW6KcE8w6HhI+\nIewVMcrBALPZczG4z4sYiuX/7KlbG3/Iz3CZAqN/tOHWk2wthpm6+a0AhJWI\nmwAL87eOz3mRDq85kALy+ZEZj5akzPadSz/YzfKpVdAnNbHPrq+0hKuadNz7\nxPYi\r\n=lRYx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.ec54d9046.0_1644248738787_0.8979446378265334","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/theme","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e1b9655ac5a3c214ff9df094568e05b0737b09b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.ea9b5b463.0.tgz","fileCount":42,"integrity":"sha512-sowlWuYvf3SrkIZV0gXeBz0r5C+/uasY9G/72nTvkuMXn+U8c1BEkUN1R4DYXoJusibu35qgk0wTha2AAYkScA==","signatures":[{"sig":"MEUCIQCGKN0UzYlyiqY2qAuBN3qWnMXpLUJRD+kLzdyQVNTbqwIgIkZk+JVOgLx4P81Unwrvo3mI6O9yWM0ZStnNE/nDOOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA/9rCRA9TVsSAnZWagAA4h4P/RKkuRDCNKPYQUKMOER6\n0+/4yoZJqSZWx+J1C+9QSsanHMWW7Y9imk7Kk8jY6713rKlGYtlayx+BNzWo\nMfVQ5CptWyBMXrh6SgF/zV8c0p+zjMFyz6I2ViQY0B+6i9vyl6bZhLvFmTV1\nko2YXwd+YRyPq8SVc+3RgZQYXbf9nqho9uXR30bhZtGmc4DaLQXOk3kpUMmI\neetiJqOFcT9LQNL+Iq7Aps4DYTltg4FeTp8C8j9J5Axine389U4aZn3Sudev\n8gLvCCaYwX69SHuQCBx3aw2IVXMqIPO3jxDB8EYJc1neyBgJwONtIQ3c12DD\nBDGjYa7dFl6LSatjH47F0c0V+Dgw6xFHviSK82pumxkfALc21s4F905HrQ7B\nvt8H29TdcJm5QKYdAnMqfo7cfMjTzYh7J0HPBRI/0atokotF21ZBQ5MxxDxO\nrNE4dBLLD6u4n2UxMUOiUPRCHA38I2PknUd6wCQTofkdFJdlnRXP6eCTbH8u\nKmJ5bc1aMyuZPlkQaSXY8P7vBUPiryEfKWOwxZ6Nwp7hAzJ6F5+ocp84k5Cf\nV4tx7xXXGCV1vZp/gRtQF1N3rsA1ltPCyr1H9vVzCjNqRyERWS/IgkMT9i7p\nGBirCCfkRts1/9thSGvJEcATWVL29h2xogYy9SgGgE4/UEk2wMQaEyGqSQaK\nR/vs\r\n=gE29\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.ea9b5b463.0_1644429163746_0.7226434084751312","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/theme","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40d454f3a876aacb750b9f0fa87ca33cdbdf7f7f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.96ea061c1.0.tgz","fileCount":42,"integrity":"sha512-u1vTfBIi4SkUMMz5xu2olE7L4f2USmm+/+DxFSNEwXNW2PcnDQZdPaR8Z+P3VPqiH6vHQDw3V7qu6ylsq/LV6A==","signatures":[{"sig":"MEUCIH/4+20aJDM/BBs0DOJ2LlNmMOBTtyABnDtj63zrJbtJAiEA1+x+Mv+9GxAdfW7P4G3DM2wdMMANsGQXWCl3jKllB78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA7RCRA9TVsSAnZWagAA9hkQAKAOQK1PLXw+BT+prSzX\nSh95J3KiLsx0hyLzK6Y99Awp7M4UZOyYTWeih2hjpc7afPzyQh+ZhdEK39fE\nsUiRm6b/WT3TpQnugBRvKdXiL7Hh9yyP+SL0n1LlFOPCA0ruIGM7s2rgpEec\n5qPLS7U1pVJ8a9pvHrmW4XDV6I9FHpOwNPGQ2f9Qzel+Ai0n9nm1ssjjLV9F\nVuZjZ9siN7uTzyarssIiPOr6YGCClFYnrMen1IJ8Hjwuh/cWJTFrr1+KPDnu\nDrGj/Ghmuo6uIgsmeOMFuFC/xEL3YwDEGs362pYYBcbo/EYL+ngUfQpAzPlh\ncaTj9E1gVtfKAjfrxWOGSScq6WZymiihka/10UZSDy9YE5cy15SM35RNw7hO\nEhhcm6Mx+GQSPdU+05aXPncczMgiWnzsgrHWoLQijKJ74D4t3hJPHypaDhOy\nmq7x+zBXs2ZFcIGPGgUMqCuWVDw2ondxfPPfqBO2ezbfqw7+uMlnAO75GB3e\nLr2Zsxw5MvhBdY7JK7BD/JyUtWjjdmTMWSOCCWZnpCWrERWW8Rwe71xFT4Vq\nMzus/gwiIz4cuX+qbTXT3JIj+ZM4QJwoAlyif1LhAXyARkEBeL2lhFSgHE7N\nRpfEGb94T4qjdEfpVj106r6Sp9bKU+c1UoIiA7cJrRcfW0Vt4Ejg4hQ7p4jB\ntke/\r\n=vv5f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.96ea061c1.0_1644433104755_0.36961573911508405","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/theme","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.e00181e59.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"873e679149c48ec58f90a004657ef8572ae514a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.e00181e59.0.tgz","fileCount":42,"integrity":"sha512-MoAhN2iobe1CqnNpOk6RrlDdnNyaZbVOiopkCUO4FNc7sOfbJwY5nra9O9+JoVhY+kgVk+gtn9fg2BnNSrOsfw==","signatures":[{"sig":"MEYCIQDci5fgajlmwBAudoHEUAp4T3jw2UtRdxyAyHOe1gRKhAIhAMSfxzyFg14V2LCUe5x85fQ+BEhTW/KSX/U4zKyRuXVQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXAWCRA9TVsSAnZWagAAd5kQAIsWSz1iki2LuOHAPZBZ\nDGT2RVQWZO+r0kypU6IoZKlgf49t6v7ID88y2Mmkr+I41NHIN+CKMQm0d/4o\nZ6QBFnZ0uGgNtvaDsipm8Z7wKTamFFxh9IwieBYaEhVoKV+rwXHV3eDILhdA\nRQ63FpKGuHS2gUSX6COITOgo1t8L/luSSXGwRUQI2XStMNA8lyNQUGA1/k+Y\nlfKpPhTjIte3g1zXGx3M/5sQisz55g8NAfLknUf/S1CuqDl4ijNE2Y8MMBE1\nCKVl8GsnzMrwIO/AyxgDLJMbiciMVpE40LbvN99LcrGLToBiXWbaGJmp0J4V\nQLeeh55oskEPX0ZKdFMsew8ZFObu7snyJOo/dbRG1gjTnmIUM+I+vk0SRRo0\nMF/HEYEvR63xqGVGOyHVh2Lg5EuHtTnVP5mara43yYmleatkRxVAULy9fZeL\nel4vDZw6uzKd3Mr62LuqrPe43/wNUc6ZYLNNKcJPK2JCEM9G3WqB6k1ifpUV\nZzF5eHeAqfARsjFgZyUrhicFSzh4ws6c3KWSi13dqkGNrneWzJcBohYMcocs\njWmw3c7X8VzGsd7gkvw8Q2B5+75HTjoEIj1bGxSZKfA9yuFhwwOSx95asnDo\nmaAD0JPv1hHPOD3mfh1nLiTssNpue7i51Y7SfRuewqxpCIdc+C5bsPYdXAro\n9H01\r\n=+ARk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.e00181e59.0_1644523542508_0.13065635946183196","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/theme","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.037285f9b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6596b7dddbc58d57cd22f5da3663674b8cf4a49","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.037285f9b.0.tgz","fileCount":42,"integrity":"sha512-61DFC/dKoY69NDbIoUk7HXqeadxeUPz8KCZTptqkemUMRQvWK/i/P4lIANFCFJkMWdvYijCTWE2V1HCCmQvX2A==","signatures":[{"sig":"MEUCIAhK937sHhc4blI524X0zB0XX6zw5lQfpy4/XoG1LJc1AiEA/f4u6UEXBIh6DYX3Wnfvfod7OQU8Kk6KSxV9G1jy0HA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqrTCRA9TVsSAnZWagAA6mcP/A9goT1Lq+7EpyUj7VpU\nvBCl3bQY1aqHYvreT8K23n3t2NgV3iVNTvKYjZtXdPgRgaLjUdv97ZO1EOAH\nte7rV/rLsqUUQ28XegFesHXVgbYNkSDTX3SQBU0SSP3eiMdjpYChRQ6amTzh\nfzxEQZLvQIwQT18bYfUKMbfb/il17sz/cSQBmjx3YtFTSKdhf16C8dZL7IrH\nNZyVb2vAOaY9rRhhL9ZyzARP2wAT23HV1O3iW2LmiB9Oz+RKjYCkBTS4yOCn\nnc8ceZvLAOhLIUWRNynN7Lu+mmWPHbz0l2Wp2U791+UtoYdXw+BwVOgNplLm\nz/HNQHde/+pZf6cQwu7c3h8W09JWVdsuCJJvgEiN5sZIpVaAWXvXgSNwYH2q\nZcKRrbcRGNAVZyfULScoUpZuXMRs6dCnZ+MjKjx3xmAsWrND0MK2Hzi43ZfP\ni+r7i80KuCS/2CTDxb04FhXpRY53FzQsOBqgk7Oy9UKoUcEfxJLUkuQ9N0MO\n80doviAjMvf91TYnjOMk6iJt77wMgEThlqHKM80KVWwNOe73EmCgR4FgWz83\nBPY5XexXlwVIV8RIdJ3FcwBiLOQPIznorr2n9a2zXUP/HZ/1OPXCVInjtfIg\nenwzkJXrJMkydRX6rtQp4Trw+e3/SO4Q1RTUPJWV67yHh+/z+ZvM6Ph+Cs43\nDnZ/\r\n=7oZD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.037285f9b.0_1644604115074_0.6503822960670125","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/theme","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a66d76962046d0409eab62b5f6500456ba7d780d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.1aaa68dda.0.tgz","fileCount":42,"integrity":"sha512-a0DIcyLDxAT5a9/TNGDy93pbPFF9FlfoDKyvnJVMvYPagRZ3TNzM2lPyH5bSX5F6a7OaLSFjNNwiPVaE9PSo+A==","signatures":[{"sig":"MEUCIQCkOf9yXUc1qtY6QWjqipFrrBboRXk9mUoi0xxXC5dkkQIgcIgBg0BfxIGn91hRfSWPsCd5MJ2y3BIE0kOJ5OWk1qI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVT3CRA9TVsSAnZWagAAklcP/R4+eyOqBKSJR3MHi2sd\nO5C8yjBc+cMgX3KSDbQAHFUsXK2zRz9PgJxj9wx8Lac5hQDgweE/MrReh2cc\nO/cHP+jy/FdiZM+esS/LXtaO87x29Cc7ihyLvdpBgIoCJS4KvZG5NLkZJue+\nBkiCN/MCn5pLeXeS4Ln8QA8iYXewHu4Z82G079/Nia3GtONDRgE0yFzFrf0N\npnzPwlkHhzkVJW1c0hPsGt3U9GHCh1FsDTHgsogM8NHDY4r7m5sVGIbzLmwc\nmu74ZV+Qb3IIO/VU4B/4pSn2yHu4v+5zvDnxVsqDghrgAzZY2WlV9ZPZe6Sr\nuARbQuBudg69mJLTmFEiTa0ju7ddaRhkhu5tvIhYr8TG3GI8f4PhFARCwLkN\nYGH4bQBNOrVjvV1bZre5l1SXsk8eMlcq8UKh2kxEUIuSspJXb4Wj67eARtLQ\nLeDyLQlIN2Du1rbUqHW7NuOhwOiuy0KMOsSNopYR+XmgVpnv0iHQcN1KZRR0\nFqw4OvV/11lej+SF+3tTRidSYdgrzsX6BVk9FrOYnLG1xQIfwuFAmrWbGxWP\nmM4UzfX8gcAIva8JLRK0p6W9r49VBA5SqFQDccEEnvMBGSvaTL3ZaP93xwqn\nTe+g/o5LeHsp1j1CPO8bFjbb0SLbJeFjFLuXYmsLpYtIHmW4/QD7BglKxcG4\nW+Zg\r\n=xkEe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.1aaa68dda.0_1645040886904_0.5805805557580628","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/theme","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24072a5931039e882937414d6371a5d31bc57bb6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.ab4aba1af.0.tgz","fileCount":42,"integrity":"sha512-BW/XgKYyud9skIKs7+2N+RI+/7LHLlfOyvhlN4M0GgqkldVyDHAH4oVGhnZA0mDUW0w70w0yZIky7izVuCXNvw==","signatures":[{"sig":"MEQCIGMPh7OXl0qlobu4fWf4mMtkmeFcZGPwEgVz3Nu/iFwNAiBj6EhKVJ8hQd6PMsu+a9MnmMs23dmCWEBPJxv1tv4sFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpDKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsMQ/+PmOU+xezWtRNt1lzAcpOyTh6sNchHGmSh3gfUPKSlqWID2Ej\r\nseAPabB9z7oWZl2YmLGsORJmlQl2v+SXUNSRRvMoQXFEX4Ja+xnyzp0feN8H\r\nKxcAe0SrZmGHHinRiOys38HkkF+gUT+9eDHwlgzJ2WFeKopQIZOXxc5H+CMW\r\nS/Rl3Q5nxtnghvOOev2SvnUg/RPHaQmcc3zr32eKcrxjT/TYuvu+DKQm5LAM\r\nowkVZPFRsxhMtaaib3yh0G8poRMC6uYW3nt6ozQRBZ6fG6Z8EbI6F07sm+Ba\r\ngHSCNYe4mtiI4Y0n1fyME6WN+F66JluCotI/JYqOQ2trr/JncQtyESEoQuRS\r\nSpHpXRIRg5umDyYMeFwpVjBdA2M832VBIR8MQebLXdJN9Kas0W30/Zn8Ehyk\r\n9MoCEnfePprE1hJ9RG4orBOPTOuWhPSP//Qr3wDO2c+Dkpj76l6ZeACJZ9lM\r\n9iKmHcZXR/3Hl3J6x1302KdcBSrPraBHsZJfAE8n4Mh8kjy7FEAONMuxuONY\r\nT8Oe8IC55s4CizbDUCDryVkGWTGkpiCwDdjAD1XsItRA+YhYgn1jDKSpLCzn\r\nQg9uxoJJvQL5KyPLstW8qXZlbdD7P5zSj7I9K8pTpwKEGJ/MOAN0AZoIdRmX\r\nucrM2Q/RCejv8EHGSyRQb/9B277SELNIMKw=\r\n=0f+Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.ab4aba1af.0_1645121738586_0.45517238427653406","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/theme","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"450223a386a04bfe09368d644dcb248db094aff0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.e58552c6e.0.tgz","fileCount":42,"integrity":"sha512-cWEBdcfKLZ1jbgzNarsOusXxMH3oSIsvC3ApbNGZEugPLZjhzpHMZMjM/p7CAZTyEAkf/rxliiHVKqHeMBeOkg==","signatures":[{"sig":"MEYCIQDSVBaDD3p4puhsET0crsaZ+jOgHUZECIOiJlKbqAsQJgIhANZyBOEsoEZXMlnYkAnyNUTtVvOuFanU74EeheFVWGb+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD99uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpopg/+ILADD8D2DOekP8UhIcXTUqLrjmoOLpghPHKvB3UeWUPv07hG\r\nOgmrITx+HHDpzy5jybsuOKTbUTSEBmf9Uc5Ua46/NgLnaP1lOrjgwQgfpHGq\r\ndET1G6vBSuRhBYzgczvT4823l/qE3eFcvQlKo73xGre9SDWfltwITbWgA7zk\r\nKFpIHSvykvoB+RvjxOi+rEmW29F1pdfoqtcX4xQ/ctY2YkDqpcIXyD0k2C2w\r\nB+dRAYfvWZkodsRoZpfShwhg3n/qA3qORM2slTB9kKvcggwrkV9igIAlI+Ke\r\nBQuyKY7inTOoZReCSfQ55VfqVw1iy3PI+gGfGcMesK5J1uzlUuZDsVqRN/gu\r\n+UIoNtjtM11hFTMBVeGAvE5gS9mvfF3fqORjJyOFb8VzZFSQ28Rd29TBnw44\r\n3u5R+rcmNWNy3vU3km6NrlqU2rKz1gmeIURJiO0QLZaVrYU1HEMTSZaErMMh\r\n9Ej38/ADypNDyrjdXDlXal+bg2N7/mNqtpHUTQ/nB3k4dOF8iEEK/8ymnH4h\r\ne9wzyl1aBS0XIm+Zk69G7p0pzrfsDKMUtApkB0M61l/lSGCH73HhnXvkIiXP\r\nGDfO1oqw/bAnW22DlrTs0tM1IIy+cV+FG/2uF8zhLsBYzsJ4MuduEPZv2F7N\r\nXGldQv8vPnUsL78QK9pDV8fuYVXOSQOm95c=\r\n=eMGp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.e58552c6e.0_1645207406642_0.6446261170985814","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/theme","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.868793776.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dec94e4e3c99c60bfb5da3c394bc859ef6e85edf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.868793776.0.tgz","fileCount":42,"integrity":"sha512-XOptVAX3c5v5q2r6TUFUAwbQxzfxAjufCWWMIEcaEWKbeyMWZoGqNPiQ9KRYl+9byK25WWfHFygU8+od9TMDGw==","signatures":[{"sig":"MEQCICck9J4WL6E7mLOSy6px4iVqyIslX8aEtedIbs0ZuM0OAiB5nwiVrj04TG4/GPHpcKXKWmwWbvN0rK+AuNhWOURHTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTrLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3xQ//ZhXKIU1eQE2QFB7dexWUlyg6aIiZyzOmXSpSaszHW/nf7jeJ\r\nQ74X10mQJvVkWi5ssbirr6lFOv0DXyxdIWSI5G9lTphXoNe4WyBFhvNkT7kv\r\nXkJDRYQVbdxfR+Qjlf7AvGeagPT4tONb5xQ5hPMzD/JpJI6nkuZSg6pOSbsF\r\nLPcpdQjRuvIJxS+CbowM1ZMTtI7sLt93cjFoweKfEnFXKjELXO+ZHok7ZQfe\r\nf0l7kAbv3Uu4zht7aLnqpOt9PekAvWVa/KsCIcD/EIMGdAGQSLl7jFle5hAX\r\nTGrlDg+MmxZpKhSTsW83g1Cj59GEKs3DlcBhiupHQUVI6tP6yMS5Fugm7Gp8\r\nFjEYtu6k6FETszmCPR43Yx+8Yp73NNCyUZrdHCqVqTkGSyBAglQgj3wBo4cD\r\nrZO9Ye74Cht1/hzREC+DkyILgTb9xTqlL4JEbZ7lhMUAq+WzEsYBzs79eS3W\r\nPM9nvh48M+ZVwb39u++WxBiVGuy7xlGM9JvQOyS5UTfEH9e/PN5VnqotrZx7\r\nC/8J0p4FwDol/Dspfv6CcHcSzY7p1V0IPyNMy3A6zyY0QFr5uI0b+tV5rqHo\r\n6cyw1xReKcsYRMKeLf/xoQasRLM2w1Ssvq/nM3M8BERMSukOsHxsOxF2AoFZ\r\ne9G5kpB5gwx6KbmwRtvWkV0zVUIbbptMrbg=\r\n=+6gW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.868793776.0_1645558475618_0.4634060737873156","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/theme","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef0ce4823dd269867172423813ca292dca5d0524","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.fdc37a445.0.tgz","fileCount":42,"integrity":"sha512-Rwwmn1wevOOtM1TPa8cdZQUTWCapU+mb2oYK5EAHfnODJu6o5plBqCzLehw4y+zcv/mA85MYgfeg7RcemfJ0FQ==","signatures":[{"sig":"MEUCIQDUQxdIoSuYbvP/VVqXa7f3LYCs5i3SHm6CVP7jf2VztAIgVnBOeysD04a6lTBP+tvWIONLzcGdZSeGUVEQN68k60I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRhLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrL6A//fmarktU4OkMZ8nF5ryrMWjIhqaxMLyavxa8WCXxskRltTS16\r\nMcj+N/dGm14FoSRgAo6ZpipaZuWoHg6gg0qdJ0VyTgr8HBSw2QXIFADg4uzX\r\nzFSfJNbYANKZm962WDTkmfAC9j4lg2UfR9Bd5kN89UJX4BaSRaE30zMu4bf0\r\nssPix/mRVHgkZqVJgoOXI4X5Chfw+0H4nfkOkkrLLvvQQ3nb4zDtWImaeKPG\r\nNkxydAemMlnJBoN9QoxKJTX5TKVCSXFhgEa9ebGvbcjR3iIuCpCvFXLW+jMr\r\nOkFVE727smXvQRjZXv8wFLQ0h0LCLpdKNTBIysYty1bnWiaxutvouG6tnCAY\r\n4zXS6O3BNJZ9ll2ub2VZMOCXRfV7vc1SBRXSBolIdRRjLhweHd3POQRlOCiV\r\nJRNzmKgoFXBvRB1rswr+F25S9XgWNMlYvWBZ4/zKmV8a8rg7dy6auP2bj2j2\r\nfRE/4nHJ6no2Pg/WV3CbIMnVlPjqjN//z2pwIIqYaDU6ZixeiNc5jhyMNW18\r\n304egrTOq5T5PEMX8IXRhzzY0Qw/hHpPjw1UcGUwKldZo4vCreCouGgNHVWV\r\nwRydhtdmmCeLq/N/ZjGE8IQfIdhNcnxGkb835bjxBoQ8kqxrHf7xjQbj3mla\r\nTCMBgUAvJkOelCMdTcuScE06tCB/7eLTaWw=\r\n=+QUc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.fdc37a445.0_1646073930894_0.2496980289475237","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/theme","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4661c18fd708e09e2a64c190d59793b313ea2fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.43c7d87dc.0.tgz","fileCount":42,"integrity":"sha512-IpI4eyEhmVY8mrCp1aAYjW4ZzXKokZCbyTRYWr9oKe7K/1ErzhjWbOy7/dC/fgBdBwRvwWThLd4HxdLP6EqmmA==","signatures":[{"sig":"MEQCIFpJE2ok/Iy1PHfksmkVzIXshfSiqKouTnC2jxF5n5OKAiBXW1c+l8S84q4FKS/JWMnfmvfSy1BXW/UQrquwabmB2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjyMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvhQ//YVLfAGP5rHW5dAk6V3V68Olr3+10zP+NM2v7VmYGk1ju6yvJ\r\nuj7bgE5HZ2HKnN8PGLTbmhThA0+8fZ4+eMvJD/PDDaTqphKAv29MS9xkO9fF\r\nQCbrv2qR2E+NHCAJC0oqSuXynFhEy6ZoYtYgwlsvs5CnHrinwUzMfjOJmQ+i\r\nqmn+oVwsOXoiIhBnDTEjjgWYrDedD4xT+L6QIB7D2jnaq2V79g6FX2gfdasx\r\nocCVKpfc8/GT051w4IftcwMDPBjMwMCGDsqS7idpR9F7vx1BPBPyJ8hmyobC\r\nSXmXUEBMev8EumKIQd4/p1spoe8jbaPc5f7lg95CLMcf8BeEqRbPFQJHhRCk\r\npIN1zu36wb7QQDqLRk9EP8ny60lL85G38PW1hAQw2VADsw5IYAz+qCR62qpl\r\noGeQRgVk+WvwbYdoKd+VFvwF3RUyDFwLyi0Wa1l/UcNwHbCarh/0pxYoatlF\r\ndQ74e65hcaeWznMxlaINDB7Wjhe0wavltR4ZAxHpu+AIAW9wahlroopxAM1Y\r\nQFU66UHNiDNc9UhpH21D1fiM85NPbPi+iXVyiUcPbOJS2JGqtfAHW5hbpn9z\r\nO1BA0PruIDMAfAFzInR1b5eIPLhF7C8g4yaI4FjtKgyYVelKGiL0z/wpLggS\r\nI9FxS/dkfvzN+x8H/ENA9TiXJIadog1u3Js=\r\n=Y7AY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.43c7d87dc.0_1646148748012_0.20935208028602537","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/theme","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.23043acd0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00b8dd2fd8627471d36a0bf454fb9a877653d38c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.23043acd0.0.tgz","fileCount":42,"integrity":"sha512-OjkkiRU3hSIEmLy7vwE5GrmII+9w+CchzqjxEICM4uAXNjnDU/i3M+b1P5r8SfeQFZ+dSWXizwgJec2r7cyZUQ==","signatures":[{"sig":"MEYCIQC+btNBbTR+SJjUhFFV7js8AYLsRXcLdVACh6e6pczt7AIhAIRCUyTxgbYwGg67B2WC5YuXMKxlMHFaBV9hKPfI9r+z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9MIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+VQ/+LhYtkXlaZO/6u2BD+fPNS/8wrO9Cgf1g+pCx9kaKfV2GolTm\r\nWwSLfp0ndm7NYBkwwq5CgsPCYFfd8PElR6MNL0o9Kb/VDLKr75BEJy384tnz\r\nKK9b06zKkbCGJgcdIY1QQuQu0Nscafxqab3VUlgD2rXONrqa/CgRlN/9QlCb\r\nkJ+s0X6AaDL9ceuQQL55qkNzXVkYs5X48dN6sI1MKcD81/X7bik+H95ALVou\r\nOuoNx9Rgt2mkD5cBCTZnAbK8rPNz5Lz92BlkTb8jQ395vU4YCT2uxMdPaRxB\r\nvBO3wKZU88cb6FLcSl/0rIr1B+p+eKtHZuAsrI1amFXKkD9oOTQQqLiLqp0s\r\nq+V1PlYXbg06DyUQQFwhxnFW3WtoB4WNBOqpdE+xmPQw9lkkIGoGcvAfQJd0\r\noYs47vVd4bLJXQmvPl0lDGKGVUmYFoTDZdgV5xjGdaa2nwsmoPk5WpsbNzq6\r\n6YgNgUaMvHi9+dPvwEYi9w3eIWaBsqJ4JnyDyA8sZKWJzyYSSuuYdLyNZp8s\r\n+t5LnIMo7dpDbGZ6dSiNkIxdkkDfGN9ueBsJmdk93X/J8aQii4Zfeg7rktap\r\njhy+J5KyXDITC9WP7cWMq+/WzNbl6deJdJ3xJoF44HVTLn3+xAW84g3cUdy4\r\nU7YjVUB2U5VnVCvmc6q+N3QqDDpnLioiPfQ=\r\n=FM8i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.23043acd0.0_1646252808650_0.0013903765027898363","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/theme","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3519254656e7f11875d10528ceb61b87f522fc6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.6505e61c5.0.tgz","fileCount":42,"integrity":"sha512-j6gr2C5S6jzICSS1ibaYqrw0iqwSrSqOGRW5gD++/YAVV1KUnrSb78TVZPmkEReEyShp/LmupYmFSNUkmXIiAA==","signatures":[{"sig":"MEQCIFFg/xs097DRoCCKr3uxVAla/D3xvnRrunsA9DoPShTXAiAJ4v0u2lOo5TUq3c0js/1Yywb0UtgyRtYgnxEbp24sgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR4pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrg3Q/+IFhvOIFTVGiiAyhdU2DJ61pdaniYpPoo0ee1l9m/mU3ObzN7\r\nnmJqIAImVRJvp+bP1yn5YxXpH2EKiH9irL3z+vrCMmmmeDTynFaaMX0kkR2l\r\nS30GTc4lm94ohv11+bJ4uf5tkQHLI3JcU5etIMlBS7XvHJ9mE9pFvUGmT9V5\r\nLcC+0KxaSfp4bIxmwbzcPbQA2g/UqgSFWLF2wCloYvPRR5If43oeM1YNU7oJ\r\nCqwH6EvHV9sMM7iddes4VA1RZ5yu4T6+ZEymN3xxwtxJLQxL9Rtvkyu0fyus\r\nZBXEU9BCjnykMa3QtmoLuwueqMzU6QNAe1K4y49go7VJqd33STfiqjClh5F4\r\nyIvpvFHNLnSV9N/BN6+lehXQhG+hThDvqE/3YbcRWnuVIERPS2IVEsTAL02N\r\n51o04QRVlZ+DPbHBjwkOxQvZRchYzRHJ2ZGAnno8eKNro/tZrOGx6dQnbt36\r\nDNp2w/7EG3BUzge004+YRpUCWM3Ch0e1P1TXTqmWpuZtGJxZ6tuoVHi852o9\r\nZY0fiK2DitlL5lyAnQegQjGCL3F7SCxjHobIWdGVjAnt/be287vVH7z4V9Cq\r\nRxi57snUAQ/DvmYzRNANCbk+B+y4vr0ylQCNG+AIl8QFXyqfnGJU6nFs2M0D\r\nevbM48uRkjGdk23VC8Roayv/W8+KRFTzU44=\r\n=VArH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.6505e61c5.0_1646337577121_0.2600870630470198","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/theme","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.16c166154.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"910a0e2b5d2a59788cc6c6e1cf1389f1b619ec1f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.16c166154.0.tgz","fileCount":42,"integrity":"sha512-bsNoTBpmdgiNJRD9wIg40QDUGsTGkOhlPsGMTDZBStjOlyFOFxL2VNrgk92A7u0uiNfV9Gc6oqBYQGNld8ev9A==","signatures":[{"sig":"MEYCIQDHjzeVIMiqSvLiEFubhOPnLlrLQRvxZtdChdtOgxhixgIhAOAlaoLTQTID6I8mnhy0GC6malh6wcADe4puR5tlLwVl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+UFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKLBAAoMC2Dn7+qzaQFMiXaIUVdi6V34t/a5njuFEm2DZBn11/rJBo\r\nlOQ6z16JL4WziRKcnvGOzk8HFyMrgFfXcr5s+kc3egp5RzukZA8FVHlACG8Q\r\nDl9GIL671QV17g1Rq+WHTAt+khJZdHXWXUK3L8CM6gCnVYGKJJgQKBdTaZu0\r\n1XwP4VhXuEGZ3cXQiZMhXR6NFEgyHDeyV1t5wkA1VDKDQhQIUYuat+GRdopo\r\nmNUNharydwBRahZECDUJG1z0fR3mBDsJlGcUr5VHpaFPDQ+3rY6hONP9q/8N\r\nJhfW87XKRNplLPsNA0KhTgfaZYHNIfiKdbzDtMrX9LKuMRVjqo1OiOWC1A/j\r\nbHeV/i27sYrErqgNlNAag/D/M3cjh1PwOr7vGZtgYuDfxRBzejl9vLxJSsfe\r\n7J6VWWXRUyR+xS1Iah+Z2HcOKZNRtZV813N/VOpU0EjnwiWLXvaf1ghTWUuU\r\ncLYXSTzuvCHh9CIpKDTWUdsQs9lX7tMhSV2D/xsi7U3ge6g0Mch6YefEnJ7D\r\n0hACpN/pwRiKJzmonLaRQ27CT+ZFgnkchDvlAJCiDYYBZZyj9viDjTIlvBtR\r\nyuQcgFXLyHfJoqcDuAAnFNf9WoZeqQ6YFi3w+lid6LEKLgkPv/nEHZIDZFxi\r\nE5nCNW9ZZWQ5Xpdi5TFSJnj+gpOZ4qHv2ns=\r\n=bJ5e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.16c166154.0_1646781701630_0.007502707730197233","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/theme","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72282de8997a6319678a8e99cf533cc87cb41a20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.bdf1d3771.0.tgz","fileCount":42,"integrity":"sha512-WgO5qyju6ScWJ4OAu5s2jnJ1zpAE4XePXxMAdrHhO7ksiWYo9Zb0FSIj2nG+y6+ArsoczQirI25xF06XcYwgBQ==","signatures":[{"sig":"MEQCIGEABfRkyLE1fNGQQ/lIIqz5OFC8tQko9PxbZcbp0wEXAiBF8EKSkG5z34jkshD/xjvJSh3Da9lBCsf7hi7F+nmDcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1DgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN2A/+Nj2KxcUQw6ZyIEfODJRLROLlCXj8/ouWzzX9X8mVp8z+cqjN\r\nZa7g/K2xLCqEsiXnwHt7BiL/xeh5Euba05va3tMb+/ykMDO3aqQxBKUQ+r3f\r\nt98aE7FS+Y5olb5H7Ta5mePjiSMmvFIoNGub9/VTrVlGUEKCSQWiRUTLMqEh\r\nNam11nHUdsnni44LLMovUaSLl7nHm68IlI/ocZauN7V+MrUIoFJEg/6IgYGO\r\nrbUXJqRnZT90pPOM+4GC6pn/8xFvS3G9gDIwQYH6SaekZk+3gXz0Nt8YcrpL\r\nnqVPWHRQMRPvBA2/z0b++hlk8EB9I77Xp8PsC7Pw78KOOT8H8yDH83d38sCP\r\nBneqVGrr/uE8vEQ9JDTfF7eKJwanjD74qf/eFU4vehC92rDt0oHY9HbZCklU\r\nmzosxjlZRDurmD59FQAlxLN0+xuVdFweJSZcCuno8PQ7bKUpdHRyD3+vDDHB\r\nnfpY0Q8NfQVzc1QJqthB9YpsG2xrgY11iozI03ZERGKW/P08ZRX5x3EaV1X7\r\nH+0kzQaQxyI9AGMrqb5gvNz8VMuViFEwufMArR1GfEXyn/CUz4Gtyh5OOFKU\r\nf1V6GrOLELObP3odfd7o9gEx3wi13d3+38bPS8twVFbHiA7W5dDsZHVlRizw\r\nLySEJehxUQph00KXZWclSCPCMmcLK8kGA5g=\r\n=PrIi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.bdf1d3771.0_1647268064707_0.5013963205456218","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/theme","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.cf4292778.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80d2cf1a1a4f566990efb380188087c2b94f7df5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.cf4292778.0.tgz","fileCount":42,"integrity":"sha512-PwlygkuaKmeIxNX/cvcpHtro2c6rYTomwqwSSFrXnwX1ge6s+staTQLunYJp7VuoMhv/PiDH3LyFus1Xu4VHmw==","signatures":[{"sig":"MEUCIBh6XLFM3hQk2whOoy2LAmdLRCxDoyMlsgvFq0yqq5ngAiEAroEmIwSH2mxrssB/vkU14Ovp1eGr9zPXjut3/qLANTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL93JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+oxAAg4aujcJSfpwN7W2w7ODjc4RDXsLMJ89UmSUz6kfV1nb7qjNl\r\njy4AyE9rxOjPJN5ljzyY7Y9QQAf39PRX5/c0AMO6ze0Uwzfnv74IvfY32GdY\r\nUgARde0K7ANLcjh49YkKJmFdosIcrSZj0R4nzEbm5g4DPET5kBScINmwKcbt\r\nkB8g27pnGidOvFQf72NW2YVbevTu2nhraij+Eo2cmXZnqx/qRVIryK6ZxqVy\r\nUIrFyYQKb47QZdAijWOtCyri6SjD9JoMQ7uMMkI6jBL/wtKfTQsrjFyFyfAB\r\nSTNiysGTb6IuBAkJFf5LAZ6rxR95Rm/vsea+tFE3Q4kB0U1HL2dfTXPG2PYv\r\nbr1X4uc0HTKmRtA6A+GDWrIOBw2QLPaluLuTNsENUVHtF67VsjCjsoZykOLh\r\nzQUESbBYs4WpDgbR1XWSHWDBYPqMvLJSpmAYEcXEGz7MiSPWfsMoj7xscWxm\r\nztiQNfuoI96OXGc18K43fiRhMNLDQc2nmsz+BwtKA6u5tALoN0PHv2jj45zm\r\nbSAUgfe7mgsK+fdYDvwQ6zhfrswIPaJvL5WtMHPfYXrZLAng5RaRpLI24diA\r\nWok4QDg1UO8OCrqXtAZsmCRo9P8M80Jvltw4wJmiD1xhb8mQejdQOpy+I+Oh\r\npLf+U4jTNXL8Ig9at67A/DUy5F+rxOQKsg0=\r\n=jWCJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.cf4292778.0_1647304137183_0.1493947856796829","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/theme","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f03cc9cb2c6c8841b10a5b7163460a7e6987ca4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":42,"integrity":"sha512-ImAELiT8j6NOJGwKqaaKSM1n+XVWz52ySgRNJwND8FIXyfKFYHId6GxQZdLheUNbNFdQVw4luo9D8LjrnOSYIQ==","signatures":[{"sig":"MEQCIFHzoxbOFN61/GJJDbhO46BBQJH2uGDh6Uiu1ydEr/YlAiBjvXfisC13/u4CW0IJnaK6zySPXZB8JNZKFWggE4FPBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk1XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW5RAAlpsyCHWhQLPwKJGLRHX3HH8ACct/DZVvBtg6Xnw5UlRzDDt1\r\nPVMTpQZ+RtJ+IdQt6Gmpdm7gV+s7Z88hwpwnA3kZ/d4RhydyFTLODZl1OMK1\r\nW2wctFJ97dYNFUuKfIibHDnVE+dqjoTyfyHAIf8b8JyrAg/7vXRc1l1/GZy5\r\npYJgFV1enHRncXmFy6I4IwMr3S4jdnQesD/5fSpkQ0SwSVR73hpgxh9FvER2\r\n2RjqYAsBgPw1hXmT/kchxJT7U9RwkXrximqLCe/OCvoVC6ZOVYawWwSdV+kG\r\nJQALONhwJrfScACWXFGjeqW5YEcfKAy7O/HmirIrTnZUbqvJ1V/gVfCO4fSY\r\nCYVGkf+ZnYLLuFUDunnisf/UjV5Z2TDkjTPPWlXg+39h5lGHegDh2Y2vr96A\r\nzcpJ70F6K2T5tjWLepErPEiV+an/W0bfKP/TwWB3H02jeGsmxJMnF0NtKxUA\r\na6Ue4KgeqYtTY11vzWE0vu+Y6nDzuKxPnxhbOsl8qiNZ2ypf0IOkWxf96ob2\r\n/MMa2sz7JDCgQo10wg8Dh1sBDNktrpVgWHSKe5SL6mAFnHGsDxnX7a7LgamZ\r\n/Va+UBk/OjADXFWxVKcrbKtcoaJATtqiWuTb6SnPSwGX4luff7kAuf3IQ+3f\r\n6+yH3XqOwXG8V/rdKJfsbpDssHnTx+5baZA=\r\n=7iev\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.bbd43e0e0.0_1647463767299_0.47214294361842213","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/theme","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2b664042839953820e1ef1c2d42fd86c8275e04","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.1b6afad86.0.tgz","fileCount":42,"integrity":"sha512-3hx9zI1deDJOojUiv7JJjOa/luze8bU8FlcVb9S4BvppJmvcY/Xdyw1T54zJ86fMWo0f5IqxImXXDGQQqhviGw==","signatures":[{"sig":"MEYCIQCRV4vQXGFmHZlHhbBYpRuH4+sYPGk4sWa92rqMTqSpcAIhANfwseacqEzoFvkXlAbr0CWMfaq9+LEf6TswyaBMKup0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlCCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbORAAjS7K64FKKVPUgwjOiUMtl17orch65LbROE8UDgouo9FrUNyh\r\no5TRpLOAnlFh807x7LmyLCtkBjo2FKCzLRh1ZsbT+otagAu9vw5mwbHjAD2N\r\nhT8loY22WO7G2D63sMS7QO1Ki2In0pqZXAEEcBvUBMRo2i95adt2yQWu5uoA\r\nPKHZALFTWcp2ZSdodpmdysJKY4pUG/z2Zx9KIZdPWVK3zyeNPD509bmggIV/\r\nWwcDWj15QutZ0sEXOay8jdV/VzMRTQd3aNdOjcBlyTrH6sm4xOdMIJTlgXYD\r\nvVw1B6ntzhgIQX4QeCqFWmkL77Mjfvo7Qk1v1vUb7Q0PTq6py3+AzCqLKCAZ\r\nLC5d2j1CEi45AgSUngUJWpM6Nw4HLwDQJpOozvruJ3EhN4wjOYVe/++26s8u\r\ndYpTnwNH3hiwrq12MfSRgWEcUI7aPtSAz5R7jOyFPuxsuKfTuICnIXfrV14Z\r\nD0UMT/27iaYRWlv3NdEBi7fdUQGBxTB/6xq1Uy2069j/ZpG9EzoEfc29KlOG\r\n0fsODnut/ZomwN0keBeC7M2nmjcN/QbqUXH3xjooVbHrgMylbY/TPVBtHWfj\r\nrQQHJZVuvjCb1cwwICR4Va1191XxNn9pSBXayyJdEqdju7xGwc+ShqO7W9fg\r\nWh7fMXhqwsrkcZXREKXMrpdhU6gmGL6wwgE=\r\n=IltO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.1b6afad86.0_1647464578080_0.8156830192604447","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/theme","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9cfaab1fc504eb38e490454af59d75084c4d5c7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":42,"integrity":"sha512-SJ3Tuthz166ouuCMK515wFDmaAcUNmRlLeD56oskedsOBeBbZQ6pmOHPM+3kDa1DLD59fSoilPUhni7gbRkW7A==","signatures":[{"sig":"MEYCIQCcOvPbhCELl/PlaiLVbX/2zAbI0062167Iv+OKtWb1yQIhAPmZO2tnmwUzi1gVqizvj/DmxI98L/uTwmvX2WgYqScD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlPaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9hQ//X5J9wc5SYgnp2f0QF7JB0sRszv9ZwXKV2a6Qc2/QMFFEBf5S\r\n/qToU+Fnn0qB9BxRxVhdDN2+w9I2WgNZ+Syq+v2YqveSYCxxrtWJ5/1n54/3\r\ndlFlWfvPdRpF5tAlCiz/vBRt/S4XS2wMJU9srTbp03ZyXaJbBL3AUakHyW5p\r\nBnNT3e6BjDh8hbQTQJqYuSfTLG7c++sY6NGA6v9tBspJYZ4+N5JyXida+bEN\r\nFOdElXWKcdAwRAWSMJUZkWDsZJet+7S0z+RB1j03YZ3pDIRa2YDBysJF9LZ/\r\nIynPCXw9ocUDgr2ErI6T1uAVQeAst95H3m5vVnEpLZ985FZvccGhUsUR2i/n\r\n+enKNGTC0jStrDwAEotSowfRfJnM0WKwR92p/aLeH+2l5QNkTEczj6Anq4Nf\r\n4/aF/R6rEBeScNxrRG3wxFrmBa3JVnLm4QB6J5t8bOgKomgMgu2A/KCU3bqs\r\nlgJZdAa/WqjbolSs7cvspuOama5cI4ITvVARs1Ywb26b80zVf8o03yueuyNv\r\nOPaCwQ+6Fg5VKNful/zSd3K5qf82ZpG2VPGXknXtfnEPnbpDAYGIwIKkPdFe\r\nKN2Q4yxUWgnqvJWIqH44UsWWWgrMUZVj/oy8jNSQh49fCUSftOY3LmEQelWR\r\nulouZ1TTygXjiV1pTH4q4kOsoDU7mvSKTq4=\r\n=71Y/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.bdf9d4af9.0_1647465433878_0.3326790566292963","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/theme","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.32b391398.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7135c0302db12099a5c11d11c326575ec4493cc7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.32b391398.0.tgz","fileCount":42,"integrity":"sha512-MvEsBI6odZ8fX+wbf1PM/h/AB5Pr2JlHDvndR84zgG5UOlDjhRfScYu9V/ejFiq0iNhEZogXcuRy5br8OIL1/w==","signatures":[{"sig":"MEUCIEhkr7sduPXdMSQKYm+/x6bdER/QbpF+IedtebwO1PPEAiEA9KCsymPG3bQ25ML+bnGdirFqVSe9kjhfJMEARrF1okk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3bIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbCg/9F4bD1ATkBh7LiWrlmA8/Bak4UluLvoM2bNuU3p8+OEUSja4b\r\n5DcU3k9AyOCdoThOhQp/tOUNFxR0lFDSnb6FNI4+j3EaCvMI0PoMc7DCMIpJ\r\nJYpSUzsTzL06KjZ4pHKBJtdQn6EnHo4DQSaHyLL6zqhzDcBmNo6Y89twYaLZ\r\nqT38UystGBGY0pr48NYZ7+DzjF6IVuqYZH21G3QnvPj/jUZEROllAvt2qKZ3\r\nsS4EgMbtsjTtYgoii0bXjx8L6W/aZAwaENk6rTVhlj28dfIdnSfDQCWpULnS\r\nfbmsuu24+OPepfMVftDU6X04faU6syTM8oXoNzc5nffNMHEmAb96ea58CBKc\r\n3nU3QuK3JOD9BupW1W0nbS95IgqQ2dFs+rTfR5lFwI/Hyx6wRW/ixNybWsJg\r\nGGP6kU1WV1MDi2+emSZIzTV8BLi45pd2rZaqqRw4mGDWJN4/Dhc+K0WgB4ZB\r\nNGWcEDjDjjE2H3m/jutikZ4XFaTDT+nJGpRKw8dUMnFpbQebJduDcXjaTi/5\r\nnaYneaPoZPTuUSPhqJwq2Xl+AHptgN6+N1weQTcUqxd8csf4nOL0sPkKMfIC\r\nzl5fY9275R7g7QJrUhRx/xbnnDkQXgvdKxEp3jizQy8V8+pj/D8OqNgcN4qi\r\ny9BZmuKQXSwnigGjV8Y+kDxhBv/QFF6CQxs=\r\n=leNe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.32b391398.0_1647539912074_0.19268166077274507","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/theme","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"643bf4ad173d43f099307b3dbbafee1131b3c503","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":42,"integrity":"sha512-JS6rcwl0YSC550Dkgzt5h8Q9sziBqB6HfOUl1rbednmCNHTGN/Up72n9DPwkmgZdGAqUuxoYW3vg0U7LgJkEZg==","signatures":[{"sig":"MEUCIH6ij7/R31CsJhTjH6gyrtyECa9yqlunq2Iy0fR/bUptAiEA3lQOAxbRdFhJUTwUIOq+ER1FOfHf/YBsP5shHxwHH44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLWJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4fg//U1pFP4lGC4fwqeV1ZreJ9+5giMazZ7Wel/PLhTsyM52KmX0v\r\nuafoRPrehot3sqcGq7XJBmYlVBVBFo0RI68KfxvgCykyf32XEsOnqJ1xdVE+\r\naxNbT4/DmXdr4izgRTgBsrTWJj9r4Tsh3+lDRaW3p7Sad/iUkYXFEdx3UNIf\r\n8SRduvbO8l9lDW4VDCxHquzqMOtXBlOuVKnYdFYz83s4e5S6sQkL7H/4CBb2\r\nKIauayxypp+t39IoLbtSTaocRNb70Z87Cig11IkQXFNk6oMGelm1zPaJkCBO\r\nrhhSMkF2wWOE7uqiHRsjaFhrwZsM87g4bgC0NKAH3w/o/slaRuOn+rBhUVuH\r\nLxbbbIbzK/jWb+HcnzktFlQeVXJBsSGJEKfKVHvQFuteIf9Gnhbe/wjkYBqw\r\n/zalLXBGp6C+HTgqyrXOILnUcp1qIEsnxUleixslUuWR2TMJUkfsuWQn9v39\r\nsvdrd4ZjLpw0IKJOFExTOrDfUjtfkvj7PvnTyTe+dSNqjNzVQP/E1zTrG3DI\r\n8ewPuKPzqabey1C7as76wiUYdvsZZkdd16mHh2QTY4bB26Cp70dHkqhmMh++\r\npR4KcFLEfyad5vHOexcwXwdE2vQKDsNVM9W0EWZZzkCClRe+YgOVgTywMzuN\r\n+I+gzzGpmh2fRSDcIZ42mAlFz/zGRVzrKCo=\r\n=oFT+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.ae8a6a3a3.0_1647621513611_0.625210672311656","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/theme","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c97ddcbe32be32c3c2341b7d7b0264952a83281","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.cbd9358a6.0.tgz","fileCount":42,"integrity":"sha512-7KKGogl+UzkLi0At1tRcDvIaORV6pTdYDwiuqX36AnOos36O8/dYECIwKbMQVi8q3coQt5h+CNMi6FHg4kWekA==","signatures":[{"sig":"MEYCIQDPB4vnYdoGim34CRs7vpxrDAjRhYpGnwp6EIQZtFhEKgIhAIKNn0fZPc9E2Xu+PwxzFRKpYHU8tWQuH4qp7bhhFyfr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQzpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUKw//bl06EDfly3r0V4KwWOE/suglnIyPFEEJc7r1BZNypRM+nW0F\r\nNa+YfMvHo/2GDeOBnWzK7o6fgMl/o1ohBQfFmGHeiR57aIxrZI2STrelI75K\r\nhZehHhVgN65iInuNtCKCR+yfES3Zpj75DwRVfQT2MBGFFK0W8rIhNypz/dHE\r\nK8Zwo0hpVv0HXXKdpCvMbUx/iza22fhWKQLnDc6/ROTdPVA1mnfHu+9iIL2g\r\nQ0wR95ePavShiMzwRsIDf/FI7isMa+Z8zYhrtC3FKpztfH1UKAzTIeTzunzq\r\n/ml84X7oPpbt09InGZr7Revn3kJ80qBDjqpY55tn0lcDoKbpgu9L7v28y5XR\r\nBJ2Ge+ftjmLJ6tiF1At74bH4rM1FbJ90flLJtTLUhZCruO1n7NiDitE0qKzm\r\ndVX38Yk9KA0SeLrztgMtTiQhrrazW0M7id8Kgf73PHKawJrdTndkhk9MX5MJ\r\neYYU+U3Pz7SjTRVi0yixcjp9f2+aqhiCascO+cuyncVWgfVhOgFIgl4xzTaH\r\nS25Eh8VGJ7MOw7HKzourNt8MtlCvqVskzfA81o7wVHhTYT+/QTGwFX+QlCWK\r\nG8K7LCLFyX7A6tiIhKTCryCVHtqRLGrGYG8Xp84NXp5Z8+06IokRUDb4Y7FP\r\n1XVLYIt3HfTjr5LqRGBg58cj7F6TTEUCjhs=\r\n=Uj5E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.cbd9358a6.0_1647643881671_0.9220082414336046","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/theme","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0d3505281eb39aa676050985dac570d350176e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.dcfe49c98.0.tgz","fileCount":42,"integrity":"sha512-XT14wE5K0rsT3O4E9JwI+NY6rHguIzDRABviffIVV7O62ac7eS4BO1wPajKNpohibV+pGpvhVoSMzBRRahxfWg==","signatures":[{"sig":"MEYCIQDM8qQgS+/cRypGRSb3S8CCh8JvL6LPTtZ/9vdJr0TtoQIhAN2Kv0TcZDk6hU/fH/cqlTSemCrNs9pqgtbbbX8KOwG6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMdNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqtQ/+LGVoJ5bfd1eGLC3J0/GmZT5is4Ta1Q3J68Zls+fOALfxIONU\r\nUq5pBoVhfD8wu3tzOd3P0rdxkeh3k0pwbnT9M3nZF1FUYVcdx05p3PgoJ1Es\r\nfHZH/Kar7xmOfpwrqbcMuLGVJO6Kt4nzBD0DuyzBwTDEvLNZPVXhZg8RFdry\r\nEEWpU3vPDdLH/2fNoEMm4Sz7/nhHH0fP+9XkI+akkZRSUVo1v1fzUZcxI3eY\r\n46sdhigWtxcjRMlqTNieIpJzEFiYXSCNxO2cix6I/T77KnCKQalsfXEx3KpG\r\nvWN1WusYf737w/E9ffOM+SRFIm9PsLH9lNvazmoWYKBjU0krqaHr6zWj3xdL\r\niHuuaj07ij2YIbPeYNWgE9mOu/wWs3i+M8O7R2lzMx4eXdd3amP1GHUIbc9x\r\nbB/vNUcPU/AvOmNoh704DjS1XkVIS+4I6qWcA9tcaR69e/ATcPOTbCpjthiq\r\nQyTh4X6CN0RKFTDKXVBd25mSpNnvh+uH+RQa4uwLnF1xUqR0/9IBbOfvZTll\r\nJBatXQSpnrAAbjE4p0OTr7ygyhyLx1wUvRSC5OF6jlqVu6+6lBsBawer+ZFf\r\nBC6Z3hwXt1+4+LaKAeKt4n81fXVK0UjEXbJ30jlR6daL3sgftRo5k676Ebj2\r\nK/H7qg46Fk2EQHevnvkWSrNoNTGByDGo2m0=\r\n=bEos\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.dcfe49c98.0_1647888205553_0.7988420076580418","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/theme","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3241694c69edf7c8eb14dd6019c338ebe0a80ea3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.f31a833fa.0.tgz","fileCount":42,"integrity":"sha512-hyPHTJCfx8UM6EbUPX5gPeUJWkMyHFNEJoOhpMdTpX98KnBNJI3dD+23kGukJe3iMw7weZSYeTfF2K2thtDQzA==","signatures":[{"sig":"MEUCIQDEOOR/9YfOOhSXAdyz5o8FFSzQJ7YGTWSHjHnA01/vdwIgeMYakb6CUEiOIv9afKghcMNCLLnmlkISDk9V9sFtTKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm66ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXfQ/+PD9NUBkrkBi+Wz77KzCVBAoRTCqnu73wpwiTa2WaLCH6Z5eR\r\nnWlJYJdQxPQ1PdA+yWEH9TgKTXALjgxCfvsfjRMBGnjc8cjVr1X7DvPM6cYe\r\n50XziJVkWUYvJ9HAmCcKHEEUelXT7I3nlIA5w91GNKzR3fKzKsDJC9p+i570\r\ncnSH9ad4Wr599+ueqpBndKpJ5LArq3Tly6NL6PTC4QLPTikcVJwcrao893gy\r\nXkgcZct/BEUXrdrVEsek4TFTc1JUcQOqf8Py1DdBS1ysYWmmA5bK5pa4N+BV\r\nnJjh5kp9TcFBEsSpVVy7hqzZzK/0mL18cXN8xebv7WyAuFsWiTAO6emYlMbS\r\neyA5QerKyE9bXGrbl6I3hEyNN80zFeV38yZXHPsjshZqcIVcQG0QFvkb7X7b\r\nJo5saa+EZBvbTFSDLthFoo2d5FH2tCQK5clVI0ZDOrFoGe6LE1RW4XHKZW/V\r\n/jDbIfyQS1uLhsDT/hQhsh+oQ3xpToonjjk71wrU6kBVhg4UwxR++MY86RyD\r\nU5CJjhIciHZHMDsZMGK66qxMe44a6tUvTH7bqg3XxzcWvEZLgRzY3EVbmPzu\r\nZqOp2Br+pb2GxXhZMK+jDzhE2iyluz6t0CwgvrUfR/Qz5N7BHXN8oQwUzeLR\r\nhIbRiT7V6d3auX0aOj8ud5VITsfuucJoinY=\r\n=e0jp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.f31a833fa.0_1647996602217_0.6715989420679114","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/theme","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20c6e0b8927e77e36b5fcaf9ae9372c9ba6ff60e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.4b92e210a.0.tgz","fileCount":42,"integrity":"sha512-JFfxs0qfANtCyE/sNuO1FCEC1kWCOlybVo8MuQg3MRzCNA23cBUpgvp1bVeOcM7IG2AWPutDpxrdsSJ9A9pB7w==","signatures":[{"sig":"MEYCIQDkT7mkFAteHXWj4bLebhS3wTjHYpatVDrITG1evb7X+QIhAJ4dZMpf5T/oW1P+rU9XcVVtp8TTHpWqdN2eRRpLzqrc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNH0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPRA/+Jysgk8Puu/kbK3vZJcJ+O0qPheHpoAQ59bwHawgfu+5mmmx5\r\nmrwZWRJ2N1f47rk6hl+s3+z8HrEkZxRdh8NIu1AAmjPEc1EPQOe+gNh3nm0+\r\naQAk5fVcg7hTFBZ1QFq6H50JUOfqKwoNf8syZo7TM5qXjlst0WO1egCNwp0s\r\noR44N1X1OCX1p7flMUe7VzNgYC/BLPEDQbScGyrKC32AuUc/9MeaCpaXim5K\r\nR9+8AU6aGT3HfcOebVc3ueQwjSYfXTsPjqF1aTXtHMcztGrOZFeZkLS8xBxD\r\nZRVXVrc5rjWXc2sEaNPEKeZt3V95d4kSz1A9c3+gcY09yZ2W2anGmJLM7AWS\r\nWtF3ZU6+J57yBZR+tHl/+ZowMqdFDQY+qesUSNEnANyshDPgsUjatR6e2W48\r\ntmUvl5EtjgGpFFpXyztUCG7lQr/11Z9HxNgc/AlL+k+ABr3pdfVd+e6adzos\r\nYPCtDRD+QQ/FKJjKTYwiyQ2TxvEcuLvOLr4Ie2INo7wRojJybD4LVyE8WWBe\r\nhpR/Ti1L9B8iF78uQlpr0UmKQNQwZY+taVwx+uUHKlNG66CVge/ZVc9sp7Xz\r\n/S08bw6JV69TWk+RkjPjt5b7JFFmkEKtBJfnxUe51pwxIFV+iQiqVJCWdC/f\r\nne16Vn8kYcPbt5SZoWH0bi8nSZ8MMrRoOpM=\r\n=O3tn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.4b92e210a.0_1648153075998_0.8026051823839175","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/theme","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.a657abb61.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45db95bff4ee0ca50b881f130dd388c7d93939ce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.a657abb61.0.tgz","fileCount":42,"integrity":"sha512-L+0kskbghZ5f5HVo/hwe4PmQiDYSZJcMJtNPtpCd8k0cKrXIcYKIubLT8hkq/RJdiSznP7JFa/2iN4AKEgFrDA==","signatures":[{"sig":"MEQCIDSW2CHCfTvC2jNytClhY4J1tHiAEd5xxBoVXNerYLR8AiAuNPyAj1TzIEngl2kPCgHSTOUFwRqlLs8HpIQPB8Ttbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNb3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphig//Zzf/uxS6wXK0z4Ojutox5gZXVSFW+wRaPto/8w65d3RSlMwo\r\nPEtYZ5J4gPUvgGuhnIKsecnh6l0EVTXB6x1gPU4oTeQmqZxc4RmufL1E16Z3\r\nI7SDvk/0ohHav69e+BFSOTRIRWXNiOLRI5B5ayHfY8KKfeaXB2XeQRqkTLdE\r\nq0kWBfTu66j5W4QDi9Tc2XefrhF7sWRc8hFYlhzY2vZT7MWngP/kfpEwQUfm\r\nyjCMA/sYCBej+4dTsIOU2F5k1s7iMIlE0qiJJ78jgknS96r/sUN8NR3Eo8OI\r\nSA9Tavc6rdyimKE0h1e9Xy8xHp65MZ2IV7KMBgnTokNuJuVXt7kh0s9wjEw4\r\nLmsNdzXMYdIqadGUtqBTD1AkFjiSFk/dLL1waHfteTEbtbw+Dv6XdgsTcUF1\r\n6b/cAKhojGJ5GJ3hn7j5zrYNWJ6okXWpwjRPUiTlVOaAaUelmQUfWJBZArpQ\r\nMRC5PITVfkhr5jMOJglsSKXOWnW7bSAPiymbj7nLYtGeKFYj2wELpmOxP11N\r\nxanX/qbml4Qi/133PQpnQ8CLn5QdPLBzw6HW7gyXI4EJql9jmDvIrTqClC86\r\n/y0c49fhBlLuucQJFcxgTRlhcZz2C8doK/2c45lQs/BCfQ33fVmrDnGTyK9k\r\nrtpuj4EEakxb3w5EFX8WILDBJdR7wxB4UYo=\r\n=tQ+v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.a657abb61.0_1648154359095_0.9798638162279296","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/theme","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.443f63f50.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fdd20043dde2e0b9f1234e9d948927ee5224b0d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.443f63f50.0.tgz","fileCount":42,"integrity":"sha512-mv/pbau78tHxfXIWwfVfExL2szA45YLmXP4l/TppJA91OtEeHaRvk2WoXHijbhrPepOMhDpswqvFEc3x4C+CvQ==","signatures":[{"sig":"MEUCICLdfvYWnZbWtOA8EoXueIFhuFGbEnOsjQe7ms1d8SDSAiEAlEg0ziClblyhRZqS3A9Vzb8iRmOfBRTcEaCXr/bdaSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkpdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKJRAAml0F27wKSA8ajBJPgJh8TEcBSEdt98tKuJeF7B3QwwbHFYMK\r\naoeHAItQRIJOue9Y/+a39QpPlirAwokepvSMArkxgrie88cbIAZz38KwxS7z\r\nSyIL/haQoQ69wrKQq40+6daWzXia2WloWWPzM9CVFbBJrkdDXKVrAmg/5QJK\r\no9VR+wUS7o2YLKHUuy5rRAc1mS8NLVccs/Ue4beVdjRERDcRbebqn9WNKWEG\r\nOaPSIxe0M/GmyoS1Pu9jemYBiEOxGDfLe5Ob9j19pBxMzmbiluWcST0CQa5s\r\nmfdKfL3jUWsYkEordArPJgXNPVBp9/rTSrAFdcltfDBJcswiDFKXpNmtsBTn\r\nGW8AMpNabfp9w77wfhWFugFL+A3zv/WXS7U3SEGgP4QnIN2v7J4p/WQRUquQ\r\ndihbOC5jx7JNcvm5Z895clHipkWJV97IEdGQEh2jPyI7+YPP+fieGnPDoYqo\r\nzSVXEyvE0phC6bfdDBwys9yfhQL8EowIe7qVJELP/hO08mVyu1mBWmGCa8Ar\r\nkRmeUinEhzVh7tIsncUG6LpP52cbZTb522k2BqvwjD/iT9wKwy+7aQ3r601a\r\n5eyQ5pAhMHHjsm6JUxpxdrXaVU3NGzEaLn922Hfwv9MdTuYEppCmL+qYojnA\r\nUr08D0IVHqXxbjK6aw9xVoFmIlIvayGHgrw=\r\n=O5gm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.443f63f50.0_1648249437375_0.27625730119949243","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/theme","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.eb382f318.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0ab3802d1df3f7ff2f014569151042a9778baa8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.eb382f318.0.tgz","fileCount":42,"integrity":"sha512-z0ns3Gbyrstk2gaJfzgLmNvyZMM1wI6urjGwGGMkuQ4DsRjJ3RZ9eRsVcV7G7TNR8nRfv0tFdXdbBL403Vs7DA==","signatures":[{"sig":"MEUCIEit+/htSg9h00funmhnX+RsIswkSWMtTZYBGaiqtt+dAiEAiJ1S6SPx7w4FcLVjwaiLGqlSaBYMBWr5VZj+lUhWUT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0MZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrmbg/+KaBznA3XpIe6LYnfMmAHpkHuvJUtf/VzqcPsSjxDr42aLhMz\r\nYXdC3mrqPHKdBVIL36/6+Jq+kq4aQtjjMzdGoUyYHefu94XJhoHCTA9a3aze\r\nUSgpzZ1dPF+2xAJ41nWNSwBiZ5GoagkxHxCh5j6HGtPh5GzwvMX7Z+RZygrO\r\nuXMEWeWCQXtEQzXr421Lkbk6b61HmnTHmlDehBn/chpPXQv2/KhMJoxl0pre\r\nRLZVnUEf+fAC5VFfnJCoym9id3CXBbFBqUayC87PyG0Q2P4EjX7l2xSidwmN\r\nS0jZJFdynaOV651d1NPjN/SA2r001PkkHHSSpa2s4dsFtMXfp90CiIHrje17\r\nXVCvJTsrW0MbcrS0ry0LRbnO8GnObJLcG9K1wQzJDfPpaR/FbvPNTqyLL/rz\r\nZsg9nR5Gz+gMs4zp1/TNGkmRTMre/TCC+6D6d03bCsu+VN18iNuYyXRYJkRw\r\nkXvnCjQOcaCn0HFoxrh9iw9W+8f6XRxo4J7BDEvKYRiV2Fsf5+1sGYsBQG+U\r\n9SLDyyoge1HOfZy0mzTduggEvfeIAm5+73M2HjCqCVV7n3wlwFWBi/MTOGRX\r\n/yUhQGLcaK+nZ0PtQVBCVo4Keddz/1i4Bege2JSw0hE8EBUoDfJ/ucvjr/uw\r\n+QjJY+iQzjWVzee8oz0athMfiaOixaDyuag=\r\n=bXM5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.eb382f318.0_1648575257469_0.12951953182540232","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/theme","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.344d52823.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caa50796db7d6a07cca24a2d1b13a40548267c77","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.344d52823.0.tgz","fileCount":42,"integrity":"sha512-q6JDo3DUcDRSOdHJVV1W0w+h3hSUBuvN1bwYUXG5oG/bKx3PQC2Jp8AWnc1W9FRtNMp2NvLldMbOuuAfvUuIeg==","signatures":[{"sig":"MEUCIQC+0Dff6+yFXJP4iC/kVJi49KYT9iuIcs8hQtAiuZBN/gIgRE6Wcmo/y3Orm280euE67KVxdaYJyULX36S99OhGWpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1McACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp42xAAmrzNJUaFpyG6HwikkPl2ZvsI2EnY6EekLAf+Zh40bNDiTqvA\r\nGN8YuChU/thUlAfuNPY0y4zeZTtiAtIKtEtqXBuiFHM+srjsT54SGSC0IujH\r\n2KknzjfIQGZWJjleLt+Ne+22985o+lEBtwBq/gu7U9NNX2HEyCz+/MhKNU7K\r\nsT59pbe2S0BZ0TwAWC7G6uZSPTh1T7Yj5b/4zmRYcv0tM3XmsD91ywZJ43fK\r\nqiBgJW+Sza8xr1IZmklOCJ4XSd8HMTjWfs/HAVFrfmPsHmLxKJx2TidXh2gq\r\nYGB80NqXKEMp9zT/kHzFprnEf2oMlrZptnSZNuVG4+rgbtcIqqznlWjY7KkL\r\ns+AESS4tT6nVSUoeIrdtoIqC2w5jF8GEVL0CmkTrBA521RbQLH3RHhhW/+Ux\r\nTLIbQMN7zLs44UdTLj2DegjzQVSRvk6KdyhTtTGA9iXdDgWwwEhuW8V+4iTX\r\nARGzGBq2N5HwXDDUmJRE2NXxW8fDpRZvWqLD6jXYtd+sBRwP86zycRBUvzAk\r\nLiG8vPzB1/uJuvjHzX51lLSFKl4eqwuMUN9Bwr9rpSqb+6KYazYGmTJwnloP\r\nl0mLwrlPeALerZZFstkucDzb3hd7jEucF1rKHsrE9nhtym/gbzzO9ak/+swZ\r\nuCr0ONeKHXQYJaEcWIlpSxFbzL8BtTu1ONo=\r\n=0DuY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.344d52823.0_1648579356270_0.6898112669054179","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/theme","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67012f9c0390c9e22df07eaea1637b806478f9ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.4e372fb49.0.tgz","fileCount":42,"integrity":"sha512-yl+eEhxWivXQppsEoL/DP85uMkhqMgS/DrF46K+3nHuP4ayueJ06BVSIOF+aLErI0vHu8fsntxxWyI7b2cQTYQ==","signatures":[{"sig":"MEYCIQCVbhEKBLV5u5BIlB1w0+pcW0ThWpwbJhop/H8c6Ryu8gIhAKVf0xQ/J9jffRjk+yW3JPJAcGBujidxOQk0Cl6c1BcX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0pPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgIg/7BTruxlJAc+Mnxao/Z7Hj+0YFF2alIws5Zw3wtYn9TSoRE8JD\r\na17UiPLlY2AnLcDfs9wDRoLxOnewi+9cqaD9wK+H/PuyDVo3EeZLGvQ292/N\r\nZVFPXqfzpJGW/O5DJTIscWyO9ScVzDLpWIz/YCxOZC20qji5y2gLTBW3L9pi\r\nk22NvVc9ZY/8BWMyZPRSc1KFSwL+NO+B1rIaEaWQVi+v090xgaLLwPOReDt4\r\niJqASyaGynU1r2NMeuyKrZoi309aK/g2TLJjDKGtSWDQvdRdSsbGAyn/HgE2\r\n8+hXOvVcVbfO9x9wBSk3DxKqo52S9gQ2Br4ZDxZv1zzCnE/CYOc1dgFUs1T6\r\nMenfJKG704zdfu1fyumplKUhXBdYarr6sTGRt20dB1xtQ2r+SYoZPlFIx2KU\r\nPdg6i51XbMJHpePBoKtbivct8O0UyJ9GytIhTzaU2vgFXvgMBK/L+pFi5qjJ\r\nnd1SRwcwhzEdUEb5KESKzQTOotfdIfEB4/uktJS/aQIYUf1w0LE6R4drNLLT\r\nyndamLLltSBemqT5hz8U9HD8l9uqSPjUZpYdwNW6xH/PHHzQ8dK9OtofNUKs\r\nPUZBFPg0ZTGqpMCCQapZH6ZNGSAYXeTQHhxfpPdvq8ahaQ3i413tBrNwh4mL\r\nqNrjgNAERKlkZy5uy4f8V7NSglGPyvCZKBA=\r\n=kVUn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.4e372fb49.0_1649363534808_0.7237943166223493","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/theme","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"896a7e661aac60ab821ad18ca4f625e7c7bd0039","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.3e30054fb.0.tgz","fileCount":42,"integrity":"sha512-hgnhvnpEflstvdmOAfeob+Hu8sczf/z/laF5FvihUc5OvkuMNNj2ANv/vbeua0s3rPrGZfcctYtoUJhfnvlejQ==","signatures":[{"sig":"MEUCIG3XI7lBKalNKnf4ZBo9uybWV19+49Z8eLMeR7rypN21AiEA9ErZrrrttzrOraCUySiChj4ZJ/8MnFksJl6nNw6lls4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0sMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZ+A//WzN9PkeB+yqZHbWHJF8YN5NrhYkDuMWNVfAzyjTZyqFM0k9T\r\nEsSiK0kmnJL8y6E02NIQATii4ION251WiXZF6o2stCjJ4ijqFz77vTuGUkxx\r\nHaJUO7JrC9DnPUUZMeHeXAtfO64/2MfToNr++XA+G/06faSc4IpVXCycsgF2\r\nrkp8dBUromGUw6uhHQk+VwJPH9vI2/xAG0Na+8XnjB7/RpO4tXPhxbN8Px03\r\nnFuXp7PJ4yH84Q+JlIj1PxfS4pnQ9hwET9cmi82V4NGQR9cFgazMGFNwZ3P3\r\nicFc79iQk3IrzuAIBV2DxH5bMwsbvSHVG7CvaDz3vmdxhq6zrrm1i/iu6Cds\r\nj3wkYAf1WQ+sT95wuE2Y7pqdMPxP95jQDPoggwgZ2o6r35Kb4idTYP8bfBt6\r\ndG9kUQYelnm5NwFVjpE+ycAxvIqx/Dd/Isumw50D27UcVnyd+UhmDhAm9nkH\r\nqL87xld2qN2qE0BfEpJeI3lJtekzPfNiCiI98RPyBGmfmtF55uz6tIS/gMZp\r\ngMfQhJ9IbqJTReSnCKz9jHviOFzgQV2WOBAoOzXJ/j85H+pqDL51jGhl9mab\r\nfy7d4Yjkxk56+wVuqIxmDFG4WaxRbFwssNQl2jiOJNMco20XyBvva3xbmANJ\r\nsQTdnUEDb6R2U61F5rSvXuIHwtqg7kFc0Ts=\r\n=/BkX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.3e30054fb.0_1649888012121_0.6597128356883013","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/theme","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cb45d376fc3eba49f7fc6f79b905f9ef8e0425b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.8c4da223a.0.tgz","fileCount":42,"integrity":"sha512-TTUDuFaCHyuWCRlhc4tHXe3zQH89TxPtDw39pp/TXAYHMMCkVJj9/RLme/t8xY9VwFBZDV97dDE/TeIZO0VYhw==","signatures":[{"sig":"MEUCIQDe4BpuRzpQ89V+prHpkaqX1+pfPmKRVVb0b/B+fVd+NAIgUUJL3MDwwORLMZhmYykhyBkivrmVQvOun2JZgpy3nF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtPzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqURw/+NbGQX0EZ7AgZkh43U5w4L9XyFCokGkXtdazSXX94BZRlhqoO\r\n4NTdsMQpoxi7ESAzZFMEGhfliJukBnsTYu5E7pkcblUvkzpcKgiNdIxV4k20\r\nd9MB1yffZNSiPgJL0wek9v9uDvfL+r7zwzueWlGAm2ruy8gy1S8xJP4aQwqw\r\nUR83R75eom8M1mwzphCawBblS4qyRpqiWoWE0pJdSlklQKG3ZbEFt0bGikIb\r\nVPAep5Qce0b2YsMHbwB+MgRMXU6xrNQ+DfLxR+LPfH6gkMCsqXR7KugNIVDK\r\n2QzNx0DwAszOkOIVCarlDpWeqEatcgER5g1XKs/7ozh88Y+Rm4amJtMNa4VB\r\nM608BIFFL4olqqWkKid8Toyx7Q7huHpPw5v3yfG2wIYOeev4gsLrY1SJW5DV\r\nPXLWKNgwympHYhXlmUuDVTIy9krNAUFNrhC1x0djSdP+0kuGGMYH8d4rA0rF\r\nUmwuw8c0mGczbsVTFMk0oNBwM8W4OkVxoNGPIKvgaDC4RXMEaDaOlgYLxp40\r\nTuYLNZ9XjQAbGiSm3TYfk1OhEZX0rpNWKcx6A/fFNyUn3j3EnV5Wk8AyFUav\r\n/4IXrTwQ52t09756ZCCMk5uMYs34eCUd7Aw3T6UM+47yuwqfFGNXmtuZ+PAu\r\nDXY1HudRq6uljkB8c7hVoTgi4fuTqzm7AqU=\r\n=VJB0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.8c4da223a.0_1650381811745_0.5913181101418139","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/theme","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d79d764be4f8b2af5729eeb81ced6bcacae31c6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.7de8965cc.0.tgz","fileCount":42,"integrity":"sha512-ENZKkEj12Y2g81z78AdFye4SC8ueurx2mzUT6PGEDZy2W3X6dwCwXXfzZ8mosorc1r8qglHJfCI1+BWknv3kGA==","signatures":[{"sig":"MEUCIGjUKLLmJZNK7V7T8tTT5n3i5pe1vfVRbCImM8qfouRoAiEAieJEutRf5zSqjHEo8Pod9lgDysW196z3Ay0JywxYDrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxoUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9ZxAApBeDvgloxtSKa6gB0bKi9lr6aHRJLRylIeqag93J8U8rC2y1\r\nhdAX32MggFOuL3q6A7OWe06eEh0S9l/DIlcP4q8rd+ezKYX9i9saJ3D8eRU7\r\nDb5vuNz7mOXCfiQMbQ+0tnV3vrjHsueVR0QDUDbUVF1ires4GjMOkJ+2N4rf\r\nKgRCNe8PmYH6JtD1b+yIeTNv+GIuuMweFs6bLZscH0saDGHBLlq8vtYyUNTP\r\n8B7hHj0WXSf2LRMk943nrlrH/g6yQlAcwuAOc+byXO9Z5eG/mqxtvpbpn7eX\r\n/knJIS1LJn+fBUU4uwcl+t6fapA6aQnwU29GUbWV8LO/M1Peg85jBmRQC18n\r\n73+6/yCzqJ+Vr0f8tXyBjIEAm636ixHYpXSKM93eQGbximZ/dcoBRJ7e0oMc\r\naBLt8i2jXkw4bYWIo/so2b9YM/P7YjiOaZ2A+vWVv0IlrOEdi5+yyi21zA3k\r\ne7bWbMgMcDTc4zPNLV5ectQ5rjNCLjs2gnCiIUXefbp3sxj4KgJcFMOPecUM\r\nkP3IpJaSXc3io05VVP0VOEQWEtiE3DxMEVUqw/whhLaPT/E1DedGtzpE3fHJ\r\nGJUuLBzLNFUqbuVa+kCpaWM5yO/FCGHMEehH6Yu0tR3g6uPAwwI/UEudFWjM\r\nS0oaeBrj2s7X/qFr/lFy0p9wMNSk4iTlEDw=\r\n=//+h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.7de8965cc.0_1650399764666_0.14967249311394637","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/theme","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.641ed0851.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e90c854a132277d643d71cea5011ccc529abfbf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.641ed0851.0.tgz","fileCount":42,"integrity":"sha512-IIW/4l9cEIRmX/k4QJ4fU0Chb9RHh4PP7gUGvvz5PiHsbjbPp67yTt/BuEWuJKjL3vyaxOY42QQ4JrPdJFNvvQ==","signatures":[{"sig":"MEUCIB3hwyqdHC31Jg2rPT6JcrUzV7jp+WNKPetin070cNVDAiEAwXugDjIEK0Kigwj46xxd20+/GL94juOZCHjcgP1TKD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC8oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvBxAAgvu/Gizi/1joRxiHpBNE4zItWmPfXby/6lZPbNbcGyvY7uyy\r\nSHNkjixUVNmNHjI0yLXsdN2caG2arGPxubowS8h70XnCbcbmG5JtwwnurARx\r\nAyrSTHtDtN0ti/ZKZHgUBjGdLoNrJo6HuSl3JfRbSLRXKBRhwXRtAt8UhQMW\r\nj3wO6ViWDLqFIY9EFlbcRCwXsu5JaRWSobC40JwWc3caHoYdDcpyPvzHL7cH\r\nE8ZJufHFHtZK9A8RH+LZmuFiLnl+poBdqi0cVK0lzToI87UPtIIT3MbIUgKS\r\naT+2eTb8t1y7U8DbKreP9GylRGNvlGJmn3C33bsWAIQcZQ8NzgZ9Z1jbk1wo\r\nct2riTku4kBj7/iRDcMkbmkeLihebJWfxcvTruvWw6g62OCrMgr4Fyl6TS00\r\nhmvOSyo2YL+gXHmlnzbun3Tow97W7pLHFDb9jpUOQg/7QSF3kuiscjNc48Tz\r\n1JjLiGQOES8PJlY2kkZ6HbX8ZQrCTHZyrF/jL+iL8LeYtJC7AD8ejPSzgIbZ\r\nFmUtCGjVSriYfPOhGT9HeCCXtUSFOv3HFv7t9vHz0lSqlrFNngDEcg3J1e6G\r\nb07LS0jcvfPVyb2Hd3tIppXyS7OQ+QQEpi3rDjDojqIimc0fatEv+F6HIhGk\r\nxKDjYL2i2ziM7u1X9DJvPOPo3+iaqjMWzkY=\r\n=oSlg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.641ed0851.0_1650470696367_0.46202253063734666","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/theme","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.e88f83024.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8a64f62dae69403c59a3ba6c951a0257bc35d85","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.e88f83024.0.tgz","fileCount":42,"integrity":"sha512-BHAExommD9Mam7K+aGJGMWNl8loQ0itor+r18e2SlUHKN3Oz3H9Qx+BPf91LRv7YNCgR54pkkQK5xpFfitQ6Uw==","signatures":[{"sig":"MEQCIGMaydKqxK3aYoX9+nmnB+nCSZI5/sbzJJHQ1dYW0tM7AiBrQIs/ZSAiGdgaaX9VLxYJ3Qu/fV7ItPr3P7mjsIZfYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEcUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmry3xAAjptwqLC4l10pcR5STo4zvLCNQWpmcfbGRrnEBd48xua7m42v\r\nUue2KnGPAIrYKbV4HbowrXxn/dL7gXhBT86yz3imTv35Yqj/T3FqDhBzyZnE\r\n1e99koXWf7fHwmbfTpi6TsAGVpMeVekey/Tebx3BDiKbAfDMXruB++90jP17\r\n34du4/vts9hXYH5NEvW3TZ+8P5VXyE21ga+eH9q89GmsUgKhlvUiX2s2ywdN\r\n2ekRlK0grc8zPDkVJEUWzeDPhsB5E0y4DO+5tWsVU+oWd4QYSCxIbJosZSTY\r\np4FcaBlbYHVZUMee+wRTEaY8Ofy2pcOz01ty8fGl/VyY+H1FblHfIzcRIf4E\r\nBHt9IVYRE/Ixu6lx2a/0Ek021i4sKEHrbViNiPzslDBvFgJ4DgDMkiZ/iW/B\r\nTK2H6IwRbJXw9xyhNc4+uLqnjai6uqd0ppjc68jIGNWms1A65dt0eg0T6/fQ\r\noR1FHX4/JxiNtGbnN33n2hIAXdwnKhTUno6W1y3Qm6SajL5Xpauw/6Mv1MXy\r\nRqnnogYbz8kicm2iP7j/NSe7V0RdrHURN7aVwiwn7eLCdBZVOEQrzpPpCG9f\r\nH1GSc3LXt+2fKKRdlaBEt+A2uo4GPedKv/6cZA7h0JSUrcFtfCSlZy6Qt22V\r\nX7u5ifZ0gQvJ4PdS/y1X1+mF5buFA9gCqPo=\r\n=9fg/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.e88f83024.0_1650476820109_0.6527906515086279","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/theme","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.7321d6254.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6baa4d3951eab31fad8971dfa59acd64d7fe08a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.7321d6254.0.tgz","fileCount":42,"integrity":"sha512-Nw2Xf7bgNtdjbcbeh7saC7OFYtdMmWZ0i6PTmc0jK7I9fZyq93teFwK6nFvNKAaJJAuhzsNf7iLXJxmmGG7Aew==","signatures":[{"sig":"MEUCIGWOgDO0p0MTyFGv2WQThCGGG0Zg0pJsUddhDN5O+WXQAiEA2b+vNV4QeNUcV3h/646fswYA2EOb6n+jsM+lCy5cExI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGi4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlfA//eX+y4JD0ueoaOPye1MHtAySGJnVT2vuODWXDjyGTiA0N0lbU\r\nIUXxOzkpM1VjW1+bY0DtPZaaQTp8RNHePirEnZbWLPCfJp+WmJn2U/5zccKs\r\nLm9QR8a6nvOWMb0SgZ1ryW+W2M39jejRI++W+7v6VpX4Tex2CuIfNLSCslGx\r\ndjUufPGV25ogSvaRQZ/gcmwOqCVxhvsfO4FBGzdvSnoE1AQ+G+BNQophZr7I\r\n3VLicqV2Vh6MlXJytTZoOwloG/PLPLG+XXyCQTtwR6ojygcW47KztHHHsgx8\r\nk4bpAxWdZKK3QZZtPYoZVdy37+N7NRtx5oEiS/HVYfQx4H6HXcT/lhiJvSkA\r\n7J0IBu7YKmF1fEX9M32gU6EJb56mm305us5FY0gRVLvXxQEXYeT5VZyippX0\r\nR4hbFNZta8PksUGVHwUdnQ3A7M06cECmBC735iW9AoM00Uru9mXYKbBejgcY\r\nyYEv9CyusNJKVogKdX5dpwC+ntJmZbARH79rXGAH0QbCCfXbBu9GF/FjEUXt\r\nisQDWQiydBL4ct4xJaR6CrLqlW2tXtzp3NsFpIr9KHZi3Eb++S8l8RsmdkIx\r\nozBJscXClduyvWHbmLhrUEarTIVdWygsFyBYqsLDVV25lhlgTLy2a6SHMRyx\r\niadjVle/GGQYoOBUBqkGVHvC0ZuuU/wzkCM=\r\n=Rhpy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.7321d6254.0_1650485432579_0.609336097840474","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/theme","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.3ab956515.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9a7978dfedb2ca59920378458d1772c22ef2c0e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.3ab956515.0.tgz","fileCount":42,"integrity":"sha512-Tj1StmA/pn80yQmtVqLEsf1r5HIlbBCcKWIViY8+Fx8onp2afcm3BgIU1w/p7/L4UXzKby3+67vLsaoXZI79/Q==","signatures":[{"sig":"MEYCIQD39HVC3MIfCS7BejV799l4pVK10nJFDyI0EbSeHEG+VgIhAJZ8/y83ah26KAWlEK5223XDaPKLdjbw0TskXQsif+0W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZre3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcpA//XcpAxmnLYhB777Fem76YD7R1k7Ihv6ZhZ+k2gMbgcvVfdY9t\r\nX/+AvvVS5+NeCaB/YJytDY7xUO+HDN3zUXECn+L3uAtYZk8gTRRxwf6mMnKI\r\n3qIcc7ogorhcJ8SIOIzKhyQFHsrgriXFLhNL9Ts+rA/TSi4GfPmTMI3h6Or+\r\n+L5NkzxPimAE5hnRujnmu2XBIWm9xZRjQTPzm9uXgLkvmS9+ouLaNUuy65ZD\r\nvbLK07zC9r+t/5mQPSy0FcwjUGWAlW/2aS3C/kp/6ARG2EZu9whlihrI+9tg\r\nmedpRhG8ZfCr4CWfqAATyNGFcvcRCxbWr9leAoVoGwV/8QtEIqDkcKZHK3Rx\r\nIeiLcDnP4oR+nUHATUQqvldn1tx3TfEIijIyL06ZB0F7SsCfStaUjM8A9Jgd\r\nSxCZ+szJFjxZ5FHw3C1Wry9ErCjrt/+xQQ6lPVp+/PfffSucrND10ZirKzdw\r\nZn7eQmJ+Q3Y54f0QNckbujD8ec/uAJ5YV2dGKO4X2JKCqAWHp0oZJvYyDYMp\r\nSXujXbw0uXtmqLQdr6hWkEKeX7arTMh0UvJGmtt8EQXjAY1krpHbUrTj/2MH\r\nbX3V6dbU37zWRv30nw5Zp81aLubmaWxjSFywZRVesFVMrp8CTLOAxbIMR7Sh\r\ncGGd0eL7HrXPhjkq6LVw7J1l6BqdNYnGp/Y=\r\n=2B9J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.3ab956515.0_1650898871135_0.37368534847488744","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/theme","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27863ec21c7c913b80b98a22f056dd3e75b85a0a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0-canary.53b3cad2f.0.tgz","fileCount":42,"integrity":"sha512-S06XAevDCDWMe+GgsEpITMS07imUidzadNaTbJsqssFajBLr53QWVZsG84BpjXKXoYvyEJvb0hX5U0lq6ip9UQ==","signatures":[{"sig":"MEQCIGB9ayMlLqtAIwUfwNSY3xGoveQRHWJGujNKvZt2I+udAiB9Gfi76ToZ3L0css/nbqJaNL2BWGgQ3aqOgZ1JBuefVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTq0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGxBAAntfAny53Ffx4Hdw0d3MIHI/WwJpp01CeF5T1qvR8NutTYVKT\r\nzDNZHOdhk1Sauszn/KsvUS2uOiqmGVoUF5TV9fMppXq8NBt4hg8NrjYBLL/k\r\nGkKpp3N2FsBm1053PcfcVcmYhwbygTTyajk2AHWqYc/TkAqzN/zp9xORPkg7\r\ntSvNvIBOpwmk4fHQy6iNgXfRlJPbAzjD+arBk9Q2Xc/rLQMWF8h+GOY04c2b\r\n0Fc1MP4bvl1uuBf/Pdk0AKT63YGJosoVmbKJEj/Ioi9m6PB1+iQ7CT67lQaL\r\nK8yGybgR79p8uuginulEQBOWUn+6WCAqt5XND81SdIa9hJ07DUQF1APrCtsP\r\nxy3K5JxGG1M6tf0oidnNgoRWmFVp6OM9/ldTy4L3ulIBiuqY3qnHhGWjjOLv\r\nevD4AYqKKvX5LJk3AZfrQUEjuGtUjx/BzCI9YFwodbRnrT3VqcWujIr/NRHs\r\nLqhM/+5UpcJbIN8tUmZi3eLzSRizoqINqnQvw/0a1nQ9n1aVPK7ZqXPS8aBC\r\nBiqCtpD7c66THhpCkFNDyvk0SHOqhMM12IMGOCuZsHBTUFeznPxRL1qkSSVf\r\nBM4a3Ao0vlFpi+IjXpy1Ey0TT+o/1BScOnvISEJykN5jgJlVji+uzRpiDDut\r\nt5pCQpqnpNLU7rI3QNhxX36PpSHIcAs7Nn0=\r\n=Pqiw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0-canary.53b3cad2f.0_1651063475814_0.5816839444765942","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/theme","version":"14.0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@14.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbcd7b2116220c44ef8a89c43b068b29d23456ea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-14.0.0.tgz","fileCount":41,"integrity":"sha512-6/SENWNIFuXzeHMPHrYwbsXKgkvCtWuzzQ3cUu4UEt3KcQ5YpViazIM6h8ByYKZP8A9d8QpkJ0WGX5btGDcVoA==","signatures":[{"sig":"MEUCIQDErLuK9mLOJL/jdTaWgiXFbA8lbVEkp3fv/4N3Jb7qaQIgaXljthzYvT/dpq24NX1t+HsGOHU117bUNx/coSOD28E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasbsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorwA//YgfUIgSuGxPRnJmmJ8+eyihDlJjtfhnnI++3AzX5/5mmpAr0\r\nufOoI5IG9ytsXMxEf0wHvEbtdj7FhjlUU+ciEMxRocxsHPllFdDBtYSYuTw9\r\nZwpEtZ7A1sETNUbKWdHymS+kBpUAqGQay1yEK6arLwW8uYT9TXP2cb8Y3jSX\r\nlAjTBoACY9hp23X20l4IEUaUdvcYtt0LEwEdgVPei6dGgY4mm3raJwAGFBfO\r\nHWsqWsSdRVCC4IzuC99OtdfwxdLt4pLcYMLhIIYnuAjjSfgLP10bq4ClMyJS\r\nHJ50VsnIRmnbt2vyzNqPU/EZNXLeAhqnappObVzZsc8M/hRLDP4HPra7+13k\r\ncg+nxxJtAIHF5KJPwl1mPwAUNRE28tVEzsuiUrZ8xvTR1d16rE4IK602JjYB\r\nQSndfKJY9UJ42drlyzmTWdECFPLE0qPlDbzkhLhCXUKAHR3aGTwLG6p5K+hL\r\n61uBTULkqKKK/xzm0encs+n7Y4TGT68Hsywy6ajVmTtQ4HWpSMCmyGqjOmEz\r\nRznuXNrpWTKYO97tze+dvk1D4wWEdAMTw79sPEQt1EzCijE/ekTw0BK1TSWl\r\njlkGPzFPJIOLhrtDrU1mLWLLE02OxTAZr7WgGPfhYdNhbZuDqHgObyWxeV5+\r\nS2TKq5RLpa8sbVjU3hVOEadHrLoefs60QN4=\r\n=6xzy\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"^14.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/theme_14.0.0_1651164908584_0.45069667501378685","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/theme","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.432c815e5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5554ff88908ae23e12b4e138eaf0cf335faffed5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.432c815e5.0.tgz","fileCount":42,"integrity":"sha512-MBIpyp8H1+J+WxUm0Emcl2BYuWcbTyw2wOvFcb8/cHgYo37sz9n6wZeVKOTBiw6gvVgjGyoBA3lt6ZLs4dEnNA==","signatures":[{"sig":"MEQCIBMGzPqK9Y8EW1W7/dKT55T8UwE8Vatdrq06MBN8fEj8AiAuO9yZ6v94PWZzc4UHpl0hH5jYMGEF5l9qgffVgafUYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiascwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpiQ/9FCpjdnnelYbo3LGOxqHSBV1M/gTrLABoVBk+Kp5TamNm4NM+\r\n9Kvp//jVCIQgTMbt0LyltgcuTVHIy05g3lcDtLJu71m9zL7PBRkJMrLse+2S\r\nb3RFpyFRGUuwW4p5WGPCWDbYbly+vfryOxBANTULUuSPbbRb5zz6MWqaU4tn\r\nquC3CSyACn652DPrnyNu7SqEbtrVeFT7g0YQElljqVwgLGO8WeXnidg1pdyn\r\nsL9hkE9Fa8Wh4yCL9YC6j44FYzNovyxv3NypUCdWNTaV6KLarxd6mu+XwrDx\r\nmGp5eUw1UY/yrXHwR+Qiyy1RlgxqKQFx+wcHwyqe+8ANrK0NQS3F+86ap81m\r\nLSM31YKoJ7tTTCeJWTOIr4a4RDEfSStqM0UHldv+XnjLJF5k/xC8TYNlLNaE\r\nz2OkQ0nD/OGLR8dQzqCTghrzNxkwgctr7dlpofIWDw6/KlfRpdqAWnGktxcc\r\no06pxevobaRhVj9K5AljsK61Fw6PvfrJgf17KP9+1OSnn1ehM+qRAtctx8WI\r\nmOa1n8W9YVfBw9eJuffnDZI0WeSlRJwdmI4wmkZjan9f5fl4t+vjWpDMKMU9\r\nLFyJ1AHhnX7APoiurunO9Wk8UKyWxUopl8tf1WZzcy41L/uqjisO9sQCG+US\r\nM3ZijekyhGjaX1REYzZsZ/MsIPWmKza1mLk=\r\n=H8LF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.432c815e5.0_1651164975874_0.4824676764818612","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/theme","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d680a39c1d6d7d5b515fcad764ce0f5ec39c1096","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a0f01f669.0.tgz","fileCount":42,"integrity":"sha512-8Ms/d88pZCXyl+18Pg+Z10+Lqpw3PSIPJraqMq3n+Zq3dtGkxODcS/sphpA0V17EF8AYXKQVOJE70njoGHToSQ==","signatures":[{"sig":"MEYCIQCkrKXHAH8WY/64hTDyRWlokJztH5XF/rJQ0UdlScjfkgIhAJWuPQkJvZa15KO0I44cHTL+mDVzrbR0xsMWQIaKOrsw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYGGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmomiw//RlB8b3OosMoxeDyMCx2cA1mSSNpG4ox0M4fsMifbJm23PALz\r\nJxkf5Dm09JRxg32IVkmIdrztaofQNqNn+k1pNqukHrHwzaWrxqpxGclcE+Zh\r\nuokczjWdlESvfJUstgUe2MtZtIpqVkLGIYcAUYxiRBrx1C2XnNLSkh79F1fz\r\nch4ZmCdmI4arylN+8ltas0FYBKlUkclWnwgUrMmfzey7MBXW4MyPZZ7xF1sy\r\n4iIRg6XpNWOwka/971TQhXpR/Cx0s0VS0nuJUd3NtMsiKcGUEsoFxo+7O5QM\r\nk8KO0I17dV8W+tPnluVGGtjkVO2JkexDlpPnJoblEZa/JVPIIacjCflvJyiR\r\nbtPHW24GAOiH4IdJDUHh5/PEpRcTovfYl+FmoyboQllGl97zkHX4Hti6mpk/\r\nuCphUTKyIZaWnQPTL/ZAIXyY2hLPmJsuQaKkbr5VIHT54Zw0SPXY6Vmuew7Y\r\nTot7CPt9bJt2EPw8mG9nJtuJmXGuXFtGyTAdYTn6MzeeNlBv0+7RAeVcsnK1\r\nuuLJM03jD/n6f1i2wmKoCTJSGRO/lgYuvJi80dK4wGiZoIcEZQARUfDkjqVO\r\nPezj8Nvz/yhIXF66LksvKDIN6dK54+RIj+FTSpccIND4LDzmQ1oahSQYxRho\r\n91mB0FgG46NEwJgxDEIdH1FO8WTJERiCsoQ=\r\n=vTS5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a0f01f669.0_1651868038411_0.5392798884726224","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/theme","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d9a7c2716eb97cd78a3f3327fe94c1d4f87b30d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.276cb39a4.0.tgz","fileCount":42,"integrity":"sha512-0LutYR+KGxcW51zz1Y0hjGkgWWzVVziAvK41KioQBjfgS5RHRJJ7U0GnecuuP7B6mVurtCaFFQnkB5sVsJKyeg==","signatures":[{"sig":"MEUCIANhAcRo4n4o/DEhrIy/9o+Th9v76WvUKAnPFpsck7bIAiEA4/UQ7SuF4ohwOW47I2LVOthitECG+YYvxQe7v3UrQno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZOIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgLg/9EO8ApiZTvUmk9C6jUJRvzOzaJu0DqpuyXFAtN42xvmN+tIi6\r\nOV+btmUlVGvFWI2M2uItIaj+m9KgWQWkRXxnqAMsLB+8OzZedTPQVUlwwAJK\r\nsBpgXXEMake0DkmeImSgPnFGnrvAxKsOuU0crSL5e8bppButKlb2rAbIWXEW\r\n1G7bb0nqqiwFwZQhmTC/GQFunfNpwf0SLlXuyLG4f6UvH+k4ejSdoTAvg8S6\r\n6Zl4q5SKXuXs6VvclInp5vhmaFU4eZQ/XqrB54ECEzGB+i8shsDRdQYxpL8+\r\njuxt9iWV0pLN9O1YeggHSBEE3WpsX2pHf2JggszE13whBJCmSoclTaMYh23b\r\n7mYthQLrUkmKX4AL6TBI1AVWyU2Rujm2tg89j/WzjWLm6Y2hWjsDqW5l42UK\r\nCchvFb51CVEbMjLBBfyZl6n3bZe1f9K5RmH65JTS1LoDlSbW6wfyABeSEVW7\r\noBaro3Y9hEy72QIbKGINUlRioos14UcbiC9VbYXrVY08/CjuouoN+sMkZvmS\r\n3EAQf0QOKSu0bUJ3zIAhKTS/4LSz9/V24xUlSMAMnxueaW9UzUfTr1dK3xXs\r\nZXYpR3RYD5+58RHu/fNrsN7FfBNhKRoqHY42KrezFIZqmvOdT82gu4Qu3HBH\r\nq65zT2NSnXQB9MVVNxvZow6WgCwhZnm2Sh8=\r\n=rAr3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.276cb39a4.0_1651872648529_0.18486620041148205","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/theme","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d91d087661d6b944c00ad2e7df20861efeba3d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.4fe98ed70.0.tgz","fileCount":42,"integrity":"sha512-Z6TFxUIcuxSwXiMFfu1zBqic/7Oz3ARkusJcCHRCAVawAqqm2tfUssBSomKSsN3ZaMi1nLnLdY3GaVynxTcIRw==","signatures":[{"sig":"MEYCIQCzVACJC9sHD675NPHMmfCYRK2FXOrisEHcuJzNXYcgVwIhAKR5b8E3lvg3Z1d+YNXRkUe7+EhxOVeRJ2d7IjRst3Ec","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZlKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDBQ//RUwhDWh/P8D3Uan7q/RXf26ojIld2YS3Vd2WJonrVO27AA1f\r\nhbx41Hc+35qCGQx8cHjXBMG9PDmzUpSq+FUEmw+OXfQZyfnVMhQQ51ZiRldb\r\nhZJoRy8CsBuxAKTKQmtSjLH3j/RkJRrrUPnBQyk32ORTkYtmiZ3VlSI9lz5W\r\nGMPqSq7XuRX8SHR595x0vNXP60YqqdSpbQBM5zMLLqHpmXM0Jdo3wRze1Bqf\r\nn2m1E1JKn8jFqE7klMj6fOAOPaT4fSyFYOhfwjsTLaFNEDB8AKM/PJYlWWwF\r\nhqEMC3+Z5lMbEq0R76GDHBGFuJ9qrHOLbP+09oAPIboUBanBEjNyuCYHO61k\r\nqpahuVsQl+hxfHK4dMGjN8yFcINgtaEE+Da1e7Vq98J8sPAPcUJQq6emaTlx\r\nCc3XXMq5+V9M/aDjbhEN90QqiM1T/QNtGxHPpPW43Rx6g0AWpYCPJe1j3/IP\r\nZgLSAzAyWv4b6Su+CjZiREYxxkyQaM9GWRAE2wpPPMOdETWQCTdZRHpzKU5a\r\njoC+3CuZsEP/9lUErH47YlQesGk6EaT+pZHQpjf0eArpFulP3jQbjCCjyw45\r\nsKjbfBzeDJcxI+G8k6Bmi8CNccanXlfrmCjL9XFc8coHVOhsz9R3V5IVc/dr\r\ngrIBrFrvPh3GzTWb/9MU/CLAGzpSUbjqhao=\r\n=OKAV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.4fe98ed70.0_1651874122019_0.7280468841796062","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/theme","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9256b0b3851207499aa1519d2ed7706af2f37666","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.58b130a3d.0.tgz","fileCount":42,"integrity":"sha512-0Jpov0J1igCQgp2DbVzTP/nL9AAlokiW8w0XNA02oUBarzGI66X0rXReuLuWzkTWyQHudIkTUCz0pTHun1JXeQ==","signatures":[{"sig":"MEQCIH79+is8E+xlTFIGKm5YL1q+oX8xOKDFHnkUzqSlz++tAiAwHBn+hupHxPQRH53zRnbnI0uWEstJ9RHdYq2zftWqoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZnVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7uRAAlVY0Wb4Dxts1oGbRGNNvIw9nj7SCqWumSnXxE0+P3dkY+adn\r\ni5KjbtIBrDmufLzYFK6GN+BAVzL/Zo8juGgeG+8nPFmz9LGLz1TBdM6Ozjt5\r\n3irKEbd439c5p1zeJwN2XfsYj+viq5yuwopYiFRDQOnyp50XEP4mT2rkKgz4\r\nyA49Gzp/Eoe4/NUPbVdMUglkgKVa02GpSAz997NL06b46YV9/5YYfF0iMETr\r\nb9Tnmm+G65gKPABOy7JeQXjT6k7IK4fPfabkv/m9KfEnM5tjCB48w/jrC3sB\r\neyaz4MhPhhxEsJj1VOrMa+dCQsNUkUDFneUGGFKAFC9IP9i421r23RZqHc5x\r\nuXtdXhBTGxBaMQyd3xaCPjXIUI/TwL8AmlBpu24TFSagNbMF8KAoriYIZbHq\r\nlmgjhB3lk4PRStbRiM+dz0IbdnMjFT+zxnukOz4WHxeBb+tkLP8FB7T6HmFP\r\na1tlyqZzDTfqDSgw6uOOhchJGqqlYG3mc9Tts1iR3lW56WOejddrckDZGoK0\r\nImwIJGNepnllkK4JVpPTqHiFM+kjGCwSSQC1eU1qT8GyeyXWdgNuFBFfSds7\r\n50EwDP9X6eSViOOVEUCDyPVQsLrQ8PxQgZs1dyuZPX6A+biDXwkqhwrS20Do\r\n2YcumUiPN7C1rBepItsUF5/s9AwPOBOLVYg=\r\n=iwZC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.58b130a3d.0_1651874261191_0.562817895094728","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/theme","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2d3992959ce0ef2371195aa78f6d2d7def6e9de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ae278a2fe.0.tgz","fileCount":42,"integrity":"sha512-ddqcJTvyxUtnS0AVjDLUfk6L3X9Hg2leTC62YUBdbI7gdFpGt04g+3L/IuMSm1m7AFYaaOEnItty/mr7AYJ5Pw==","signatures":[{"sig":"MEUCIQDoxTfQERIsR+38w7pstdgFRfLAm2nRpAk+U9JVvWyfsQIgD/E8fNTFkJKpFF61eNOQdu5rXvbx7WqcynLbv+m7nsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTICACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl1Q/9HDKX/jhmcG9TofSf5G8Dc70BKde9thDK8Cgfx9qbeXUof7ra\r\nyzVgTgfDLpymHX1fo2YFhDTzhdATXn7jBbO/rhnbvVkywcr4isP+d0skV1jb\r\nyKRpcBdP4uHFhX25bvf8eCXxt2NYDN7sc6hpkZVBNH4j0DAr5eGwhyJg/pZs\r\nsD/CENcGaUBcwxn/XMFfcEbUKzoYugPNwGYF5sxSSBcwnIWBVu9tlKJBq7kX\r\n/zrZHpqvlH27HoeaYunorW/v+IeNUMRnVcFPnkWnBoyc6o+pJOjTOh8opqOA\r\nYP9Li/YzFnLBGANFxRU4NWvQV87g2bxqqSH0n/QMJ0mpdQjVrZWratZ7w9vj\r\noGMkovX6q9zoKzWp9k558ay2rz9vep0EadFKqQP2XsOeNrxpi7X+gNq1cQrA\r\nICthQnOfcWgu4AzklXeCVYGLvjlGMcgKAqyJ9P+kY8hNOw1h4viO94UNCjjH\r\nIrkUyfWW+oEGPKY1m+ishe7+Yh+HNKfPoIoIBWmfMJ48sXMflN5Piy9bLwF6\r\n+hVgwQ+OXQn14Fax0k3HdhFsUU04en8JjUKGjEFzqHSAvMkpFhLQzMLv9RjQ\r\nxlTWdCzTjzTwF5LBY7eeGPHMuFw+u/6dDrlK8VQm83mgaKkmGVPJ1BQuQzeO\r\nq+lUvxPm/kMwdDNC5zKNxCO+nkRjKKLowjY=\r\n=KyiZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ae278a2fe.0_1652109825789_0.9976240744262777","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/theme","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db9fe5c64cd0690e23ab6753369e5aa973cea595","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":42,"integrity":"sha512-Q9mTWd8TZUyPGK/v1Vbil3FI1mQCllg+9dsEmj/cDVqFDY2WlfNGOxTAcBvk74r2f1Ga+/ne6n/QTXsFOt49hQ==","signatures":[{"sig":"MEUCIQDi0ltCWOCEH+6AkZagvW35MIQcLP+EpW4O9hB2Psr2sAIgdU/hUpmtgrkUE7EdcEeKuOIvZ8KPOCgQT2NsFf8+QDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyHrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkURAAntSViZ4eOeeNvoKDI7EWFPWxpu3Ymc71zEd13mUVJkx5V/sV\r\nyTcdcTkrJu4TFBkwazTrH8F7BBvXlWaWwy2QPXsHhUgU56nu63PdQF3gAt3t\r\nW0+Dru34wf2PRJgd+yiaOqToUZzmkK9GPo6xAmHnAvnwZtMBQ28/k2cV0Z7c\r\ngX32bbDoBTgeSmcRzNBfch6PTEIAOHhifxW+A1BYt1Wth0DvekR2LS/J4Dsv\r\nbPq6kQsub2LotjhQDDnVQX99TVQrvMM9cBoG7ZGwPnkB82b8z1cGTMPw8WOz\r\nEG7rl8K+yCdqkUCz9k4gl2lLW5fn72v5ehIzV4SvtG6ufqiXeUg5Ykqcp8Q4\r\nheS9kDZl6y/kndTn7Yb7GtCWDqmMrn0qyfwIfFiOCu44GLE/hiCawiYbprz2\r\nzwdkVlkXnfwDosTzleOXdU8OSYAvWYBA1hIBaW9mjMsdEKJzB8R7YsXPMILi\r\nnhtGHNp1Rmwz6fgcE17k7nMc/6XLV5Cl/DSS0nlaDekh/3l3OSfCVGlsyOP5\r\nfIn5paGXV6QFYPpRDG0ZfwToWKXq01knnFpigAwxEN79F38Z22+Len7NXnhc\r\nULGQErkKS4TWshOaSdq1dDcdvfqEFc7ZVfsTEciuzelxlv+cRF1OnxKV98D6\r\nLeUQqOhp8NglKgfByCIf/YTVt0CrK+94gKs=\r\n=aZuP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.bebf5bfdf.0_1652236778905_0.5888545680048312","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/theme","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c41291fd625e6796422096756be5522e55ce0ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.e6072cd6a.0.tgz","fileCount":42,"integrity":"sha512-HdqadfXBktY6Zvqa6ekQq9XObu8HZte5Sq4/kDcDAm+B63MEbekzA1sS98JmuIbwnH35iqFJRAGA3UOZZ74FNA==","signatures":[{"sig":"MEYCIQDJtDZKu0Tz+6NfhfmaOODIfMQX2FE6OaWJU+uAPMQuKQIhAJzs5HkqQgaqZKmDIxumNaWFt21DR//5nV7cpy/QDr/c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBnrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiVg/6A/R9jwwDsvNPYMA8XyZLZ1pbeHXznyHjv/P/jjnm0pCeR+Hk\r\nb2TEO2hXAo5DVDrjfMLbo6Rct8twyGVOnI7lyxPCc5A3i5PEvqwAIc7DzlEO\r\nT8hGc3QCmFiyRCRbVtktEe4XVckm2up//qiqKTMA7SnQ0jAetkfiJW2J5zAS\r\nIlL8umbUjCVduPqPrk26LC6vLCD9R04A3AYvQTyVjQCUKlUXuIjiAG2l78st\r\neSzoyZwQYAm9QQO2wbi2eYkSiY8A5GOmb4jxGaMePX8Bzo+rv6nsovxAZdos\r\nJDnF8n8QGrhjiRPoDNFJf8X9UFgEJXYSLpQFixUcwWbqK8sCcTiqqEd9pnEe\r\nbuiFZ4/z3SqXVPSfZ2NCzh8kjNoiIHGSORHpw84W2J8owzTmUSrG/09tjDWY\r\ngqyZzCG370+mwg5hFNn70d9QT4Wk99WHs0dYmtSAfCrhwkBktk5ypchwFrrU\r\nhWJ2KwUa/VbjjFC1nu3pCSbgxmVkeEdaBsF2rsutUDVeiwNXwwoMIvn4BVz5\r\nshsUoGrhu9EjLQ3+XFkEwzZm75caS2zsZSabgivqvgfa53AXYDu/auwUwYPM\r\nIpJikgi+24QMzUhQmOuxaQXvdWb3Phkd63eX1ha2kMI+BmQ8vgyTl2Gc6mXV\r\nuGa/5AKXcAOTszAKgXfCgcKg615ryw/KxSY=\r\n=Ze3J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.e6072cd6a.0_1652300267729_0.8223682267306387","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/theme","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a2fadb845ebe00f5ee95440561171fc316da360","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.5b40eb988.0.tgz","fileCount":42,"integrity":"sha512-LO11WdyU2C9C10WyiNxlHJ+uZKvyQ7IgPTGrJQDYaMEM88oow2oPCziwDo41TdEMZRe1FsotiOk77anwnkqBiA==","signatures":[{"sig":"MEQCIB1246ZOsLwYg4z4NFkwJ49/gHMpXETdSvnNlIiweSClAiBS8tSvufPUabmrd3w4pQO1Js82zH8MBUV+1SU2SlC0Cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHRTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodXA//bYuUyf4K6hKj1VFTu564y9SJUBTMTpUSGXQO/TllNoo1pBya\r\nGT6urGG7I7MjqWpvtH2+fjeg0uAN63TPXRyvSVAP0nRkZiaD+GmnkbVCUgwl\r\nKiNjkIB+nZh27WgXDnz/1wxfkNRyictcwvSnYw81V3bvny3smFRbkTbQtxz3\r\nETeK4+XKmr0tj8SgRRtY4ugll2p5S19yGkhNNlkP40UZ0Mbks97p3tPecAXw\r\nJHIMrWQFNDPUOhqyeo2a7vukFqN8HMarc3K7a7oNtbZUVVyu8bc8bsVImXQb\r\nKjfDwuNQdhGw1372iBg918eTSMnfnpT7nCI3zI/H3gx56uyndwEDcTBTTTgf\r\nXex1D+uwXc4rB9Qib1v6itQcEdQgN/Z4nWnTvQoSTS0Zmq5IMEX1ykjoTcPy\r\n7rkeinlOsInUKnUXIbuWv9EzmdoS7MM99oqDaV0IEmINvl9FjqDl46Oae2h8\r\nQBQYBmvDG4FyuSO6F1Js0s36rtmZFayBi7U8XcCJlEH+i+iJ5XEtNaFx1hch\r\nmFBDMb3D05X4EZHUGs87yh9Io5V+ktjX6yV9nq0wvbW2scXgXjxyPkSgDDwn\r\n0JtTfNjZYspCB2c+GWtpoSOpjd/Mq0swRudtWgNWkxpPjY1+1gk0Xw0YGRpz\r\nj+jJwbbNpc6KjRi29EJKWYfpSA4Q0CzjMOw=\r\n=LVk+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.5b40eb988.0_1652323411150_0.018188677942240883","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/theme","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c788b83adfa9ecb6cbfb0fff17e4e9b07e5a7c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6a61d62f6.0.tgz","fileCount":42,"integrity":"sha512-YKCvX/lPDc69C1ROpNPeRVJVz9F8KDXqmOMZYwedy8XJy47mbG5JRQb/d1hyU2wEsstHJsKjKxdNOewcupOP4g==","signatures":[{"sig":"MEUCIQCzvUUp46wN6yUQPzDBDdXuGtReqwFK9sH7TLjYAxyPmwIgUkl+PCy9cxK1FTvU6Ow/945J64P5W5hkteGtr+ZyaSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW1cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvFxAAmnJgnNg16LMS2qHXCt32mIGCW8xeouc9ElJE8M4aWKLst5jW\r\n/8SNowip09ytjQUibpc+fniXBamsiYqzGzN8dt8ZcB2L6inacFpM4Ejhn7yq\r\nBA7gSwpgYCwyIXccPtkSUVXEnFpeIlK7VwZ3VBY+Md6EszZyNuy5RAgSEaXd\r\nf8u51BF4YoILKBCW+siuaKkMrRI8FHt6iGDtJo5EAb6iGLSA5vOdUG0ZHMTN\r\nmUULQf0F1iex2Df+sInnW9PqaQRSxU+B2qO3dyZt7FQQePQN8Dhg4Htq/eiJ\r\nhE3B8mdyXcAlrVSX8Ev0AiQR/7eM7cFR6xBZw+EjHSwqqBpHrfCEGyAjFGdP\r\nmgvhJHxJQHfarJlJiFcRk8zAJki+yGagM6wgaONpjy85AgPk2m6ASiAoAbRa\r\n36/MxdPFzOitT47bpx/oRplKiIyhaReQMz5XtV/0FuXLprQrxwbGKcsTooH/\r\nw71UXV1DuwfKRmnml0y5RSNxZi5Eex5ZvrxrVZT5ge4PdMLmBrUP/v3L7TTC\r\nAagcFArJr5ChGBRUfUUPH9k7VZ6LreGJd/raAFDguzTRJUSItVo971z/B041\r\nkf30K7QmTprL8HjJJj2CfCPfV+GjstUfmu7pDSyij2TJT4uJsvkWbdEYO4Vx\r\nQaf1IDRU0yvzy/0kdz8Yo8AMuEqZbDoTXiY=\r\n=lzHO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6a61d62f6.0_1652387163887_0.6497102573524745","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/theme","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.05930a453.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e462f2a6abc10056bb969a4c8f59fdc64a617d28","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.05930a453.0.tgz","fileCount":42,"integrity":"sha512-KRTkTywe9KiyUF+UYLSNZNU5tkNB56S0Uvhc9jFB5prp2TQHNEu1j11jHHMxyVKpYtorXJZo1v5x63PpXfD5og==","signatures":[{"sig":"MEQCIBqXm7T8/CNxhdnsKpjIug/ITv3uc21+VkGfKmVvFnWlAiA5u4D1W32xBhvDpseL9pc2W/RcRvsCK5m4ELL8t/bySA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqeYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorcxAAhAE6Or1pyC3v08C19+RWSjKAJVCoZr8Wulz3WZ7zzOHoaXiY\r\nBDlYc2wptI/QoxLcMxuwnG0tjwt8GQkq3eSpBC4d+qit7mCFy94Muob8x2a4\r\nTPNYqGBjejac0583vWXGnocnIZGGtaah6vo9+Tf2AuuSa05YSwUOSQOleZv5\r\n7BK0LQlVgFUcHE9oGXOT5xUPfQuKI2c81YY4/R/bwb1MD8aQsCofu0AsmAA/\r\nsUkC8jT7ad5u71EPsgUMGGWBAzIHG4GjilnAQan+IhTyQDaEBzEp1aOKG1/K\r\nTr9nSq6ERWYpQQcrJz8DuJcldBe2y/eOCdEKA1NhE1QKZS5GIiE40OiRret8\r\n6XB+7ClOi0gGhnwESkegfuy0pYSBas7DRJcWXlX0lbW8IZwreWQnsGePfAk4\r\n4k4iWbry9Q6hvY4/VaxpZpa4PerGJ2knOEQupeDbOce03lQmMZSYuEXpTE2q\r\newAP4jjJu4EXASh4zGP/CUuE/4xwvge5SnMK/+aTyJ8+9khZTZg8NoLGYSM5\r\nTJPuaEyoVX0hU2cTpAmz4pHhj/MZutCazm6/WW8lcw5Xzx3j5skLMlCAOvdK\r\nxbkZ4CaHNzWuIMhrQ6tVS55uxyA0dBhKRCLyrAEONSDqQVwwnCM92+LeG583\r\nfzMPnH88qQUYHFqIxi8QuGG66/9jj/2NTDA=\r\n=ewQK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.05930a453.0_1652467608126_0.5275456794445148","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/theme","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7092d36acce79df721a254c77f86ec168f8cf261","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":42,"integrity":"sha512-trowC43VT/Fvhg1/B3bB861ooezBdc9kgo6cpW9cV6+hgsJJa8QoH/L7gSxyy59iLrGfNcx6SH8Dhh9fu3udqw==","signatures":[{"sig":"MEQCIH/rIh4q2nzj4PmQXEJtUrTksgIjcYD/ERFrNLBSf6blAiBHIUX4K4oHZ7CMcuSmdhAPHywmIyRRT7sjQotTMQyvAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWx3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZbA//SdkryxAsxGqu5UQ9t6UgSsQEGgDuO7+h+VUEFstKXxQbIf4D\r\nLN9NEVtXncqYaEnAA5SalYvlP214EfCrZfhGvQTCiQUAbE4rD3eqw0CEoYVA\r\nURi5a62lQDqxufeEYgGm/D8bEbjrSmEuO8Xbbfwg/YXj5oMGLCTAbCzId+L8\r\n3AhYnYRlHnOsEugHAyaoNG8qtZ8aVJl4dFafDD+wn9cpf3KZDRp6Tj6S2Cxt\r\nnf0u7bwtSYH+jeikJStbEacE09X2vGDgZ+tGCS+IvETV2jQ6avJ25zj/Jg8Z\r\ntU6fsCy+dJucrAQzDZrNO7RSf2AmOIrBv4LQZveAqJWHIhxY8WCmRMu1gJFk\r\nQlPfGFxWZ3Y9EgO4nd3kcyF7e/2G/MkMQmqVLkfT2VhciMrlo+ugvn1hWQv/\r\nNZkdALPe9iqYp/rypQW498KkSNR6edySbolTA4mTM93BxuUxL9tNgos8guX4\r\nzT/ZwUzrGDGUB68GBKD4OeITojXOs7yPVOyfZ1stH/YiNFZzGliRXGqkO5C7\r\nJIw3LkkcJiMrHAW1jUw5fJ/Fzi4WbeH7bsTmWb1L7uYBzzwKZCh0asg2pO2Z\r\nV0tz3nabnuJpXpbQVt8Awkj0FgEvs/1CJ1v/ZnRZTEcHspQ1aPyrvwoHnWmk\r\nGePNMXGHQ/r2imx4OUOc7dWriUi0o5MQR4w=\r\n=Vy2X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c0a11ef0d.0_1652911223000_0.011022438565491344","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/theme","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19db7607b7d6dd32096c6feca9359e507f546194","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.2f9b268c0.0.tgz","fileCount":42,"integrity":"sha512-d0OmTr5Ej6FB9iII2ZPWLDnumet9Di4lrOMUXttbS0G784JGzU8OUxRDDLNRhn6HfrmbAqxT8LvwCccnDOKcvg==","signatures":[{"sig":"MEYCIQDgeEcKsUXywIkf4JYIMFWPBEIBb+y7p6jaL6rPkeJ3wgIhAI7T3x7g+YQECCoKlrUugplg9FlMCw88h2msZZ0Iw/DV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+yvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFWA//T/rlmdReb64F4clZbVIO+2unhcVCfZhkKOwiDQ/RbnWykMLq\r\nD8D8C6aQ4r8V4szSyNfahWkU7AaxlIvbqkEdCcSpL3rXikpVmtUaePuDD3Ee\r\nnjPRn+nDmowY5qU/c7L2BizibDfvrk6errinu1KbJ+JuTL8tpIaF3nvHmyUn\r\n5p43a9lCay64zO/IHpqkng7e5Z8LJE2P+Y48pGYKa5TQ23YvGKAhKPoN3k7b\r\nPOwovsGfHdHCHWMSaK+A0QiWg/QfPzcjdtvo5sOSrH3/ybFciZHEPW8O1S9M\r\nYYlQnFK4G4hQ/IL8AsVi/v7MLXo/LLiUdbBeG1Tp46NxZaLIg1r76vllhHe5\r\nCmjmL9iAd2IpTwfo/LmLXT1Noos8VANNjMxrRdLKj4cv8eowVsKDfWIAmDlD\r\nh/0duukPutsR2XrQiuqQjmx9CWaUntTJsq0dn+3i3hqwahnwt8nYu/vUWcZF\r\nnkrH/xMVhzYmolECTrW49wqC+mrfU9eAonk2ZVqexlXLm/2+dQTJKtqha7vF\r\nYEPB9EQlOsPbccBmFuQVNmA0T3Fan3eeYbeB9HHACgzE3l5GuLFC5wLy6ErG\r\nt2nd4v5Vds3TvDGFO2A5AUuzrCzqzMBi2I3jAduHqsSe15FGZibqJqf7/SyF\r\nCK9+lCFm+eLar26mK5/mhYuRK8Lu8sgLJTY=\r\n=3x8H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.2f9b268c0.0_1653075119596_0.303053288665186","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/theme","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7741345b8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4098ac946fd80a7d6eaa6eb1344d4bd83f7fe2a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7741345b8.0.tgz","fileCount":42,"integrity":"sha512-VMrDknlaQL9FtCMRzs4utCsHHifI2Mmmdk1OyjpMIeIZMxYqoNNINb0eUi9RQMdCT/YBZ+4v3vzjs6UpB2kdyA==","signatures":[{"sig":"MEQCIHVgUr7rIvkA7WLWfwLXaVrImac9/V9Pc1m3G88bGlXfAiBTHIKunIel8z8JP3X2P7U5lWpYO43ywODUQq4KanQ44A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/O9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmZA//Vhu0NH5ElpggBXQHxRq2pV38npTheNnGyw3Rbagp0Vj18uP7\r\njospeAEme7oO6O/83Ty9w8IsH5XMIR3dle9SQgLD8LZSX1DwvbBaahzwGzdu\r\ndrxYJXUDr321i8OeUMZi48RIdMOa+I0rqdY0IIZkJb+6SNF2PNsk/+LQhBwP\r\nK7/L2WFaQOlma83wEUYFDbUXD8jN3dMHiI/422I64vQJLxaP0U6dF2mA3w8g\r\nXPX82J9L/A6Mq04CkPBRgAUofQqU5221hhB/DbXJAXyWu9RxxQ7QLonIvrJr\r\n/q2zxFGiav9Fgo83auLoV+ZB4J+FCuwaVLNok1cX/GINIZLtq2LD7gKOYQxR\r\nrP+cV39WJyPVgAUfNUPX5uPsdHDuJOpTFLn2kf14+acEVGS1ILw6dL1SbEg/\r\nu/n1CeZLi5NSMvq+f4d2it3eQ5xvDsRdwY8fXRb0kpQcfHrI0TBb8g15aHTt\r\nZfuU2KgOfaKvA2fMacihawFJYQzCxc6FcONis6STI4qDVxpxMS6J0RV+5FJN\r\n1BpAtu1sjW9BHP6MhI8fTzYzPG9ZFUnQDwZgFPX4swy4qn1XncziotxihLxP\r\nCejvr3saA6PxE6kNa1DxmGcJfbkeuALtjlhv3VPTBTYcvDsTrzz5qfSmV4nz\r\nLX+pC6Z1EhBs0BKFJ0eni62BMUEzk3+bVz4=\r\n=xYy0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7741345b8.0_1653076925507_0.10176804423449193","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/theme","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.f807e793f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"988ac5b4760b93732dbdbf525166da93ffc100a3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.f807e793f.0.tgz","fileCount":42,"integrity":"sha512-JFVNGux98+Lc0Naat9pgOXEhrtRZ+baDz17R7DZAinvTQwYUewxkMOM5fcKL+DSzsUd+o2qJmkL87vkmqEwT2w==","signatures":[{"sig":"MEQCICaAgCXkUcOfyLBKnMQw2zXwOQ4M/uSwbRt7bWt6chKWAiB2sl9WBfHz5rbxIhI+wjx/MbzUGXTjAp9fQVVZRD8yQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBRKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzYRAAmKaJHfHft40wQt4GlQturPK9B6O81clXZB2X2mURiaHAAxsW\r\nf/Z5BKNLlCMHEsG89E7+uMZ+yET+KiAZEig7tUunPiUOETeIZyD7V2+hZ0Fs\r\nYMQ+t+kBDqbjnaxqys/BTKnhv/hgD+AGE0qbb1NY6KvonlAO363ov05Ul1vC\r\nCm3sc2gBsgXZhfTDtmAswOKxWSF6WXMUQ82e6JYlVgQ4SvRPiLc+PyLmYLXs\r\n0Z5yig8eDsp6SWHFYrrZu9eEODdFGqgesXeIYaI3G00fOFaU3OI7OfrP/+fN\r\n9OSv0EJtQ2bWCxqBAA/BQi8v4UT1AJ+z/fA5UWYlRMTZJSw8wtaqZiadLsHV\r\n33RYoigTJN14zU793LAuigDj+QcOuFj3n0/GWwVoQ1jAeVr8gGuVyFxVQ8xw\r\nDUy2ZFjoLL5cIk9gEWkBeFAKVnYdKUxBurHkIDR5lFEYpc1vzleJwMuDS5c5\r\nNfSmbaC0WemqzjTMLUj4JMehuGtoy77/mz5zrxjRNUQJ2sMSPtssktOIWgNq\r\nGPf14J2yWE7fA4RS/2R1BIokvgQFPG/DF3MywEB2ACMe3HQXmVnKNd9+f2HP\r\nVUUnUyxATZaXWbNhcsGecVnuCNq1sTR3m2ET9vMIO5dDdapeyG2dYJG+TBc9\r\nkjNtVCk5u6kRkxmMOMfteEQwRzhY7KK2yIU=\r\n=bXKZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.f807e793f.0_1653085258700_0.6089985389581929","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/theme","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b37f85804b2fa4059af4fc63ad82b0c0f76b0f36","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":42,"integrity":"sha512-BBK8fLdkl9bcSgYr5fJfCky1E5RLyTyufXpxJmWyd4TAptaqgJfl3GT1l8nSHVPseBaj7/y3kl6yDe81Oz1aLQ==","signatures":[{"sig":"MEYCIQCoJYuD9GMoNrjJ6h8lwLdSYanjpw1e2uUrRIOqeEOLfAIhAKuH7W3Z83jt3tM566lLzAdNxKOXlxXR0LfwZrHUSH//","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6C3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHIRAAoi4qupstzKPAZ/Bz4rqRe8hsXOj5T9Q+bkdSivyZounLi6x/\r\nkpbIb1ntAxC28dYJwuPFeDlgMaNbAX6cP3GtANvaqn8PqKGtWcbwKG7KLND1\r\nJiwwCgopadjwDUNjM84Ljn+eqnd5y9gS+mk7Y9R15LA/ZBUurmjoa3wjFGiV\r\nptzgOFgEjib9AkfBPKcIZIqtcSlAjX7QAKbNwyYk2CvNHYJW+Yt1mhIsMLk5\r\nrgsO8ktCaxJhtL7AIY5npPAmIm86KAAfpGqF4a5B4T6j3djIqVLaE3cKCHOW\r\nHh1ICpPEY5GDIR+0IRAOIYq+t/WgAhHOv7D/nb47ibXnd6vI7YG/6U3ueuu1\r\nH/CP4/m128tHcuKXW4o+G6vXDKNVf7o87rP8CPnNbfwNKzkrSqoEqMbch3Hr\r\n8V2kJndtAZV09krd+SumEcuQDz6cplxFcOF31x6KoUbE8Hs/ATSbgQ7C2Tr/\r\n7rwTRn/zgK/KaIMyKFYJtfhCPIl94bY97Bep+8vPuK8nHmWTjKY4Pl6W3Ch3\r\ndW2claiP8lsnRq1KhBw77BMnBQ5NLyWydO9yfHYAxUinLhW9mSy+6nT8h7d4\r\nrMuA/dpUD6qnv3h+3F6F6bC+RGfrtnsNFkG2LmhAibW/d3QbLiQleQc2FLmt\r\nVDYYi6oYDRx+pwtBanMZLKUSQOs/ZccArlc=\r\n=Xvhy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.9f53d4a8a.0_1653317815498_0.030594463753875978","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/theme","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea30d2ce54e0a289757337e6a97747fe3224ad95","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.77cf00e37.0.tgz","fileCount":42,"integrity":"sha512-zlU2MH+UqktvOecu8Lo/YpT6Aj4RDWwrNEFH/gX8u/LynaI836YgB+FSvtKoKCUKm0HKUGGZGrl2JqBMpfC5Ww==","signatures":[{"sig":"MEYCIQCQOclM//V8qbbiocHKwDhZgO6mn1zLlL17dQtbrKIfigIhAMZITXnvtx+QscbYf0LsJP4VP46VwLdZeE+gMBp7AFlF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillKuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbdBAAnhkU49h69ZVHWwOK9eqQIQ3ED64shYE3SRZZi0N8hPqbcQpd\r\nq2vRig9YbXVUOBUp7lddtoJ2g8SSb7slSc/EEBZq1q7k6pjZ2a6kgI1JWAwd\r\nd4Fkg9GZrUqf0nvGXqId7YIgOIB56U2B+w8jHP4CUKWLybdSRPrO7SZyCnSP\r\nJAxFmDX+camPEjWyANmk8LQU85KL2anNvI+25Xfo9k06q8NoD08SleQG35MP\r\nSp5sjX5oaKpiUxBOxBFbuR8pXBcVA8DvcDe1nwzNdvEr/o0vcwZXdhiUcE/Q\r\nqywhNejgy9aXCKw72hMoZQfBYm1QkwE2+rIlmqHFKQnHVSqBb3ZbmnidD7/A\r\nFr5TLzBIRvuPTKIDinPkG3rJ/FXEsL5an98Gc4m3P6fnsbuXQ9k0nCeCVfrj\r\njXqZGHMxAbLcRnr+73qUeHZWYvU39LclgKXzrmwL5+FhmHYqz8TDoOuldFK1\r\nT56jFg6QMd6fbJFMSCy7hbIdGevCJsph63pYVYn5J18R9EMPtPn3uTtHABvJ\r\nwwsC2SbbNhql4EiNTugaqfPEz+6CWZlVQpHQ+Lh9JH6ZxpD9F34PBfQc9kDZ\r\ng7Wk7XZaZPdjB38FTjH6EOHM5ZpPy5jjr22pNBPXRfkf94FJAzJw9pu1eidM\r\nw7N/Wfu+pYhzIcHyagXGg2ciVuqiwIrTgmA=\r\n=3qD8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.77cf00e37.0_1654018733963_0.18155840451063376","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/theme","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fe41bc8e264a3558bd2f91059341ffe1e43cb1b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.3c7b844c2.0.tgz","fileCount":42,"integrity":"sha512-Qa0FMPA/Hv1mZswmh8/rwmRd7w93mJQFu/BFzCl0Bq+7Rl+5CA5JNT13hE1Jm54GxT7q/JQIOd6lvnZ+Ggt03g==","signatures":[{"sig":"MEUCIQDsrQDPzIQ41/Af/vdKTI3v0u0dDG6kKiCeFQgNW0AU9wIgdtNiibxSyC4WC1qdfD5P8I1YMhUKtQh/d1nQ3SgDmgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin88dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2Bg/8C5+lNhoQgqQO6DMHvsJPFocI4uEMTOLgl0Kyj033CwxYDruD\r\nj2f2ahgmc5/pgY89t69qWgJBGjYQxYnmsBRl/ZsCIAE3NVKRW5I1DUnk6+rt\r\nvaw2YGaugOl7p+lGYBxEkM9FJLQH0XN1y2t/x4SlDDC9BWdh7yUSqgO0hax1\r\n4CIDJAze20h1N7NuMJ7oDJVpJglx6u5hdbFrY2RMa5TBZnlyVph1gj6QASs4\r\nffayniHXT1fQIMUxOYczMF2H7T/rJ3gpxv+TVd6K+i2zEVIwvKlsNNbaEVIk\r\np8bbM7QeoE1zqeILw+sf7qgDs8szYSKBZ2TgrySSt0O+6+A9+Ox2mpFr78Y0\r\nyrS0dSRgYWk7sG7yXhTRE2NAC+IPKdtdhsdK04tbNIxOukx208OZjQY0itve\r\nGj7+Tq31XLT/jHjzfHcOuX8P3rZwVz63zBIt7B9oFa96rD0OTGd1uLEBAF58\r\nM3x6CvLgbqjTe1ILhqmbJpmTawODnokNQJkd0aUHoTV87iYQzA9psEW86FN+\r\nlDbh9DU4rtnhDHILcDMLTOfmYeIIzewm/3FWWcoMI69lJZs5nUUDjUyTkHwV\r\neBQSpxuoUQhm+rFnrQB9ZHrqSARvIA0nUBtNMfgX5ZSVEJ/s74WphM0ZzRXo\r\nu8N8j8w27hgpupOoHpS58tt1piCTMQ2nMOA=\r\n=n2DG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.3c7b844c2.0_1654640413315_0.647772264844229","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/theme","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.df47894db.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84875afdb29c663e1f432fb1946434e42af42087","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.df47894db.0.tgz","fileCount":42,"integrity":"sha512-hjYlgJWVzIOXErvLxKejOG1COZ/ezjT+7pY6beavcluD7phlFW4u1zMJDKVFQNnZGG+J0zkoGxaiF5wddyNRZw==","signatures":[{"sig":"MEUCIDbwxYGleGPeB0SjmG9t+ps3CiRTYPKHX3OY2xITooNbAiEAvi+4EE71mbjae8yq2eTN8HOruxZN3jsZNcRlfIZ/Inw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip27qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0eBAAmZxbnQbWAedkqn+q7avFNlg/r3GRdmT4pgHg6xSAsSbRxRY9\r\n7C5byJOgb78easBKvIXWnOkaESCIQFlDH9xmXxcwRrQjpUlt2jTwCT8pkPbq\r\nn3Iq6W9l5f4USquSvCaZbt9vMjpwBMsBteUG5icgvrHCVY280+mICZOAYOup\r\n1P68yjZZICwNofktvL+vZN+xzJGB565Yf5ZPDdfIYWoAlwuMbSBQupYsON39\r\nNVZol0M0blz4Wyts9Y9c42xLaoc8Y/4/BIdRmEVftc3WH2C1wS21caWjIENH\r\n1dot+f+b9V8wGaXx0enFBLCYjIoGeW28OEX8iVHJdNyQ24lFkRumWPeKhGaS\r\nPzeUuqg6/zxsQx69WrDGXee+guRjDUbQz12GLbLZoTIAkfSu6LoD8z24ZTkr\r\nwrC92AkPx3c4yWAKol5ypgyXDmOmMhx15A8KI8lI8cdlxVF9n+DbXkZtv1Dz\r\nl7zW9Wq4FGxfRRmshZ3atnA5lun/O/ZZlsZ2utcvCTS8wKKB6/JPYGGXT/58\r\n5PmTD0mS75MqLgWCcGYnUnvrKhmHitqHlw+4ysQjATV6ljyip7hBDUu+8YSc\r\nWr3/EvdwKpr7KhB2spnd//cWqjDIiMZ0Ypz/e8am3kpuz8b8cu8Nq57n0QOb\r\nnEikBZkFh1e383iRmcqadQbhl1zR2wO6NF4=\r\n=EkW9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.df47894db.0_1655140074093_0.4899633590268597","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/theme","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a202fcc009d0f2de2b75a07601b3d7accee2be20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b18a873dc.0.tgz","fileCount":42,"integrity":"sha512-e3nOl3Db0ao+gjLdtnHlOwCjmN4wSal1CQCE3jOMLddmxyZlyxUc8/QFHUkYajiJ9J9+dV8tIv+QNWbk4M0t9g==","signatures":[{"sig":"MEYCIQC/1iKwSJUNqBSb4JyEmI/n8ZDuA1Fkxk6OtiuYmsf0mAIhAJIj45EPDYmDMX7Sv+KUzh1CcUQ39KSk47icph9kTsH7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCq3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQAw//Zh9Dt6bRk4dmYH0xJNh8mlw3i9ItKIxGdjz2xONTkerLlr6j\r\nGt1J+0NT3DaUrTiMRzt4x8vvVmsD/3poDdOcjG4yG8NeRYfkzZ/fIz/Sl4+7\r\n+zgHhOaVjObUGh3dpvUfb2PzmOqLgSDrKWY+rI/Dfilv5lqBE3Bjq2a5ZsCT\r\nbu7Rh+/5rYX1lPUWyqovCujOxokC4vrvHV25mfDJV2Ox6VFiI+QFibDYX7Iy\r\nG/pytQB4cwGT7kWWqPA3EzanxEBSait+OxEAVRm4XT2QA/BoNXAe+0vtcd6x\r\nk2236tb2EMSYKh0gj7QK5fKE573tk0lbo8QoW+xWL8KbPUdGoArMMZ2BpoQB\r\n3T+mo7gvxrO1yaebzPucmZmJZDHDAkLNuozL/icgmfJfRp8kXAgLgy2knKKg\r\ndk55WGBxughobplfqM/l90d7gcpNixXl7pQNhoLvqR5Qn5F8OJxhJGSVrS3L\r\nIGT7rZ/7ljVcmimr6XbMXpG77T/FfUBw1BfCQBmPmvElvptb8eY3zrZMk7EM\r\nr91RHlEvSsR8R309peTYYaEwGk0ER9qX4euHgPBnlSeXs9Nzuz9yWtA1XwFu\r\nE9rnuFeVsWIQMrdsZj6Fbqi1QmzCcZA+DNdykcILFPAV5uxGRPQ11yYGSsLl\r\nyTPW6lkGOD9tMp2+iCsvLBGZ8quD8CrhZuA=\r\n=yChq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b18a873dc.0_1655188151259_0.18975226319107552","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/theme","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08637ea096d3220b0aa9ec65e4dbea3effd3ff1a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ba9c29637.0.tgz","fileCount":42,"integrity":"sha512-cuC7dadsi/KGeTsWQMLAFGAgJ1kwtPzr94qWhZH9hQV1W5LU9rOu1n2Ja6wDfaBrCLC8IlaQQm3qRTcvCjSCww==","signatures":[{"sig":"MEUCIQDgvNvIWFWa4KtoMszTzF/D81q8xKFoS0ZGatqz1HTufAIgXiYy+Z5RuWqNUYMu6/aMDIHdN9rao9b03mofdv3OAX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNnyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2AQ/9Gchuh3jlDsQ3CZS5lIfUUlvnSk7zIUQO2lbrER/D7wsddm63\r\nFHhckPeDYt1R7A8gU+J90yTpXJwDR0JisLvQ9HZQ4bpGx60HFav29myDC7cl\r\nohYlWDA73KpTTx2cmXZ1ULsGrwsL+x0IVEWzL86DOMcXs8Wq/o8G63F4Ai6F\r\nOZeij9ISAznPe8dT19f7QCZTVRsyzsq5srlAUCR1HwqJcN0zi86cEv5zP37t\r\n9beN4IWy+cEsLa/Zc45irs8yMolaU4x/sOz9OvnnH9rgNzcd12w+gYYX6Sn6\r\n6iot0UdoASO5vjpkxpF1aMJEDp01A4NzVVQC2MIYhCb+ddSToGU/GQCFueq9\r\nyJ5I4D9MIFl7BmGHA/RtMNjD2k+UrQfhM/c1ES66hf/ePG980D7CHDPqfdQe\r\nUWQC3zAL/3CcGZ87QGyRb2k1GvE6YCQCeKntHXFWGZ3i8qAYHxuniDMRDAwP\r\n+9B5oBlt6dSXe/QqemuxpUEq5sCvHOetK9aCdGU41vx1UYsRehrylaMaK/pU\r\n8j3W0miVLs3hSQWhWJGkLzyBwXVcUt9CRD29pt4y6ojTcbdE2Ns7owldKl8E\r\ns15wv4bYMM+vZrkHu5dsFbY033mbMvObbqE3UXJxiFx7b7xBwEnQpL2E0iK+\r\nXBfXQakhisaH+LYtHPHBqc1Mm3BQPmwxEMg=\r\n=5LfW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ba9c29637.0_1655233010763_0.37322783863230247","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/theme","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"120b5aac37dc931e4bddde3d5106bb9de9b54784","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.9bfd12f01.0.tgz","fileCount":42,"integrity":"sha512-fDAKEWZnGKcqMmNYoWhp7hVGhqBXupMyQ8Nosnehnho0peptoKhG0+adlXeKJBD2IQtVxv+sXsOx/eeeH3o4Dg==","signatures":[{"sig":"MEUCIQD4W6Z+zxIaM+4SgNhnunOwe54ZWCSsuJwE4tLQVN+zxgIgfg7X1GMyLq+PK2ZR7Pl5g9N3GVMMGewb7q2pLU9JlYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2vRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeWQ//Ql+gqo9NrwvBmiqkeQsMbP4qUtU4rBvaTdPGALSShO+07EU0\r\nTycOHqAckppLQBltTOlckllBl/a/11ASjUt68YFdTcaSctT0ui3BDxszpJQg\r\nXZVTX99ngGe7ReMxPRh6EKRNdxj8wDAFz20Hf1UV0tOk3+Bt8Lz92YmFkRbX\r\nOAd1OxNRG4OIpqKCGRznA+SOdUtIo+ulXzjcZolEC0sVdWEGsMBCT8DRpKtr\r\nM0FNEjoU1x1vEyVWHYU18cObEKCEoGdJEah6U1P3m6Y/tX36pa/+yvwOBDbo\r\nfwX2EXUFqWDTcToDitSjBm+HR+88W5r1irvhY6Lm5//Els97a4Oo2L3Hl969\r\nbyBmUCMnp02gL+pCiIP6l3V44ScLGsvtw4jYwmvLgamuDeKsnuNs7Q9tEoNI\r\nAOk0J5kOlHo8l8/rKzf2khVa8miUdH/hiZ9CEOg82OqeHHJicSHvLCsN+hmg\r\nktx1LSAF8ZelRMbfyJ81dQ1pU6YxcM5hALRRgJC5k2FpTHEzaFZ961LdqrjS\r\nG/6w5Njp+5Ne+jIqLxeR1uikwzPgIwN0sjw5WGpNhK5mrW3sZYewGa2fk+jY\r\nW0vebqzjyGV4/zCDIgKt2GuMkYbpGPjBn1rLDMiG7tykOXYWzsUedxxuQd28\r\nAiGDiB7QHNZ1Ftt5Gt6PNbvzYgkA6OOle68=\r\n=1eD4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.9bfd12f01.0_1655925713500_0.8452791800339576","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/theme","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.764de225d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5e906b88e46f892a04a8c293ef369f41fdb4e4a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.764de225d.0.tgz","fileCount":42,"integrity":"sha512-e9IIdAkU+sKgOGFexp7CvlMSAuG6KYFBXpWp0H6lXFUVTGEgEx0E99KZCeScDxAhLfLsLgS0o2jpT84CqhTaBQ==","signatures":[{"sig":"MEQCIB6ZyurcWD96gwkcGgN7jJmwcqBr4J/bC9tKU5i6DX61AiAv5r5cMsj2kdMDQSphQKczam4SuPL8b63pxSt11ELffA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH01ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIpg//RJPHYnk6W7occb95BaSkMtw53m6K8CoZFK6qsBjj9ykmnmJ6\r\nxONfxauF/YERBgxGQrvHMydUG7eyDIrKcAmpSSdCi8Fbs1dgyjDKfnTQMliq\r\n7quuY6RaqhrYrPXM3ySE/1SbBMf5T+zJrNG0wb1JKSAshfBTEcyGAOitYIi7\r\nJDeZ70RN48NL1wV17W2FYF9vahDo0NBEPguOj4MRH4xJRY/wo5U35N+Dhw2D\r\n6+ohLPqL6tzdYHARdC2cPaUDD3ggI3gkZD6vO43nysdP4Mf2opimg0Anb8fa\r\nm0V7Fj2IZvQe0DlbpcA3IIpbOjog0nwuJzzaCsbaDiRDMl9Nd8BdNsLFE9t/\r\n7A826fsHThR9jxFKkaJUC8WOR1ySKxYmjqOXKAXU/5PyeZ79kvKX4f8k7SYj\r\nHiCfRAbjrDuIsmGFA798A3XrdkwHihzl3nLGx4OavAe0E4DxnN24LxSlcf9e\r\nyuMIp0zSzklPNwR1k35MaczQB/cLY9I17maf1tfPLdAnXBjd3OXKLx4XmC2M\r\nDKO8T4Uocbl7JxY+Lgr3gYxn4fixyZRNDzxjAV8I7TxNsgJTftDuCdVr3nuI\r\nAWezFMUbe9VXMKyed8XHnHeYxIx0VGkT7giTYGVAvhIepPrroGNY0nWQi87F\r\n3CS8ha2+KlvxKmchmPNAiGP+/JR+CotVlvM=\r\n=78NS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.764de225d.0_1656519989758_0.9484217561508017","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/theme","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.31e517cea.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee404142db61204e10da706dcf4d1f495998d467","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.31e517cea.0.tgz","fileCount":42,"integrity":"sha512-5vnqnEDgSVV4g6LyFctw/xvFjjafg2VtBt6/72Ray2Gk+B+Ypza/bdN8xXN3QRlXwS+JJtTbEqx/slPtKw+qQA==","signatures":[{"sig":"MEQCIEfzAGG57zjLdR5q/NnV3jncDhqH9BQgYbi8oV2Kj0G+AiAzJ1UdQzKVgWlpfn4MNxh7y853lUt90Ud4L9PvcgL3lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzymACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdcA/+OwjdUp8xYxdIh6SlGZwLBYYSobg5Wwz/81r255/jSM9VoXNG\r\nEt+r9DEqf0GZob4BPoP48vd83VqaDi82LNGtMwimrdgavByBOqraNO887bmy\r\n3SpLjZJDIYM/LHGJuZYubtzfx7ZPbyc/tasxQXvS8x1zECGxxwvyhOd9O5UV\r\nlyNCAwTWEHAN0qPt4YTxqkIZecgpYz0+Q195boO5oddtc/lrEppJTXoPeSUf\r\naMb20+mz7iIZjUXnuOyPb7rxBp4aqmdLV6OoVSn+NtjQqj8JccEk9GRaMbZZ\r\nA/yHKdo5qvAJBivJ1hAdxOdwf/S45tm/iilhbD/eZ5URsq6dTv8vtQJP+QIv\r\ny3dCBUyfo2Mu49GegdvrG7Y+AgQqY/YeZNaY+NTxQUPqxseg9b9q0Ug4b00a\r\najOJeLJhQFgMUoaiWrPkoA6OFNbbvpO5g+7VN3mZdMV0KuEqGu0SQbRLxvyn\r\nURtd/bsfkO4QFpmm+4MaymaeMOyD1m+gsZ1cotnZX1ZeiU63kHZgXPFB8UeF\r\nkQarcKY2wanZhwFVfj/HGwQJrEijMfBrCBevX8d6oitetWSIrF8I+wjx/NN0\r\nNRCfIiduowiykqTbwL9i+1A7/G1N+wjVJgW5boBcUgvgjQR7BGFHxwpmObBH\r\nEqHu6JBwoH99gdDMpTzCtklGrceMqba2aUM=\r\n=hV1J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.31e517cea.0_1656700070620_0.3411579778716274","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/theme","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0337fcc188b97cee4454b57899791ac7ec9cd12","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":42,"integrity":"sha512-CAgbpfwhUvHeMhi86sRcoyMHwawAlSpNCtSuAXIXX6hnGMWpC5y92W0FvwCKE4bu1sI45mBVNm4+SGaczsB7nQ==","signatures":[{"sig":"MEUCIQD8ukJ+F0Ff1TTMpYM79eswuB1B+K5/4VOc4t0zOzCENwIgN8kc5xUbASOjcRs8SXjB2Tt/3sJS1zU+HT0C92dI5a8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3siACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYzw/9E5G48HDBSsy0f3dq9ZXbghonT+Fu+dYSuCDv85oPsZDydtX4\r\nSF+t+4IBvnoHrWIhgujFNFRCGkO5WB+hDb5tm7rK3kbL40wKB3dyuVamAjdD\r\nzDjItJPBIl5C0Hfoeh1wfwnO59b+RXH1ue4Hb5eue6LzcXhEOkpGfaILHkeB\r\neg63bVd1wydcBEr3HYALpqqw4AdgeyTtpCEsO/BdLu7NxvZSwORlrShRC6Cs\r\nmLCPvCW2jRylXmDVM4nVrDy9nxI8H4W1ClgVEWN/3AqtxCOcmfTkSE7igTHF\r\nh2Ld+SDL33zl8Qn/8BLyHEsdYyIbXQGEIHd8r04ncBKjY23tACbboZkLXRWi\r\nPH0RNG77+BFXvhBPA9fx8U16e9/od2kWMEXfq17BavrjripwyikYhYUCWuHO\r\nFlg/dVTUxE0Qndp55ymTYhZR93R7+dXUsz72qehPj3/a6FfkxNEWz+2H8Rb8\r\nYBOwewKu7V+8mqPVdQ867u+FBYYwuszGmbe2YesDC3auf1TVyN/kIRqEJP1I\r\n+W7ILNBHH7hdKffYm4ibPuuJdZF67mF44gIG39GgTPwVW8MMWyjbBQXHJjSG\r\nWtc79Vl2d4IYpD4iAFye8gHppoMWRx2AWJ+rIgFdZB2foBCg9lRElmlxu6Od\r\nWwLA/f1C+GH9KBPo8VzWyd3ah9trIsJ9chA=\r\n=jHt6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.9ea4e8e9c.0_1656716066425_0.5389288870294873","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/theme","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b17114ee16d0e73c720beda06f3ab75dabbd3a67","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.cd5bafabb.0.tgz","fileCount":42,"integrity":"sha512-JF15kpP8fJLT906R+xX/HwWf1bl/zUr2/KeGc8SHvW54KQTikZFLkwfC4PMw7ngI5d5CU5hNUVuLZtE29HYcFA==","signatures":[{"sig":"MEUCIQCr6AUq/W0aLm+f2ML8mD4Ggq+TblcYhxH1uTUz9FZZGQIgWQNon0Fpnd7NNTMjKumufQ8w71r9/1lJYE2PLBfa8/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcwtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVfxAAieD+x3vnBa4Vu3Mv7DGsl5fc4VScrdjxrDEzY8sOTsdb1U/3\r\nK1Gw9RJaVfAMbrJOKVmbpDQnk0c1m5qVtZmNZX3H62E4OU1QG0doHcVsOuJH\r\nvXzkDMMBA4Jw06hF80tZERWRCDk/lykyBOkpX8E3C0N6y4x7szzb+FD/ALDw\r\nb+10E8yzjgpLfnhjtkPp1PRrcN+hfB9u8mBCmQhUDRWR8HyvE0YPa4PRrQrx\r\nantoSJUvRw6SV6p2UEEcqKnt8P89vmRx9IGNuXb8plrCrcxFEcxPVS918oax\r\namk0K0C5oavIfk2Qzz00FdWIMkRcp+8GRk43yF+yLH2yW/abyrmothup6+Rf\r\navOKMCHDcL8ICfrJSaLTgAHzFt8SLfH98fF1v7CadEVQ+GD2nXxUQ/zqV1es\r\nl83BQxj3ayv44FrLa5NqPG54FjcD9BcqPe5LJ2ZOzBNtBRxh2a54jpXZfL8y\r\naWkEy4F16cDGDxKLe91WfefCsRGhhEgrxdfA77qC0KvVyFFtebzcN1BMzvB8\r\n7E2Cf0G9gRGInQ9q6UhvkqcmewSLhii07htZnwmUEV1f9aNLFLW5f+nL1Cct\r\nLGRovlolHi5QpKTvMvGh9t2tks6BLGdB4u8D6IwgDun0kbAQXbJ/hy3dzHRo\r\nLukPKuul35xQNqooBq74/EVO0cMp9PSQpWw=\r\n=+kVr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.cd5bafabb.0_1657130029745_0.8468644510325094","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/theme","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb533045415f2a49290fcbd1167754093af4447a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a02fe49d3.0.tgz","fileCount":42,"integrity":"sha512-qalWGcgrOpOCspZV3RLeGetkxCgGPIM0+RsSr5a9wnr1xo9tc3iali/cWmSEe5whJpcDQFzA+O4BxjyiZKQ5UQ==","signatures":[{"sig":"MEYCIQDT7wBCXKmo5EKr+hMx+iPnr+AWCtXSgDjq7acJgDhtkwIhAIFhNIf8n1jZ9KgAN6xf1jD3pMi7Mk5kiEQV27fb3AQy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdl3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8dQ//S794W/XO4Qm9hIhhYVN4h1QksuV5pSRyutdRUztJ8wlnROqG\r\n36n7RbCpCi9CZFVCF+RS6+RfNfxbPjFAkFgYs24PqtVEGukcl3csP0+TruKK\r\nbK2NNXIMv2lDcL9CEA+jl4DyptkISynG6QYTLLrqAWA2437kR9CmTZVYE9Ff\r\ntuohPxdd/xBiK9HZogX24jDFF23mFx9X6QT0+5jkRAxCqrltZxcJ5rM7A3db\r\nmXHk0PiQRQu6708Vvak/r18LIIweBZt9qeA8CSuuhXXXyVFXm6hHtarUCjKo\r\n/1ioB9oiwhH7gHgkXJcAAj0SykO1moYA27pEdJ36+ashVvS3y92aEq9tFtpO\r\nj0wdpzccOH5MtTnI1LVGaEz7P3781dTO2zI0tbxDNVeXyMQMUmSKVYczVB7W\r\ninwx4H8bz3eqhbqNqTCUAfm8b9YSULmAeAO/j72D4UyXWz7sz/Xew0dVNnTU\r\no//Kb1He/FvmRasvECfzvWxmbVIAR1FPkPYfnMyRigCiOe7nCVJKJ2G6BJNL\r\n6D9CgLZPi9N0vce97+jdEp4AFUms3IzLG9Q29XoGhbLQWaPJ+q+18RjtXwnf\r\nNGnd4AfJLr8YbGq0dn0N5rgzSM1g/RUhLEH1/YGgFtL/ouS27mI8NXbPw+C2\r\nrnLWZyjEw/ae2vD8cJ2/qoLSkyAGQbtbVME=\r\n=ig+a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a02fe49d3.0_1657133431430_0.3858527433205463","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/theme","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"968370831701b4d3b0dc39a15474f855500d3cc0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.826a3d8be.0.tgz","fileCount":42,"integrity":"sha512-O66pZaSUKIRzHS4DDmOx8dReVmpNWaeQ0jZer/0hbkkFUHf0iQ9nCgEmyQLNeFFIZYJz6KfNKA2bpDCjT2cXkQ==","signatures":[{"sig":"MEYCIQDL2go1DwYtCDP3ozZzUwH9nvDPEYAgjV9G9mL2DzklngIhAPrT4H28rcLqxPFP1LpzXgEDYz0NcW70UZ41XXPoLEEd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeLVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqeuw//YyVZwz6v2jin6QPxFheSvzh05P9W5vHHvdR0wZE74QfG/aMK\r\n1V54MtQV9KV0IyUhrYiaII5zmlSEXwO9lKgneuksP9335o0q3VtlvThFGo6j\r\nEx8p29srKYO8ra7q/BN598TSvMu7z8wspDaYCW88zxK8AqqpkZq0sg/lg7JS\r\nqk4YqOelagw5OkcpYcr5cektb/PVUPQR/QF8SLvVdGY2gm/CDGoZM76HXVFv\r\naUe5j34SsRz21B0HT9sEluTwVoGd+f69YEJANGK9BXy5uAQwkv20Hqjg9+hm\r\nr82h9YyqBxBGr7e5HQaRWi+vcAseqpUZsMPy9/HlFrhqCS9z3y6Dxj0AZwGN\r\ncS5WrgcaS7Lrig0cNRQI4C2RgRtc0jtBE5FAezA0pw2xkGfQkmpUC3faPffk\r\nn9C//Bg3mtDxuBRsFk+BA1+QFLyThs+jDQdDVJok5GdZrk2u/ddXvEiOjRuP\r\ndjgI3FI+LoVHZf9+ymvh2NZQW67HdgQ0WXaGmNq3RvOPv/cA1uLK3tCiGc1W\r\neUnZ+PwkCZRvBqa7RZF8FvFiJWV0udOilkj42X5C5CgOhy97QorSUXfnyKjV\r\nzRkeiGhLVdloj29JghyL+rrBYTi6btrXwjelsFyhybHRRiNtaRQKbPHoC/Kl\r\nkLXMVw2ZQkKMv87u4rHPjM/QZDPPr4v8KUY=\r\n=1VUH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.826a3d8be.0_1657135829406_0.06853649085965863","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/theme","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"310351634fd82a6862eac44c1a6e5950d2292432","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ef276aa93.0.tgz","fileCount":42,"integrity":"sha512-/OrT4UPPV/UkAgXDroxZtB1ueJ1mVhhMckzieDsb3qn6CvO+KDG2g8KqJ5p/Nq8VVKfhXXSBt4YIwK3UsrKPng==","signatures":[{"sig":"MEQCIDqTSPaWSRw4jmc0s2tK10uk/g15SjaD2Dkj1PTRIGGjAiBTQxLDrpMHgEMPO6FdHjJEawMqgbttCEox5NY4PQTGYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxGMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMxg/+NgyLdScU1ZGb5YWZTxvKh17q9T7jkdDdhtG2/nQ+vGqLWPTS\r\nlXoodXIyhs5qY6edZRuM6otKJ6U/4/27I/awyDDzmzfC+F+UXyozi4ptr883\r\nulNzgdf4CPQeZJTSsNuZ4J/agtbqrdv/c0TGxVWTkANq3JytfdTWSFE9uepP\r\nKXecRMmRt8sLeowM0y5dRcBcg2aTqE2LLKX/tIeJpuJkdhk0VYQeodmq9JvO\r\no9cQacyacw34S+OZT+4NHIjfKwy1aQLKhr6XB9Tci70IihlePi7X7h+UcNzq\r\nVzB8zNYPto8q1ZLM1knNf7nUo3CnmOkgBVeIjxZThgDk1N1Ut3je1dMmXO5Q\r\nLY7JUEeK0ZTQeCjkcf0yOfVQhm47M3E9ee1UIWx7EmkgWOzmy/RfnAm13yhs\r\nq9z6fgWtkUjKodip1CAQk1KCuGeEIx67cFzq3qYmGMWOIxly944D+mS6lmBk\r\nLh+JpzQqIkzj/5C7J8G4S4JcDV1j6Pdc1e9pZpOMJJebRY1f8Huglmf1VC9h\r\nE/THSCjfRFn1Xel//J6LxyyHr+uKbcmozJgO2ZsfnlgzTDrvVkjPj07CanCk\r\nFJO3mGVHxpKvM9FTNCuaFJAmissJSi5TkM2mqsnSjCX96eQKjSPRAXsdnmjl\r\ncvcCS9QhvHUXDLCUkJ+FbHAkufnzbRAlrcA=\r\n=l2Px\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ef276aa93.0_1657213324590_0.5947787039319763","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/theme","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b93075139e71dc40333ccc2037b76adbe6657ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.59cf61d6b.0.tgz","fileCount":42,"integrity":"sha512-VYYsXEyYJU4B/ZwyE3yTsdu8u/Z/jroe4Ztfwkyb/LYQBSC03BBmNAG2wLQWIj+sv/cQt0fI2W7pJg592Vjffw==","signatures":[{"sig":"MEQCIGseqOahI/2HsTqiWG9qiQLo5qdsAhPYXduOqn1fYVhMAiAAsPtAq4u4Z3gQ1E6yPdJu99r395emp4bn+M4riuuzLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxhLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDPQ/+ILNpq2eikdeEwzsTMOghT/zk/YISzolfCSbsaJyBl0+CX6Z5\r\nJKHd/YmKlFfWtSGULiJeF5DzsCveGAF1UbdJV6m2cKJQEbk973j/hR+gyz9D\r\nqE6muFuDLPuve3RR/1cLJBIPVAP1tbfE6bLlKb5IbPLvv8InWjgkoHrq9qnX\r\ns20Oumb+EDHXxrG704KrKwW//JW5PmCMQfkEZjI9SMfJoOjzJi9JOEJY6Qam\r\nMB2eupkOFzQV8J8ixCiTK8pUHrmby6aaVxGSq6FFIqyU8w25wIaa4a4l2tVk\r\n5Qfbsa5iotBX6RebN2m0PmQ/5ZL0nESx9kjad7OCR9TXT/9qkode8hbSbaNt\r\nOoETVavs+4blj7qh5OuGuVRhKb53fmPzMZP6AcdQUJ3lxNwjFqZg/gFjs6sd\r\nWeS4N0lRNfHJTkP2uWy97vAYOnSHYebGeFdRgTK9ykUKmjZdFeHiMI8k6P4M\r\n9yKTfW3AH/tlzbNH0qh8hsBi2csvstljUF4ZbPS8gmCvzIHo9qnTuYUkXYxm\r\n7oHJ1q/H1W4Xc3tO8jyXjrsbfzT3JrWXtHt5aqhVQ3LRXLZ+twe5z8+Del2q\r\nKORnuDmIKSECKsdiKU7+Q1o6yOhVR0k+F16yeBXwV7uBChfaHGxLT55EjO5v\r\nEZrfqc5InijvGfA/LbQ2VxLpRNrCUVhiDDA=\r\n=kOLT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.59cf61d6b.0_1657215051448_0.6971348877341395","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/theme","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.8647092f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b459d8746d158c558f2d7ceed85db37d55f513ec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.8647092f7.0.tgz","fileCount":42,"integrity":"sha512-pgfWQw65hzRLP+Q4hgA6tCv8+7dxj6cUrCCOr3nCMljzxb4d3ZfLkxnrPk5WPsuv+qLpq5MzXOgpSr422R+tAA==","signatures":[{"sig":"MEYCIQDp5yytjNcWY+HG+HLfkndPgHtpFFKHoWqjbio0SVCXAAIhAKZJKvUfuN6QdNUhSG2BdGGu03VjIq6fZnmXkyUnfLZ3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0QuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreGg//ZJ1w27KrZG9+fukoC6hv6mmtbvCpxxNJfQazlFB+jqds4JNO\r\nszRJSYFQbgo46M2a5LhZzEXKcAqf5FY1dawsM8GjgxhQYlrkjRtkC33nSANF\r\nzmuBoDWAu7afNbAt1fM5fOVCSLDX0t+BVSNiKLRFiQ8xMt9oJh3EXgjjUrAO\r\n7mh6ggacNTEa3pZwxBnKvThCs+0Jg24IAgZLpevg7HKpfVY1BstfClhlIiLJ\r\nFjN8OKM4f0+YWubGFGT8JqS6EuOnCRBBpzF9oitg6xeRr1f4jKEL9QwNZmo4\r\nn/FP/nKQcgZEb3IGaK/AiPwBNyhVBT+kLypcF19LXr4oMRVQOiOe/Jj7mO36\r\npMP9/OSR577YbJxclC2PfSKLsXeUtbh7y0OCkkfMCAGapFubX6JMP3Hy9lYE\r\nq2FkfbiURfw12w5GytAwnruDP0WGeh4I/pxJngB2HBTZTsdp0oZX3yrFbfyJ\r\n2yqonFn4CHm8AKQdCj0ke+cb3w8HQUi51xjW5ApZjzDK8KmbgyO4xWUHZeZI\r\nOs5UZU9ltJK5CqlInv/mlu6XzY9vwZ7jDLrvJi6QIVNErCe5dQqjAHk8kfh4\r\nh8LoGYA5U1+MIflQdWPuzQ6CPbvqaVEvG+MqrrZ7gd/Mkk735EaSzm9vaQiL\r\nly7ws33iERVvmaxXFj+ydlmYU7oV2Pl7VSA=\r\n=Hq6Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.8647092f7.0_1657226286234_0.3361824502194133","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/theme","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3133b099c0b1a831c81be104d92eed4a2ae6518","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.02ecd4d85.0.tgz","fileCount":42,"integrity":"sha512-KrtzQ3/bJIYkjoaoKDuQLVSjdsBLPCdW9yDBkGMxGEfKJxVVAqPzqrrhlol7d9SQyYRjeN+i8AHaJshBZJaCmA==","signatures":[{"sig":"MEUCIQDI5whHkUTobXE3vo0R1guEEtC2S2MLEoN/OBFLP9+i4gIgZA1e6fC84mphgF3s7ONC4kccLdLLrXW5VzuGFiF3z7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFILACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlKA/+NM9xnCFLfrP+UR45/guyXxSltYdgndlqnNPHBs9EnSRL+dBW\r\nJ/w5kmsvZNL3Z2ZhMEvV2V0d/foE5cqaLs3i1H7Mv/k21D3+sDunVsCIu5ws\r\nFPeYTqjTban2pI8L6gcpTFny0mLsUYRMmj1CMH91iJbOteEg1dfZyXCBvksp\r\nX9n1Gv3kZKlR0GSRKUZVUCgs03rQhWR9Ss1MP1NmwVn7E+RKrD+f7KxxZktI\r\n1XAfkJCeEVf5QLwrVcyyzHKBRr3fWbdigKssgL462u8SuCGiNBWfQoyLOhGi\r\ndQyJxAJxF/JUmLQrfmoDg5pKsi1erHwZbSUFUuzZCcfGrY1L9XhAkQeLdai7\r\nX0fr1gpIoRhd41rKvdeISxg/WfTidrm4CwbWedEG4HLSVkMS9qsiVFLbxy7i\r\nu1Ku2wFju6l3KrxEe9gxFX7CmO/r2JXmaymZ/i9HkJnBPE7FV2Ac82iuN0JM\r\nF7Dy2SMECoP59tYm2/wU2fAkupsDiWiLA6aGqpx65Djna8EWjkG6se9TtB9D\r\nkLue18O7/qH9o3klj+J1LRI4z2+emP0R+lU/L2qvUmdzc473iy11mmQZ5Feu\r\nZesjIrah7DFcCkESv/+GESyQTEJoYiGGP6fZ+mDIxPWldrqY8ouJ+EWWvknA\r\nUlqZjyg+wSxXsNaWtp5lK4loaRjXn2O1KE8=\r\n=+wSY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.02ecd4d85.0_1657557515765_0.05054234682849512","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/theme","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f349c7df01c81f4f14af5991927dee72afd52f8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.63d3a146e.0.tgz","fileCount":42,"integrity":"sha512-CNG6JwdRaL6Csbdo8J50k+M2ZC0lYw+QzAplstZ+nkbJQhwHg4wK2USh514B52m71wqDIv47beku7ea0B7f01g==","signatures":[{"sig":"MEYCIQCpIkwLYRW2gHe/huLoGxFQoAVL/miB4yUebbO4qThc3QIhAO9dH6iL0r97rM4PNzRV4Z3zEYji6ZvkBg1ygp7ysDbb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizVy6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzoA/+PuxhZI6UtSa0AHhgz7QhK+/lSDGcVzg0NE7hNw8L8lbMfiG0\r\nkBONSCLa/63pld/V4aa21sYfqL0SAffh1n/JLOTFwWB51Gx+OtEXh09F4sNM\r\niCz4c8n55IU80HTrSwaR6tbR82aPtTKJYA1RRZ+O/4U3Q5ssluc3e6g2oVi+\r\nAu4Qm+3pQRXoWBfvETJC/Bi7Ya4zs/gCMEqQyQVW4T6o7uttiTrgcIQpJM1c\r\nyPCVzPcIuw0/4nN3YI58UP66LSzjICUaTiNYRidE8TJ9LpkoszQHgThnlFL/\r\nFOI0gO8iH/xlo2HTQ0JAZ9hQoe9vVmZQzanpmLo2DtG5TSghKTQQ6IBBZAIG\r\nsebyhNBaTzuFDfX/hnEra+E3GABuBTMa3S9gslDQ99ojIW1qu7kV6wfff3KO\r\nIdiD1wnSTUSeta0uaYoNq+UwXnqLISJdEVDoX13BWOoiBxDBhgCu02S7Jz/2\r\nhVF1NCYzbv3ONwKnLS9Smi7jGyME6Q+ZqEuJyH7gvgualSgUK35n7QWs9vd4\r\nQTRDdZwnrX+mkrwK/E/J/PMxR4WOyLvKfLZ24qddd4zYoa3jOZhgnkE1+idt\r\nJzOTG4CJ4mfm0/z0eduOJKrucFDhdaqbgtxLF24epVDfhB6UbODQiTXAm4gg\r\nFqFK7cotKukkSs0v++41mXHAKHlrXN0fcW4=\r\n=UhFy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.63d3a146e.0_1657625786053_0.6049069392310469","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/theme","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.88db01990.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a4b8bce22eff4329e077f6e9356f1159d0b1d62","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.88db01990.0.tgz","fileCount":42,"integrity":"sha512-2NUqZrI9FdYfpjrVcIh6UHLeGi2JAuMm4B1jKOP3Abj3AMXI0n03S53DYEXAgjYEk4iB+QZATPxsHZLa8u1+uA==","signatures":[{"sig":"MEUCIFTFpUEahi3qhrsrNlJf/J6tr1rm6r3SJkx3hi1SeDGDAiEA5YqdTXrwWtQLrlI+sXq72Sk99VCpVSxgEPW1rcB4TJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV1sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUnBAAo4psm3AKQxIJVIbf/jr2tuDhCZ2eGLFywQJtB/pDiip8/xVm\r\neTuZBXpSgsGj82H68ZO0orvyPafUVOBieQ6YFfqobBuS/a26MDyg0l+4jC+t\r\n58iRgpYS6JuFnS3tFZKtCxpyrEBIj+L0sQ01aeYt+J3ou8KStNqSnAQ5aw3G\r\n3h6B1/0jK+oFu2ld3q+h9xpJ49dYgqm7bAQbV3YoU9oi5QyZuQ1jsFi16yEe\r\ncV9Z+4Egb+PgdGvvAzYmv6bKZAxrFupjNDjUnYoj0HHavufp6XzswfTkr4gx\r\nRGox1iSzu5wqYHUHwTsszxebGxXtXtERsJdQUypW6nKuj2fe2/YyUCACoiG+\r\n001KAdFFe5obxNwOGHWgJMpTdA9xIGNxY01gFJAEx4feMwjbXFGnf9yni4lt\r\nATRUt+L2WWkOJlxtxeuaCTKZHXO18ByHxUUPis7i9Psz4du6I6WNpnxRYgn5\r\n37H1LNK6lxCNZ5RJMIZUBCXmyAlZBP1I98uhZ0JCr67AsvkSNEQbD9zW76LL\r\n1lVG/eDcsSDheJItyC+3haumFWuLA5rLADG5r3Hx/30qACRSYfSQTsK8B1K0\r\nymWhotD3/pV+DQQCEXHWtITVbLvbVC3W6LblJr1FKs6e2+QWsLCpDSLG6kOK\r\nZ9qhNCuTl8YFC6DWgrjMrvm9xDFzijIe3L0=\r\n=qlHJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.88db01990.0_1657625963780_0.27563528013584593","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/theme","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e11eec8d785a63f67f8c7b2a7d47e831ebf84a71","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6432d8fd7.0.tgz","fileCount":42,"integrity":"sha512-EF3/OXvhgkKogqLqoMnzF5oEqI/kT9VhM2McMdyZhvlDOazPSfPygOC6GHn/VoDdDU6vhrLqx/pfEmk2jXwn1A==","signatures":[{"sig":"MEUCIQCJKsAsnnV4BO2eAJ5GS/CupSSt1EDjoILKzgEff/wbeQIgTbYAD01Gl5Rv9EKMkllJAVo/+CY+j/XckbCITeip2WU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8WTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQCQ/9HWguCZCZJW354guM/9VdDAOobA/PoeRS97Te2bJXCD2ucMsF\r\nD6I5RrBuYvSXQj4eJZy6Px3FeIXYEth+iPGkaDGImM040AkeqzuKPHOT6wN5\r\ns85lTyS6bGLf2zSBpkL+fFpkI1oxNEpV6Ok9qNXMvKs5DdAMgSLFh8ow125o\r\nZNeSghZR+PR3ty90BK0gi4CKMA/dp9jvkB0nAm61UjxIXA1NisGjrnbFHXy/\r\n7ZqCfg0MC7itiWK8E260BScUlXQX6zw1LIo1zgcMwJOK7ZHb5u4PD4p9DHJ9\r\nKo9qvfAhjLJmd8cWhaQ23x+vz5p5M6mUIR2RDQamLVHHTc2E8fd6+tDcZPaZ\r\nTXU9zqeW2YM8u+QHDtM2ER+rq50dBSDIFUIdPJGjpiKyssgYIqpL0Tu1+zB0\r\nzj7sOoAsi+zSONYdvYy3EAcDzWKEIaBvWWz/Ueofjaa1suYrnG4dtkC5iUN5\r\nOZ8xC9U/dTSUpfFvk72YBEA3nlfaAaNggiZgkITVakqRZqUQH7PdgAyO35RH\r\nq1qmMPzqbKdGOmr2uKgIX+cWB/1aCzbPDdAIiEwWaRy1ITROjxoocQ1LurMa\r\nQcN/8GsEfECqbn1+tr5H5UFw3xu8LI9YvxvRyNU39q8qZWh6Bs1VtfpgwDVP\r\naH5Jlf8XFIIMi71oghvHfS5YhBA5YqLIw3I=\r\n=v4Yq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6432d8fd7.0_1657783698845_0.43668909199038497","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/theme","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cc6c6024e53b9bd81d59db400077d4dc97aaea9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.085f9b25c.0.tgz","fileCount":42,"integrity":"sha512-TPW6iEQX3IolJ8dSvAAvN3IJKy8wmOKxseEcT230lA7wrYZIizwA8oCSh+/eOdpyfHEz30Wh5b3ONbMOqJTVCA==","signatures":[{"sig":"MEYCIQCkiS3/6cfpHclEPIkoLmQY4+IrpV9qJTGpGuRtKUbARwIhANGmsF3KWjtMXVa8Sd5qwUmmXFf+KJkh0GJKqpofuULT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EWRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg7Q//Z9tdtAtoSwoQJisEpcXLGnQs84freHPsNktXEiGU22BQLKFO\r\n1DvoDAHbIfLkd5QcQq0nPv3oT19etvgeJ37ZkRyBTrVnMHJDfMHRxc+azVWE\r\n333c9K8CnYk6RtE+/f9/V05AAlPX6H0CGNJKmfRYs9XpKIVZPVOZB5tBvcys\r\nzcZW8JHZy0C60zOqMNmPDif8T3jWseEzWG187IC2ZLo5/zXTuqZGfmQjliPP\r\n3v3P9ZvmGgk3akubXxFWHbFR9EAOiYH6hTGqFjkZJEfktZeVnXJgbVKLbvG9\r\nFYr4NZPFzDVyioT17Uv1pcs01YEGtnTk5RKu0XMVdsQSMnOfqN697vEROt/2\r\ncrMbBSxWOlhbnVf18PW86TYLbJJOjJ0TP9W3FekbNnANeBM9j35BdfZTHRv7\r\nw+M6Cg+Z1RZDyuPZT8EGcXgvdaNcs+pkYmPzJbwtqB3eD3+x7is90XastBPs\r\nV4ZIhelMczfCQCU1qgCgnFckz1wTa0x2lnJdivLePGHa7yi98negdswskYBI\r\nNw9HceyUXi0f4x9G+rsakU5V+MvxCrVuMlm3NqIVlISPPU7C0erI3Uq1q1L3\r\nWHvkjbm3BnQQJKLqwvgpkjeqSvCRYAzoUhxCBWLp2ama2uL5lDpgXy1uGKA7\r\nBXVVLa9CmGCsEV9u4OQqKaNA6LpCNeUAMXw=\r\n=t/3z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.085f9b25c.0_1657816464912_0.9804972077982546","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/theme","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5198804e0953fcfe336aabf361ddef7758b8dd8b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.39f9424b3.0.tgz","fileCount":42,"integrity":"sha512-rvo99ftG6R7PTxA34ta5i3yLNaK/nbd/vQlcN0fMppip9HUzUqQ59g8uSKKkdfeJntxXLZxFfGFd8m9UQD4BFA==","signatures":[{"sig":"MEYCIQDECxLslZnhcfTLn3xHkgTlgHhtcTH2WCYC95P3YNNPmQIhAPG01r8YxsyCUYGF7BNIdZEAQGNw6cEwOPcpOaxLkCdR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EypACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHHQ//Y1VJhPw99CzEms7TfCRsWKPghel3MoOYcIoD6cvdZMDMAL3I\r\nHbpMET9fryw3WB6MmAqP/sCWi9R3hwIDIzAkG3gU5BxOakcKyzql0Oi1HlxB\r\nUKjioSjhvnai5b6FexPes1h1cLGRInWS6pzZGVTux90HsPsWsd4iO8OzIypr\r\nGr5PqXF348+TrA/h7tmxkJk06XJj1VY6tXp99iPP5TMLB+iBM80GPcTBXwFv\r\n9lnnt5ysBlzogPVnj2QX5ARqjHPhrYhaqhz9Ae/wMxnr/aM3QOuf/7J+BiOd\r\nxeMdLYb+7BEcj+Ef0b5PEMZxknob7aIbmuYbAZ5/IWXV8lQ1UwBByLEIuxK1\r\nXAEAhIh+EjpmZCwitads5N2/SzHSCT2Ps3bVYvdRHkE2XOXdmjt9hpoT6n4Z\r\nMhPmjx1nkBM2PTF39y9clgGEZftjrPE2JanCH079zYL63oJD9Xxr+0/Ovb85\r\nP4skG/MYskKIdRiHstzaFJayDji7d3i+U2JeGNVlvFxaoRQsp1aRRHP6E6dF\r\nfxFWqsPScrJ16XR0LJMCxJlEAYh/fUDF7bYOehgABFHatgKZEmbJjn3wJ3rp\r\nPrzcfIfXr6gIku8DAqzB3fDPBawmxsi6UpQhB47ZV/OzICa6SpqWkQdrawjv\r\nvyVHLKwtRUZCF+zRkZS2QfQ4MBFVLE4pfA4=\r\n=OQXN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.39f9424b3.0_1657818281568_0.6527941847332352","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/theme","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c8f33821412c9bc99a22ae777a412d8c3e565ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ae9fce587.0.tgz","fileCount":42,"integrity":"sha512-vxVIq44q0EYm9TrlX+dVRN1B1tPjWdj3n3RhVK7zMW7BtoPWJ7IGgAmAZ8JzhZNYE0YwTjrC6enpllrf9/wj0Q==","signatures":[{"sig":"MEUCIQCB3oydcOE0QZ9DQYxmFxV/+tB8CSpOg7x4DQtn6zVEhwIgUAVq4pP2SYgCVe6cf54UqUr/0CufK0ksxwHoR1bFHHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FtqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8kw/+O5n08W6F+4VqpdkIv+mPzJPm+A9is3PPa0J6Uwg2L1Ev08xY\r\nO6UgXlNNYRtHES/6ar0/MIJ4htF9UMoYB79SgJbc4168PPIIeLs+Fohy4CRn\r\nlIMbVI7JEEzZlHAWaGHJnIT2Iw7GZzQkbHcR6MoKf0yEWum6IAxVzraKLDtj\r\nmVpikCjWFMd1wCpUCqYQQvsCn9tQPr7vMzNw5khXwfcSM8Z59sipevigc0c8\r\nbY8nYhSIw2baPDHfhdApjCcKTL0oHa9RZpIacqjwV3r1In35YxQ6pYrH9+om\r\nvS/KFgewbY302x6MZkiBBE2uuSXQAtz4D/HevX+AGGm5FokA2YY1VUugFxOi\r\n/KRdrFClMYOsi9PujdHsoS5OpcuZF2Py71eeFx9eK8Kxh3vnQL5xa2fGPQUt\r\nqNh1/tQqtd37AJzhckc1L5SA8VkdiWkLB8J/EoRko/v8aAPfgMGYFu4qwudz\r\nkDRRe+dL8Hvfk1pMz54Vtd3pX/8lhhfXooliHBvdoKKDF4//E5kcl0X7FG3g\r\nISFU7+/wMeKBvsaiDR7RlV4Rc7WI6pJUtbqiuXiB1DSVtDIqqT1v8ESM9m3F\r\ncs/imfr5eW5mdlm80qjG5SNi+yRtb7EFwvaj/6njDQcELJv997ilTdvuMMjU\r\nLn6ld7MDo9qT5k6Lq4ZPau8fRqlGwZNN7/Q=\r\n=DT9H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ae9fce587.0_1657822057837_0.9496417713585892","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/theme","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"106b103b5859da70f614b0ff4e3cb4cb904ea029","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.1ebddc343.0.tgz","fileCount":42,"integrity":"sha512-uHBvkUskLOZneGC1HD4qXw5YIegDEifUdDqTGzAEJiL/fBgS84M+rdziFBcFhGcOccjZCcZmP7pB5W7UIwxorg==","signatures":[{"sig":"MEUCIGDl3kyO6cWAOVyGqHUw7AIqJLZ4f2JnAUhLJwaQSRetAiEAoZ6FUVmxGGk72pnpsLr7lu6HeDQcUyxOqJDN4wvUehc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SnxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5Iw/+MLgptAM3n9+R6wNm7XunShCx4s1YrFnchNW0509JyMzhdDN6\r\n1eQLcsRXH80GVZTdJpLL0TT5YeTHCL82tnWiZoKP5ZyShqCwf9mqwcd5Y/OZ\r\ny173UW76VioS/9wVXmp+caz7MWdsbTepJXa13HwPmgURFbAQb9FvgzOC6sUk\r\neoq0EpED/jGslkCAvl/oukoYQEIPuKfasecHH9spa5ldalryhSjl/0PTJU9N\r\nbrbedy3wZZK5bO0VIJ+RX/XYZlLNiTztTDS2/zJSpL6aCcvnEazkD8yOuCKg\r\n16P0Ml2PaEqrUcYidk322Slip3W3NZkumeNipL4UeVQ294Qxq3OlF49l72IM\r\nyCmdzPSB6L7lB+xUHwMIHX63sszD/H0Mui71WANsAUTA9pRMh4NnhHkJlqiY\r\nqHxufi7XzhlWkXGeBRgvx3qth+1DbSCmvHdRTnJ8yoXjcjAHoHqoYFqQg2Xr\r\n6bYI1n6JHOsC9c4PGL0y3U9m0X5CieQzeP1BGQDvuTV52l3A2IglZb7ldeno\r\ngfo5euf1sqn6AZFOR9lJB6ULLAl50sXSdaenrgT1W48hhJBiWs+WrMVCpxEv\r\nGZNUW9b7vo9IhAX4L7qliWfMtrucNrej55/usBRsjlmQIkgFKP1YY7+ej5n1\r\njwDPrfsQOORS+ETROCA8QMFBt+LI9BEDaUs=\r\n=RhIz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.1ebddc343.0_1657874928879_0.5086268381178864","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/theme","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c5018840c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"971823e96a18af5597f10e5fd4e87138696de0e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c5018840c.0.tgz","fileCount":42,"integrity":"sha512-yUOzZvGLwc44Xdf7qGhsfLDUSlEwd3adjTnvHKv85K4b5CgiPb/UXQyU8IE5tLmf+Yr4dfNILmr+8vjlxOtTOg==","signatures":[{"sig":"MEUCIQCn1BBqwnm+GoTHuw8gAHfl91m4g6j13I1AIRa2/L00TgIgWV/WAcS5ekvFvZFfcRtuF8tirdtFkZuazMMUyeSEJB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1SsOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1fQ//UnBpdmEUX0tdEhqEO6IOEFjUMcsdXG/5fpNLyS/GSalIslWO\r\n3yDCLdgOLFe4oAevz2jv9hX0hiUFRN/c58eRlSok9jz5Dpm2usoOd0OA8+bJ\r\nKFhni7HFQNzmGzKEQfe3W/sJWFvANjxFLbmPgVjIzzrugwMtGx3pRBYF7+Y2\r\nrEPxTDVhUw41b05unt8P0ta3vAuuJnMSTrD5V1yvWrxNEhNFLTtOBFQHBsV9\r\nUwDykfiRxVnvipfYNB6LmC+YQN7VqWFcMtkAi1OK5G98r+HitklRkuS2wxzE\r\nQTbAerWc8tYrenD9gE0KNs6Ag9TxXDPmXAOo1FPxUntcXkwYXaZKTWQ2x2qB\r\nBYpeXVd7PKIeq893ndB5J2v0c5k6HrnI/u6/Er04Hs4PlI8ev3b4SG8wy3Ck\r\nDtVLDI4VmDZ0uBTzZbgabWbVtpbOWPmcJEqtm+xwPhhrjXZjxF83+OACmPXt\r\nIYkDdg04lC3oXpsiqh8BBkhhr588kVo8mwd/RmlOSF143xtKw+53l4SilI0C\r\nDod9BFyRgWmhlpEQ2HXsisiBz14dVZ9VWTjSfUJFtu40WuDDCj4wBxsIgnVU\r\nZms0LAvNNz3IHaxKSB2WsnoYsUFN53XtqROmbW2rEcy5xaIEP9nlLWjsQWAb\r\nQRWkjCgzPAZ0q0LnrkJSaYTRyrT2CxyZgws=\r\n=U4dQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c5018840c.0_1658137358064_0.39675862138777984","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/theme","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.551b40d18.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97e13f8eedab9ab865f06a30e93f8f4f21b5d792","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.551b40d18.0.tgz","fileCount":42,"integrity":"sha512-krpr+ZEBX53HU5+LU1Yr7jEsRVz/jCcG17Ahwj3nOXRW81soiluEcjHi92mpPpRT+guaSU99EG0oK9VsKygS5g==","signatures":[{"sig":"MEUCIAzAlex99m6DUlP56RLZnGtTfIEW8A6WMd1kaCp/k4raAiEA3r9Lunr93DhcF9cGE/j8n5umJmeAnLUvf3qkqNC4UGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S80ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSSg//eZzievnbVSZ+0/ehZmKMGcNrQJcyLsAi+eS5ajy/mD2Y2czq\r\n5vucK8l9n3LAzRKBlJDNFg73Pakm+AjxKFnf0WX664GwIX1m87It03Oo6gIc\r\nSaXv1cQ+CV8qeSvU4XumB0aDVC8S5DsiYidbrlQ7nFvKLIoqStcGCxQhoofA\r\nejewLvwgEUd8CZnqRBAnkCrPk65ozF3qeew5otAuEPKEZ27+3sWCqztuQZqo\r\ncq5VCGyILlrXJ+2uYyCwgZGFnYzjiFzHtqq0mqnFvi4zE92LO922hqcjxa9G\r\nP6bLbGK2syBwSiY9uX3I3ENm0N9vATgIeGF892G6vim//qK2bHGlf1x3KcWK\r\nSFkXcgLNJaAZIYoH2C4okLsrAylQHHem1nCNZIzpn4Nw112gWHvpZJ1pErF0\r\n0GQAVNn4mQerdE0o6nzFQyAs7kDJ8kqs0whcJIYlVjNam1PBy7t9aPqSySUD\r\nn3UJXKnkdjH6O0fnsmTOaRj07+KyPgrtYq5RLs/RRBSMNqRk1uidWPk5D56Y\r\nqX9wFfvsP9lvusu5TJYifRG7nYlZAPq6junnGemdQjLy+2LjN8kwGTk2Tvwu\r\niiLDfx2+x56DywZ3JUr5iBgn/fZzBfQhtWqLs3bbJ8KLATg7vdhMjv6VcuzH\r\nTeUQh0IFSnLNksvtKnhbIwjcuyMrM6CF39I=\r\n=mf5K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.551b40d18.0_1658138420336_0.7695020536183621","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/theme","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3f0e360c4f6d4a46e5245974785b8765481f13e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.cf9f12371.0.tgz","fileCount":42,"integrity":"sha512-Kqx0j9ZHWluSTTbVv9DhKi2b4lXBAWCkfRR4Iv/q+piczM8PIraAjUIdJ4irHuNdbFHWQz3TU/90jfBqQDleuA==","signatures":[{"sig":"MEYCIQCOhxxfKaipOZI+7AKHL9ic0PPv03kAnNf1WanIOgqo7gIhAPk+n7e4GmzvP9oXAk4xj8P+fE3b/VAuAkkZvU2503F3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TArACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXSQ//al4T7y/Y4sdXI4rsJkLIALemIAtiQLJ/lE/j1Dwi67Tcl27J\r\n56JJstXcmMH2DZ1k5wMtu8u7uL7hNyT/vzTnDvHwoM0LTHJe8XjZUHvqk50L\r\nNT1WeicSQkPuOM3R1YWXzHNKTfBPtLv3hkGoXNJrGVnCesfmPu8tHTn0FnxZ\r\nWVAWnRWNQbRptYEKPAdnp3qRiL0ejuDuJwyeySowqCDE3ZfoW3hjwvWrs7T3\r\ntLRtkEj2mGvu39W5d91GJ8j4EmIoK3ABhltvUhu8o2v6CJRPLe583ZqE5Hgv\r\nN0HAMODYZZJFWxmLkihCuEpFtIWAG+r0hhSkif7k++kIa9b4JxqM3Ze6LYGd\r\ns8Grturksb8mVjLqlQlZPFz2FqlSmdWP5xryjPpcWFgL5jBnxAlC2BgkZ9Ol\r\n/A19vUfVO3lI4PlFruyjU5NXSGLSacaGxZ6jb4Q/4Ijo/MsSo0GFp0nW6xro\r\n/aYtXx1GhecG6ZkS+Y1+09Rl+Pglf961A3Kntf2QPLL7OhxXO+Nu59nNiuMR\r\nqjZrnnrOd9IeBnwwyLzRCFfA5YzxHJVp7wJT0OTv9h48WHJt9NfXoXeaMCQE\r\nsGGNFwJU46d4PyEa7bWI4QjP5LCNltsKR0ftWz5LDvasbxqaxq7w7410XfC4\r\nBXdwPRM/C6nRntyunkn9z9jbAhO0pZH0pSs=\r\n=o8hr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.cf9f12371.0_1658138666773_0.7404731049797215","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/theme","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d79a1e4cec2a9d5df9dde40a5e8dfd9b9aac82a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.2797ff8b6.0.tgz","fileCount":42,"integrity":"sha512-wo10HZx6mwgBLdyqOTaAtE0fhiPfeWsK5gcS9ZxmfLyDjmJfyoC0dSwRDb1lcd//HX7pmCgtaWUQGqlLExFuEg==","signatures":[{"sig":"MEYCIQDbituGgfDxUGyVYib650+STvpE3hhAieXqk88QAeGySwIhAPFbK617i97EvKEp/yxneO1g5GAArSLsmDXSumtBfFV9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fmEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1Rw/+JpFNKeQbC8zlMu2bd2ZHB1QXJRxyX4ey9zdmSXcvt8PXiOSI\r\ng9iXngQPM9XLMxhmtffxl7YG2HW56L94yAweXca4984IvFFmdVjKf9pXPRz2\r\nBK0CkHhWkcUp+q182Vwwihd2rtOqz06F+V6kGrmCddKYa0MCv/cPKcONEYMP\r\nPhbZmGTu2rprfBD7hyaTZWkmLNop2ZykJOm3MNMWHn2OIyjlqRbVa+G2eFT7\r\nWHdrtSVuTV/KjE9tXDO7A9eKQdYm5xD1jVkoAlzv9pMQWFGgZAn7eBxS2lgn\r\nPGXIrQfvaqSzZzWGCPEoEpJPdsG85a4wBX4SnmIxED2KCDn2IKJU7dI/FZ5Z\r\n6YSl8MHhtCWN/u9h8crYRtJksQG7jWQ96Za9Ojj2UEJngwBBxQsGbggbChy7\r\nYLBmttoZfx7A3TALd4POz9oTtQeo0EayK61Tvqp8ppm83cSXe4+YVpCmDXJl\r\nUt9jck+fziVL3EffvU3hCY33FB4jfj4ioON4hagBy9cv9e09OBuS5Hch5+/T\r\n6nN997lmPajfDMwUx2p08zNmyA4Hc52s5jR5eONpD2wT8sx/mJBgg9KXxQlT\r\nYyFFbAY9LUAZJt2rpq8OIXwjOO1r8zY6l1ipcDHWmRSoYN0JId0Bc1EMAV2W\r\nsKL5/k+MGNmWIShA+53+Zi6DaMuvjXDbxew=\r\n=S5NN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.2797ff8b6.0_1658190212082_0.6894922337252967","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/theme","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.110fafa17.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b15821320ce332e3a0ef99de8dfdc805bc52b69","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.110fafa17.0.tgz","fileCount":42,"integrity":"sha512-/B7SbvSDJnnIYEuktZFvTBPz1GSyPEVGILuAq2eU9B0ehPqw/1TFNfe5HnccpwIXw/YjIMZ3Nz2HpEjXgzz9rg==","signatures":[{"sig":"MEQCIEpX30hq5h+vJHQmkxjbDrjbLeAjvlFcFYAnxQuG7A9kAiBFSmnWHFTLYv6+ftGXVh2RF8rhGRoKuXEu3Ff4Fozpfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17LBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLWRAAgdrGZXE5XRqRJQMPYmw7DCfH30vqgfTJEQmAqTxbkIqz41dm\r\nocqD1lQ9z91htB+o74/rnFXxO2FumRXSIJ00hjfZdCeZueVImn/NUtriyP8M\r\n8JgQGVY4t3/vHcy7IqnGNQR8v4wUYKBWjj2NxTtjOvtqtCvZcVhPfPiSWrmK\r\n1vgtY6g6hvkEb/lpyhmnF6Qc1nyif9Ve8/Bt96VDBUB+q1SLANzuEiQYb+tb\r\nafVseApjFEYtF5OlLYm6tSAQIT7yguuLM8NmGUVC2T4L+NtQqXZQyRFGxo0Y\r\n8uh069Wb1Fcrj3QTURyxfvHMBnKgiD5t8cUNpHoUKgM8t/BmdIGGNizYNULI\r\nufFlSf7+QzekbBUhb5NRj9pMNCZufdVQFpLCSjUpxKCQCIi0fTOmTFxMy9Do\r\nWrK6xBYzNs4WX5Yjt6cybvamc32Frze2oK+umJZk0bZZcDDIiilf0QvrOf7V\r\nrFBp+032dqD8Dn9Bgwq093UgbvgCWuhEQCwT6TAyqDN1+QdMxSeACrfCgFJ1\r\nM6ahSezjo4ItqjKGZQskrMwDGuAQ0BfusbH3nxmp4+4RurTH7TZ84eEHhrSy\r\n6BgnXchchc3ljJUZsGCUOymhLbKs/UAWRLKZEb4U58Pf4NPKZQmsVbimnhGa\r\nHnmg96BhSMDVHRn3/N4226NkZRHYO/0w/ME=\r\n=sSah\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.110fafa17.0_1658303168854_0.4693467248634504","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/theme","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9953a7982b289d5cd50678ba1fd460fb1da1c8fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.386ef1d2f.0.tgz","fileCount":42,"integrity":"sha512-Tj2oiuWMAC6DMgttg7vTmVrovLFWusEanLfDtdxmmBp0FS62CdVKmDzQyNOfyG5mi9q5DOkeT8Mj34H1MK/ZZw==","signatures":[{"sig":"MEQCIEhPpS0Lq3zo2BBq7ba9Ke9Zlla8NLzqy1Ckcr+zQ7/TAiAWgnV20+qACi5/ZpinAmxrQx8tWOPjj7xhru4quiXe+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EciACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGLRAAljj3A6NXMwpudYhZo2tviOf8pRNZlWjech7PVjUP160df9EC\r\nQfMEqApzdFYEOnt7wVsC/rsuphboJGRlBRq6sOg9sCzvNWuZDkwcQBYZ63H2\r\nONOgJ0t3Yebs8wV2n4Y/+JIsmwHguDpTuqxLHI0yqxSce35iHlNNn8nVkj0b\r\nrCaDNnoLFb0pMkdK4ynTIgZdkdiMs4OANLZgyTS/eborRjDP3c3EXfWcoTIK\r\nJZE9MDOO9utFAghlxr8+P7FyDlvEJF3m66WHxeUn4+rLvAikiAoRjSP+glC7\r\n2RtelCSooL3AJG4FrQm7ALsc2Q93xAN4VPfshcZ1xcZgF+yMbiuMNcK7lcmO\r\nGuDIxNd8LM1e2GRN/TahbpUy/ezSCuf87FjW6gfDtl/YlHYBKReGxMyY4Mvy\r\nWephN3BB6GgG3QNa7mIGCoWIVza8iYyF4vT7m63nR/hXpo/y3z4+CFdIiEtt\r\noixqxtFqyQFw6Vcfm2TbekDTAW09nQKEO0zF/HxeeMkiHmCStqTM6GaNlJSZ\r\nxC5l3jAOlZqZ9rY7tmyrb7OvLNoGmvrPijRurs/KGyn8VzsxsFQTXZvduNcO\r\n6OkeLHyfMhcMhwRbg26soZgjzYUhPbBCUzn8Zolo9BOjzNvALRXNhzoe+jPP\r\nWiIHF9+LrH+Mi1qb+osGy/XUYtt8LDUrFxQ=\r\n=omqt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.386ef1d2f.0_1658341154406_0.4715973529754589","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/theme","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c3924efef.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"940df6c6a5059f38d1270cf532c8c7a9878936a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c3924efef.0.tgz","fileCount":42,"integrity":"sha512-tR6a1h18t/t1xBQeylXbFEt7yitOJNF4RRZZ6yQCDZUJErvG32uHQsiDJ1kKgEBlOP8gXvw2uqzLTTMMSIo4wA==","signatures":[{"sig":"MEQCIEt+/G+mWHt5qZ+Iwxyw2MJDe3QoC4ZJ/blAca38Y1LWAiAXt6k0VVIKRELdURuBp00RjutWPrML930zPzkXD/9W1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2ElVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbVA//YHxPMcRcglkFdlhBeM2BDiKatdldFCxuK9UoMX0uXzsNJS2S\r\n8o2K/fmtk9/9nrBVAQrdT36EFzir85ORllgOVUdyN1xM9juDcP1UNuXnMkSU\r\nDxSks79yPJxGI4Jm/ykXEj7zb5U2FOkinxz4G9Wkl0GSGFzd93GbDU2y9gfc\r\nyoyPffceLkuOpTXEBdLItnZrnj+/+/xpfFbNSfoo8TrXhif9Oy918ebhgMTh\r\nYyYuWhBDitOPMuNDlLdBS4GFpgfnf6tQd5s2fgtEZfe77CKVBUyB16ZZFjTx\r\nao4g6+opX0EWg3nqatTvOWkXOOTeg/WDileWols7Cr1uv1AwbEnY71jdqkFM\r\n+8dfJTGxOjXcf8z5u9l/EzCl2qE9wxaE2nap8CUb/hnJj34UW/XAscOR2WBy\r\nZBwrSgYdObr1v5e0uakyhiOj+WIkIKaetKEU0NrpJ3GgZm5VBDQpAFD8r2Yr\r\nkdGoJTCTS0OXL4pcdy/0RzNZ+e/KbyZ1diWlpiPSfaWyd1flXhhTKO5KqIh+\r\nILiErlIWxwgiaIjgpZYj/Su9NewCKQ0ITbaRJ995n4o0yNuuKeLfXbD4xKiN\r\nKNN/5WYm4RKRlHEG4otEamierL06TgNSYkr8dA0oGG2ZoUyJ5Zf5EiCSp8uV\r\n05xKSYuAJsRYUJk+ZAP6KQnKu4l+t51d2LU=\r\n=0V1W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c3924efef.0_1658341717085_0.46874688660956765","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/theme","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fa7d78ce31ad1842c36d17dc2f13ebd60428910","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.cf5c5907c.0.tgz","fileCount":42,"integrity":"sha512-i6GlhK0+MAy6OCXcbHg83sPQgkysjwjydTYV0X6eCqDiyx1R6k2vZC5UbdRjF6L5ub1hP6NlWc9Rnff8YzLRRQ==","signatures":[{"sig":"MEYCIQChAYjJCZhG56jD9gu3zg69SPQq3CERRRMHSTdxIHeeegIhALFKHa0dGPTtJYQqvsMbpfgnh69O1djmtchdts8XSc1O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HHPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpD+Q//Tu/U0wNGQovGRWDRtvHQX+KU2ACxSSRlNK3C1U8Vk0TmRhw6\r\nuCSuLTW/5cq/r52toCut4CsmcHX9KtRFeb4z/0xzfeFemKFn+2QaoRNl+YXE\r\n58HgieqMnCsZljIvjcmhKqVjYBLlSNPCxfld6i668eTA0REuI/xYYSdxrbH4\r\n4rZytgj04TBhxZpaBNYi1+lRCtqUhh40hYpnMKXdpdBvJFPWGbXv3F1KNt9H\r\n/6QI2GK3uCSQGD2VNW0OBz9RoCApfq/bu9fsi/YVEr6+KxVp572tgDefw95/\r\nZqITipg2myFpJQbQNxeU5UBF2KLr4gRcQr4M0QKJASF0YenPUf46VUYITWCy\r\nScaunzyHg9YRklvYdK64xqLFSY/7EDniSi35/7xoEd59Y9w6nwi2+zpLXPwd\r\nXm2jLjgWpteBQO60o0N9e9ljTCfXZT/GenWNHfNMIwM00vOkR67Eek4KnBtS\r\nQS6nHaoY6i9IjUpD/d/+q3ex6VJ48Rcr+IEE2ZmDWZ9AzqHjb5XYQmIdr7X1\r\ng8J9c3oXVY0LoEXTPSl2IyDzu5zC2COUUeq1q5623SMw7HF6pxRrP2SbmDqC\r\n0gAkjOMXa1BAYnBnz85B2x6QkgmtkLqB2RE5135Iiwvwo4k3j79/JkNm2Ws3\r\nCI6+X59Ahu6Cw3pGiI9xiE9brPdgf5NCx9M=\r\n=unRH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.cf5c5907c.0_1658352079225_0.6839145881823423","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/theme","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.0617e2319.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66a4430109352c7f6eb753b535e9adc933bca551","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.0617e2319.0.tgz","fileCount":42,"integrity":"sha512-6QMtlx3riKYzl+gDWOZaLimDEoW4oINLpifQyfH1142977quJy5eEEfNjVw4tJF3Z6nLy1oj62eb6RFlr4rtvg==","signatures":[{"sig":"MEYCIQCTGAHuD7yZcIzOVQvwh+3uggePGzqbRlpCQhoW2bfH+AIhALq/HftopCbaXXQ0Wnw3BwLEUdwCa2phEfqyxRDHYYDR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HYQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqLg//RA7sBJnB0GxYfkt/bsMMI5KcAj9hwtnOoCf8OsdhQgHpGTzV\r\nOHeNbhLehBWff1DXThFHfdBpKdh4WxV4j/xTnbPHS5kXSi7fLWMSiro3Xw0Z\r\nizhTlufH69cv53dQXGALoITYGGIBZJ4X6SMpHx2xjvckgpf4gEhucY3afkYZ\r\nYM9ZGh+pd1kNi4gAU79H48FhjX4jEjDi0KpqeqR4vVosdtHmh4gyvzQ3oU8G\r\n187G/YXXCcRyqM9Zl3c2ZT7hZwBwekMRrGr2DDodJtTwDlOJpNZWxz4ipNfj\r\nCtLV5itL56u+6/66IR6JeBLQIocYZ7J/+eGv80CbZJVrXJjDZriqeP/8sWPj\r\nrmRSUADlHmvlJsSwuOwxzK7UbMMgMiuTsp1hcFUkxS1W1N1hpMvndwb7idpV\r\nQ5zcayLISsHB+/lbNR4l3LDoctTohcFhqPck9LWcn/q5w3HgjRk1TpVP+lun\r\nVCsid7pcGCIxhC900hsWygtmo5vbncIrC1vSIV4aPQPmy7/ReXxBTpmrV91k\r\nTARB+hmzKqItbDM4N69ZtjGC9zqB1bU46Y73X9csYGr3rNdhT+mAB84x83Mq\r\ngb+NhKNIeCNjARMIxMTsqXZ14hqI3IiH4GUV2SYeHYRJ7VypQ4n94a1p/3in\r\nGapcjeN/QQnr5WNXXMDjl1Gp6XAdrLHeHi4=\r\n=G7lS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.0617e2319.0_1658353168498_0.7292631067939019","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/theme","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a743b7967.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce01b794e1019bd4d9c33197d27c17d43409bac0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a743b7967.0.tgz","fileCount":42,"integrity":"sha512-PYpCcIrYwNbDQd3YpJYB1pDKQTSdoU6m7EMIuYh7+jlXCk6JrXTqE56Hbo7L/Kc/ux995ldXd7sXByiqSsigbA==","signatures":[{"sig":"MEUCIA91Sxd4a4fa3PQdHt6pAadMAbqSmeoYSxOsM+eZ56HJAiEAmNrQYO008xttnTtxRvEvTjfsPh3UL5vjmGZQ+iUOmbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HoVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/9w//V1vNQ6EWYA3d/8WkcaTASFvkCYDbdMOIwCWDgBqsxmSpKE0v\r\n6FMAEhhoNkN/8n+q0POHK5Dfey7QxDup8sUddIUHHuxsZyx0MAkPiSgtoyZR\r\nPGsHNpivD3Qly7kQwHNuLyxVvKZdj6kj/8NDO0UR1enJP1+v6aS1CxOuu02Q\r\nKl1FHg5YRHKQ3buIow8Pn9O4vpSx0ZRpYphifc+aEN1VXJ6aE0SZ2dV0c/JC\r\n6BFL6mVAgi/25gKHb922hdj3M4I3KUOfsyr4embfVsXfK42u/rUPAGN8ajdP\r\nWGXusPj4gfYqm5Wiq3aUSUmmFHz2xsifUTD5w7THYs1xfVTHm54+1/Ie1IHt\r\nNjSEYapjEY4VEKkXC+iL+3yIGu5z1WR1SxJcjWNlZLUe6c+Gn82ecE1PertE\r\n5HvL1hzhedc+9Lty+X9m5ApIGBPwoCUL+8QPy/o5shHbp6Z4Hp0JzT710Hgl\r\nQIk5MmkRVEc8GJcOXrRzW5TvfTkZQocUi7V7/wqZR91tb0ZZOfFW7qNK3UG2\r\n49E1UF2jnTO14RXEJRQhrmnMh7rzrh5GJ1ZzhhA7/OuMMF/TJYc4RtPAfRQH\r\n5IhPEcj2MgbXOcLARpUtLM5v3NgV6mJrhTh/mKY68nmHEFcHrjaGejpJSnI7\r\nKte2JRkznvrVnx26godGidKTyR4HTLUIQ18=\r\n=pLi1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a743b7967.0_1658354197324_0.27399204898753804","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/theme","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"384c2a1603e22df19d855e7577536a4ce8b6a45a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.69fd619d0.0.tgz","fileCount":42,"integrity":"sha512-5E7RkqFKf3oBbKfaX/hrfEcnNJBWNfIPiFOdcJN2QncC5/uhUsFkqDt1dX4dVcnXhUszxUrf+UkhBGBqY/3CKw==","signatures":[{"sig":"MEUCIQDHQY6tdzy0SiMS5BFtORjPBBivkBsi6ceu3pZrLCCyAAIgXNBFhjtJYkpX21cCLZkWewKZ+X4JBI6INIzXfXoKw8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HzeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu8RAAj4KnZwC0otZJ90ODwc6D/ecc5vAGAdqluHNsUuVvs1ZgcaA6\r\nMyINU381JbToQSexMAddU91x8i5Vs/H1wZ9RCuXLDoi6i/5v8eti9l+d5wue\r\nAp49fq2IFevVyrub6PERD7FRiqg1hpMBy7qb0Xs595q1PUdaMyEkiiqwYlOw\r\nH/KKU5OC1KF9I2KCFpKQMA9avgDneMMAyEELOKEGRBWVDC+tpnNS018Wf5P4\r\nJMmOw+m/8n7jg5cIHA2vnx/52Lr9SWV2Z9yuwD/Q8CHgvOGj7ZRwOP8EgY/Z\r\nR8oqIoyU7NdPhUh/WadVs1Ug+a/vnIP/Qf0MXEXYMC9yLb91HKivU64WcJ8t\r\nnsN8Q1rr0l/ipBwNbOAqoZs7PusQKDHwUJRx5mzeQ0D4xfIsRFmcKt3+Q+G2\r\nz2S2inSzOGgX/j+NkxSdKRI1IaYdCVDZWyz9mcRoB3PG5iCc2UH1CEd3BNm+\r\nHQa9Nyl0TuXz2cCOM42KLNV9hmXVt6Cp7teTt3lN+xQO3dvVwcrswwvlcz/P\r\nCDzINBviKhn0EY1lz2mMglbl5sRFvOy9vaWvWct/o1s3QTf+/QUuzMTzGZpO\r\n/BFmzrgtnXofDuFcoz+Gd30L9gcvTXGsKgYhSbizxfZPg9NfvVWEmX4BtoFi\r\n5tL0RRyA394qgLb/JExKF3dkMIyp1xqRFZE=\r\n=e4QT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.69fd619d0.0_1658354909836_0.5407974226592418","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/theme","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b842388eb7f2b10bfe3e988d1da77241f387a9b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":42,"integrity":"sha512-3yCKKhduVjrC51tkQXZPvn/0+U/NCh4hVkPXPo/JLgQbtfC8U2OvLQJtxJV1OnSxsjHw8cqcsZZ0m1RVPf0eEA==","signatures":[{"sig":"MEYCIQCGvevJi7TeLqa1QKkU9Q5TSF1dKWPrj+2tJS5/OrSEvgIhAOcaddMhRIx1XN2VxQN8bLzKw01wJ3vlehpKzdV1FVDl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5ATyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQvQ//YD+90ZYZ6SeajWEa6fm0kKatHXbe6vnFDiqxAkJo72NKtcF/\r\naNtjWq3K/JkAOw4W3oX3xuffurUtXdBI3kSrWcaw+dX/8aZgjlA+RB2BbhL5\r\n1G72evcTSI3b8gAfgz49jX6MuAV1Gk+4TnCSkWqRwZYxnkca4EB+ufUur+Bd\r\nk6nnbJloamj9EGcxFkusdJnLLNltaTnUjVCHetPlctzUpkfltAPNxb5R5nU/\r\n70midXpVQhCTYurZiMph/dqJNOzMlK8T2w1iPrTqHQJgyCMB79KzHU8k7Ugy\r\nCuj+iYS/iaMCTPKT9o6eaCxBUA80DfRv+c6MvLx2PmWj0zD7nrUepp7KTHZ6\r\nE1YPoS57WICKp69yyopq6BcdPgScufG0Ta+OAM9e5O8o3hS9ollOTwn7zTwa\r\nX39qTuaC4tN6zCMBR9ui4MpvA26pyHGlvoejx9U8vXSTe6czm8KLc6BSUA5u\r\nogyd2N3hvbQzQfLyYC3r+UL3mDg/upsfe5x9Cv92PA9Tl6rIWDkcAd1SStDG\r\ntFUHmIESFyMXEoimjQEK1yi4i53uD3YJvKsDIowQ7N90fgM1SGF3ibS3Gul7\r\nshQgDhqE6cZrD2zb0W4+4ARR+WRiZM3ciDFe+hrVuVHI7WxEKnbLRUEbYoGt\r\nX7sOQdgw+G6Aho8LIYv500+hLcRGQzpZPkY=\r\n=RasZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.2a6ddc1cf.0_1659110642754_0.7768289000957558","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/theme","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba1c27c6a9d1a2586f8d772ff7309cd67753197d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.86efd56f6.0.tgz","fileCount":42,"integrity":"sha512-cOpID7r2cCti/SbjBbPciqkJ1knArcYCOzPU4EozXvd3+c1ms2oJ1CNv2a7Syr/BMLrhtaGLgKbeqYVcTILujA==","signatures":[{"sig":"MEQCIEi2fzJGEJ1+S/iuMTOpgh14mL/o1VKMbHjZty9kWKE/AiBUBph5lbZspShu0t7Cl3SiUpG+uVHiVKVvbXd9LGtBEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6ThrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOgQ//YwAZb9bW2/NezddoBAnB/Ztsm0n63Pi6ppJqfmuebjlnoc03\r\n9jbGf4ggMuhksJxzVu5xi6apNyHNPC/dn/zOIwshRBxevzlGR0e6eJ/3I73E\r\n3EACJIrJSxUXTL7341LBek1LoK2PjRTAKFoOiCZwE4kGcep8DWAHaPGguvym\r\njx8D7/FUHYjdgt/Ibo8lTqg+sU6qfgPgBUNGIxGkPE4Rji8Vvej+H9MhO0PH\r\nJWISrUWQLWDTPJ7oKn1ngZTSDgEJKhCDr9X2fccJrtJ+Z+j7iRDi+VWF2Wu3\r\nU0ghiGiUkvMc/YzmU6M0gnmDHzoe6Fv2tY0mmle8FUIsIrlL0+VZRE30cK3S\r\nf2vAsqL++kMe1NeXeXLu95+wgY73PNSlwYdOsnLARiZngNGKuelpjuZxLVFR\r\nTHkJNCvFJihsqzR3ojx2QtlFXPm2yrnClQXFalUfc4r5iO3g7nFuI/nQWVkD\r\n73YiLYVAgtj4mA3irCglMxPXig+bIXwWrNHErufIN1J8wkCfMWaoycj3XJD3\r\nMTh6KSJc9PJu50w5u+Kmmm5LCx+Oocu+Lo1TnGMCLGJflzrgFeCa4PoogylL\r\n/FlWLtrpUTxt8ZVW31Z48S574ex39OT70jksxDDfnwH/htpS58/SPakeKWEm\r\ny8AzacfgS54EOoN2OUM7MyyII5xRZjSY2wE=\r\n=rx4H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.86efd56f6.0_1659451499175_0.8365607773003367","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/theme","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bde709a3a78ae517552766f2cff4180d15e751f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ccfc24d19.0.tgz","fileCount":42,"integrity":"sha512-MYqFZowCye8aq4RKvaU7M6dnqJo7gekRhix680J2NuwjLbOh8WfgQEpvsL/tTtxZEB03I4hlbsYkFST49UPcLg==","signatures":[{"sig":"MEUCIAR/3wZ6OrUO3Vb9UAsc6YXlLpwoOpnFUoOVarXin8RMAiEAp5ByfDpbWtJufx3i+vQ9etLmo4n3xLctaFzVx2PuImE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rqgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphuhAAneYvoDnuKHypLnQIoWy9wcjZHPP+vV8es5gUeMjGF8PuyCGG\r\nWUayHE5KsJT9kWdjlSNsPe3refI3Qz/ZJ1YfY1G19E4NrSR2gDDo5j3hgMHs\r\nMtujYAWWPcIBXzlh2ft/5Z8zJ+riq4LxkOzcYjsLsjSWD59dckOJ8L0Dm+KC\r\nskzAKavwMiL/CmPkkq1CaHTDoeCkapHedfs2ykiuxx2fx/S1u39JfkxZ+Iua\r\nPFi2JkAvcVmJHBcxlG6YBjA1ifdzGUW84jVIKFV4YEv0B9rCCgbl22oAdbYO\r\nhCUbOj6IvVvnutwVJOCRgm5iMLuVk9Myoqae3TvTQ4T/oE7fa93n4QBNNXjZ\r\nCH83MNtC2vYeiTT9ii2y9Eo0h+pm52dSultHSptY1k4u252m6ZcIj9XhSPzB\r\n4vKfFiZ12gfJxzz6i7Y/54XIeF5pJsqaw8yLOjD5mckD57D//wl8neySqZru\r\nRfskXGHupnKdPkfvBjICmBxK6R9XisSsUHAMuLT6DhM5Rnv3hawluVkT+R2+\r\nkzG3dzFntJu156+vSD6BQtUdnMKEamd13DKAgKHCMU4cBfsn4bH6vIDJch6a\r\nN8I7OCf6uIR1Q6x/qUPwgMfQu9zLqE8KnwpcbDpMuwoPSTtZ4E/ddXTjkQ8m\r\nR9STPnrzy6i7vmUwO1RarwDsLanTBbmsKH8=\r\n=nogL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ccfc24d19.0_1659550368577_0.12425688650152966","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/theme","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.e4570146f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c08c0e3e7a4d12c74be6b891eccaf925d835c17c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.e4570146f.0.tgz","fileCount":42,"integrity":"sha512-qQwURarqv3nNdwttV5Qyex1l8ieadqszrKG34M0OSDAXKX5n2fCyIbibd3O83PS21PKdSKHiPQEwNxbKPfImfQ==","signatures":[{"sig":"MEUCIQC4wWH6/08NI21yZNZg4npOs+FOrS+2he/Tlrx3JGodAQIgSEJWfQy13at6awpNnS0eLjOKmr5gZ3+JuNV7hmgIwgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sEGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoHw/8CYk9c9NBdvJr1i17hWH6Omo321Lk9RzHvqmaYB/g67ezLANX\r\nfJJe4Ftn4RVzEhDVP1WYyn59wqmSd/7c9UTssH7gACNidZvI5b5S1CehlvW9\r\neE1UNHuktx4rc1EX2RZUtBWGXj1af+NzrC1Ax+kFOWwipPDq0HEiRUlOj4en\r\nAplD1vFxH81TW+DzeObb1pe896GaSLElUXsR59rvmG5IK0sxzzqmgw1ThxqP\r\nx7qw8+b/K/uRt1XSPieBVCYP004BPBjtYBIv2zLjQVZI6ZxF/WT89qGhYcqo\r\nmw19ojIZlJqQ+LVjqPScptoUQ5bjW1lali+AYWrMS8w+WkjAMc/P7hhcGukj\r\n+1iWAk4GyQSybeDmrGyS4y3NJuu0z96cL+MlpquNLaWUnsMAyr4A9pdZLwkH\r\npV5Q78KZbehOjAPh00k4y4apd1xggqDia8RHAQYXNLT0sUG5AgM8bVlcT2uT\r\nKaw7loZsHXl0jStw8dQyl+o9vDMdit2L8HYcO1AZW5J/yAuFBQHwJE4M4RSR\r\n4zYvKQ0AzH3Lcekte5Bob7u1nQn61JiDslu4Z3LIXlcf9fiMrY10X3Zi9Cyv\r\nfC4gYjw/oY7TKjr6dHLWmpYNr4ICks+HjVu/S2CM0e91xS6GRzXxVOOVj2sx\r\nHMFiNcusF29veaukhBQ559vOntWNLFVGYdU=\r\n=qUhM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.e4570146f.0_1659552005716_0.7785116934971732","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/theme","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd53e7d7344b82ca2074dfbdc947636e7351ad2b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6683a36cb.0.tgz","fileCount":42,"integrity":"sha512-sfkZM3i+goNbGvIebhk4L2jf+KHY6DOWD07XQvX9f0cicSC09BP46PL24pw33qOULlb0dRJjnoDsZE1XJPaSgQ==","signatures":[{"sig":"MEUCIAQlbUkyUn6mCMscgI6dr2nj3bYWknKVG7WuGltMQ/27AiEA9d8wIw+GqFXtGG2XvrqvvNq2nyHkx3Ja/gRyv1UvW0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6spkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBVg/7BipIiY0TsnmAxvnn3pMKFdZ5vq4RjXX/oZOoRI7e2d3WTVtn\r\nl4tmjCpmrwsjkk+MsPYkLUV2bxrJ2cwp4VDjyRaJees/b+wIN/OaESzG2oFl\r\nMe/+PSyZHeMO9cBY8KrUP9ET16sjdX5j0o/HaF6Pye5fF/q71j4EDdV4y2RV\r\n0QYBvPjW0FFLbpeuAMkTQcIfetac9K8R4MxiwJ0m4dnP8XT9bGO7Hx1FabGI\r\nHf5+y8BX/49SgkJwFrUD3ykhTrgx5DSUMyR3QW9Fj7VZTUGhpfbHIim7HKFV\r\na/gZ+Chdmz9PQZ70MyzHM9R4zv8kLBJe4goS53hO/OcQnguJH4FSiCR5I9aC\r\np5hPtUQA29suYdrZ5Y+YcOxg8+7U/DtfOSXAFtG2Rw6D8VparKRGXXXsZ9Mr\r\nzvDNImkgmIbTmzvBQYoML8Kn0tRQVTomQWjxVkioGBjWzte2YxUL/IlpCRRA\r\nepvV2Zs/y/7MYQQZR1J91Pz+d7xLdR2kcL+wyrCGFtPnonBuugCC+yYeMy6Y\r\ndKSjs+3eUDAX3+hf5vgx+YUIeGvzHZdICiYWfCVVfwzF2DQnyLl+sThKud7A\r\nEkyAbtFghHxH01645C60DiSI9TuVWYaDPN+r4bifgJQ3wGWeJ+QDjlBOrrTf\r\nYe/iEgYymBceA52nneflg++vNbFy57o/9C8=\r\n=zFHo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6683a36cb.0_1659554404333_0.6812970993358343","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/theme","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.10196647d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dd62be70d2427565fb8213475a1dae02e358687","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.10196647d.0.tgz","fileCount":42,"integrity":"sha512-jlxI3+weSszrc1ZPKLQszWPXK9P6d9ujCjJaIJufuPZYXBGZUtKrfG/ED60KokuNiNct9pZJ/pOP3m6VR2vPWQ==","signatures":[{"sig":"MEQCIC39d34dgGCWy//aKl7ENF6XxoPSY34qqq1hDceg9fGhAiBdmMiQJoh4r9oDCcRDB1Fi+C5GijtJJBDUP5fmhXbK3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u5IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmot3Q//RumDqtxR7VojeG1XLz9JCa/8L0tFdhqytBbQIIuYpODfWrOV\r\nCdSZlHLo0hSMysUAZyUXMvNC1nb8sJ4lQzy9+f4oZQUHMSth40yKqFjUhP8z\r\n4FcxAspjqsvEguEFeJG4vA3ye2SNe67Kq6bDDiI9V4OfLXI694p3oONm2lax\r\nV+pqomEIxEVI7yd4+/kxXl+QxXc7xbrGh0fv2IWuwsLIxmsU7D+15EEJpyQ5\r\nxBbFGNF+bFfwoYXYafc0u69GtVSHO1NboH2zih9K3/4AJMh7iPcVzBSmRU//\r\nVEO1I9OUYOmQO7t+83XeX59loaGA4onqHJpttQ/4Qt0sfihxkZtAZytmFRxV\r\ne7jrUugSznm3N/eEvVOwrDiF0Cq/zTIxQewDzIAqsuDQdvNfXMC5E5u+EwCP\r\nZRYsWmgsmUtWE3sktueH01KejVXp2ugDql5iUL61UntB50evbqE+cRXeHezP\r\nY7TCZdMmjqzqN5EyhHj7y5b/QBYgYnU7gbw4VVd8IiT2paRcVZrxfatI1AYr\r\nZ8lkMXND2B3XDlXu4qv9JJHK56VlagXHk4ZVllvHFsou7YFsu02NNpJdJwCi\r\nv6X+CO8F9Tmcu7mVXNe1Gt9qILbc4aN3Jii+69tuwSgHFwQwfZNmZGe8Sh9z\r\nzgvpLbvLkI1C58KWtf5niTkq+joAHPz+TJA=\r\n=Ll3q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.10196647d.0_1659563592609_0.18526353928195105","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/theme","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7a7caec0d84be84725dafb098681ecdd678f23d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b20d3d73c.0.tgz","fileCount":42,"integrity":"sha512-wl3gFuMFF/ZwmcXSO8ZCAL/+eawsRYZHDKLibqoTjocG8FG+tCYzGDWBiCbrcpZB1hgG2+NMuB6lZ43j5ZkZCg==","signatures":[{"sig":"MEYCIQDT9GFX67x1QyRKbSEtXG4SlFHxwyTMVVmcEwMX/0XrbwIhAJ7kElFzIKsa/Q4wwFynabSOnMzJasFpncTdGuvlZvQS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EtGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGRQ/9HVqnw3KkXqIKib4mPa7mXGSblO2oQvnMqxkT4rYbXox6YtS+\r\ntpll98FtRtj2Jlz6DBwbHnA8HOv8Lqy/XBWi9+OIW5hqGvrJuxZhvKKT76X9\r\natpVmJ1/mcIDMegsOdrujr1kcxWqr9BzAvmwjDp9FhA96qe8YFgRvHDtVnYo\r\nu079YsxhF8m48AVaBW7PlQYmCkXU8Mke/+cOy9t4ozRcO3z4AZ5TA7cjOkuF\r\nBZd0c8dBRdZaPxmTIXQpLN7C6SJ7PgVJKan1oXJ9/bt98f4QRPdT57eKcWnY\r\nDbbXSAQl8KoqFLELSXlZ43NtqnecEYcpUZwtwrjPHChsFIg8avGDKiqBIxYA\r\n5d9B3KwUF77A2DU54hT+Z28aPFzgKVF+6PmAxup9oTM/EjJcdOAjK3ffCAXJ\r\nBMAx2klb1CQDo5ZGbX9pHKb77WGGOTFMznoyl7h5VkSJOKUB5RL4BCyrTwzD\r\nSDFTjbR/2IjCdrCj69bd9cMZbSu4oFXOLQudus4sQmQms3OUb5uKAZgPOymF\r\n7R4emvLFeZYdEYJRobyXque0gzuuXYO9MMpbdQjSBOoQ1QvezB1RgeQeH//A\r\nhgG4tB7PpJXgPXW8xMvTfkopyRCZWqxROhgvtI9N6Ebtt8LiBrT0bbVmBHPp\r\ni2/++KDmdzUO0CcNm/Kp8nynoKAgdZ0Ogb4=\r\n=UizA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b20d3d73c.0_1659652934278_0.5849510741846646","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/theme","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7375b86bef51c1bee6aaec6df142326d20081586","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":42,"integrity":"sha512-q3ShUqQGTS7mWInAsbWpyVrUUTAS4laUX9KXIfNjLehDZJLHdQYj1N1JyPnw6mdxRv/jEpk9DxJaGWSIUGFimA==","signatures":[{"sig":"MEUCIQC//sdqifjiIdr9QQpZeDEJwg5cbFAA0zzXn0CQrJPmpgIgdDqWkN+ROFBwI5tI8HJVhs79kdMhvXjNpYZxCfn0C/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nsUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNbA/7BldQzC3hCRZO40L65hey36U6JuPar19fohIVQPm6pLnevqJm\r\nGDJKCpQl48r7YyBYJ9qdIMZcLKa65/wStxGkCf7YJKWSL79opYAi+McDgAsi\r\n0iVNNpUBSlbpHnS8Npu752uy5MmGuX1Ra6wErOttr7wI93vbkbUa9GgJItbu\r\n1EFtcDpZGnfA22RgzAhHplUwRtMBgTZZ+bWAiL1POqbegdtDAJ3CUD8kB7uL\r\n7uzYLFANnJ0F4cNob4F+R45WggHMswShPHSU9V6Hih0ntu8SCZ8567Y/fhmW\r\nuZTazxnq9XPh7JSXPxPeKlPnjMD3JnXjUAxjL/IJ8EyKYCH2nvbMFDqE6Uta\r\n9rTyv7g1HD6K2xDYQ0Y2HLrIRicam2Q6rrm23PjPa6BR759FlX9dU3QXYfug\r\ncCEoJDJeHZbkTI4qX/Aw8LjzI3MDzSJAQlo7EzsfKc5L4NQnXAFudHJGAp8V\r\na5HHh9MrwZeZpFqanhhUEpM9KTX41GhFnc0OnOFYkJIM3IENarUjt7DK77gZ\r\n6RXfKqax2CgAsw0vJ/X58ljQ/qSfEki0WlocyQ+nI7mhMgAO2l8jnfuNsk0D\r\nBLSUpvsoUfaJEWQWADrALt1/oyRHV58IHzK96DSSc4N8xLOTA+dw/dw7MV3n\r\nvSuaTCn/c0FGG9qgbUWhhbveh/g3ESAsi/E=\r\n=Nipv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.47c0c6b1e.0_1660058388130_0.07421952162763867","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/theme","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6531adcb5b98b2d0f1081813acb6d39461edf07a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":42,"integrity":"sha512-HNUuzr/HSTJKtpDRYk/j6tfJ1MWGraL/QpZH8Of1ndSHNdUR/itpdus6Pe7WMtoRYfD+NQz3vgcW9Qf1Ck906w==","signatures":[{"sig":"MEYCIQDxsTTZpI/DXP2ftH4nq7OaiSWDRWS2kkbCDdKGV2YTlAIhAJ3OTmeol3UPtkz3sgYR1iyKJyhLywtTBswxhl8bUQAQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U5BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4WxAAj29ZjCQ2u7ze2oh7HUfXDXMbb4kNQYKidTH859uH+vmpPjox\r\n5wYZwsXv3KqtOCJOLATqTk+vErZd5d3LyGf0Xh8LJ1jbry4H+ESkNlRL39tU\r\n8W/25ErvmHCdabRR4dQFWmwpzvwWSxFOneuJDmRpOqOOxkXiDkkVPXEpLkLv\r\n7MbprZAVQpS9PUFyYOTLgNMGlMB3JaNM0zln7B/IF/gCHhGLOB9pEXOSHwtZ\r\nrlXe45mB8qjKB4tzd41VwrwuQ0bM0GxL6UEuugTLw9AlgqGAFNo3H4fSySvF\r\nbSL3ulWBlbBJFdKA6+7aC1bcPlTFSbYicGHDF6h/xQygmHYgZeHUE1me6dCh\r\ncAKudkSCdEcXKUytEPTUmV3yXVRtKlfCVeKAxyqDrTjUZO7/iL9xVuPpIv3l\r\nmCvLKVIdKqSqedOoIZ7OXEOeks8cIKmmbDC9F5x874GPoXDnC/m1jI2dhsCV\r\nRl8PHDZhj7lhitR1S5E5zk8cjIRA7WnTE8a8HiuYwxfrOARdHC22vAMoCgyt\r\nx8UkLTeMA0cjB1iYcxWoJD8YH8jociD5QcfOwWDCD+VNVXv7wycnWrbKEw9H\r\nSjyITt5cBmi7n6zPNKMp8oQeHM3XdHl+pEHaqPnqA+Z3zGpdK6Teo1EGtOr4\r\nUir79MGVjb/m4pTGvhcDcm8yX0OPOh+oDHo=\r\n=ak1D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.0e3dc8e38.0_1660243521532_0.48751589985996246","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/theme","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd1db38e65ae84b950f20d7a50daa63662670f5f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":42,"integrity":"sha512-ujH+X8fXV2wKYlYs8yjo+M6DxSY6Mo3QRS/9fiys9sFZalZi7HkmJeH4pPWvd/FfNqpmjSk1HSEcveMiNldZVg==","signatures":[{"sig":"MEQCICebgsk78+FiQ/3n1tFaxDr9ynMAySu6XfdQPXXV1fnhAiAtsMdnElRbLBtikvTdKy2I7YtaM0cWmfNsxoIE1zC4rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpaaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmofuw//cbt2uuMO/MfGEvAFHypj3238BZh0in624KohM1kepf/0JuKc\r\ndOPWc8BOTpaFrpHA4YGmP6ZFya4S2QCjkWfqDAovjMwDaRhSvGKLWBgrXbSn\r\npA1V+SeK/jShSjuJT/qIyQGl+kEHvL2l74ualRBVyJbYowvCjJGUvwOFlFmY\r\nW3WDF3GwZr9a00ds6K8eT0qVdydjSzyDHsVpEKacuPgMyruUha8I7vJrf571\r\nnobOwSZkcqAUK1qC7lOMjE4H3or7ISdNedI2v9JJfucJDSMw8lk8APsHFpss\r\n+8w5ZB0GeR9+OhyJ01L0hGc0MskYsLSivNgamgZX/qhfs3aGTIHiAejg3/uH\r\nDwhw1JRueWkJj2uKXFmXgWERVCzbovtQMG93skqHMau8oSbjG/kgMkmB4XN4\r\nUr9qLE+bLl/LzYnBR7WzWzh8MN17zuRtYZXXFoFlpabcUvq+14oFuT5WU/kN\r\nyT700wlJb05ZIfi0CfAMUVWrrLYSxJpu1u/0KQUr4a6QGSlNmUbqfxQu+eN6\r\nzhyyDN77Revh7v2yavp2jBpCqCai7QIcobB/ucC6zXLh37kj5cOP+Er3pzm8\r\nXYwL4/NL7mchy5gr3ZU8cTCKrbNf7NutFKYubCpO0lk5XgEsjSKJT+VCQi1b\r\ng3E1+984QCwYAKny9ssJrI0OoTvogLtl8cY=\r\n=WMBI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d5a11f1c8.0_1661900442392_0.9476961071168386","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/theme","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.bac992a95.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c14458163e295986f4fc3fd3773415a5193828e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.bac992a95.0.tgz","fileCount":42,"integrity":"sha512-YFeQfHrI7SoU9F5XejYwe9or3aXAmVSYfbEjdkKOUu4JxH3c5LQj6wRc31/ZMHXxE1A5iVLUTYGv/MAcYrnA0A==","signatures":[{"sig":"MEUCIBGPUPMal3QvGQ3Ego6k1LhvbJ3LawgHpB5/AKFm0Yg1AiEAy0maI6LYRqKDOvlr2EgV1KO89nAjuNywQ001IPLVDuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFmdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwyhAAhilvYfVf0IznMG4bP6yfRxefo6pkdhhKb4Bd2VcgLImGaZC4\r\n3QBlgHBc0xbC4ie8i2s5eXCBDuivaql2bn3TH24hf2l7BfjUeXpeF7TYKwVC\r\nVJI6zWeLSJBGOZvWc4t0gLRW31oOv6kwfXZz5LXQDtO4sit7n5ptzp/3Maht\r\noE+lm2QgkuOsFpQq3HaK5vWWlQ7Os2WJcPCFMkeWrayOrWC4FFc6vEaLUYGA\r\nCsRFwEoziBWLwAl5N8cy2wQKDRSl6iGDofJiMbh9fR5pMsCgxKNxx54acrnC\r\n2Ruk015KAD2nWxmKuIwkXveeEAOMjFS8sDBBuRd/lzi0aFx4E093FVHaXLkR\r\ngEUTSS1iae8nlBXu8LRrQ5uFZav6ys7CIyHBE0aeTfnnmortNx79ItUhMFlS\r\n+B5NilisZqiKYNQ3u4/nkDxa4/5qVj/o9bX17dzQTY5W6ewSsN3hwiDGTbkg\r\nfv6vjVeYYwYkmRTvd6hHPVg3Y001WX0ggfFsFGcf3/oprVIC9u/9KCUbaqIH\r\nlNQEWpUCei/DWjRDvmW9hEFy7rmvYt2Z/etI/TWn4YqERNx1ddDS3KMQ2Ef8\r\n4FE9xbjg5Lkh3ld/kBSK8vbgnSEhhiffxUU4jiATznvNQ7KroEXJqVWqMls2\r\ngxwhwwZbO9Es30agOPM5uo3UaYmi27kgYcQ=\r\n=6fSG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.bac992a95.0_1662015901248_0.3053393112637697","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/theme","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"722895d8cab907f3592cebaa326851c45c0091d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d25f3404c.0.tgz","fileCount":42,"integrity":"sha512-6H2bmcTjbEUeIYLPX9uY84k4W1tkA4or6esf9LvsiQSdts4SjStDVlI7gjgWDCiDalgGb1nitOtZGJPsc7njTA==","signatures":[{"sig":"MEUCIQDgfxWbgRXR6gbdg3Xdo8UzJjGQ/GwD2qF2tC4Xscw6qQIgTWKx8qkgikri9ctiI7ZHpKwy11Eqdi5p1tbI3ssA7f0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH7WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFnw//XMvBz5xuPVZs1aNYKp/xFM+FYRuWb5guAuNDnZnlfrvowwcV\r\nXWVvdFD/SLMn6nkYG8XFVuVe7QRatpei1aA/bOvD8htq14ngyfDuYR/pIuF4\r\n1/fBn/EYZp1/oU3UHEvk+MEeAfFU9DU0OIWiF7Y4gNv3boo6x+16DSHyCH5/\r\ngwa20vBOF/Rvbcw6FMXkiYE2zkrFulwaon8Sdvv2yPdHP6Jvn5meDAOWbw+y\r\ne3/jAgG9d/hkhiT7CWa/nwWOj0iFDLWAWqOHQEmKTF+/ERqDugJXTA3yxtGn\r\nT+ZjvvVUjU2AujE8CAfnuQcaeO/dM4VLd1HuA7nC6UG2sT333uNyRa6Z09HP\r\nsVVOd0obuv2W9mCSZw1n641bHaZfY8Gaepep4M4fCddACS3XTHLf1XKl8JwF\r\ncdYYk/XgPR5Xf+RBU1goe7X2PRl9pseanuwOsEQViawoLypTXteO/ZhEUFCg\r\nKb5M/FblI86hc/OGcv2b2ufc2cc1QccUN6oSoFi4UxCBFGcg2Zmko/8LWmdn\r\nnYq1J5/XBzSF2stD6yZbFnVuGVMtE9pBkyT1em63lPdsX/glI9AuSkxdG+cH\r\n2GpMXedAP5dRNEYGnhiHtJxGx5urveIM7sGVBz2Mt0PSGvtTN2i1oGCQ4XHo\r\nxvS4jZ+765yTj5C2s6QZ8wfH1y3xvDmgU0w=\r\n=lQSH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d25f3404c.0_1662025430414_0.8476159648728356","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/theme","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeec5dff146ebcefc1731a353a3cc86adb5faa46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.920d8a79e.0.tgz","fileCount":42,"integrity":"sha512-Zq5Iwl9FkZ7OSn0Akf8nV6zBIfRGm71E4Q64lBlCiA+oe7GVfv95Crk0BT129L0GwO0FsRo4tHJOXAqWFZ3Jdg==","signatures":[{"sig":"MEUCIQCBX5eg+oM9yyBj0+FBIIeF0mGxYG7r3xpRyqInrA+iSgIgOYEiPInsfyYBEcL1/nu/Nh3KTKd+V7ioonjvP4tUs2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERQEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeeA//ePo/OqvoxdR/u1S54ERwpsxKu+t9w+WmqrbxnxJq3MY8TJmn\r\nf8VXR5nXDM3mdHEywK5yVhQOANXAVPTfm/lcdNcmRErLLO2JXHI2zaTI0PRJ\r\nGrnkkY5kriELRFjmoRVaIjsTleyT0ofzDvB6nDpPdgZ3P+4EQsOWyGy4Io0M\r\n+EFSqUl9rqlpVZCdS46IbZzTN+UX0RGiKpFzjeQ/lohgOSRL+L5ftCyRpFUA\r\ndZWgLTBlWmUa4U1MxzrZ7zisZPBKYb3BoNKLJPiFDj1Q8VhgAVcSO4Q4k8Wn\r\nnLdqRV6qnOMhX0X14ROB3qdYhcvbk5wCBfj3squGTSeEsAv6yTLkSmqcjGsj\r\nENFUaLYObANKtQdzqtMosfgcragkDNNlfrnksuKyV1CVXfM/tChBaM3zpnxR\r\ntTacTK/rVlu24ST5R3Lieu9cqSSzmyCY9RWI9sjTHfDX+Bws2Aziw+ObMLCy\r\nQBp24oHxzfZ17P0uAOdxwMJrdEsvE+6JlH8OIGuoeplSBJjlSmSpN4IRyrij\r\nmLWSbXCZt1zzv9ZNjsmHn5Ol+MXWm2QCzOaU32lwLcqRle4g+GViMmi1xYfI\r\nlrUMQmVNWfYDPLpvGu8QN7e3c7Nx4oTYr1ir062ylnCEG6NCog2PgntaDJff\r\n/+l8TZj9R7V5YahKUBKmGHzbSSuVjMtir8s=\r\n=em4s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.920d8a79e.0_1662063620609_0.7251223026999949","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/theme","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c363f267b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87ec3fa2c17dcaa5f6e73cdaf8b661aebc6a35b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c363f267b.0.tgz","fileCount":42,"integrity":"sha512-jdgoyiux8mjhUKE+G5NLr/E728r082svWolwi+Xp975fjqiWoYwKqUjaiN7cd8bprpb31bdc7JL9ylM/G5yjRQ==","signatures":[{"sig":"MEUCID4ofQCSbzNa+CwPicAulSO39VamD9T1FDCY3LLRUpFwAiEA0b4sNljhcQduUbQ0qIVf2jNpLmdNED86CKvNnxZjds0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESF2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr47A/+KGVKCKHqF6szaVDu1IgM5WIkoPmEAOuVBFVcAslfUpcnmbQl\r\noICzPTTl5vVVfTJ3yEe1fr8ZgqiK8qpT5bPHiKyAuu8GR6YHrktxejE91DBe\r\na19HMjQqQ6RUz1C66nyNxh9wClOPYFSjNRh1S7eDSFZEYq1GrlyBzkTAsJdE\r\nxJA4bX3hwbLMa5On6Vb7fVq+bzPpYW5nShF8Q3lbGRDTQU41SXAVWdYhRN1n\r\n9Orv3q+jpWumSvLw30vdymMZhOkF+RA5E/zizbQvm6NrcjnkGey3croxcqeo\r\nHzljBNpQJWkABRW4/3FztlW3baRqFg+fkyhoSPNlGNLkW8I3r7Gludv/RQD+\r\nnQYuby1tddIENOB3Mw7SGlaweKA6qKU+jKkeYi9NTguApxxAodcbB5bPTsMw\r\nginVXUDtSCvGOk4r8e5TxJyuPfRw4uPgLETUqV9Qyw4BPyVWS90KZpqMGDWj\r\nWpea5hxM0ltAdXH5NeHeQuqUjfDT2zhDBzWGmkuQM2NNlIXOQrCIxZJml+Sw\r\n1OGX22XFploqxfqzA0cd6YYfdIhtShkH5DMryPCStimSZj6pGqdDTuANx7dd\r\nonU2z9uWwsu/Pb4PPAOxhw9CwYicdD0GuUw5w0dM7Kppyxi+AhrUWXAzWbvn\r\nrsUOdsCZJNIQoLvbhKqT1Qn7Qo8q/33/ojs=\r\n=cVll\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c363f267b.0_1662067062716_0.2830261322172556","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/theme","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07ebf6408566e837a415b779ec40fed81274cfa7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a4eb4937a.0.tgz","fileCount":42,"integrity":"sha512-zbfeclCwdwLHfhgNPdXLx+fdjWcSkFBbimF1cXVWTj+ES3f/JjeKT+Rf/wMLgccg/lcb9+7KI2JfuwdROJ/prA==","signatures":[{"sig":"MEYCIQDYcExWjHQ5aYcwpbaWPSS3mYMVLORhPPbrwFulnrNnDgIhALrOF1PZV+1SYXZHrqx2msiLSfBq7UHasQ/FIuvqtXXK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF48iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbXg/+NUR1L2eeZHkhnsaouo26C+TO4om0+NSyHAuj+GhGFQOledRr\r\nPTyhpDUMbOkTj6NcmElfuj+cvF+QBUdGAe5lw82a+VlBxIfEcM7t9ncwbz4y\r\nn9lfPUYS3w6jpEzP3eCZPaCLeKLTl9XHdMljfNqegLzyBnNCozSl2KbMK8D4\r\nkdiedf0JfbBWglOC16uQRgZuTcW4Vnv4KsEgrMtksaIvfukFhqpiBSuC6o/R\r\ntrsJqmw8Um3th+BEbc81/m7HYrorN0aNs5gFk1rpFWRbHIRbcZgMS30V8Lct\r\nYl2TufgumimqZs72PGfhEzq+WYVjyK6/kmrntExqrgPtaxBymQzi2lRR1Nl5\r\niM1QtqAVnWn6A/Quo2fSjmsn430p0aG2nJdqXd8lvIkv275PmFNLGCOYSc5L\r\nugCTI1hbXTidoTaArAE08ISe0vgdmCfwtV2QCGWZ8f4gihz4ZF+b3R98m6Ck\r\nrksQhhHc9lK4nZvrEqlQFocvyrqCTJC7zb/IIuQEFW2Au6Vu5meO2bp2YGHF\r\nGPWycClWlfaVc+dq+lKzW4M7pJjocTbnkDhmFvqne9Y8eKO9jR5ANozH3MeG\r\nIlsbjtEpkc1sAPNY/xOYvqANYUlNrsFFUtYQwvhf3lyY7UPnOKPAjfNkjoEo\r\nlAifC9ba4ykUJpQP3ezVCIEhTsmjzmT4acM=\r\n=pBwo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a4eb4937a.0_1662488354473_0.5253077894700144","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/theme","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.4299717da.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"678d50a41948ae8483a2de1ac5fb7f7c50a37dde","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.4299717da.0.tgz","fileCount":42,"integrity":"sha512-YjAzRLZratX2bjn89Dc8cIk4esuaeER7/6seLupcD5Cc6W7WgTRNhTksHQSh7RlTM4CSPw1ehk4Ix83Y0wBjaQ==","signatures":[{"sig":"MEYCIQCSNkcNp7faCOjCa7iEVuBJZwccq00T2A95ZDPfNJ2dvwIhAPZhUfz2OZ5CO2Xtl04hfgkd7y5zgRzYAH4MA5ytNQZW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMOKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmontA//ejMHnrXIGOW58XgoTV+rGjQm/rNkTVi06ta6Qx950TCH7B/H\r\nOI6sxz+zv6GF3hsKZGTGS+7mEWh2AQpLhvvrCw0YEE5bv4oOMcgDzcUqtVWK\r\n3FssvlD5JcP83q1CehlxfD5mb7l5g1JTg3ZZiCsYLZUTP63RntEz6V6KbO2o\r\nGt+bfISnAhANmmACRWwVZIr7fAjnXBKJQTPXqk3l7MYxupSnskBVLsBwWWgu\r\nK1OqSHbn3+IZTjc4tI//c0wri9ph/SNRGYDABitmEP7gYShZy6JP0iP++ord\r\notiMsr+VDa08UfjrWYVpiLwJqxFI9QP2DR25Epo8FAzVZN93qRxrFENiaJpF\r\nlRS5pm5r4AZAmYcDuoJjvo0dx8azut95S7zryNJBpckM7XeAkQZ/nBdwntFK\r\nJ//CbzxMpSbW2iS2v3Y19/PlPLDfdtVfEbLmTNmAzNyFUPAGEOBKMI5fAF44\r\nU9LppLuZefI4Sc9szUZbqRlqw/ZsBnF7XCnHg3rzRjvIjKyNZYKpkzAqRg/T\r\ngx//m8B8Bv5R1H8XFCqyXaRGVPHvm94v5SRDMC24kM9wsF9u+G64qNDRTXt+\r\nPNW1Q6PacP4XW+0G+YlTCVgJvp2liE5VtfEHxxQvZt5VSMP6hldomIR0Qp5O\r\nNavUox3gi3NB5TqG+nk7hT94h7I5gMk6UbA=\r\n=m5wD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.4299717da.0_1662567305928_0.7588871469298073","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/theme","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2506b2f73fb5f40dcdd0f388e56158db481c7390","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":42,"integrity":"sha512-nwCEYNae+2IncVjME/rcpqDmpT+F05XbgrNNln2T8zk0GRWWP5BIHI0Ne5w3nWb1Bn/JLYWuigUpeUupyrAr+Q==","signatures":[{"sig":"MEYCIQDk8BkVHLPzRXvVEh1jHTj2NRGUNWHtC+vpj4y7aG3WawIhANR+NZLnVivkmBqNn2sr5cBA4FSS/2PEY5fdgADh192A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO50ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcehAAl3KmbnwGre4xMotUHWerwTVfcpN29XsG2PRa355saqIE2yp+\r\nlAIh4OiI5M2hWhsEN9hsyOyNbR6remTG7K65HPW8CVJ1ia2tzfPgWHRUVADl\r\nxFOini6loXAusIMVhB+Cm+KgxFwjZBqvgNAKPsKEVVd7L7cSn1Lk8ZUNjJcz\r\nNXjo2gMFyVavR6M40ZrF+eWMo5QP9LKmGbvLZOBjnbl3jYyV35hK1qX8H9KA\r\nkk3ZFkveNQT0Lyj4e0G7ufyPCIYI+cJzx4OviWiMFKRp85dYfe2iCad/w6xT\r\n259Q5QD+Uz+JFJp5dYD992AKUoN+AdpDQiXL/I4Z7SM1c9oCKzLD4LLNMezL\r\nm9odJ4poZp9Ty3tNsCrX8/bgR1jk/VF5qBvOKwMF5XTUEj0OGm+edw865+jv\r\nte+xvKkmydGyk8T9nD+F97uIh/2S2Tb/RcdR+HBi6hkAUThc1CvKxh+kUmY7\r\n6o+lw6vKU5y43R+WxqPEm2yyouotqk/3tx+Q8ZdKBKIWIYhU8L0pL91HvXUJ\r\n7inga/FP7YPyU7YEbWF4FcXCIl9nXvR+YjGbUWhfwBCTfHK88y6UKg6f0y6j\r\n+Y5Cld9XeLzr2A6tvvy/UGcDckS4C6qEIwrthenx1t5bO9OA74/6aaxsRtnj\r\ne0pcVWl46+vEe77lN+HvKoacgq4nLp7XSGg=\r\n=J8u/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.fa7d8d44b.0_1662578292268_0.2635677693748739","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/theme","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"349916d23c57dea0d3d07f6bade1f4ec4a938895","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a40e3c768.0.tgz","fileCount":42,"integrity":"sha512-2l3hYyrRF0XFznHQxjnfJFWM9WW9iVQ3djTyRpx8k7u29d6ySsPZvnsA5jzOV4wjiVF1CpiVwYMWB7Co+cxBhw==","signatures":[{"sig":"MEYCIQCnOSy2n80vPgDWgta+u/zUDmvfueWBvN/t2yeTppLKaQIhAIqPgdqTHMY5DmqEhA8RPljWTXVU53aQMFrzC3TbvqsE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5wKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOXw/+LnGw1er09YtPHspFbYyhR5QPqP7WqEc7o+y2X5ExWryGD1i8\r\nJ8/47N2NvHrRamuYdUnE1Ijmp3dPItRzJV6L7RcVF9jNFv2i+bIotN7gDFAC\r\n6lLxz3LAln8zOF20SFdIHQho5DCAnkkAdQ3q/dJyaqouvssaQU+zA5lqUnnt\r\nL9SQffQHVD+Lzr4KsjXsi6WekTiEenP043xDz/NJ8p/I/WohIel1c2HxwRD5\r\nVCMy85G/S0pHdZTxnBqwEn/yd7uymjY8MjH3Sgty8I/OldlD7rcVDnzb/u3y\r\nnjrHMU6vDp8hkb7PiOEHxH5zAeUQtEDAMK9IF3vyqFdHWFDqqzkr7v9CeGv8\r\nNL6PNNOnKvHHbtr9ZAjrHIJ/YMEEevZLewU1NC378f1+A0Fvz75y2KkMCvZc\r\n3fuNR8gvExySbbqJUdJ5Q1w55RiCWLWIi5Y8cvuupOXwqAThuZFD2EwLEu0n\r\nT5htLH9X0I7a5JSCF5cjzOUXlRtV7hNMqV2pd4UWrCe3HM4M+KL1+6Oa6QRc\r\nI+SztEA/qYt6DQxfihkEdVfg9eI89OvDftZdzGzdpkaV7zH9ZeSd0WrtxlUu\r\nmYdjRkBYhV/Ip2P5GbRojtyLoEXeFaJk3gluds4JMFgy/YrM9Kj1bGErLxPG\r\nEBur1k6DIo37aQnIn2WgrLzscKnCJqqci0g=\r\n=BcwQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a40e3c768.0_1662753802580_0.9722282212448823","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/theme","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfb2657d7ea039dc24702be46fd83a9c9957891f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.18cdc9a00.0.tgz","fileCount":42,"integrity":"sha512-ktZFTrEWIhSaYtufDqL5MCrT9VNbRMEyLJ3xKCBmHOFQvjmuvKV7o1QrjyyOsgvdBDgoLomFhtiPVqriNRFOFA==","signatures":[{"sig":"MEYCIQDxbQprBRwFGQFJiFcBHLFpszE9tDdUH2gW5nmIV1K1XAIhAPXUyOiI1zLpcwa1JksuBzrV7mk+fsdQb8qBR82A+xuM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH55ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoICxAAjShpYOAGBHSdjWK3sjTNxDPZrBd4MyXTB8JZEx/cGLF8t1/W\r\nYrqx+bgq9K4DpYata8LsjRDngZkJz2mFSzuavnY1VTYmWJ9jCuZQ4h4sJyNt\r\nVs28Hls4XSWWl9rpGygEz5tIosTBhjKY26G6ii5b0KR+C/l3jcKfF62ESOSX\r\n4X7CCJu2SURo+JgYKeK+VQ4Mw8si8vgIudJPsF5lOAqETm+yiMKeNV/WIJeB\r\nJDY9ycJ7OPfhBdPJ01OsVDdm5vtUtxvRsFD8L26WDmxlbE2ADLfc26flUHr+\r\niKAaiK5a2cq+jN8yRbLmt5N7Elh3/ut4k1b1Vw79csQTGK8BQuxq45XdTKbF\r\nf+BXN6p3BvQVH3e9NORElKvfWJOp4/G2C6Xz17FBBaiUpzRoCOke89UI5f9A\r\nFOE/lsVyNQn1IQid+EgivqfzDck2XQBcBzhZr+7elTALOOfxT+Y0hYiWIXpl\r\n5sgKI1bS6uFMYtAe6NGidV/UFMaAwG6WlOttMcZsQSADmuD5dDBEpQMLWwPz\r\nJaMw18EpOM1bIIRUULtrfWeXlqRWXBSq7DxSKnjLaxv3MjKRM1OjubHGDYgb\r\nPnXMkDv/PEFD17VfR2LPLWGxdlqSOYhZBKeCwAuQOxAR/j5NGMwlYHd8kyGE\r\n0ALBR0Q+xpEPm8m9yjcIoxJ/HWOnNXtYk9c=\r\n=vA52\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.18cdc9a00.0_1663016537656_0.45034331878170364","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/theme","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bef7ff69834c0520726c312ebe2a000c8827c79","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":42,"integrity":"sha512-YeLQaCWLYs+VII+18k9FXj+gyM7LD6wuWTehuPJ1wBL0V84syDXt9/fG0bjIcoTKfLR6PbMT2sKsEYzmAbo4SA==","signatures":[{"sig":"MEQCIDY9L5P9yR53m8H0q6uMVd/zIzg8s+PQmVtCaQEKYXGeAiBZby9/tRDR/gBY3iyZVdz/tSA9mHdzMURzanBwTkcELQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQZsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKWQ//VNUNvewnDzDM8S6VJJekcIqBkCGbUoD67f5UMr0EhEwaFg74\r\nPJH0u+OF9bW7GuxU4nFN+Sk5adFYDoFUs8WWqDzEsCXualORr201a7yZxrpS\r\n0cIwsgSfsdjPnqSG7PHmUZbJFiAlzjxYybX1QHvcc/QbexvgySk7kcYt2ST2\r\nQnHm3S9y3FCIBtxrgCMsmwSbY74ooxgLf0XksoXR+SBdBbkPVpdlaqtCrlEs\r\nHa//Cb/+/lw0yx6rQnFhD4II2x0Yi/9Qds9SxWSvXCdvARTbZk4DVK1kC28x\r\nOZ8GqC6WecJDyxu1wlqTqQ/3US8hiGdWx6ZsKgIAcloFGqrpGnOWhQhpl+Ls\r\nEiUcBjnO2uU7K3HvYhy93QlCA6uKD4r+MJq/hC1r/A3zs+yvOu7I7BI3mN3w\r\nAYhFR8hRfxtEjLWG4jgSTHs0ftbFvghyXNUNVjfkWJ3iYMz6vTkMWs4uz8rJ\r\nmXINJ5lXCBTCS4eZLqEsalqeBwH5F/sz5f5FmJeY6+lrdP+BEbsZxV5cZbya\r\nD/PvzCPCOOMsK7ufFJiYPGA8n4d9V/rBFVR+exZv2PrrevESXArnII0PrMp6\r\nacBJ95jcrx/M642AakpJr6dt7OMYoZ6h8zBdm53RFcPaabJSB6vaLqFegQkD\r\nyo3OYMnj/YjCno0nxIX3FcDJ5ggaY6LezeU=\r\n=dWne\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7ab3cd3c8.0_1663108716472_0.5839059347977098","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/theme","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.2860d244d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"145fb2e37e53792c28c8ab4926970b0142260b64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.2860d244d.0.tgz","fileCount":42,"integrity":"sha512-166LEn5O3qsKUm/LXWlTWFlm70dXolbhxLPPySqjA+pB84YwVNt7bQLdlq6ISD/L3unG1TShDva7elSGVxrvYQ==","signatures":[{"sig":"MEUCIQCMbnD3w1isE/4TkKzr+pKX0Yn+jsIrU4a+uuJZwJtwoQIgCtQs6ENQwR3X3pmhUwc2d4oe9w1/+80zfoK91+HDMkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP6aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDahAAmClKyp78gOwLnJOAl14De5gebt/VtlK1NVzB6sMK90acmf8y\r\nnWuB2XyAmtFiMf0UO8JYgG6QtXUoQAT4arXkG5Ne3gYfmX8sRHR5Uv/CAeXe\r\nXsUp214cAptFmZbmCBsKVCeSxgMdPbvpUVibDmTjV7qn2a1UfvoD2dWkkILL\r\nXVdmXeOHb/oaJe35hvsnrudfyB/txpypINjK0bbUBSspmIGfPFEUlmQ38Slz\r\noFzfDnJqyMNZEWMLlkpS1g0wIe9C3LKadRD2+KMOOdHLKh10fOms5Ll0Jf2u\r\n+p49TRzAvGLjcBEDDzex72idv1DqEr1WZpBUrhe80fd0A+C0L+gHmaUVhwrJ\r\nTZY7bDQmdaDTvONhksAs37jyW6cOrMcuwD+aPb+HPbQN34aYGvOY00TSVpo8\r\nJmOc1l5yU/K16tNc95CzJdlSWkJf1nHQcecx02m1viZT5N8JSPZwcV166TwZ\r\nJWMstCQszcQBgmMPEFGwa+bhMLS0f9S/kFk1J1lFmof/O+1E7mpH0ziOWSz4\r\nPJNML6Ve97piOQ8p9kpUrK/5f3wCP41TFCj/Fp+YaCy2N33znHVNq6ABGPkE\r\nJPGcyhQqroc1Cgl4FnIy/p95mwkwLzwXcriDPU+a481igjpklyIi+TWdffh/\r\nDhV6OvwreJL5u1p6eOpfnRF87yrgP6akh8w=\r\n=+uce\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.2860d244d.0_1663368858587_0.8256214786150362","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/theme","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.e8726533c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11ca785e4f49afc7f4211c80f9dd3a068422fc45","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.e8726533c.0.tgz","fileCount":42,"integrity":"sha512-GtFypVoqzWxBwZE7QEQWfaeQUM6zbDSQ8IFOR9nNRU1QVnw9Vzh4JlQM7TAmr48hXwRBWPI7iQzwrsTIH9MhQg==","signatures":[{"sig":"MEQCICJ7mEeGmAp8LGNEuwkFyZLnUs0EmkvhmOiSS+TZVsoNAiA+h5hwk4b7gq7s+U1ZbX6PqYAMavq0jOfORtzBG7unKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKh/DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoRw//WronXRY4eDAS3nCJd0BOnE9yMFsj1ruc4TodCDp9kXTFw/gJ\r\nBjjYtFaAB1zbwXqI4R1UVWyKe84rKqW5BLTx8Hk/atZJqZhr8VsC6YAjCO3+\r\nPusLz6jgmJkea5GWj+FOLTE7JZBDNhpehbpWBdNMV6589eILFI5PPctXQC7g\r\neaDjepfUayF8VkTrtkvokchCrG88oiKURySUhbZnEl++xbS0FtECsDlyPeht\r\nrkbby3R99rlzlyNAZ8a3/ZZFLjN/f42XPojLQ0+nNiF/SoEqhSaprM2TF1rB\r\nt2JFD60GAudXdM0XIeriQyDqdc2s8J7Zigst+dsJg+DOMTbbN6dQFBaUMDUp\r\nu/qumTPmu8Y4vPhLkexFekNV0ymcchaOLnAzVPAioGrt+8Q4DQkwlENTR7r8\r\npVNLZiU0Zhzeca7e6ChTCdG4QSuHeA2tkHynquCkHy9SrshjhajtdXA4Jfc/\r\nGpGRjD5m5qd9VMIz4nwuaBcedSZ8m0dz1m1c6tS8W1FcbCr0B9CMHK9SkjUh\r\nUSN24f0rKHF+ohAgCajpMVxyZIcVsXAqrDWP+oV7Bke4tfE9TILqu5kxFSCk\r\nzWK0E/RivO8nTwe6Y1rWMonMpGZY3cLwfavQjuzl0lLma1VgNfRwXfwfG03z\r\ngEGw2MnZyluhpkkWEN4K5bwYK/b0wiP5H9I=\r\n=QKtI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.e8726533c.0_1663705026995_0.5040182360508509","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/theme","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8dfc38464bbaca0423cac53293df92eb8e4d40d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.00d8de0aa.0.tgz","fileCount":42,"integrity":"sha512-NOcV7PKo0I3eD0qbezuMV7cGN61MJ+ap4EQcDTOC4VGS+1x1cbiSeQtqgz3SEXMMnD/TnpY1FY9Bvb9WNhC7Ww==","signatures":[{"sig":"MEQCIHPOMhuF99VvCuSDuHYZKpd363U55KN92YNkJB/b4wWuAiAfRTW+WveZUK/CN+GLU2oWsmqo+YkHUqzkLWMoQEneZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyuBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+pQ/9Gbm0T9S7dfiOHwvOI2jBVYUOQGYxrdl7CSDelgN5ItV5Cvly\r\n9AtnWi8MDoGSQKII1Z0BZPw7M3JSJUdp9vx0sZUGiyz6+d08BNnApkdGHfT2\r\ngFMXUqsgZnOBO3YNYrzqGnnBJWPtVCfU58ZJmMNYTCNOOTS1hfLo31VLNiH4\r\nhJ+oHL9GEYyyItwzUBOEx5BeUFxgqTdA2Sy6gwseqVngBu/GjrHTY4jz5Y8G\r\nSdMGxKq4NfXe8MPbO7iBBTwzjkn2L+hSA4tgdjwxCNNgQcTcQjJ6T09fGd8w\r\nDWAnlLVVHK0jNgmmr0QiOxUGTa8PMKfVpJZOibNthUr7MJhMyFWZYf9FrExE\r\ntz6+FzfJoxffvdrG37Sf5wX/CyxbaLVXA8dR3icRWe92mFJqT2R0yhTUuMqt\r\nAbZTadCb9JckajAHpXKLR1MGrZBMkabLa6FPwSpiyG4ilpL4sS4EUcjpULTM\r\nAK2uhv3eBY2ik6QINTS5/CQKCaiyv8q031rMHDSSN8tt0ErQY1FRO2hdyC6k\r\n32uPGvk3rljLBn5KE0UlUMx6wYerqptq8rXt5GaD8STePoeKIGqevkfpo+Ws\r\nwP9Rqu07byDpn1jhi4VZRe5frxjC8A8X1wV1RTOZ0J25iSjUk+CIxL7GsAuO\r\n4bxeNbtAVqA7sHaL+9mEOqm9aeRFdvl9Z8A=\r\n=br6Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.00d8de0aa.0_1663773568904_0.13028518697151537","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/theme","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.271aedc30.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0df16cbaa6d9c2f918944b08736cfad85cb38b79","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.271aedc30.0.tgz","fileCount":42,"integrity":"sha512-Iytd1xTfeOnMw5ueTC6G0AVFRsCgIfnQL68lHEbv64kduW8j+fN5NB5j0r+F2/rPpxgXpWxSol7QR0hNDbAJDQ==","signatures":[{"sig":"MEYCIQCmvF+ox/EcopRKpBEa7PMdPercGuEPncB8nLJaQSukHwIhAOTLeUWwKFRJFuqeAIxXoFkGaAZuuAGxBa5M6+nHenbn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy81ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSWw//b81oRpn+U3dh8TCFJVqYOPiWCXqHQ0QnKv09dLLPwP0Glcz6\r\njiTOBLMD3zFNul5C6+KaGfMscKj/xtW4ZtCWVOCdUMIOcODwP92+fHI862Q2\r\nilFX90cSJjxkT55HaX+ShvJjC7FUeZOeWkcCir49vA4eXPybkq82Op4UNZaQ\r\nLr7dgvkFBuNE22fAWGATJNn6genMid45rlMn2mhhZ/rkgTymhxbRw0yI/KWd\r\nWOjIaS+DRpo8WJ/QBX48umZREEE/+eoVuxLb6a1cCNpe5VuaMhsYQW+hXifK\r\nWJua8hJdKmjTnUVvLm4Wm3elubaStCxIlVzvSpulasjn+uNV1F4TcBg9Bmhr\r\nEq+BySvDlFefNlrnHXHnu+QydkAh5azGhS3efk5Lmm1ygWrP1V1KP0XH9GOT\r\nymf/1Xfd8VHH22gk+jkOOatBFCMshent/0HblrBh0NlJpZo7oLHdktu71YzS\r\nUJMZMQNkRCGnfGZ0Xf8tpXxbCzljuabudrcsXBqxI9G/p1g9e4fgDC4sqZ7h\r\nK1kr/6VSPiuq+1nkz6IrW0Lnziv3W/Jl2xYsKTjFvBDCfHDDXs9RQ9V3Jwgr\r\nXMKE5Kf4Y/TM/JVKIKf08WJuUwh8KQKP4cYKQrIADkmrTfiqEoqpL6A1dcD/\r\nMCLf7covIUwbLWnPC3H3BOsvZHeVc/x55ZE=\r\n=sJ/D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.271aedc30.0_1663774517094_0.045034559256504014","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f17ff2cb.0":{"name":"@material/theme","version":"15.0.0-canary.9f17ff2cb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.9f17ff2cb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0336bb4f9f0ebb76deae391968c2b23aef783b3d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.9f17ff2cb.0.tgz","fileCount":42,"integrity":"sha512-f8S/6VN74SX8+Y0CfexbT+D9my8+cQEVKfHxIOmCQHXa4eLqV0X2Wa7BZY0imXRMkWgevPZAcaHF/2+tuvlpiQ==","signatures":[{"sig":"MEUCIQCf3iMjcKy8jGj9HEMsDZ97zJQnhJTwf+/5i2ooNGGVdQIgIUIbnXQKrNbDyhxTrHsnjVUEBAfQ95x+RyC7Kdhf8Ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK1LsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSPQ//UYbKoXJ4y3MvVMISl+UhvzP82gTwmZyRVZK1wgD82D28WVOI\r\n9YgA2rKK/IslJ2h1Y7/l0kRTw03Tj4XV+U4gYi75MhfTZWPzntCSf07V8FLC\r\n1twFRJdj6EHLXvSMzqP5eVScGLUvEkLTRLTIt86oyuBrA/Cm3FUz2t9qC1ra\r\noV04TZXRXo/hpUSxDyJ7lJ7FAjlsQQ6GBNKOl+FsnCfOH+FXItWtnps1YuzL\r\nys9MnYz4YHjQW5iK6f8ArID3cbXPLmNGB3FLXE3KEnTm/7UaY5Aeoiv02/Vg\r\nVCsEZlyPHpTr7d8HQUZVukijGrYDgBlG2xjseR0HQfv5Fmi8n99DOTdfjQ8q\r\niZc0Agk9Lh9pZWY5J+eraeoEpZ2shUySQr75HFFenrGdXocKb5WbEVbvpMQ5\r\nU+rNDUHWZCUASPy9z0nmBpTJ7Gghi2yb2KyYVu697yyzz/W9QxnzNJk3d+Ds\r\nhSyaX0i41Rv3WGUr9J9PGjnOok6FAs+qATltwvrhwfS0hHHbBPrQCjqZRnts\r\nFY1Q8voRWz29+hUclgFCmAvYv1zQN6kbeDSMZLRAWoHBGGjAX/YgnnGvQi5J\r\nWkGse7g1VEAUJrO+H13zT3ugkD7fFsAFSeVk6KuRDdE7zGexlCdnfQI246pr\r\ntJsTfDih92zxrp6hMu9Kp3O9yABeJD9NurI=\r\n=5MQD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"34e73eebdcebc0a0b475c8b2f9fa0dd4a4c3397e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.9f17ff2cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.9f17ff2cb.0_1663783660296_0.5883416566863098","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/theme","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d4043c0598e7ca77a0f4417353cb203dac6fd44","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d3344c16f.0.tgz","fileCount":42,"integrity":"sha512-wIg4yyVRvGIMEkDNCqDuA/AbdLHh6Vbajsysob73foslcq/8+qPmfpFo26XyoeNIIkUbitwP1aW2krM+oIn0bw==","signatures":[{"sig":"MEUCIQDETPsJxfD2hPxssOEnJfttO8J5fkIR/KHkpZApeZ2XTAIgKwzLt931jN4nlOTjxXsTzjbtnFu3jleDGQMR3Hmkl6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCmkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCvBAAiOn+RyH3NTwhVMTrfEx24yx2lxRoZQY/hfl3PVMXlRmKthhH\r\nIQODH6h/ilsFMa81o7QBKP5XZzwuj0OF3lt+xWv3Ed3UkL6ooXPMtNZtoxq8\r\nkG2xkMqSxVIBpc8ZHDuCqeLTNhGA3TTL/aJA3c/2WTe+0jjDdICdUeg9ZFAC\r\nKGAlyTwApr0yVY3afq+Koe1gNs3ACDxsQgKcr21nBSjPvff0zd1GYPR8VOoy\r\nzmFxelDHEg0huJ0F/60yDX+6GNsviereBbH+yiceL11mEXQPpY023nqjVZVs\r\nGoJo3QtUQ+FfyGrasLdgsMIfrz50u4DqaHmpZZo2soVhFbHbmwcjYeoxymiw\r\n0gBrP1RjkvQEdbv4V2jsjIKrHzfXBP65ndzwl9Dfh9noth9cmaxAu7S+5BD2\r\nvBzfsqKz36noH7oebgj88xWDZF/14jtHtHCtgKtsYQDlgMfUOTVSLe41zb+T\r\nfzL+3FaB2s/kR5IwFuP84umNj4LbILC02FEZ/VjV5wBTvSDb2uRdyoH5e2KC\r\n7Vpzjlvx9Tip+3vJMC02WifoeaSQKRtV3CLzxQdqdxRiwqEdwFdHqh5twQQI\r\nFORV1Mb/6paumvpxmT1Dfw3aU2EuxpxIMHHACLRVbnsy0PSqTBskHLodGISq\r\nif0mHq1cn1CL8/pueCX40+1Zqu2Ze/OBbl4=\r\n=AAT2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d3344c16f.0_1663838628123_0.03659549013363206","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/theme","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5108bbddd85b78a13f8d1b2777f75758d0112e06","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.94f20ccb8.0.tgz","fileCount":42,"integrity":"sha512-+j1Zh5GowHo1xeaauuinllZBDqZs03W5cdZ+mrl+HLmnVjvUScc5ma/xwiCVcEMTqbOFZViDIFKo3KC35IXMvw==","signatures":[{"sig":"MEUCIQDd/DTp34+9emXiKfKplx3CLMgWlZ9OL201VU7XWFGz1gIgW7Utw5wZwNJNFn+IV5A+2xPPPAcOoBLy28hJHa5BzTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMnLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHXg/+MDflo0Q9SPabaJHXG20kIu9JdzXHN9QqKcn3w0mcbPblU1Z0\r\nEyuC3PSB99EJ9cS1YR/IjbQBPyxbyt6VbHiKe7KXTKXJ7kabRT/er/1feIlp\r\nidCehXq4TnTrRGZI+cC8zjpHDNjAgLPTR4QyPp6DVc3eWpI8r0wxOEt3c69d\r\nplPSoYBxHJxPXfvtDBKB7KoYNa22i8he8npYx53H7TUEaWChPbMiL9lgSBPG\r\nMxMYRmk0GvPVoanLw/l6MFweHWSM5+Mf4a1kQLvL8jr8vthiGFIryM9l1VOe\r\n7M0gJtH9tsI9y/nO79Lzmw1bTFFwYHqWbJbT8GNPzq8uVEh7yJEZrb8Myqm8\r\nUXE5yVli6EoahPrTScqGY0das32KXGNa1S8wzllWG9kTKOrqAAn9+gVrTo3q\r\nhddmfThaDEf/k+uBUtcErrjGqRvSP3bjWub4UVQ/yvjj5ebRfhJ2eJnRZPPr\r\nQrL0D2FGwTvxbyVji9Y0UVO/pWJHBOgrv522jXIICZyHi+rlDdV+s6VJ3guF\r\nSTKunBICco7ZPzORtr8pMIZ2dSUWfDU68+VKGLSII404XKzfke7VU5YcPkD7\r\nMi9Fz/5LuobzMEIQSC7CiNjtnjtSQoIwL+BtHd6z+nvOaQ3QIehw2Jgdz+aF\r\ntWa2yfiw8tFxGmINbGepOz9k55mYvFVCe18=\r\n=SwlE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.94f20ccb8.0_1663879627414_0.8722740824873254","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/theme","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"272ec398883d02ff4fd11c58b5695625dc79b67e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":42,"integrity":"sha512-ldK9PF3dYaiGlX1JORk1Nqtdc9Ojk604QChEx+LcO1agUuht5wp3Yh8kG2nx4oZq6lX7K2iedltQyRcytSQ1Fw==","signatures":[{"sig":"MEUCIBUFLHbulpI/3uTfOMNOuN+kHRnNCHJ3IRJM6vg3uYAvAiEA5QMMJ5n9JxLRqtzyAU/VfnbhX8uQW+OKfUKIsm96by4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcuuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF4hAAnip0P4o4MHUZLRAS2mGB7A3QIrhM/LI0KfaJR/tFRDUk1hcP\r\nkGyFkPbK3LwYMB5/Yjn4dZ1FILJEnFe5MlrRgNDIFisYtiG/L5yKOk/LbWc+\r\nUZCvf2oRsaUccOGGTaN6TwmM2//AvsC+Texj6iFuSfezYP3WYcVBGT2QJv/C\r\n1eFV4uyrpWX3yL/9aUIEBn4diWu/RL+QLVZ9WYJ4e/R9Y02I4vPzslQ5LIV3\r\n/BTlZ0OXo4/I+WrV0517uj2UdWH8Q6VVcF2JPPL7jZNQLOMcNkuYnNUUHpov\r\n8QPsiEPCxRI7eBQLbSFom+j6ynl90XFnEiXrnksa+37xr1itafJsI9nq3zDH\r\nhFnX2QC2erE63nvTG9rPQPnv18D6nwsT8aGRxMLldfyzO32cJ0+EeX8qXGdw\r\nb0i0BGNTgSyA4Ic7XhXQSN8B4fFezk24MJML65S6cNfmrYkMkS/lEg/ef+BX\r\n0oaUMFEWIJvtzBmTO6xZ6DFxe9QsUMNRiZ90bbnDLNITC28TwaA0m4LVR4T6\r\nfAIIMEJoka3MT9qqdWAHSnkYzWs0W6A2gLpv19sUb4bum9Yfvy3pfVLkzhMC\r\nFBLTORr9y6/DNBylky7xogTIbZrS3WDDnaLv8ME2HM+mt7z8DhXOt6eobsWV\r\nN2X3VKXdAin83KgAnljFUb69MX8lLpLjKPA=\r\n=JJMW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.81e4cb7b2.0_1663945646190_0.04681653499251026","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/theme","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87b66c0d90693d6136c0a4093abddc37d25a09f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.aa85f9413.0.tgz","fileCount":42,"integrity":"sha512-Is+wsRgt/rbbWCyxqjRqrJmXEw5jBbncMlqvhK0cAL1Jk3gSS0ii+/QQLcf65zGcMd0D5gGf05lMKAuvHmeNdQ==","signatures":[{"sig":"MEUCIADxLce4LMMHiOemg627x5VSdKBPUdqmahaM9HDjQWUDAiEAwB2m0R0u2+SZGgtXwkW4hMz+7nqo0q4pK69XnodhuRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMeejACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryoQ/+Nqk4a6RekBeK1MmW7zpN2HC3B66Tzq2XlSjP3i6b8+ZCWqop\r\n7I3Sp1b5TecS6nIy3TlQr3RV5GfMvp61m8NB9ydQA1ELCrJe89ZUb3I7bZub\r\nbVtubeBZOdSfXNoCktM+ogByKhEzlUWCcU+YJtsiNLQmKSQbaONZLl4CoLyK\r\nmieoO1VgUae9O4Y8ESI3dAK15OUYHPHzNkyJ+dZ2SOJYWf+E5w4kHpx+OW3G\r\nvEQ5iVp7SvrtPvC/Zd69zGP4trUiBZJEQNVjgvCS4PuAa+bmQnJOVGoemZlM\r\nldGtkwCfG/YTzszTF5GVxNDTcoa5c3WYf3yMCzW67aCaxpgKx3449avjOcXk\r\nA2TFJonyasdB5d/zdiQdanb8CuwPEPsWAH4kquwO0IhcDAvs5vkVrJyfmI5F\r\nc3pLsqwC0MrLooeQ+cvJZr8QTTAMXy1giZMn7qga5jtoxZJHTv8k5DEuRskC\r\nc15hzmFXDfjkZ2F+6pEja09drhnd4HAxF+ZB1U+kmS/0hqS1VCfDpE/PpzJT\r\n2Luxeumv6Fqd8TkUfcROsLjgOQ8MwbAaPZ4lWwg7sy/e8pmyCNGObT7Z4ci6\r\nkK3ukSV1PIdwvNf9Xv4ak9yONEDJMJ30x7Snq3YGIBUIVT0YmQPPJbaF0WuP\r\ndNHEOCr+dXOn9SiSuA8Miy/TlTvffgleujg=\r\n=jTuN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.aa85f9413.0_1664214947342_0.9753482495327039","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/theme","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7134a7752.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bfea55de637cdcb8abda1f9523b8b0123bbf7e3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7134a7752.0.tgz","fileCount":42,"integrity":"sha512-sS5bajNlqRNm9e128zkJaZ+TmHZ/7UIRPDT/2Wf21L3QXUyQ0fXQE3gidaD7I9vejcmF3uJrk4v+wsPvWIH6vQ==","signatures":[{"sig":"MEUCIQCoXONayS0eLFWjsyIqxUsYWzpWxbmYCJsAkAopZhQgoAIgRf0hFSTHDq9lXYMsNHT0vwqo60Gc7a4yRyA+La0hxzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiAsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnQw/9EV/HsH1185niI3J8wrOruxShq1IL3HVmxF2tLYRrlmHndY8J\r\nBW0JY2Jseav2xZdYBeGS21yejU0T4rr2TrKJtDI55hQ5hOrhYZybfHgsxLg1\r\nJUaSWTRFhCDysRnDosnnN1EdUIvmZ9fsKzBwm4Lqjo76Rhrn9yFB50xgaWOu\r\nwhjNFT44OwYR3mjPS/3heOb9Lmlr4Ww5RcPFwIw+MSAF6QgYYyrxlEOEInPZ\r\nfEp0wAnDrzW75oIiVedgajW5iI9naW2gH68i8+LuDIBBM5Cn7gm1HBiM7SgW\r\ntwlBNZqWUU6H4KnHBxTjkX4zCWy16XPqrKIm1wq7/OFj+xLq40h+qNh29OTu\r\n/4pEtNmnrD5Zl21vnFfJtiCuNdZY+1SccTBQ6EGEo7IoY7ZalldXiuUdbFm1\r\nQb0keyDsJNqWr1Cwq+gztouT9PM2mapXT7IQSPOPtz+gqHYu3w3UcU2mBI/H\r\nP6gFRQ1EyZWs1GuPevLBkc278+4KyEnA3zONBfXY1mCz2Qmol3Z4cMeNpL3F\r\nsM5U4xEegJywZIOnV7FKlyFnhwZf+Bwjg2vly/lZkF9SliVh+hOBQlOTJZTW\r\nwO3WIUzFFLc73G0Cn4rjplPfmJCtoiF2+xeuUWZTNZt48soqMaqxffZv+W+j\r\nsyIreCOuTQTb0yOcJ78m+GGRR3Q0HwvvazM=\r\n=K9fC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7134a7752.0_1664229420335_0.7196436384917646","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/theme","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"886842f15cf2708a8a653abe1e45dc7dd7544828","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.70b8ac16e.0.tgz","fileCount":42,"integrity":"sha512-FUyojQq6A1xKV4iHAx2bmcYRPsXTfcMNMEt8dUCQD9dNVcMf+xXBlY6f8ZdR2l2slvx+whdu4LwwASo1abQpRA==","signatures":[{"sig":"MEQCIHR63LCrC/VQLWKEFZHaBfnDavkyh00FCgiNUl1mxqH6AiAVd09XjssbeXAjkXsRUyBYg/tOHmUyW+IAXB7TClHo3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM3zAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrckg/+Mx1xUE19mzU0OFOnrky7JEeqsX421zH+djZb48aobcRbAonH\r\nHekDNGJGETPis8we//qlfjJl/tfPIHJrGrZ1qfeSXyQ5mTGKTkZIV5qD1bTx\r\ncaqD16z//9ExhOww85aw29jkK0MUJhD9Qh1WjQim7DYQNSs+E4edKaXtizNg\r\nzBqT7a2GhdvwKP4RxhH6YmuLoo89ay1ww0kGquIaxsMaXLWY/Nh2nb6J3r6w\r\nOnZ7Zj6chkj1k/UUGBxEtmkwvF108puhCGxI665u/tTugA/iWdRc2Dwps9DN\r\na+MK7Vf/8xAWDIZGemoEZzhPZXKqP2BmGneEcfGtHLq053KNY8ipGlzx9wsO\r\n48gssBqvpzMIezNIuP6rhiV7O1OQLefYNiv+uABKxf0IoIBGebKN8L1hmprf\r\nA5hclITJbn6pQiL8IdsxQ2vxHX6VlbaMrgq6MXfHJw3Xecim8K38QB39WV3J\r\nDHtK+5wCZcMfNkwQpkWyrXd6h3uMbk/5YR6EMOQqj/WY22s2aorVoQpvNjgM\r\naM3ggKt9u5BEjElRdVez0CAcPNcCVnWepDBF++dkGa4dQGlgwTGyJzR+hTIo\r\nB5jFnFk3SdJ+PXZFK1OX2gaq/x7cTlmyK/PRURGWPGBwj/vJU3oFy6doNLS9\r\nLC5+xd79uV7E+HOMLql3lAG30hSjIbWIx4U=\r\n=i3AS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.70b8ac16e.0_1664318656013_0.17686574742947148","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/theme","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c20d74405.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd65432afa12a3242ff7ce175fa2f62ff17634ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c20d74405.0.tgz","fileCount":42,"integrity":"sha512-RU182isxUf6r7UUPhlH8sCmWxq3+nCpC1Cmr49MhVd6ds7Vj87MHa8HPK4rBuQnDCELv+qzwCMMJ2agOfsL/tA==","signatures":[{"sig":"MEYCIQCaY+89Ki1lfbHBqtuwzDar2Cz2dJN4poiBKPDMIGKgLQIhANIWt4XR+vYeN3FKe1UTJGM1Fe7YSBAIQpPhMAUxFsxF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4edACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquvQ//Q8NQP2h5JFbFYq8EKRRLLYFeinPQI5u67WXx/QFI3/B4U/oq\r\nIz4yPs0enYdXTjqrZfxzB1hih5AllWclZOd1sUjUd4Gxd9o89yF2D8HVFcac\r\ntjruFqwZbk+4JrNCy9lRm4wN9M3y9M23m4+Z/QAqxX+7YbNlxVmV1C50/ISU\r\nK9RyYCh3btSkcD4MmVqzS86risg/u3SGicRZsH9ibQb58JKaRn/QvCG9I8Zz\r\nXPCAANI+Sz37A8cUXZ2WaID1StfvhFW9yO1bD/QmXzeN5jpuqyCquRFadBfK\r\nJ+KVi4LiMjn6JrfmmjuYw1qYh/iHAew+vQELm9NqYt/qydj2EjXsbTbJDjES\r\nkkicnDnNwV+Pk2kIEXf6Q7/VicHLOlFqiGAgNbp6hgNP5zuA+DEAmwGk7mAD\r\nU+kq4wY0XOsc2uq+LsNDu4geAWRgaenN7w/zHArxn12uhUwv5pAxLvwRTTJE\r\nWg4t0eaSAD+Dz6nQQtk3/fDODU750YDI5BPcSN/E3/d9BGj5OJfgq8jiqDea\r\nM7QM7Dd2H/v4T53cKf7YeC4eSzegHYxZr2P7kQda3CgPgkvAAGAHGl1U6Uhs\r\n+e0ZolfN+2FFGlYLFAZEFVD04+xZ7cCR9JPQyuOy4PD8qqCb1SGRUjlb/rhY\r\nBztHbrBwxAbjyObtdG5xv7lppVdvZw1xc1Q=\r\n=PrBG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c20d74405.0_1664321436799_0.6434652296427112","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/theme","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4b4742b02bd8a3fe3baaa244b46e287eedb7c34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.f033fc8d1.0.tgz","fileCount":42,"integrity":"sha512-ZdGAgZV5eCe0Aku14g4K89NOAIW6nuy3bvazjzWw00AUUwVyzIOy5P88jymkKyvSSiB4gGwT3DRmas3gLMiePw==","signatures":[{"sig":"MEQCIC1QhlE+DTnz+4lwNFENzVqvk5N1bCdle5tYO4SePvnVAiBn1GKPWQUhC1oIze6mresQZM0IWvq4zez1PPlim2OjmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM427ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4iQ//aTB2fKoAJkfzXZE5hzahPZnRIVQQtSnPGabnijyDGSmHQzKf\r\nk1NtoRbzXIqlH5Hb/P4WiZh8daE/uH93yRNzV+YlpGHEa8ttoXyx5RhZAeb6\r\n+j2weiNSAmL/hRJDrqlSWTmOdXECJBmeGCzyqvIQ1bpm0ab0gWpD2PR01xZj\r\n3xcxIO1x222RgzVM3S7bYOHE/OIjbndYd422kT+fcqaGaM9WlxfybFGevv8s\r\nZFxlTeX+xpMcMS1ZVqogObigI69o4q5k1nS0ZP0vi8GQe0UCfWnHXnWbf1mi\r\nj7bDJFSbUxiiFc3I0nms4333UiUxB96BhQ0juNPLKwNKrFQclwg7LO+1brhU\r\nfnVF+6vwq1/jCt2E1PXq3pXExiAz0MpJ6TjhydlzKsk7vlniXnXNow6GtIbb\r\nSL+fGWgLQV+feIhnI3cpR4tsOyOfespguV4zQcV4WpNNI2TBOQ6ZdeYv5JcR\r\nP/8SY0ojCuYjtzc20b5kkFmNTNkGsoB9R2QXWMDU7/d2oowmlsfNM6PfSg2c\r\n15WKAtOw5A7hM/qP3sTE/QlrsL+heKttXSDRJPb7GVvvGrccpabW6Yd5ZNje\r\nvPe7/CUlzD93MBpLQNF7kji8Bn2piNaVDw9NcxYpV9f/VHpgpHnbLadP0dtR\r\n0HsUSyrjkM1qNzxQhUYFaJzYRMsBz6/nOoE=\r\n=1OpS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.f033fc8d1.0_1664323003658_0.19307912649310977","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/theme","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ca4cd4ecd026bc9b17a198c23d59c811fdc7f1b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.8d7ae912a.0.tgz","fileCount":42,"integrity":"sha512-yqMQOthcUBtGqUAFxNLCIujGy5JbGlEB7pn7WJedNF2bfzmJjg6Zuc2PD8lotEof6NfZ2b3tA+psNxWs2AB/3Q==","signatures":[{"sig":"MEUCIQC2BxbKM8cYll0LbB6YBKEDfbhsLJrIDFsW7DeC3PrF4QIgej8tkBCaOim61qQirVMpz2WAs3yWWk+J1bx9Qczy0oI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/3xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonUQ/+IsxBxvHz7pS40L228C0OCBxPTAxyf0xD3Qt4G+MoiJgN4Ysr\r\n62C/NxNjr88gSfoPCQV/6wQCt/Ir11CBEhem/uKwILuVs7KmT4mwmZxOOH10\r\nomGsEKEAB4RKnmKKT/su1pdcqPSrvAAKJJe7ZOE1xjH8M4c02oIizDl0UuxB\r\nhHTyA+LfEh2lABpGTMcPCo5pfYTcn5r1t41Dkuce5gDjg0tm72vL/svfyPvR\r\nffSykRKSoFgBqLj0U9akuqux8lDvTHcUuYV7WE+3+qaqaka6ktvgC6k740lT\r\nviodmb3twm7/UPCIxpm8VZoTjwyTTCdeRtjin2elnXe0biIDGiF3BVtnwRjW\r\nCnLhPpCLf/X9rwHLe3Qx2d0WyxK7Ff66SQeg+6BrWQM6C/Cl7duJpd/XsNf6\r\nmSmw7iKVjBoKYsJnN6NcDgNyhAjtYVyWCPU6xvkUXLh9pmn1RuXPAgrY/hJG\r\njNOMjnS8npaoQ/DHXAUxXUxwrsLXtV5EYuXY6xO09dM7rpHa/cF7rvWbVsDG\r\nAYfYXaBfbyRE1xy08FNWzuNd7s/k864ZR2FKj9L1VNI69U0BcDjANnfFcHnk\r\na5QcB3Z2ALcPp8HTjIfiydbff/gajhZeQ8ZZ30QbsRPxnppj5pvE8UHFCVRY\r\naZkMMoySPzBxgDT6ImgymF1NafwELTpGgAo=\r\n=ss9z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.8d7ae912a.0_1664351728786_0.46536883908789806","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/theme","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.db414b864.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"462490ff7eb990e52ef35c3c90026d3d672d5cf9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.db414b864.0.tgz","fileCount":42,"integrity":"sha512-Iw50UX9ux9+WlejP0ubsYUJLzK9mvX5JaEfiZyFHisUMcps1CtrBgHs6NXuDlgdLwO4EuxgZ5uPMV1witPDWXw==","signatures":[{"sig":"MEYCIQDEn9VVJakOChOB4FBHRkxzIZve+5L0A8xB1n00HK+uvgIhALyqaLtwTl2MYsXshpSBh+2eIe3Gfz74T7sKFeupMNdQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF+LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpftRAAnxVC4BUsWdsqkqmDBhurRHgnk3MeFJ/gLJTRgHRG0M5yesmu\r\nHylvWofcRUYIFS+9HphX+8Y8YWhaAw76+1R1NhEihGyMVlz5FXbhNvDun8DC\r\nOughimEJEGpFgl/1b+AipWTOXEnR2Pl4i5Px4Vn/27m4Pxa8ODKyDyi5oG6w\r\nW3DmRBFzsoc/UFHnpMXK6TzxV3R/jfZbv4I4dsgBFqRSf1Mrbt73Uo0NhN3n\r\n7a95azGDmTiryhI+d6OomDqmw9apkE2fZ/zQpX7OdGk1tFo74S9dRX5S9U2T\r\nDbO99le0Ntveuh+QC5PJbuj0mxEa0KSxaZAZ3U+KSlKND+tHGtiM+Tu+snwI\r\nxDhyK/8HwBj6tHuGJCcdC2SQ8fdRSG22bcKcR6iRujrisK+e5gUAKaRVyxkI\r\n5OC7uvbg2I8HlIk29tl3mycMMIgBzxxxSVXt2l78u4TTL/V3Ep/SxGnakLT+\r\nOGAKiK7MSaVxe+llVC6uQe5AsNzGQAs0N2Vqx6Fl51Q8yGRAxUJ+YHQ9nttQ\r\nZDvAp/CdW8L1XeXRMxNJWDdQbUt/Whke+GE4NhJKmKlblJbRL3XyagIOhj5n\r\nZK7/x4LFIPLlO10SXdpOMsDKdRqVHZdLeZYoLQJ2a5Wzq9lzseR5kxHx11LH\r\nkuAp3+4/oFyR2NRIvwpBw8BoupaKRzz6WUM=\r\n=cb0F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.db414b864.0_1664376715701_0.772921930941149","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0462d134.0":{"name":"@material/theme","version":"15.0.0-canary.c0462d134.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c0462d134.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85f5db4d3280cb7794f665162f1ae9146eb38fb8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c0462d134.0.tgz","fileCount":42,"integrity":"sha512-2omeVOLGPL/cQMhW6T60xHOI5EhYBYkj3iIUYCce9FNNg5Sg9QaKJXU5z7DNOXJldkKw9WuieLRHbi3elmsKyw==","signatures":[{"sig":"MEUCIDY9k0ZBcY5gG5E/PpLI2usD3zxznQZeaSYYQI9Pctw2AiEAynVsY+/qzewh6Zt/ensvtIkdtp+rCxxw82Y8Q+jrP8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNImfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolcQ//SffjhUKGFamHW00MKFsJ8lrHHB3tjngYMqsaBviVW8/ww8ct\r\nN39Lnkh3o1t9n0mYq1gopB43FBAWHJ238AeP0m3lr/oyeIDOE//u45L7fgm2\r\nW3FuFV3/auzC0HUz7KPkjY03ezZDJ9KPLFnSiWARxONQzIhXda2AhquuWKOm\r\nbP1XwOTehSAgsn52vov80n/QGzku+wvNM5i9CMZXsLCVOjRdg7YnH/Mnn38J\r\nxOUGtX7pvVm9Xi+0SwEFTqsBwCqlsyf3ZZFOZB30a/fN5ywXOvLUXEEAgrNN\r\nf0SGtO203I6Rpu8kfyaPRJpgR9jBq66IZn3xiILcaKTyU8px0Xribtf23kA0\r\nattdxq3LlnjZxaQrQRtnwxH/xhXE/h7f4EvXUqZKLTVxXjJszAeJE4nn7MLC\r\nmVjcQERjmLt098sYUU7rIb7KNgB3s9eBMbAAdRG0iRrLjcE8DcQzQmsPGfRZ\r\nqyxxVEoJsZ9BL0ZtCt6dH/1tj6ZIiWwGWiwUApniPEaEnrxjh4vKcwfkxyjX\r\n1l8H01nm6oXv9jyMppZh+qR0nqMf9VcE+Uk24etQ/4Vg8lpfBpELNKBaSRvq\r\nK141vbd7Hfjs1GA0VeQ/v4l2iraaa7hDCMqlU/X/nJw9J+q+/COqbpftrVAF\r\n3hAXkJxFPytLrO9LVs0DR+yXyFJiOyMRHy0=\r\n=yU90\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ac1e8bf31f6e69539e68b22f40f639cb7eaedca8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c0462d134.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c0462d134.0_1664387487214_0.4404146382420693","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/theme","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c0e1851f8eecf79155a423ffc2e9730def9fa40","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.28cc6791f.0.tgz","fileCount":42,"integrity":"sha512-g6L9PzYlzt6DiF04TXtbqqnkJrpq+mJmfdhzamPaBSoDtzdjxQwryRIiQA/VOSHUnKagpVSN7sWWRM+GOpoWGQ==","signatures":[{"sig":"MEUCIQDDGMnCUVtWvktZmo0ufZLSQ2KN9HZYxuUpKjiNvVl8oQIgKzyfD8vE3FKL1mrCouEuGPk3U69yEQZvViE6xkKIpWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI0SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1+w/+KKdU9t6DyLNv78lJHcuZU+ZZ8E8v6tFiToxM4JE+MQ1DP7hX\r\nnLe+siY4Uzi/7l1yPP8mNm3rOLXNGGS0eOj4KmdzMFtjcaY066TRv4e+SHGp\r\nj8+zCng/EwsjuNecTAgCD/GEkiz1tplnG/lUHYjMIp6DmO6i6ZeIdUFD4X9N\r\ngVlcJkbXjz0Ywn6WefsmVczocUlZSUg53M2uwHi0X2smFjCDLcNGqDpzGiYk\r\nwK4N7wuZvcI3My8Gk9Vd183jBpjYyQyyKUWD4j1HO+c0Icb/1wr0NghhCNpp\r\nEz8WhEZk7u+ynNAExsw/fWhnS+0A0KocHibiMLBO2uFDrel/bzjJCYgPKV/Q\r\nlfaDa/Sd5Jti0CPtwxT7vI8sv9LYSlWfBZxcpZZDP3xtIeRbERMlO1A94dG7\r\nwauHZ9QvHazhTy2Y1BkIbjvi08AAcw/MtKoQEkWVrKXstr/I6RxPsUDvpfAe\r\nwSEHJbdLP8e020dmGAZCx6DauWNZVUgxhHSCQBQ48/115HYmn7F8pQ6or7vB\r\nqSm7wq8i4ELQNEAVsZ/eEl4DuC/Zn+AFKbw4OLmbgbcOI/4xmxAKYMCu+mEH\r\nDqsw3/IG8lk0xERMJ5xKd22L8PyLA8ZaNGids1tY0sJ0wmIfaGpoeWh0g5ls\r\nOxZ731RS2nW+Ktmc+QZFHC48DVoDv+Ws0C0=\r\n=f3Rl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.28cc6791f.0_1664388370262_0.6153016953616472","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/theme","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c3879e2206f40d0d0487bac16cce896752c9a58","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a515a2d18.0.tgz","fileCount":42,"integrity":"sha512-ypWuqnjqvxWnGwM27/mnucqmjFpGXJygGBZxPoqA7of81H16hfl9fCB+UrG/URyqdFVb5h8ZhSUhbaPrlM1IzA==","signatures":[{"sig":"MEUCIQCOTSLW5DYIeNtVO0yH/SJH+KdjlYOTSMMw/beugoskFQIgIlGlZtdpnRt/Mhn8LZLajUZDF318f+GBWXHRa1VyHPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJiGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZZBAAnKaKSeLZ0ZR+MMXCyEf/ZQ2E+vtXMzdZx3m+VU4DWZ9NCnR6\r\nN55q3YF8s+oEjkwgif6pS4dJmG2KuXsbcONu/Ya2VrvaEhm+nedcZgzbewkg\r\nh9uCdHWoGFBY0PMBSklPAsgczAwSxZWxHqw4Ynvd65d4cBGBfNId7rYRpipA\r\nxSRpvND6a633XKRRL0PE0olxgb4uK34NtBCHjGEwj35o6uCI/5/t7/w4MaKg\r\nzvu1yPyZXKyOzEBkKR5Yz8oRHUCXelD0EcD3dyGgJp76u3iE27BaGu40T7Le\r\nT3CmhCUYanwYav9LJPLMLrQSaKPJZxUszsGomVUwC9hnxQMD47plMV48BEMp\r\nqvAiMPq/yGVObnJ3Gh82qJ0AdMZFO1lOzDwyiF2ykbQcMRLpSrTtF9uKmahF\r\nvMSVn3vHXJWCN+r3yJIQSiLtUg03HaVO8uvYdGewVVmgmELX0CNndkVBvRxp\r\n2lX4VkbCyXIEVFG6RFvajfTlNHUHWMTzhgLgZqzesowovLdNfGq93HPdv8HI\r\ngI8XZtrYID0aEVvPuuTqCbUGWcqR1bFfFfpdE6T9BhjQd1JhKogQDmSkqxFK\r\nazpxkmzRCpXM4X/1PV5SGV+VTZ5UFMQ8JfajeEHHoMyk5Ty5esYbRiqXfcHs\r\ni5kHUNrJY+F1+fyh5o5ycIRjRCcFWhkr+5E=\r\n=Oked\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a515a2d18.0_1664391302215_0.26732059692525567","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/theme","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ce9523167.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0647538e83e161a59cf44dd254833dba2b21ec8f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ce9523167.0.tgz","fileCount":42,"integrity":"sha512-LtZRXQtJOIlAoKg6FOuynoGO6rzJolyJABOZntBjIN7bcsMcsJ0v5QWquujT+7rrTDearTWeiM/nYWs/a0Wqeg==","signatures":[{"sig":"MEUCIC8BbQnS6ZOJfy4kymZB0FzMLpB/pIvWCyu5FSc0NeBeAiEAjlwGJa2hSIXVYo47sNe3Ki/3JI+dup/ISA7gSx83C8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgBoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/hQ//ZUjF75pQCRuKBSWMIN8LTDyRUzn8XNqmo+ea6FgBv3hp8AZh\r\nlj6L3echrYUpMzEfIq20pc2h5umBigzW4ILXjWH1PuNopaZ/Cbc1x33//1k7\r\nqb9pGJM9d/IFfG8X7VVV94kILtZkHRM1Perz9e2pDTo5YLSj0YHqOWgccdfH\r\nNEM8XKDCqkZZVMovF4GRJULs8Uuo7DgW1VazgO5yaeY+iquoeUvdjji1aFAI\r\nktH3zFl6MJXH7mEmGo2Gmd/G0sdSRJpIcg+F168jy24oNAjKqhGk7WJyGLnQ\r\nfejZ3p1s2/6tq3Qh7nWn6m2p31XgVZC+mw5GEwzVq2yGEzhdBvGSstq6lO7D\r\nBwfu48nrWvHaDpPgQooLmbYChWqMNX4jQ2ix71bH9fqm6E9Clw4v3vSy1j9b\r\nbYlwG68teXjN8SEF6U8U7CfsVGH3cCZGT+hpMbqKM6vGeTAhrRnDAz0YhSOG\r\n2L6EAKQxkv+KsrmnXVZWU97jIS8DrmaG1CkI724FfBUI2hxc6Pf9ajaUytsl\r\n+k5iUV3o8Kn3+wmTd+tippQ17uEP+jrwTZtnuDRHWuef/KFV8FxS9RW3FArW\r\n+vZ4KGKFUknCpofpW3Xk2xkaDTLsarMI53Ox2e6oZmAeH/T4fWpHxh4Grsc2\r\nvYu0P8nqWkawnXwZPkSDL0nTRolmsOp9alc=\r\n=kgBQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ce9523167.0_1664483432730_0.657866141568465","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/theme","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd0c97823e8d653768a5336b6158a883ff19297c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b2310f7dc.0.tgz","fileCount":42,"integrity":"sha512-65JBim8t6G0+3GGYPa68IQU8sYNi+kgWpS0L6WTBcXQccLVYupH92xfGZ1aZN+g2UEl6Wkx9xyd+vxHgp5PiuA==","signatures":[{"sig":"MEUCIQChuzmkBLc2rnH0CkAd1Gcq3IoYZfFghFxJZisyliCDCgIgIo704nDnSPqzHTRx+V3xh0BY6hsZFNA6Rj2x8UQdJ5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjSZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAGw//bNmEY8RyrSR3yHEb+VhWy/H3Rfo5tC9J9h+sJiGH8ujfamUd\r\nZ1AYJifma0hlc0Y2mru1RD5dgQYsot3pMlDa99/Vg5RiSDZNF41DGeupXrCf\r\n+wtdUOgNFG0JSLjgf60QHy+wKG58dJf+6SUh7YmjBvH1xute88uI4Z8eJ0Cy\r\nUWuhSF0Rgef3n5kMcFT6mdWfViPKQ1CApVqbO1w1KgfUHXslaK6mskrp+GBZ\r\nu1XqEGHNFiCNeSMwyhfycaEc0EKIxBvXItPcp1ETNnQI50V1Cqxv+uXqUOjF\r\n0gB9FhK0/5AvbNveFxsYNw6nloFqbccu0efsOCt34t+XzknNeeTLrhtpdqz7\r\nVbahpoM5UxXJ4NAKrVZE1t3z5cjd5d0IAbq141u/g3lsk4EOJ57b0R3bcBqg\r\nSnC+chtrUOCEunp6C6YI/YG4K657s4qSaJLQdmi4hYaIrMjYaq4xswkMrDol\r\nL8MwvVUb2X2o0liErr00RNOMLVpKN+/huLxBviDHjxMYtaqpzhqh/YeIrM7j\r\nXZaiJrwmoi79BiuWKdrFVjPqbHfuvGmDA1pFyIMpXSfREP61f0wFvvBjcXoS\r\nFZdefZjSUQzkUfRgw4rdtJ83TF4z8FPnwt8c+kcGJrwSitCu9zq6ZASLnZNu\r\nmhaELuEPfvEiz5QXtG8CC1Lz46zWfBf2a4o=\r\n=JuHk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b2310f7dc.0_1664496793114_0.312714985398971","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/theme","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a44241e54.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a6d45d64e456484cb492ef68dc309d10b6b6591","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a44241e54.0.tgz","fileCount":42,"integrity":"sha512-I9DiRKGP2gaTHsjKVP3fhVnP8DkwmkhffHBEfkjGgAyE607mq/Qr2+W5kaMK/bVTYa5xIDOTBgOZuSwu4roRpQ==","signatures":[{"sig":"MEUCIHfsHeBpTAkDoYif9J8sdMKIdPmRuMSlngewj3V84tX0AiEAlS1c9g366RBkFxgdDEgBA6D0UX4wYvQcgccpSN4HDuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqbNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQ+g//dA4nm2pZf1TtM5WAOPTBP4YX/adH1IgwLqyrPio8RkWZUGNT\r\nvB2AhO5Er57NC+3yW6cXDh+o0NNSZMd7jmZkgldFqFDjrLiaxwB1hpYzSFJt\r\ngBiys2DSnZ5R1vDO/8LRP5TX13K7PgYxnC3XScU8sgetoNTcpRpvRgd0c59h\r\ngDPi9LPZfZp4XoJBoAnCEGEPMUHvbR5jKszPYEYv8ewtmPp1sgY+arVZ0okY\r\n/FUtAL7c2NvSwzQiNzMqrsoGk/HkiRAZfUEUdmysWJZskD6oZ/olyaPj0tZU\r\nQMBHOEPgTxNG9/UE6iTLt4fd7Iu9bu7G+7ao8LEl23lPXDB2EZasShwLo9by\r\nLcy545BaSJ5oAE+wNvarwr/woikpoAEp5zbjqnha0dlnCmjqDgJHrvRysg9z\r\nGJ55CKWZhgPGQn/4MT4+kXNyV2QI0Y4z+i3iDHuz6FX4TLT1bRkvjzWAs/83\r\nCYO56ELDtJXdU3ZaHI5vzGeTxIoktCHth82dBqvYj+YTFYiW2noO9wTjHXK6\r\nN45G7QYHA2mel2ZExyI7Sl4kWjVZDb9Xf8CY8WnjTWXdjRJMLGgeAr4wxokd\r\nWnT1kQ4WnBPyFHrfqkg/cSqk6H7833HY7XmWAnmmmfhea5zQ2maFnCQknmTw\r\njbRxQl+iLhuXP70r57jno0EBcjDlsWZfSCo=\r\n=2Pn4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a44241e54.0_1664526028846_0.8713324979574644","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/theme","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90e8a4a619ea71cf4773ada7583abfc18edbc2d7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.0ce81e115.0.tgz","fileCount":42,"integrity":"sha512-8m1dnlByNPsKlTwisQV0vKn9dghJh3d+X4v6I5hK+0m8uxdidwOOGdEG+OqLA5sf8xO7ucNdV78alD2lDW7/3w==","signatures":[{"sig":"MEUCIQD8XdGlRW8rIMxdlRF3hUcRbUJ+bT0ypl6R6Pw2ZSNUsgIgWs2McH3kEXZSg+sASaU+qGFmKga08nnzITWVEGQZuyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzK8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlGg//aSuH8uXyB+0HJgRv2MDi5lja4q0BxKKK3u+ongWrjnUshK5B\r\nClF6P0S1+wKD8zCyvTUac8Ni4Sy6PCaap2cJ2XHaM2L+OKbL8p8Aya4vhO2t\r\n5j1YQj587DmdJCmeFVeeJt7Ss4WSn+Xvmh0UUgq2FHkY/L+oe1WnGkhhFMGc\r\n9gwNKGvNdw71ZdrMLXr44INWiAqyDrbkmbt+e0O7DU9JKeIloDy2KzYak3FU\r\nYilHWTING5ddO5Y7HDC/0MNAUlfqMJyRyS77/i1KpooOoQty0Dx0yVTa4vzq\r\nQKWvzy0Qb/YhiDCq6b+eo5iNberkvFJEYevsys3scwEfiPL+gjhZx1sQ8EDz\r\nu5I0pgC7wz8I2bFAOh/3aZcSTRdtiv52/PaoseAb/Cy/Qa4lWesfQ9xhD7D+\r\nXOBeiW/drfcd4D17q7sOFTnLmvhvEY7/Lz5itXizEaQoSpbUJ8XWQHVfIkUn\r\n6spwDwudcfzykeb2oPIHvvUtuOU3fJ7qbeDsijnxeIv2QJOvSB4d49IpqqbV\r\n5W04QHpeFXZJixMRYPf2TVmyHXog3QHv4nmGD/NCph4DHcl4Q7pCgpmWFrlD\r\nGBG2MXTnTUqjCfHP9jClUTQ+Q+dT/UTDWG1sYZj8KTW2GUtd+rEs5mBKcOJm\r\n0zi9MSJ1KUWVH58Q0yR3WIynUaFeQdvV1yA=\r\n=Ub+h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.0ce81e115.0_1664561852554_0.31245804056750615","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/theme","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"934e0fbcda0fc54493eef7b9e59074b87efecbee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":42,"integrity":"sha512-4e1Iextl+v1WaYVGdCg8mKQL4FXbQX6Bqu+pvpHYXMyacU5zcpY+MpP3W2SUHgZ0BqPiftx8K1bAHyNi4GCJbQ==","signatures":[{"sig":"MEUCIQD4JPyj2lmIs82DIlaSdoj9WQEM2WQrt7bZcAJlsaJnzwIgBA0i5l17wz6ZQb6NOBtFhf0adh9eOf5MHh7bwZsXK3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGrmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0Sw//Uxh7Na/j/2FduLzKAQRlEgsYubRb0MmRD7o4vVUa3Z+Leh11\r\nKBqh0nuwTo0lBZlL6AxuDD9vl9IAmcztM1oCeZ7IB7/4XKV3sO+Zhy+inocb\r\njl8y7i6yuogIpU2b5OVHnAokGGf3FNiskOoy1ZKl2Hky65M/XELIvXVamvkO\r\nuDts3SoYvDUhl0Tvn5rQvftKKvPzU+21589f3oajXk2f+oK8otHkG8wIiE0R\r\nl0iYNW5lj8Kxhtlcr9nrlghxJfYZ3HerA/h77ih5t2lqklzbXTrdWSQZNFpk\r\nvxHKE+15Phr7+/evyCbQD6NUqe3AIiNnD38TtN1GhPFY1R6R6qLrmOot0PZJ\r\nZA3Bw0HUERL8nyiNMWvk2Yfuj+sTjL8giNFE9fB0wq7ydMfYU6dbAGXwVAAw\r\ng3/UXXeGSjUnpWnMHzMcGV2lr8EIC2SHlRr+3lecvy+S/AGYFPxgST6jsuKL\r\nmRKAygsUlsLcKwf5pSR7iiGP/+h/QRsAKXDtws+d30IWvo0z1QOxnJUGhMvo\r\nobSyWrdTglP2UxsBzetUbiYYVzYLvYOmXnGJrlvX2Sb2DiBvDQTMm1cO9yzM\r\nSSoAeAcB5pGMc6T6AAOfH7D7G+Oatw5ToPaHLAG5up2aFG+I0y+Hqz4LdurV\r\nLfs4mbYsOKfwVnNc9s842jdVz3JvbnGaATc=\r\n=mo0w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.3cc30f6ad.0_1664903910448_0.5517117408227559","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/theme","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a11a2b2dbde857482bf4e0ee1f7a2511f7c4300","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d9cf98e60.0.tgz","fileCount":42,"integrity":"sha512-TMMpRbtKxoZVBiOlkF4YjPqkKnOwWKd/pyczrEjteSKqz8lPEgiekQS2YQb/zxWfqx7QDET9IVQqhK+q1/AvQg==","signatures":[{"sig":"MEUCIQCX9DjNJuMnwa5z3BvgfrLpBuynZyJH22CLjAn1LuxxJwIgG2TGUjSQa/nZ4I4zziKfYL0La9zKS/K9aUJNrQymmls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPINpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoejA//d/Kcs+qQ1U3p8+wNWP3k/Gz1p9jWFMWk+sM+pX9GO/T5/koi\r\nwledR06G2aOOu5oxGcOZnIsuQBCG2WuOBF4IQ9DRm2sdHdC91biqvoW9blIB\r\n2iBZ9rJ3UKZX+dIHr5nTZi8ZmzWj7lgX94XmfpYvMf1TY1UoHbeW4bGTjbLJ\r\nZWV0VnT2zDVNVJu+4gy/Eex1QwwWfyTm5stHWnFTdKvCktD7Kxq0jQ1wn8oY\r\n4oCj7LWFDOTuU6QAPmpX+8vLo+yVh2dI2HbnJDWQYBTKVm3+yjYVuBlxVqvw\r\n4bjGINkji0FkHmWFHoJDVOk9tvOdunkd+7w5u42ZyG51nSG71/3qY03NEnn8\r\n74Ap9UQW46/d9884OdV/gNsMTkLQWXWRG4ZlvVI6GCFAFx6bJiJmSQa7rMY2\r\nmlnTuW5DhENCb/XxKnBFG3OUmUYjt9dkddZr5TLEg2wEgvnyVwXBVveMppxZ\r\nAzUvVxLghdFlXuFe216jPBFt6BdCmJunJb3WfI9yRe3KHj60XdLk9QmSN3cY\r\nZ44GqmqiYAqWH5SXEjSDuB17n4P9NHHy3wAP9hqixPNCTBKOvvG2FhZKtRWr\r\nBTM0o5cIqv7Y44evSpw9eCs3xnHu5d21tYZuiXPobTnhXywxsFfGf6pJje66\r\ns8Qoz7rL+rL77wu4amE/AjYsRTMNvUERObo=\r\n=issG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d9cf98e60.0_1664910184939_0.3497522936482407","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/theme","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dfb5dbd80aa6201990372d82ad916773cb22bfe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d71935c8b.0.tgz","fileCount":42,"integrity":"sha512-tkUp5R1CUwOfk9CWCHOxzGuNIfo8bjYMSYPDIhb4pR+oq+z8Abqp6dxlZWiVvq6cpqbUOXn2QRGNmW8MO/lJSg==","signatures":[{"sig":"MEUCIQD04qw3YYFsOQ9DW4HytAoTt4+Gy5ERdSI+a+a9jFgObgIgTf0GagjhXUefVv9kjxQLODVFlIoo/RCG2xwLbvEtzzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo5UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLnhAAnzdYG/tHkaN9jXB23mhs2z8jHofqmQOX5YxhKrgBm4g4Zg+4\r\nSO3Y0NBPZjpLgyGEQZpAt2Zx4B2nUofSSaDpLyHgzccnAv1hbCvR3n8ua6Wo\r\nQv3PEsVfA5vpkKAECstCAydbCPb/6lYAjBZ3SXhWr8Rl1qu1rMT7edPMyfJ6\r\ncl495U1wmHMOD/on41U1lo/J471jAfynDUSk4OIZhg5piWBch2cFpT8lOcMQ\r\nopbr1K9pna2wTUxYzJy1s2UHoUGNjfkbKJTx93pzM7Xkz/1GacFYQRGNUPvJ\r\n4fgAfzMC9EPf1C5LxIy1kxfRgAiKBr71SCd6Krqff2s8Xg9XdVe0NKm7CX5q\r\nxPtWJpeBe+p2fZpYpumsYxyF7xuSIgFkpTWsBP9eu6pRVQFL/vqteLH1DQO7\r\nYMQzvvH9KVwfY/pB24YJUu7D7dHAcpcOXr3+ItSJ821qKVuCWf8jkJR6tOxP\r\n1dlQDE1+/I7qH6aKhaMXE8OHvm4KU0zwJGi0nI4LLXXoG4UEXOawxxCfartN\r\nVcTNB6crmwlBjY/FdC+ElgTMEXiYUFe5kfx2ydj3CAd9RaDsLsDP63q0Jm/2\r\naocB4cLmWJFfYu9issGpbuug+/n+MZe04iMRZgscXkvvZ/Hkil+C+vhXZEHl\r\n3mAjzJNScsJ0F2UIdF+i1DojMX82HJvJU98=\r\n=ZkTp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d71935c8b.0_1665044052224_0.6384257595127472","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/theme","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4abd50d7a78632a42618196deadf4f1e890cb8de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.49c56a25d.0.tgz","fileCount":42,"integrity":"sha512-ddypTttEBnxPd0hVkBHGc+usDSeefP5TlVsWjAfxXb0Wr8h94Zp2OGNat/OuGC8idjoSY2iFISlpxdLAVr85mQ==","signatures":[{"sig":"MEQCIFJING5z/VeJGqBpeF18qP244S2K48j4JICITdmdixYaAiB9PJdghgKdjLVmIOm8tB9pqUjB+JwYx6s8X0KywyJarg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyNmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoshBAAmGu21kVhO1YkfhNGcybn4bqc5xZxGhNk0ZNEjnegUsV+HZqD\r\nTtIkw0wqwpwGAWHgShfUORepPslsPGKtKNUZw8LCxr0nYHghzJvh82iZAKRV\r\n5U6kZXGjL6dI526PKSTdqtWeZmWNcg0LqiLwhzddcYRUwa6+nuWUS8WXu6UP\r\n1T4lj0Yd1vSxR0mnKnT9PWUj5FgyjJVSQwHP66WWXjYs/GDZMPzpF/Eyfib2\r\nXVVhiYslL3AVL/70kbqQjQQgK7ISHwKGmcbXy33A/0gmSe16k2xOOeDxmZXq\r\nEih/LStQh3JnCqCIHoQxtfnp7oeOoFdqOe1/EoyiTIMo8sP0YGaEtrtSZ4Wi\r\nCWFq5RTArSQqtZrg35Y3oMhTktntwJUn29juxwx6HxdQs2Bsb2666D4FPm3R\r\nASQZz0BusoWbDK4UCubW65Ck1dNFU0BnmtvVPNWl7gfpD1msetD2RpTeOdnh\r\nBMyQouwCHnKqOAkzG1M8CNzfDG/2YomUky2BfIPTtPVwN1AqATja1qMBiN6a\r\n+sO5o0i3S8la+BCaioxGmXbdmlmfBbF/gCWpajBqkusR+m2ci5SHJ3g3v2ne\r\nLa2gDE4sJRsKx9JPg+rwpyzkTlWt5UmHaYJDbZzwoMpryqq2vZc2uu5Y4lO5\r\n2ynRH55dfXa8r9gBay0RAbckH6g/LJBmuKM=\r\n=Z/u3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.49c56a25d.0_1665082214586_0.2605950164781059","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/theme","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.07acddef3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b67386116f1843e8f3a4aec1a1516be79b272e5e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.07acddef3.0.tgz","fileCount":42,"integrity":"sha512-s0wEM8Ck8jiHLueYyx4AtqLRtPo9w38O1fhFtw6WLtYTvir5pIgyAPTyY1ulPGFbpfB1qLOZ/i8acilSDzMHyg==","signatures":[{"sig":"MEUCIEHxtfvdVP6uXXYvnom9DozTxxR0z/WF0oveksjiAFZXAiEA1BNY7kN+Ohgpr8/d8Dxeehdh2RhSk0o6DcmW2PrerzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJvzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryOw/8DRK13ibR9qJepNkmQ362toESI1adsMdOdWJXqKe/IAPUnqbp\r\n+uJ8SPNv9Teh3g7nkiwFrwEljyElNJd8BgSJuFnjpC8WOd8RNSyLH9kSZrTK\r\nmEEYwfTHU5MWyMxsfWXLKCoJsirkY1yCZlxZViheKm/FIxRqpJjLM3Hc6pMG\r\nOEJGzCgDnAxGBmvtgo/7WudavfIuRxF2d/cAjXiiN0LC0q6HTN4+7xuxOMD3\r\nYh/5gLYvjEhnJPoCoVgADYjQksx43rX5K/E00Pzfgr53Jq/hmqWMkWXkFkWP\r\nTpRq4JaWpRpKKOHjP6Fx9YLZ9awrOeufnNBBySIIJ4ZYW/HyTETJk8TBMVp3\r\nB4bYWyl+TtmBvKWxCTx3pAJ0YiTFq2zzmBlVn62XNwFF50Q+QMTJS53UAV7O\r\nUJ7UdFQrRm6xP1W7ZGMuDgvoihtTXNzaSGjBquNvOOpWoAN3XBsehu974rYw\r\nDQt8bRYGdy1g5UD4G2vDqMRJqMW9xGJiJPuruz4wbTRNLCGYy1JwizqsXSci\r\nSdVSha5mCz+Bbte1JJTP0S3t1bUCRDK/8ok/wmwGraqSyjYyk89MXe76AGcj\r\n+IkM0berMD2ODkEM52BY1os6boZK69Yapbgy8ae5gT8KJUH/EEe2JB1ejZxs\r\nIZqoKWC29eRNkEQEgj7TgIuK7bS9BObI89I=\r\n=TjER\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.07acddef3.0_1665178611206_0.7228606613153226","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/theme","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c7a3fb77102e8f75f85884104a183e0d1ae7949","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":42,"integrity":"sha512-InAzl1UiRZ8XKkOQa7QSio/Ss495FYMZbZOm/Y2AjSAYK+ST/3Ow2F0vRLVmplhyfWPdCTaDS6JD9j+6jAts7w==","signatures":[{"sig":"MEQCIDNXtt1EZhdI7arrw72GNrylXzEzNcuMe78lhmyveV0tAiAYF2dhJ4Lrj6z/jb3b7SKpV1KlERln8qySobl/5f5D1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKAOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9ZQ/+KjYKjb2VZgjcDF4ovY/jNm6EM+REjBFFO5AtpNcqzBhExdAE\r\nszfFoBxyYMM+G1w1oY+o+ndDyjlDVMPVoJTnN/vBzD68nA9emmymCtk2IGg6\r\nB1jKkGf09tZSEEHPNZfiJd+3f58CKKRFmo+2GAzu8kJ5OhphvMNdbDRJ11c3\r\nHabWNFOf0p3bMYzke4rYvIg8WZ7A+JFHzbvC2ARbi593dUpPh0ObkMsr5pgp\r\nv9mmZmH9UtteaHrdx7DkaNIFFOs4OrRj8Y5cZ/47oiwC2g00Sv/tiVgUaj2B\r\nsMGa4TnLoteH9CWgGoECu7RSpgvQfuUr2X6YXwvz+2FsQmhNj1ruE57i0R3/\r\nogPlWegUc+rgA3FX7lsU8IgJtCndegGd7fuLom5GbC3oC3BuYTve1f6rK2ss\r\n0hL8CjJGwVQ/Iv/CeG1ujGKnFHAFZYVnXfMdMG54yAuScopwXRgofjQIKEsg\r\nlysvyg4gV8Sr0mRDO0agxLsZy8700ntfUS2wSuS2Zl9ou0OjDyijd/aEFvQt\r\nxfkGLV9wmELrqd0dpTQzEhnz5ZLhvm9oumJbdH0qcb17QHi9minwrMXfc4jI\r\nqXlFeRCVp7ik7vL+9m8kjIx167866U5N3qUbnyelPmeuprUkvQNlu4SgdL0s\r\n8QBKrlZwv/4OwHqjTn+kjJQh8/4MwY1vtFg=\r\n=G4v+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.1c74eb2c0.0_1665179662108_0.3182747735215168","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/theme","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baf51d87b6636ade6180f9cd38aa331be6eddf2a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.dadfb713e.0.tgz","fileCount":42,"integrity":"sha512-VzF9xJE2k0NbH7vg1My2uqOhHZn0dd5lSX3/0JgCvkkk7/z8RUxfJi9UiXXrpL3oOs1yvrrmyatwmKaWaQoMag==","signatures":[{"sig":"MEQCICUEWqNv7k0EFbu6Fe9U4x4BXzjuybhSsZcYk7ucFHt9AiBQVpVb968/cB40P8NQLf1UFEA/np8sPAQM5CH76PlyGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQUFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDaA//app8JkbRMmmtI5vTdJrsMkpS4eFr5wjDLcQ52UleRJy+XtMc\r\n6Z6vDNVCjf7lajaPq59OFgENwTszXW4zzwQE8pNESeizQFEF9DQST2fGiQSr\r\ns5S7V0kYUJMeZehi4W3PqmeQ2V0vUwL+AdW8YdYENy/yUkQ9+nT08w3xBcJS\r\nU8knf+Qyq+cc3C5VNpUs1EkLjMU6pOiu54RAjKz0hhG6uN8qtQTEcTmkfWoe\r\njGTUek2Hr76n8HwmNolankam+VO5xlEO86HNcYEiab4BLIYbSn0iBD2kMIo2\r\n4YRLNwx7MvkYAvm3Tzc9LlEHFdhMJnppeaFmROjBNDFpi43P6btcy0sI4zD+\r\nEhQeEGoe4XgpPLrjmuPVca28EuAftSRgYWSyhYaPmT6dNz8I53tA9E4wFjsI\r\npuZHIsw01bBU8O6DaA6Le2+JnuM86gzxDQdynZsg5TxX1owVODmKvKFwbPzN\r\ncVruYu0oJD3/7FCKIRSHS/PzsEL50WOehzOeyRIFYmcjpBzMamJqU6MpjFrg\r\ny/ARxvDCAi2ncnxR/nQGRUH+QU405wSqGzvtQYdY2ZhFFGJzLz8aCHa79ugB\r\nfGWsRH8QskJIbDfEGkUUSqICb4V8ivftEfuFmOHmzhAblZJpV+gyTgPdpJtb\r\nTVF5QDqrmK1fjwcxOiJFQQ83pfwqd1Qe43Y=\r\n=I+ge\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.dadfb713e.0_1665205509225_0.6659080213633037","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/theme","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6efa68bd29eb364092ec30a35350d0408d1d40c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.395f1ce61.0.tgz","fileCount":42,"integrity":"sha512-L59movlJUZfonS+KOXeLDZZ6rxSh4JaSRhUNd9fwkNIxRV9e52Vt0fSRZaG7IYVNFdXCX+IstNDMFC9HMSCs0w==","signatures":[{"sig":"MEUCICQHFpWCwihWsoQz1f2PeGxCZ7cuRmgj/T4j9S9Nu3fQAiEA0Qv9M1iBhFmAr5g3UMAh8BPgZMVZ4dkynxW+xuok3Kc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQV9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpARw//VtxCDsoG6Op5hRFGuvtKlYzgCYX75sje6hBdxpdaWim5wOQK\r\n893Mboxtl36ekodFrQm/AfgfEtVS/q1GIBofmGSavY/T/Xv5KrSRnSJT2C5F\r\nd/uAIuxCbd9eA0weyW5lWWHmDeh72dDzdDXEZ3HbYzPJOpzLcL8VDM89xVvb\r\nnE7TEwEADDxa/mhEKQpS1DLsvpwfzeDCk0fhEJI3BJHENztiOdPl/SZGugXb\r\nJ81LRnkHzzj3tqWHkWeszWLUv54IK25ckr8ke/ycT4MDlJ4XwWzQtQizdJp9\r\nenwdtcMfKCznLw3Kwi2e5r4UZ/MlwpgOPgQTEbEuLf+LpyIxyW1qeVQi08tS\r\n9uLcV5LPMs+JtcYDNCXwQXkwF177ByVP/hMPz04D/7V5aVmcXJFc7pSVns/t\r\ncKwNH0oNhGd2QBWRTKFhiTtoC3D6gCJjR/yR4VXIPIuRKsEa6TQ/aD0pBevm\r\nCIyEW0oTiN1AIVDydTqR7TthiszRjk1HniAi6qYLlX3sk7kBkvlq+r6xizAD\r\n2xiR/qr3OBFo7J9MhET0Fvm/uSUIjs7uS65aoWCTouBVOZR2GcBZ73viEc+y\r\nBUvJ7yvCbxQqh+nLci9U0Eja8+OMnKiWxAKOELdQwpwxDKa9jO2c7Jsd8QLn\r\n/9Ryl8JOd8O8ZV8WbodjaNt2PMDCAGJ4ZtU=\r\n=5bZA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.395f1ce61.0_1665205629477_0.3259659948975673","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/theme","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f1ae618759f3ed204b61f1cfbac149b547af29d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.e741b5c82.0.tgz","fileCount":42,"integrity":"sha512-g63S5gk2DkSaKP0i+xjHix8IfG0nyJzEJwAxFW0MZgnNXcMfo9OEFjTQnM8fbgfzrfKuIEfi3MfFu314fQmJbA==","signatures":[{"sig":"MEUCIDNWBLA4Dl0iiqRUH73bHE0/308OAHSVz+VmQ2OET1xfAiEAmueJNOxJ43tJvVnaPIAnG0Nv+/weddzeT0WSXIZANgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFhPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2DhAAkyd7NQnrHaWAXiVr/0/+TQF94zJBsFX34+V2X38vqan5o/Jy\r\nEeGNe2dVovYfVt2JsoS7irH3u9ZSmmoTxEr5830b7gE3+3smQcMhzCYv4wM+\r\n4hJovlst48eT1b221DMuDKGFc09+UZjq11ie5A+ht9g3lhBy7ekJ80cO7ZCo\r\nG7aItxDZCKWzpohBI+PNLD88Vtpk4ZXxjDpuUMHQOrGuSoC0Me1i65ORL6vk\r\njzInsCb/JXG80zHyScBqZBXnchw8o9dfx0lUiyb+RkbWC4mLmYYlNgJV3cRS\r\n7lN971nfzwpvEBVLFZ3uTU1NqkYfAMhS0oJEiSZdf0I0sQeJxExOvwV8un8X\r\nwvPydotpiA+qRF2cj13Bjeg+J9jfvrHOiK7D7SRNo00kpGVV6wDj8+5bZuw6\r\nwxN0r5ebbIccov3u7tf9aJMaEFU44nPeHpgSqDpzlo18o4ZeC4d1vbqjWEUL\r\nyUNZ/xcITKp4S8Z096xUiH6rfIC4JQmUwjBhOXc6kjZfa5wEQnPCAkuhJeLK\r\nw55sIEq3CxhyLh0TYGRpJqEbKMVrp3QmhQjI7DDHXUTt1iZYWf1M6hfrft+y\r\nOEBw2L5Vex67yc17JdX2sDStxsZNbiL99/VqFc2nHVwIawaH7s9gpUeASrh/\r\nlCzH3Svirih6TCA7s5HAP0+srZ4CmvGTHsQ=\r\n=dbhd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.e741b5c82.0_1665423439065_0.7422706661776042","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/theme","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc21680f31af2281748d821cd337a6125ac52700","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.582f3cc1c.0.tgz","fileCount":42,"integrity":"sha512-Q9nhwBqLCRme/0GOQ8zFCdW8c1kaU1Ze4Geyhlu7Ft02+ApTxzN6Tu8RLqFKPaLeSIv7C5VKq2vbZrEFHhHAcg==","signatures":[{"sig":"MEYCIQD86vtWhhT0kMF4zj4xe7UsQKr8iCadxVjkPcGpwWqJcwIhAOpjQ0jR5UMhVLey4Ce2k8nEFjWi46VgBKNRF1/U8aTR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPWOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7fw//dkobUuIlqJMbHhBuq2BX4EZX9CXscc7K96yT2qUjLs6/DqUf\r\nmdcSrzzs9yEvkNO4MkRdhZ7ctF/xCFk9YbuYGw5gxvE/2Ywel7dY8HeKLTZC\r\nmWIpjz27Ibd6LKNwDDQzB6Ovp2kG5P85b18h/4CpQVAsso4aKQ/LrejlNdzB\r\nYDPxGxpsSk9Zt0iC6z3tds9FXAt3tsZecoKXWsXhQXx7e8EdZLbvIkwvSilK\r\nLtGTVGSPPhs5pT3vZ2oYQ7v4bdDmb4ekX3b4ofQ1gkPjRrjEerl51npDK3QD\r\nlwaWQzyUVGyPaUQY7XW3V3LlGYO2XstMAMDCHzf+prv+P9Qx+zqAqc0uaP/y\r\n0l2o2G7mz+z15+UoKL+cyC2fy0UKZVz8rlkMixGtF42DM1kYPOWYiQBMYwNn\r\nXCt7n+Bd31ybttIIzQ2f98YhtejATu2fTWrW3WYDenjkq4IBfgZwOS+pJfsS\r\n2WrxU8hsoriCbywth7usNDcnsZ7u+Qgx76ebxFCiFww/+E71qpq2GKHbioBG\r\n/60a+INDWQ2iWJSSZs08tgSNTaa/AgNgFMhcz0jMsCJbVu6HEYVfbAU1llLJ\r\nNqAyxgyvQTe8SaivJYcPwEm9LkOhvsQcaSsZ88upKkzYtD7bkPSAX5u9104I\r\nSjtPCQzCccVhl/Z98g4ArIChDJq/yW1sjZY=\r\n=2HKg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.582f3cc1c.0_1665463693811_0.3275586439830487","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/theme","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66822f003b4b78314824ed7fe818ebdf1d12768b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":42,"integrity":"sha512-ffVPQrwH5xzOLvo+LOCnag6xSL1w4cwC4VlSAhUGEdZJ2eMD7lA/OX4InSZ9QvD7CVWQqouWQdnQogupcXLp9Q==","signatures":[{"sig":"MEUCID6AIkoEDIY3RfObBBt5EVeUtaQagrHA3nlSNnBB4IezAiEAh+elEEbQsbuvbBxgMxbozJO+b202uVydPacronftq3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqygACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZtQ//UlhF+BydJGIyaI/DW3jG9piStWatQSV83nrQNueectESgzOT\r\n+hSs8IOOgmNy2EO+0Wi5vVZ6F0Al14XQfBIJB6GvOgPWfgY77dYnJXSXmSAY\r\nCJRY3xmIat0bWFduGSgGDIL5yiemxosPmse21+AXClEc0cd+ZQDSKSG4mDB0\r\ngFM0DD4o/FyXE0gh7RP7HPwEWrdYExmqUCjn8gtb15oYICSp+I4Av5Vs2gTD\r\nL+6AwWuoP5+z7kMWlARzN4wQIJMSrzLzXXo34rfI8/CPT0uXnlpKc16qcNoL\r\nTQKYQ0JfbypErBnPOCUzsrODbuthFQZs1SHTRya8q8Ni+gLlpm1isgur9otA\r\nrkC6qOl4+Dz7fb8eLfo4zDQ08833z1BLhd2SptQv4ul/gHbUHhw6hH6WmZl8\r\npqyn34MO0KhAs45xKM4mN1lmW6O7jdwm4OEjFGDBMApBKDFGVa6PsnknWBVi\r\nposyBOyYp6xF053l6ligN2XT4m6s8bjRj5X6xoajIW4rsXcuzNFSgqrkO9ID\r\nCRSERh5cf25iZYt31DMxxi9DICeBv6QSqQjjRBjkvrPz9NMeber5VJLEEIY5\r\ncrgGRCQy2beuGzxC6XPFXd9dgi1oQ17GSR+I4ljB92bAmnMAbkpjITezTIoS\r\n9eJ0HC1OoZOjAzjhmO8+Fajn1SisPVXNvcs=\r\n=+phY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b1a6e3e88.0_1665576096649_0.5998604067328779","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/theme","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63138acb6c1e45850c3a3885cb95acaa910e9bf7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":42,"integrity":"sha512-FdfHg79piWpreCvQMLIglk2+k7FUA3qXFxZfZlzwkf3zleWtivjARxqf0vFRXovCfu948MDFJOBB93tJxF3mpQ==","signatures":[{"sig":"MEYCIQCztjwi+5u+/mKBOIScLDMQ0f8a9s5dwqla1o8Bro8W5wIhAJbjsCffdeBrUePv487gT6bv5/e1e8Q/HVOsDfOWL+Up","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvIHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrygQ//aniwHOIRUHjC3YQVd/qWrfcAXDjG9hyehuB9zKWKIXnmRm+j\r\nO6b0a96rax848dkyhjWETr+KX2kDs3cp+QoGwM6jDg9+mx49dPxfGcXJO9gn\r\n44i6k52rjm+VE/o9CTIk249MRmT2goWrcXPSAECrxgZwK7hlYO30vEzZYUP4\r\nrjoE/gbVju4FuzXafsxGrDtRaPkES63FRpeKzipeCGRR4FUworU3yclE2aAL\r\nRwM4xqMa/PUok7bVi192AdWajo95l52Q0NluIn7TXz9o3C1pEf9aVloepeR+\r\niwC6lLJD1WSGcpRZGg0pah8osAdJbsfeHWrvYD7iygYJtLXjftdQ58hcM6JX\r\nXFDwgUz+VOQu6TdZuPFl2YlAo+U+wsSekB5p53fU9BDsZGa90YpvWNztPAy4\r\nEnvwxqqz3RqwFtfN7Oc7JG9GaNMT2FigNHgNn1pWUmeXjzihecVvYb/xpRtQ\r\n62EfAmrHNBDih7oSB8AR14zxpcnABmCRLmwHqO46fSB3RLoZBKVHyKINvyN5\r\nLDvhnqgbHy8p8oB/vhqCGEyFU2MvIpRsQVIxa6JjYmQJ4WLcTDpvpRH5u776\r\n32jZ8KbcnUdtusXvsHHeYlZlago8F+UOgEKw6RjDWL/QGiCs20IlUhXBboea\r\nOgaQhrpTDZBxn346v7dNXuzENOq4r7Fse1c=\r\n=B8b4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c9b1a31e4.0_1665593863577_0.21930043377917952","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/theme","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe80847667a6e4a2be3ab62d4822955357fa283a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":42,"integrity":"sha512-WAWaXbSM+vjpGNRLNyQ2r5y1gN6LhLd2bFe8flE8y8hur3joCux36s2r6njoxmjdoqtM6CXdQKOul99fHRWKYQ==","signatures":[{"sig":"MEQCIGV1riC4tw2ZdNDp6HWjJ4VXXAU6mWCuCvmDfK6LFsX1AiBztX5VTh1s5Mb++jZtTNc4TtTIp5MSo2gwvdHwVd+Q/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxNkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDgQ/9GpOIp6bIy/z+PYeoP0XKlIWqKd8KGyRc3UW5E6yABnI5ieAF\r\nvsZm1bXrxTarQ+yuF3zU+JDA8HiNSpa/4ufbz0i8hX6NprhWeGUU8YChgxOT\r\na6EoP4DBqERsyI3+Ms/6uPw57gT5ByFNmoPGAMDWRu2jmfI8YMWt0IFnkxfU\r\na9jLhK3rWBFqIxqsV1Cobkwf23ixzvYsYDTulw+wvVFI3BmnvZjJ1dKCqg1+\r\nzAg/t1kTEfiBa4w5G0SIITcX4QDpnxRqAce1VzlXDoW6WsGDGct8CvWkWA8n\r\n7M3o6FLSFUrgn2WOSDdqhU1D/jyH+bFklimbMrB7G6Eq8/TZdblTbdv8kiIr\r\nRDMwqESud6FB+cBX2YUqYmuctO0tM6JOLvRZxErGU2WEzxcA8mR/Dz7oN+Wi\r\nP3LgjhamLWzC+EPE0vosOwjwUBZFOeaxyEhcdDxDJy9zlTjKT+94CVi8eC9I\r\nZwW58oLOT+fYjkeKSnEZEFBFm/jh9KyKnvJ4UTwDTloB5BsSbqzp2SE23Fyv\r\n9S3OHkzsuuYbQA+vHHA/B9A0A2N1157a3XzVm6cwPamaYH/O7dAllvs1X/BQ\r\nJHfXuwxabxFn6LvB14ruOYl0jJmnxICqi3mhVC1CxeYDNPn1HHGr+QhFn1OD\r\nSvhiGzc2HKLMkjlISEBEGKi7kSDLq6pikGc=\r\n=aeBT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.13e9b0d1f.0_1665602404023_0.363265107930024","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/theme","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b8224a7426b51019749fff11e175a643c73a256","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.1dc797e7f.0.tgz","fileCount":42,"integrity":"sha512-SzCKyr1kyqGwotsFxG4PjKjoFSxS72JYBMCq5+b/z+AArc19R7Gz3pwgOomaVYBRUhivFtpRGm2ES3mHRZPGNw==","signatures":[{"sig":"MEQCIC4gVQyDY3iF8Wqs+Zf16QMT6M41SHCyhvawSOiT3ggFAiAzsox2jOTMvt4Urc3Q2fRUYCRmO30v2CGVIW7TJi3ohA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS6cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqY3w/8DgBrk7g0KOk7JxG/I4eR8uA3rXJ6AApQ5bYOp4sx0NvCR0Bv\r\njguGvxe4NaWwyOXhXI/y6WUZ0ILl8PKpPWpBnLoe8mP3V+E9CQ/iK2/bvgGu\r\n8cttJXZfpR0DLF8ewZAbTSxKZeIervdRE9O9HPfjS9ttHFQU4jdZVo4XN3r/\r\n0GAcBe9xA7wF0hVS2dusnwcapql1ZX+nPaXbX6Wz0e3H2ORnVjJrnPdIZjbM\r\nTWGaaTybfySiW/NNoF368OduKufbO0zeDEMVXqhRF9C2COONz0ToHV/I+eiI\r\n83d37fXBBBTirvIaj5U7yc5SN8jkfFXwfgfBWR2CU4R98lPVFdmiF8Da30Uc\r\nIF3kmf6NPikHj2wffIHyyOWyEBie3YaAADwo4dJo+z5cxfwqwjZIJAsI0qju\r\nHFlPNbk4Li5G2vZpgocSur6wh7Y5AuImLvwXBFPVpuGhGDiXbdaVp9UBfoUH\r\nNsWGNMHGvtonjZKqUjzWF4y3U8V9txpAIe8dMefTwcGcb019hgyOAm3nFmoE\r\njhM3xQTfYLdYk9al4WtyfGREWGkPiGQmjqCTwpV7FP6rIbkYEwndGDY7xBuU\r\ngkYf8NWaWt+iMEWEUPZIlLnSzWJzIIOW6WyXI/sjgI55Mt4/IJo8Uaqky0GO\r\n2yO0kzE6Mw25TtmS0La9ocRWwfw6jnVrg78=\r\n=zy4w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.1dc797e7f.0_1665740444075_0.595353748986593","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/theme","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ed4009397.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6ea6f8f1381bc0269a3d223a9dabfc8086cba9d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ed4009397.0.tgz","fileCount":42,"integrity":"sha512-pBoPdVlYvQr9Nb3vc0cotsE24HdWSaclu+BzbP2+eQq/TLXB0a6VrXMBU3TDCvj5MSUGyDsVknvdFWXLj3MMgQ==","signatures":[{"sig":"MEUCIQCVwa0pYagMSLnyGLXpBu4XodB69WE5oEtol1TS298olgIgUBLUNkypuFrA9hTldI1k5poFdezy3HTcEeSp531+cyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZNYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobkhAAmCvMEDn7vjaxndxJKQPcEBZqVfoFMeANxaHy9Qiuq86hmDu3\r\ny3+JM5XEXstCuA0sd+qSWfVlGrcS232IfdWBHOph3lJ6u9UlRBJHgWJs+kBz\r\nPRtBnX9Q7IvkCMnjFRb2YDySjiKMJ7Ixwxc3aRAR0IAxEvgx13mDl4J5xSfn\r\n7A+CuNkkIsJ7Z0fpOltBwfx61QRWmgkKoLAKd+xlTgPaxiLeS85OYnkR/SPo\r\nHc91aaSvDfgDtzaLzc8Iuya9jCM6P4KVVHwJbhCFOJugv7ThMVqAf30ym4tw\r\nYL13y76JVXq/bw7c9OCqXkU9dK3HADmpQpNJOaqfuw2FRw9V4ecLrm9rDqpP\r\nZ/DJRWW2ajCAV0V7jgDUcxxVKmxJGm0YpNXUcRCCX7iSY6qWr1FU2w+RHxLc\r\n5dI3bM4UtYbfKjQY1EBMw6syCuBNtJ/syDTRkSN4MFwUChJ+1XaQdOE8uTDs\r\n43DREZHd5r5F2qeNyp1GY36eyRKqDY6Iyw2t/q9rvqbUX/ExROPJN8cZQima\r\nWjq6Wp45CoxzxiESoWvTAOz/fr11vrkf8RZDHkX+zx7vrB+rrJO5KMMpyFu/\r\nGZ3wvtVoWi3y5kI5i5qjYrmQ+OV4A8nHbBGP/0Fr0xgs24mRwqPc/ea5+lOp\r\n4snQphf0jxFpKLW+Hp/8uHM7wJ6pFJY/u4k=\r\n=75t2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ed4009397.0_1665766232262_0.4293159409400724","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/theme","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd33bcc29e6ab0f32ac01a33fbaace71bc5084f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.95ef196bc.0.tgz","fileCount":42,"integrity":"sha512-sykSjxcW+ScyEneoJff7xAvpg0qkZYhJ0wc4vZNoDiwrR0Z0gHXGRU+jz4Dcz+cBKJol1p0WdF2sxGICKsbJzA==","signatures":[{"sig":"MEYCIQDQa7DEBfULXR1OtxMdF9TfS24w/pGqhsnCUkMNCkiZUwIhAPcmYptRuK0+tXT79GOYfihgNLueTrBrV4i2nLtbTAwq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe0IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuLQ/7BVh5+oOAjFgNjTD8kU66R3dTekyWOHzYms7AETHeI6/uveOb\r\nybI4vosryn5smZuASnQ16XO6NPm/HxiR/KKb1PcA3q9bXzBSXfRfH1XoOJvp\r\nuQJIfdQlROTl8EATPuqE0cWnVHtFfJjOSI2wq0oNXvWOsTS5V1qq6gdYYFsO\r\nQG/QrhRfAjmmld/CZwteOZwhh6UjHVT82nmAwGXB0mqDbuBZ7H0rHXbc6Wnj\r\n1YnQTvgxopuHKpW1kA3z2bdOaBgF6W3UZcUuIqY3dVMJGu/cIEMFypRDmvR/\r\n73JtRNcpAWKmt+5UXNEn5L2ILgNIuhrDAPsmjFpbZJQOJ02hrtrXLFOpxmh/\r\nxhZUHEgPe5K9DzkQmpopCmaP2eK+VdBn1W8ynv3EigzftqI6CARBiTn9hIQE\r\nZwz4UhkPAme6Bc0nPA+f6enqQu+aHkGawBz4NJMsOm0bjXiFITzdQFNsRVbq\r\nturuy4qVFKdZ96Nr425UlgJ9MLHtkgixJmUTWquH69VFtC7OzveTZKcuKWXD\r\nJlK9PTxpagrwJ9r83/zKiXQ/ooub3F5Aahpi7/K4lwWGJK146ggmgOFn6xhz\r\nZEesNJBHGni2+eZkz/uUZ3JYXbSDaEzD43rmHbB19K0jUvqi5MJYDOnMQQZm\r\nb8Ci6topJJridjRWU0J9gHjOOY395E5siTc=\r\n=MNxU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.95ef196bc.0_1665789191861_0.18822580463009708","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/theme","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d64b9e29b8f4d8574143b66bfa0b2fd6fa99d20b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.13eea1b2d.0.tgz","fileCount":42,"integrity":"sha512-NhXve/xQWix+juSL5OLJ+7LSfUk8NVdp/5XQmn4MAyyHafYlI3lK7tT4LDEzw3smvko4jw8mPm9GrfBVnCjGuA==","signatures":[{"sig":"MEYCIQDNyr0F7vnFkPqBDuNL1XPyBVRF0ldY/MBKDiHKDpPwIwIhAO7rzZELOnwwnNssdXzSbH22hwX1uV8pEVQtRtJP1kIk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNEaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxTw//eSSSrVk295zyZR7VcNHhdHdX5+eDdsjaeuOXrcIAdoRJgr5O\r\n1qvfgYYqb9miNn2iue0d2e6B2xGP8+7dQyW2B8gHc/Pher9J8sV7+OZtsYS+\r\nDoM4LLkkrnWB6rybc75QDnbllGhlUwRAVTaJav4HUrR4HkmyhIMIiZaDC+N/\r\nCGBDeVt5FFp7w7KyOpmjNVBWipIAdVRwVcYYePXA4QtKASI1lxfhRrU2navE\r\n2alz97Xwnqy0AUwcXXkTUzsSuPhhnxZCGx+ZaR9KMFDXveuRCfJZCvMK3Uyd\r\nLDCd/MIctdSdiYV4apF9u2+cGNJEpAx8rXt2+37TYFH9wtA99IzNcO3xt63y\r\nHb0h1Ae9I8hb8wMPqR8Yxl83g3Hnx0O5Pa6tiGyY0qFclufIo11ELdYQjQVH\r\nJg28zHu+IDO1EIea8KMRQ7GMp9uHB5DrLSQj+FaEDVYIa6RraADs3cp4DOmg\r\nk1VRyzECYGjYrw1eKkX0AJ2IykSoOkx5ldvYQZF36Mk5CiJXAUGf6YsV5XJM\r\naPXQZ3sTYMKqRyZqJnbCi4xVFesbhv56zuxBK2nPkJQUI6aQu+UnyHep8l8L\r\nfLbnX3xQQ4U1Ij/VBUTRc4EYyT84JvymbCSYRi/nBkEuwevASYPImtICVbEI\r\nPLedii6HUUWTAAcDb5eS11FKzOWFn6YufIs=\r\n=jNAX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.13eea1b2d.0_1665978650328_0.8112446031377545","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/theme","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d2815f673b52a2c2c998944547aa4abecdab390","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ef9b2babb.0.tgz","fileCount":42,"integrity":"sha512-Y916ynKZK6W2vrxUSPmV2VRDp73ygG3tmgtyF+/pc8NFL7KlK1AMqIzl9aUJre+beMwWPBjtY2ZoQAdqH2+naA==","signatures":[{"sig":"MEQCIF+fh7RWRpwCI7F7jiswXXI1P5fNDsMdr8Oli+k7tXefAiAtjsU1Nb8XmEY3jIBQ44Z24mNoeKkgNFLSBHMMsk3Dtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR2QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIlA/7BLmR3BMRaqVOHuRXqW/+j3ILezJiK8q+DT8jiWfThJgJYgZ9\r\nRFk8ghKlK2kqd2QQ81uiIa/RiLxIZBZwJxaA3EoM5/rmoE5vtp/KZOiZxaYv\r\n/8wo2eoX6jPVZZuDm3zrQRo4gQQynlwQADWCPWFo0sSSN4v3FGxXpBS80T7h\r\nNHAnZm6ZNvCqvpMIWldW2C9ST+NuK7QzWaCq67N+2dYcz4If+VAU9J8/flBQ\r\ndZltGWXyyO1aTluMXTZwIXyal/5/cnHZCZRzGpMc4/g3OBexTOIQlFiNmayO\r\nZvyNUcFdDd0afigBISaa+//jdVb4v+dhz8sl1sKOOIdGBHbDFEmdahmHx6o4\r\nhSCW7ddiyudkS4+XhVXHsNY4U0gLVMUAaE1hBX6fNmU6kvB+ii2FM1iQpjxo\r\nT86kJ0E1XSPMr66rWjM0qmbl5U2W+FbVtwQFbZJuEVw7b9tFqVIwQDcY2vBq\r\nRySuhuuFHt7uXOxAkeMaTHtutXRVgqNzY1F325W9YWBDIJ2J4V/ATrOjb2au\r\nyjXwLjwzcPZuN9Cnhu9OCLVyQ1To96BCV01fNL+HBgCX7uyd3oORCw7VrjJe\r\n96U2EqMp9Cp9qNzKA2NYkK51JPq63NjhGiP5yUSKGNrVh0JSYIPoEvHrVHld\r\n/bmov11xgIDr1hLIZRyZoa9v+dPTiwW8GCo=\r\n=uu5E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ef9b2babb.0_1665998224482_0.9718870376265576","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/theme","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b4f67ebe8bd26e6f0df2b296dcdb9afbae01d9e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.cec7fb987.0.tgz","fileCount":42,"integrity":"sha512-uZIxaD1zUqQFJUuZS34CTfdr4STF2eFmPz/Y97FMFHJTaHg1vh08DZeLMgd1s5fUZaRmiv9q1oVmrFi/T4HOXA==","signatures":[{"sig":"MEQCIAGECYfYmzpxotHGstS7bC/k0kwvDbs/cJON0/1L9x6UAiAJHrvY63RfOlHd8ihjI0ij9TfuMA8ERNbt4BjY1LwZlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTSjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoORxAAk4OBiP76a0NNbh//olHTz1+n45kmfpPnOygH/ZulbSHZUe5E\r\nIwVQR9rAD1cMMrxXZzO+4yrmSiDwNIVXOuP/cb/ytBPbynQIJYRdUuaH5REP\r\nDHIxoqoIeNMB6E1uZVDPV/n04oBwOWqN7ELjQAQjRhBn3fENaZzXHKcPYQhs\r\nqOcxPWifSxsmy1YPtxSVJ8dHjsbMSw9X7WAXfKghyGH2MG8jTuigpOQ9/bjh\r\nJlX+YFEcMBmRsOMJN73ejadt4ujFBMK6axDW1UuCZeSTnL6XYAkVein3v4s5\r\nMbfO3f+HS3cLoAYn4QaSfenI2YhQlaU02VrdDOKr53tt2b7abUs9LGwVnKPy\r\nFPXaOjkpZA2SOr2Bg2hFzVv12qt+FvvI0rBRj8yV0tqZ09BFyUy8Q+BsqwRK\r\nX7WNvmz6I1E3NvReZez17W4eJFB8mYifqp6k8ZaX9Yy5QQdS8D+U4/V5DExh\r\ns3eLtW+37CAbtPzVGuBFJOmWAv05ePKp1yZsNK0xG3ltglBokanFQs+JvT6v\r\n6t9T7T5bWvFY1a+6OzYHQGmdSoIzWOfrze2Lv0IbTTEWuyDw3d42sDJ5H2RU\r\nHklF+HGyeg8RsH/JOcLcGOEIcJ+7IRYehASAKLXrLbrcZLXhuH/fFBcK5tAw\r\nImYCdTpyHtlumx55pVH7qk0OE67AoE3RIrw=\r\n=bQxu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.cec7fb987.0_1666004131296_0.8193770055153347","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/theme","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41cd5c64e08acbe11593d936160e092306c8d6e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.4fff58b08.0.tgz","fileCount":42,"integrity":"sha512-MH7ullLOSQ0L73URaSYGr1UvWT5cNZfTXsejew6x41ruFBeshs3SEancmhnbPuF02Ir4cEt/gqio7nz969dKuQ==","signatures":[{"sig":"MEYCIQDmo3ImP3dGpZPD6JQRzBI3B/NCztLHQ7UCLy4VnKEYBwIhAIUAs4eay2AU9dpCP8OM3LRrLI8HNO7jAjNBJjZngeU7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXMCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLlw/7B7q0awrpzvrEJsqVsfzGNZLufHTX0Mil4vqPc+nKBVEb6MFi\r\nvoenyHn9LtuZBq6cN8/nJa1/zhOwi1jp5qbAssvYPcRbjwHRvUQ0jHvzSpby\r\nWJGOrsmpgls9AW/RgK+pr9aTDoY6RGfp9datFyjdaBX+2K8TV0yipn3x8h7K\r\njToAIkg/eARbvDJ9WJG5kYLhrxI/BgrEMi6WoALHVmUW8kkD/COMYLITZGk8\r\nb/sX7RG4zVeHhxhH386Pyhv4wCK3qscNge/JXOMrj40dJ8zNheQ3jOcbyzE5\r\nONnLb6jpkqRd5jyRQfPscisQSJdxGdZIKenm1Lrp7hiw/XF6tbw22bpMIf3m\r\nO1+EaCd9PGCDGtU0YnOORSqRZ7obYWG5ViETGBE/ZeN7il2dZKDptl6w7x7o\r\nhVpJmfUCYedlNeK8fs/F32jfTo5svtLbaFiXMPb/8hrkMA4wRtYAYAu8i/4p\r\nWhMTLCM22MW3/s7MH7Ix3lY6iFizZ9+luucMxv41UDOfmOTdG8hnpr35FdLH\r\nftlUI0DibCROe1gBZDUfg0vhMzRnlClKikv4Hg9Jjm8GMCCm/OHGV0yi/y0T\r\njHNeskWn87lAEDmSLO1PYnMXss+G/C9fPlOfPH/oyWs+B8qw+ClUuc8if9Vj\r\nrBZdxVbXpMZW5GmEW+6+HZHH3+f0EGUfIEE=\r\n=hP1l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.4fff58b08.0_1666020098700_0.47857488581025587","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/theme","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.587d8f871.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19a07422a0f75becc4f6a975d8572aab82a16888","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.587d8f871.0.tgz","fileCount":42,"integrity":"sha512-q6aZuIyYY+HO9BkCNPgwqya/GrYqp5B2AGHVUpKkLKtTT5QATe+2btWLlBcYh14N0kn2wXzdpKja0aCkhntMzg==","signatures":[{"sig":"MEYCIQCQ0FtP5SSMkCsZS5O5oy/OM1NGMwhGOKd/usjlKyqb9gIhAIWJkLVlJEH/OyKAvzXvUO9OYyms5NBSwSUzkJQwRr5U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXslACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFdQ//Rs17nl6HOxdqp0DW0gTmRzA8U0ZuKeAeVJ6rDoE7UdQ6g7Qn\r\nNuXb9OFlyV89elEmyALxavwwUXOSOhloserolZv9CkcFRQx6TAL29fEsVBO7\r\npeZBi/x5adIrLFf9FJ3V5OWlEfrMMj3fVVAVYdJ18sil+SWnogYIY1J2sq/v\r\nNtCTqEB7zp3kQdpi64xhDyUESpJAvgq7GjdRrhRMkYTb8S4afDKbbPoj7NmQ\r\n6kt5u2xuvEymoFBusSe1grT/VDyKwQCc7gBO1ao2EIwuKPU7L64HTfM61daZ\r\n5QWllsPQ3KD5bZ3xCoIOZrkUhiGVG8SPlWY9hty/C6ss+p8T1BG+KuDAX/8n\r\nHAe0HUx4rC6SnlWJC8S99KfnFSP04REuGtqlBARagOKIXuYDbMsR4bufDV78\r\nns8vLqPK7oatWC4ZA709JvZTo1Q1RWT7SxqUQZ9cS6TahwsBc1mbmboYNMzk\r\nZrjqeTVn7XMrWp5GnY2jnC8aGa90I1EE0ptODncTx/GBQcysBvZ71JqZEzBK\r\nn2FKyhZYKy0/y1FP/py+uTSfNwVFE8sbB2Y+Y3K3cpgAETbjKF1owdP4Es/j\r\nQOVFM0lRg6lyIEFu5Y2YUfKFX2FkfS6GITWhRW0Q3oHzOTMEjwOAEBmWeat6\r\nlfXgLx2HeCzLewugYHZQOQnAauwBhmO4wTk=\r\n=lJ37\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.587d8f871.0_1666022181114_0.09687484599753438","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/theme","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8f4030f9eb7ea2fb3de5b969b5905ac20fa041b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.edf4b98d0.0.tgz","fileCount":42,"integrity":"sha512-mTGG+ZEqaTpxsiGPQfua53SgrYYspu3Tu3+0FXOBjNqsr0BsHHwDs9b40qxCYMJfhFCxHjMBENjzBasUc8p2Ww==","signatures":[{"sig":"MEYCIQC/oDXf0Ov7pOAC5mh8+n/zyvb4aFTw8+0COFmOyGAzJgIhAJpUEGwv33JeHnXf7vJv6uw61f8tVCJafoA25nw1xgFh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYVOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRWg//bUy2iFaoaUAKQSjvmc1PzHTOEkIAiqtKMsOerNAdzykrkthv\r\nxYAHBY9sC5h+NEy+dmnNcc4U1zmWdkNdfPnJVBFj0k/U6lWvFp9v5GXAltBN\r\nWMDzgCDDIr0RwTQzy5ievkSuClq2m8V/R4u1X36NVsSdlV+OS7z+oQPUWSpN\r\neiBABM5eRolhiaoOg4zkON6jN9jcGblmUz8MUpX8QfFPVHXyBhttCL6kDIg5\r\nISdX2sdU4iK139ZfmLpoDB/OoAwT/C+ernaD4KebVqknFqlYpKeXDAOaNoOA\r\nZEfmTncHre4m8IDFeVCe1ZrWqOmAMDKutHiWo6ZcE189nPEQx93NuCi8ckQ0\r\n+HmXh0ANtFAOtS7hDTS/np3yI4oAMEMG9tvs/G1sQByKEMOB7VeZaQ0jrcMe\r\n14fj4NeBrpi1vn8ym8luc6+ETwZnc294XgTHS5GAoE6oX0h3FfORwJW0SjKW\r\nMF9I/9YlxZZhREM8XrcoadIG37I+Of7C1UVFLWqphlCU/Lk6lZVLbMxS+8eN\r\niiu3qfr+FqJtko2AdHwyHcDCE994oHeWe3levganV4RdGyYoJfNqVBaohox3\r\njN6rHaX+l52HQUn8Y1Q+x0sUSeCAUudU4g6YuZ5n376lJGWurHorvi0TjKBW\r\nYHtC1yFyLabMj7QJNFtZo1nueQnTQuqFMD4=\r\n=K8CX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.edf4b98d0.0_1666024782357_0.7646492092649759","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/theme","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f71151bbda76f309aa1bdfd10b16976b3dcb34e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.024ac5f16.0.tgz","fileCount":42,"integrity":"sha512-A/9xyj02y/pp7llRaTK3PCNGHcKuhZsINKlVv6rbBz4y7Z9TnupckYXquEQGPnsmFa0adM2aBOtYpJndd6+fuA==","signatures":[{"sig":"MEUCIF02pSWx+Q5htP4NBBLBAZnVGXTtSre/HSaEiWAInbZrAiEA2ZNZxS6WB835wK6PNj/v1m+t0d0BNaNnNZJOBQHsink=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdodACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeHw//b9qwsorYuMKGdgQL5SI3XH4PH5UeNgUl2aa+JXxK8ezKmIms\r\nUpHnSxqT6JkifCuejv2A1CSPcugSQlnCO9G9NO7z55pdz1seZf+R4ZCe3HEh\r\n3k4296O9OtZfuubcRVbOTrIxzsecY+IMsYpnkUTRMzHT9NJVOxkGic+vvw/o\r\nrzkRDwVJ1n5ZjJjRim0hrTrTmPk/WujyqmWF2k52eAfZbDtFHOUhf+eRZAwo\r\ncIthPI2396/A0LVzYAE3LQAAgxyrWfSE/cju4FVmKmh+dNtBfw25TcyGWXlC\r\nuliTEfaA0keJYwIcxY6pJ6NW80MtQ8EgTK4mhWGzw87hgncnuYEpucjHxyH/\r\nTtzB40n2LZKjnmVTvjXNFWRa4uw5PiUZymCWwSVW2mSrnGtQu5ejXy+JRa7K\r\n2fwRH8gdz2FPh5QPceRySGDaqqOnfslI+xUsZPKt8BKJpc03IyYwUxYyHDb5\r\nPFbZ15q5Lq6Dn6HMRBbB5n17BdihR2N2jxqIpgrUhxLgYBtdiDeI90fn3mQR\r\n/wBN9yOIwN/CubV8IcrByYSOM5m0Vf4QnnjZsB85jB7WIzs8dXG8/YU1LhL2\r\nxopP9bIC8G/nrHT1yUprwzjQ+1+q2M14ZSS8/ykb56hxiLzMQr34cit11gVR\r\ngm6xK/pJzlnNBkrVShUYQ9SxDAAK2MSYcKo=\r\n=jzMr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.024ac5f16.0_1666046493543_0.5384838174334785","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/theme","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc97dbd707f9a411a239c9ad0581a912e9180a3d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c8bdf6144.0.tgz","fileCount":42,"integrity":"sha512-pphRiGnjxCuaC5JKgZvq42XZOWPk2AbwahkpnOZ8MGRXoVOwyRJ7CiVHggG5CCRvvCRPpYcrd8+ifkn0CyYLhQ==","signatures":[{"sig":"MEYCIQDLkWuWUtcV7q6idF628AahYYoi+e3FaGJksuP00LNSnQIhANBCqTKwws1JpqgiND4ot8c+uyM8se0QOthtu1zBth18","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu7pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrn9A/5ABb7PBvedDqLizCVlQe6lPt9RoBrn41fzyDiV77m8zPpcw5s\r\nqc7na3vyCucMxA2qeZUPfNmJss3dP/ZBhrJNtzD7ZlF5lO6pohZlsfZA7KSR\r\nVbiEhpxYQ/NfJ/85I2vTWj3cJS6C3WXISC9wUde2pxut89yrRhJ1gBVlfDw3\r\nYlmrI6DZJOpXQh1g4X1UPnegj5xpPyT0nKgOQb8OyFoLDnTcemQXM+oRGx2v\r\n7YFpGzMNU3eqcVJCm+/Vx2vALv5ujcHgcXW9DE43GXrFl9dsF5ja8LLjPp1T\r\nXvrqSbWH4G9zcjFodCr3I3gA1tHuSzzgED9MRdtAoZa7GuWa5+pe1aDLQYve\r\nb1TxSvCbPQaCejzVkn6QnZwQK8SFAcFJ7bPPIxc9Hx+MMURQ1dACGjD4Cs75\r\nA07BRyFpdR6iAR6WNY2N4oBZ7o7NukpIzz4e5t81ChgyiNnoKyxUXIcCXF0M\r\nAxRXOg390Mb8glAbEqNirKO1ybyB4yfYyVqkQl4PhhS89tqT6H9G0tZBrESC\r\nqya8fGi5yZR9zN7Ud/igizEm3R0Hr7WAebW83XfPFAhZdTFF8zu/fCBiP962\r\nk1egZ4SzuMrW/c78qz2rZYIETkmH4ir0XlE6GIi4ju27tqAgiC+xx9ia8sBW\r\nssK8JFS4MLpvNa6OX4SYVH2KqIW45xJnT3E=\r\n=05nq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c8bdf6144.0_1666117352765_0.9403859864953383","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/theme","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.bacda4885.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e47d3469e6da02b96dd29c7a28016d33a18fdaef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.bacda4885.0.tgz","fileCount":42,"integrity":"sha512-iri2MAx/+a5SLeFSoDoPwUuqmJtLhItGysKuKCdNJ0NHwFIH7mdzIaU6t4MGw3bQn/GZx1MHmJpAbMN6uTHWzg==","signatures":[{"sig":"MEUCIQCrwvK0TlLmCFWaPmaMgQ8lDlHSRsx7VCZi4HUEs9dr5AIgZfvnyt6FCduIc23YCVIooecplh5w3UjthPAOf6Cq5xA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvNyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3Lw/+IFXwWdNfvGrE0+Zn3I4I62zKhYo9l6oGGkDYfMSNgEODX00e\r\nKO77e4uanMl9PIVybHIy11V0UazlDz3+xKW0QcTKctjjMv6V1Y6e9TkCwgsQ\r\nM4ULNJcrrJR2/FIAxE7p6bidsqfgSilX3NXTLh1zw+63t61KpxxLICWxSCZF\r\npwQgPdJOiFJX7C9/L9gUycewOgMmdSFKqaxoa+5jrDduiqtfqbE1hIgdyWC1\r\nA/1Mei2kY/KBNfNNL+bV42wfGVqG9mCxhtUjctqzaNxubOYUBpwDIqWtyoAl\r\nbYlzK2y5Pi7moRZft9rcj7ByGI93i8K1Dqe+YplKVc4QXbNrkapuCo5ud1XI\r\n5zRcpoebQFFx0Mp5RcPBiPVDVk+jco2k2ApPPwKoJ4pjy4yePzin1PBSQ5WN\r\nBnSK+qSJglCz9tfd4ybteIjBnt0/wBe5yTszA9oEqkS429ge/egcLjceL7jm\r\n+dpM40upu6lK3RhFrXdFAjlv1Og+06onvLHhMZB+obN0fFjVwfci9iua42mA\r\nePEh6jKRgkZ7hDnePectqd7TJL4q96JeVEoN2rQEBh2bEGYBUVDFJfudvVLj\r\nLIHoy8utAosj6GaXoT/o+wABWx25BbWg091xcVZNPdJ94z+5BJslUtdeRXAC\r\nXSO/tf/b3HLrWUxQNpXjd1sKmOtdghTUlMo=\r\n=Ou6M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.bacda4885.0_1666118513950_0.6093297875162909","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/theme","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62ad79fc1b327b182900000603fbc1ffb997d14a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.92b2556cf.0.tgz","fileCount":42,"integrity":"sha512-FUGX1UfLWLb6G1Mza/Uk0c/oAIR6ZEIAreDvfBrIk3k3qrsxn//RrTx2+Mqd2C6pTQxHQbVScrVSb6HX5nhH8Q==","signatures":[{"sig":"MEUCIE+eGDWl36ap8xgtQ4yU8QyI1HYQXR7dS0WqwDhyipN4AiEAm1xj8mTeeHzcHI7CzVps1MDCS0ptuXq0FnrtBYpVg3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT08HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuKg/8C16ryKeSYsJUCc7dS7kDkJno3Od32kJY1UgkwXcDxet1z8fs\r\n8OCM2Q1DqcXtkNjfWJphPifVGAnXGeADWvHkLvOgpmfflgrRjSudKSbbB3Oo\r\n0xo6YxSCfhEMuX7eUTa5flumgud7dYfsD72HQLhr+tPmgvBahYNnjTQ7BN7L\r\nLsPWXRiNFxTThb9xbxPX6EVSyRY5g9E9V8OyJBhySBky9+UZHClRUmdFoyOB\r\nmycBWOOdtBzIXt5kbx/WyUYPwNeZS7Xu9eav92Dq6navgrSW5yoBzv/QzpNX\r\n/H45yfsHqrjqpuJlopaLS3nY+5zDABEI0j9mKnpsBP9/lKxVsT/sEMfhZgA5\r\njezWEm3mhZL62BR7CrwQ3BX//2Xe2Unx+zcwSdNWcPmNCjh6eYFroec0CvqU\r\nUCpt6MWlK6c53AkfKV5/1Lsi9zOfoKqDory8gH9ckAAV3F8d1Ua7yLh44WVk\r\nZ9VRtTivHSp5hoxU58lLal4M5YWcJtjXTGNfBnzXRnWI57g3iy7wnVhvntdW\r\nVzK9WbEvC9kf1uY8R5cnOfDGBDBEIl52YOlQdvhaN7a9IVYAzHddE5Yp9Kzb\r\nVbXs7EGPk1Qx+csGAg6F18n8ccy5OC7ZElWiL3d1uPpsUSmLKTuXChh5cP+d\r\nOpuoTV+dr7TZ6nYj88L6UgQINHqo5ErRxv0=\r\n=wB7v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.92b2556cf.0_1666141958727_0.16258280701533767","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/theme","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.cc804509a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84dd272b840e8f576877f7059ea4232c8bab719f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.cc804509a.0.tgz","fileCount":42,"integrity":"sha512-7N6vO8NkRjGyBbjqptIRA5hevuUWCVEzOAjErmiv8f/P2phB/RhS5ziT2K2A+2hvSE0YGpwmNh+DcLLWzP3CSg==","signatures":[{"sig":"MEQCIALx+AfmIlp/tEix+Va7ZpJdhpaeduYPEn3KOoH9rLVhAiAKMPD5+M0YfFcUJfDCgr2tt1wLogWF/dwXxdHAhXPQ9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT0/qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmCw/6AnAQI42ajskf8ePFr6+ybMH1/q74TKKQsRbfdzu449/aYMvf\r\nACVeBCGiQ6ch2862Qyaz8FpjXsNy3yaFNAW7nusHX/JtI1AOJlpWSs/pOQGR\r\n9plJCZBfqsKZnUkgr/bi7cRZ8U4Q9KylpeQPpSYJwtSicTS72+qXSxs7wXqq\r\noHGcBgm0VosiCiB267++/V3ty2/5pPQ40IkHIZiC3zxq0wKlt1S8wln0bJOe\r\n8GZfuEeZFmLlCORLIic63+Gf+3N2lXLTKBaitzy3W3w1FG6Y2yM3nmYYcIIO\r\ntuiR4ix3Tcneqg3b0SkYWB+utwSVNlIprm5PYR7H7d/pzTSwczU/kCW94WUV\r\nk7TITuxlefgwJgTqW0oU3FGxBJLg6SGDGAFn6HD1x3CH2qAB9I3Fdpqi058S\r\n0Vj4hFseXmjuB6yiYVekvCM2xBI/zopjUEJ+2OzMh0VTLNVTkPQ3DPWa8eqY\r\nJD4OBWSRsJ/y1kifcRk3n+egod4gzDiL0eARWGg384EdP6LDjf31TLF3maLY\r\nrqDIfzyS+IL3TsKukHWLGpnQX8QkVAlaP/Ij8Lxv/jBPyrBSonTK+3mGDBux\r\nfSysXf8ORnIUtWFzrgCrlZnZozW9kq2Nh6GGmCLZgOXVA5pSVItTM/NkFB04\r\ntTw2j/3g/3WlEUCHOzpJTTqTp0zT12qoWHc=\r\n=U6RQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.cc804509a.0_1666142186602_0.6885027103633019","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/theme","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.982bedae9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfe0b0fa36af1e420b74772557c7913f0def2b90","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.982bedae9.0.tgz","fileCount":42,"integrity":"sha512-wQHfBfSpWl6qhwfgZZRf7nYahEs8EXbEw6RXNrRIsco+j9l0DPctnD4ZLzS4NuXz/bqZYtDi/0Xl1zoJNBZqwg==","signatures":[{"sig":"MEUCIQDRgOrJeQa6a31fJmsfLtDLNLB1aU86zDYJABpEce+hyQIgKfM2n39AzKaoA38jCpXlHFl32wqEsORXPcYpr3xq46Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1SOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnjA/+M21RoK/3sZrvToSZN59VWrHs6bgek5ts2OX8eoGLTrYHqP4g\r\nNfj7Yfyz5IGKEqq3pdzHUxkGvNJ1qHLd9P/hOW3QSPyZ1lasn/1IWxFtjKxm\r\njMzqUeg6suIaKTtB4RJHppFOXMJlR3ZmqO+bxjJXJ6jZ0j/ir3vafvq+TJs9\r\nfx4sN4GFXINz1T6XByCjTLXcvnzACvnfAoBH1vBxgBuLT2AVvNcu/K2SVi3q\r\nGXMZCsHIak7BPPUv0Otx6uCP/PWhZs7VBafiL2PHfj1BGtcG/LHHQs2U2xeN\r\nntg79wHfHQuxDTS9x/bCVprOvIg2har7dbe1eO+ou958IbZlAzzYfI9wxW1m\r\nNx7bh/GzDXY8vKWui5q54344T1Hidjy0l9prKL9uLX7LH4Y+EOLbewGTx+vd\r\nmf8/BQMhoxM5Yp2wHl+dhN2L8lKWOSrvs9qqOOT2CycUSh9T6PnfOKzYs+AF\r\nDDnl+1mIQagzj7eLbsVM6TUpx1Hbk1csHJ8tLbEGmMpLGnv+f0ExukqsJoMU\r\n1C3bW5/1fQpTZEVi1xqZxaHNk13A+s8feocFr2KJ0FzIzKqUl5KDfTeyrc/f\r\nCnnneSegUKJ61XBXGiPPR0SgJxsRkKkUXMbjg44Y5fFAMqr6ySLOO4m4PSF3\r\ntRC1OIAP5gihZiix7oFLfCyoGGkw+XYtWII=\r\n=aatV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.982bedae9.0_1666143373999_0.2667385258636228","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/theme","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff4b92bec9932811e64fc6f976421c17fb518582","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ee40081f4.0.tgz","fileCount":42,"integrity":"sha512-B28n5QdY1Tmb9Rbvl0wjQfypm42GOC/35jinSepNgN4uh7oYoKSA/LjAU/dlrDfFdALyzIHRB1tqZgCVwgsjVg==","signatures":[{"sig":"MEUCIAcVnPNylxsSnnuntHQWXPiJystdAhwkKck4+WA+Iqe7AiEA4c5HQq49cF2+48wgbxYpXvVsDL7xygUhWIOExsRQcoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFnPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobGQ//Y390T7tfcZYT4Sb3fWiCxPk4n9JsALgbC54rBTwYome9LHLY\r\nXBgfPgRpjk35QexToUtM2kGxD7dXdzWEgRxYMSyQ0LK/lHI7iRLVliEOkKcp\r\nj8o5S6YONVOiDb/6VrSpPhNSZYdajz1zWAphqrOpk+72QPCJBDFPM7SGgKRS\r\n67D3EmMyT3rhbSgQm6JDBY0FP9fRbJq39HUwBkqCZEylAZ6ps7iTmgYvgjF1\r\nTIXJLufAkJSqX6nJeJZJYDcwNYdRhseuhcuy2QMLHywtL771C22PjU8bhgpX\r\nyGWul1OP43gCY5sFoUMNhadW/FiYII22xLtJsqgp/Gp4uAnPP1VPDgKo7wpO\r\nXwdYz2716pSLFYkIOG1gVFHeU/eLVXWDYmCcujgq8zfCmFJNqkSWxMk4afPS\r\nZ+RZqAZOCHnnx6e1ejrCvYa/jKGS4Kpq9h/U4wK8UaG0wVlVFmRqQn2XtGhT\r\nOelQ+i7mWKNMD0Qjbij5XPlgbcdVw+RqFYKpcoQBbhmgI8vVsDItv6YIQYhF\r\nAMaxLqm6iL5hjSalVc1ZrR5dmAJgRDOD12/M/kNMYP5PUjRwgHpM6Usq+zzw\r\nhtxoMDP3G8CgQVZ+ukSUWSf9Ct642uJxHpJrlkz3AA7OgEde1SUh5ejM252B\r\nG6N1stI67SqyQn4RX0PFRZqStq4fN29/x+4=\r\n=oxu7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ee40081f4.0_1666210255339_0.7636704012043924","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/theme","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b72971ac7daa7c15b04bda097b3c4875d83da89e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.98f1b54e2.0.tgz","fileCount":42,"integrity":"sha512-6jp4tJIXT4ExIFGG6Odd4skZltJVyH+wdZ0Di/a1oaf60ybbx297ccrsqbhstwFDVmE2p3IckGNcbap0jCp8Yw==","signatures":[{"sig":"MEUCICiXw83d52ksQibLcWcT6Eqf21zay6W9N/DpSGSt0iwtAiEAkGez2FA2HeYZTcyPgbc9x9sNIlckIlnMCjlg1C9+p+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdH/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Jw/+JucOs4BT8ZS8fVA3vX7o6YYuVmav2e78ewWAIgXrKqvhyB2U\r\nsFjIi3cLkWguxeb866rUdkLJitGGOl8S/uSuLU7I4XlPC25K0mK9mKi9IJw7\r\n3eAN07uvfxrasfPr5VdK39XmU7QkQdJHERNP+b1RKyfy94Ao8Rkjm54kaXyL\r\nS4MM6ExN7PomzqpztcsqtnjjXSnZ5cGZ/8S6wON7QmZaB2gIxzcrQ5QuEkEz\r\nZIBnG0U9/UpIxW0sJ3eeeiIYYqpQvIJcnrcPdceb0cc0tkRaZJ4WEz2tq40L\r\nfZ6HR1u22YVkFjQjl9e2nBcuq3PdMuIWiNpyjWQJdyX3ZrPfNkFtL+zpWCIr\r\nj/4k6MBVPMkuWezhTUBvJA2LJ++0EvSWD23DbaFymrb/iAdQtfClv9orjM1d\r\nWQNIr/gmhNKvPpjo8qtpXrGKPIv06hNhtP6XZnc2DbsoKlkrM6Pb8nokwuqN\r\nOMrS9uL2Pgmpow+xd5/2eoSlYYmNm7jWCN6srULf/UrmzNGgs5FE/dlz5MBO\r\nJZUdL+HWRkF7jJsviFMboi2FVFIHo9CjZu/VJYRdVKpIZGrSwRGcQL/OdUoj\r\nF2nNjHkkwtzBvgMeia8MVAA/2lP/k5VNMajwikidEoyD7yfqxSA+912wdRKg\r\nWm1WfssMSkYYtz+pR6y13GpxowvYCMP1Tyk=\r\n=s/u9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.98f1b54e2.0_1666306559128_0.240896943802827","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/theme","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e5b2910f5328af31574268b9af54cc54bc70ad7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":42,"integrity":"sha512-CyrC4sMi8a4sX8jdSWiZuF25KgCm1V8GnzkNeIJOOSo/v6kwEGw9GfdTql7hGaFVYEfiHyK4sbMfwGdC1KlD7Q==","signatures":[{"sig":"MEYCIQCGZlDiulVQTuET5WGCTVvBdKI0/HWTEhhQfYRW7zA9uAIhAOH4UEgJZEJz9meeZTH4QIou9JFMpm90P4wpauFFQVZJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtE/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpa0A/+OiIDiLRfrJkvXpN6VchUlK2SdusGVHbMeC8u2rtdsM+JnlpQ\r\n0Ele/aCuFrPKveD91pSbHDumLV+n2HzT7lRuXc6F9TCV6XheBrNpMyjdvLo9\r\nxUWGL1J374dWrdo0xjyJlmcjHMcWAbst073e255B8yHhrq7+L1XwX1Ta5QxI\r\n48v+Umj17zZFKn/D1ecSMUQ+FBssXjMZTpgspLNyii+DHROvte4IOXJcYEfm\r\nPo6dpOs9lZh6Xo1PGAeIjJT/6numZ0wrLiawausbhtopVfldZNNjlo0XZdFq\r\nLylB6TyZnW8tljyej2ZSgQ4jq7nQpDTVN/HcD+jV01+flv9HwmnZIhlyh1mQ\r\nVaa8RtkAZRw/3Aio4UYDrRuTurMHeW35zT9t/Z7otbCUlGXQYOG/LEojcWQf\r\nWZM89pIW3bWzIxk2NLWXGrzwDS+jO69Y8LbJXUEEBeZH+TsVdykBphZfYFGN\r\nQmR1tM92R6X4T82/rKy7Y4/1TYjR9n9XH26yCoQcvlyiG1BsRfx5cIOsmGJQ\r\n6CtVX90C78oPsf4IduEdUAzOeVXilOmWtksrOSitRsQdsQC1XPN6q5zxhWFH\r\nPtmbhwB2Uod5euS2keiCmGfcxfWOXrAVkvLGUYGbl/PBnxn39Z+EHgpy5Nsj\r\npfwh/gDU+q1xS6VcYGzLDsnNzx0ZicV9ThQ=\r\n=lE1w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.e74b7ba7e.0_1666371902148_0.4912536356034922","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/theme","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3400dce0581b7ceefa5401665ebf7bf161be92ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ab55c07d2.0.tgz","fileCount":42,"integrity":"sha512-fu4MNVOhlARhpw0qPYCm/N1Q4nay/tHbJQLGeUShJ+6RO4PiIlljXylOum2Mf+4VBuVY8kW2YwHVnI8V7gdxhw==","signatures":[{"sig":"MEYCIQC34qbYgXAaasYjYgleMW+nMlmkXrK3CG1DgVZ5TtQZtwIhALvaz0RXRDczhWb4bd1sIXA8kh0rIF4rA3YAhmQzp9xu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDPzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN1g//ZcZ7cLY7bNTUwdN9S3hYudcXT5y9/k6CS8IzCVLlBCCr7/Le\r\nP8pkdV/e5w328ynUeByk19kytgGHVMMG7kP87NmdF1rEPFfcaElLa5ZeaZVX\r\nVrxcp7PwG6Z92gDPHlcEaAKG1tvoh2nlLZYYk2p7e5gebS7a0WVcvh4UI59M\r\nWvbQvVdwYUPkdbMxi0u4fbBhg9UkCznzDXDWpdUWbTce6EwxF0TTHW5LSmsZ\r\n9yhk636kJW1JOKHd9pFzKPbjCsruiYHR9Ij/fYuoZCo/4F9NFLshOSYJ+AJq\r\nVYSsRZJS2DyB5uaEEZA/5M/ItrS0WoOPWeuN7/qw6PRM3t/t7JRyaQs3Lswv\r\n1bcEMludXiPxFyLX/jhPDiCMWAd/UP45CfjL62X3FTJPAAfnPr9mU/NbiMcx\r\nXUwnfV1BQoeFL570yBPkfnhby1SsKJFx6eK17v9VvvJ4l9IkmvQaPqSruLIc\r\nxlT16hv1r/JBhIwfz5P+W9Q1fmbbvMzYIY4h87kxesmxz1TJIS7+4NRh2QlX\r\nezTF1/9JzpvH9B9WONAFy0ixRNkLK+yL+PmnUFjzEMNDDRNjHZz3UcWA2Z3u\r\nam6MwwHCjnjh3usD+hGWuR5zr8z6pVTzIsl7xjgvAQx+f3czQMsDEJ0Qm74L\r\nz7HTO3ghIr4KEq+3q9RnYDxHl/5B+bbLREo=\r\n=PxMw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ab55c07d2.0_1666462706985_0.42677340858035007","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/theme","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.fc539db34.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"925c6203bbd95f62c2ad09d1a4c6356528bb5c06","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.fc539db34.0.tgz","fileCount":42,"integrity":"sha512-QR7y2x9gt3g3zKebtSwBqG1h4rH+YC5OZaLyyJ2YARho+jqpT6plmgNNcMor9pUc+OGb0iGxkb/K3tkP5n/iRg==","signatures":[{"sig":"MEQCIEdvxoCNs3ey7x8VJOlxuCAGVO69pT7v9n8xDMRUt1toAiAtpZYSkDl37B92tqggN9DdrLTOoYxsFElekMWZ0aGGeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuBQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn2A/+IQR68hdAX+PWDyVoV/+bcJs1pOeVB9Gk2msLrmnYo2/4kZEP\r\norwuTdJ8yVeJYBGcIX8p28IoKQAgtBLGuvsB0vzBwbXejDQF4d/avY1FAcBL\r\nrxOTKB1YKm6U6JXlFMiq9IS6m+BoLb3RtM2znAGWQBUBlBgWX8pnVLSC01f+\r\nRz7pys1eK3Z0H4G1jS0CcKfBLDGjWrBt6Ho5O2gdxUuQeDsm/Kf9uMCzYVi6\r\nn+HAVx2/czDRPApustMbf4T1/61LixMShFTKbUIe9+t6RKlPIjfD5cz8LYmu\r\n7wZlo+0wCy98Xyfh+GlsgDTJMhzQSxmna/RRLzApU7dlSirM0xdLL1xGyN1S\r\nIEGmrxX/yH/HLn1iNNJ1cviXWM02plUIA52ETk9KdxGOZAVpA9o+UGdTTkSo\r\nT0Urdsga8pAc7kmZdfa1kx9SfWriBCNyW/yPOnuD5zg7i7S7DoRXoT0dWglu\r\nFQLSPUcTt7TwUREG4+kT6tB9eTsp7BGfgjvuh3vAw/JLmUm0LSMofulQG96M\r\n41v6ph4kVbAB8EqX2JETlrCMqmQSalT80BB5slu47kzk3zA21rhi4bSwwowx\r\nXgrKnba22U+K9SMKbADwL1A7wdFaLvIXyKY7VgU7f2DWGibk/YreWxNekAiG\r\nHm/DydRWBEjqFUoJoCvBm8X0n32p2QjGSlE=\r\n=xEHZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.fc539db34.0_1666637904023_0.21931621894844566","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/theme","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4514103efccef6253a7c8df524a7237bc6bdf028","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.e340b04c5.0.tgz","fileCount":42,"integrity":"sha512-fTk4ZVt3vacnzyHrg/Dr6TQDRREGRH+J8IdK+IaxtDADPj9H/f+9W7KFjnM2QBTchkmOD+oDxWzqxFuc16DMrA==","signatures":[{"sig":"MEUCIEWVt3tq1jDBUGkLWRI92L0p5RNOUp4AOdHWDKajOGAzAiEAwoI/s+kJ1hW6bUHgb4kwrMYW6iF2aP3972C2HE44L1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHTQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogKxAAmeazIJRzpMAmpGXsvqLkfu3BFI3gZ8V7w2REH09Dbfby4tyl\r\nB+79LEYcBnswpPE/0OKzQWibgTaLfxP73LvKGTy0fYmplUkPvLSRADholDJu\r\ndPOjE6iMmGaIISBVyoWJL3HN0jzZJoUcKpkYywq0mWhQ6HSppPPZiEq8UlR+\r\nv7FL1tIkhaHWJdIQ+Oey9wFfkvqXuQMlKPCWccYahZldgJmjBkhCK8YzLPAl\r\n1iZ5ZoP2pPY2S9MoylNppFrgiu8CwDMVfyZ9NNdk2XFn+p01ek/N8fIUwci/\r\nzXHTf8VOVXw6tnZUARKaI55/Dcok5sAHWZbswrMvgTbSAoifT7X0P+S5/qwT\r\nGgabUKKPaOPK82PZ/Czae6xbzWCSuKVKXZzqur9EOJ8wdX38d2tzh87CGBAz\r\n4GT0jiFg8vvupK22WAzJRJH2F3N9Uo2n8uzrEkNtMg1aPB2+K2ckNd8e63TY\r\nEjgekBCm+SX7HE546OixS137J23WLfsYLthkgiWQqGjmonSFkKP1eVgOPPsJ\r\nhAR9mxOHOeUaJU4HywgsQc0F/prISy3K4rcm6IcXhuYmMYqD6ChpRXdbZ4fv\r\n8hoBdRqJkcmAM9UY4atEEDoS0sKH/ldCQmKQxXeEXSmFQlZi/XIIWxkr0wVf\r\nvGquze52FjF7sUgmfg/EGFrzpHH5rfmff4M=\r\n=dXiG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.e340b04c5.0_1666741456690_0.7968450501376889","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/theme","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9d0b5dcd7779ccee36fd28b805e310c0606627e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":42,"integrity":"sha512-o0nTbLejseBaClOSbwkEIU3WUOEMFTzwCB/9/Y7H9wkrRX8vYaXsLYvzP1t8qs+i9h7pCWV7rkNoUq7ZBP7RHg==","signatures":[{"sig":"MEUCIG6rrcSCZQ6hIpr1Bh1zEPiPSjwxar5TSmL+9lfH0hLAAiEAnvyUOWw2BcNMpXKyr9+yghk9dUNsccLZVcLmTA3ICyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW58ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4Qg//Ten50jbGOSC5RCg6OQbm0uyf8lyl4vU/zbWVMxP+deiH8DsZ\r\nilUz4Bntwbau/X49vzjlmhwGImOEJlbMTmxQaprttI3leg/hk9xQ8musME/l\r\nH2k7M052VcpP6bgmIT/NqFpL1lblwKmm2WN+gyE4tGNC4X7eEIXSC8MPx163\r\np0xQMld9KqUSUlbCxDKKHq1hPgj6eM1IVk9SvfRXOxGmhVY4JiGvwweemT5T\r\nKmnxxjETKE6JOF6DvsBfEXvhLBoOapiAJksC5fA4mmmYe2hbooaT5lh2FSgD\r\nVbiMGaCPh0acICrNOfVJ69CGjbKnGO+aUAfL0beqW3nuWmLngTO0V8ZbCpE5\r\n0bj1Mve6Hbb84oxx77SGIhwHw9dsDRDNCVglFXCWITyX4xfwvVOcPVQW+7lI\r\ncMFNVW6KdmmHav1z7QpH8JLdHNuSQezspUb8J+ttch0wqPl8owhznDUHDgxw\r\nz2+7eh2PS+s37YShTYQcFaIbSFzum7t35tIRn819B4N+bwupuVoMVQSWxZbk\r\nnkukyhyVM2rj0RtnHd/e3BkzRD+6eimvYgRWwIfCzErRudDaFplc9nf5CBjK\r\nXRd7VL5zkRaz/mk6wUhn+7Xbwi84cxe2gBGGJ93Jqjxp5aOQ3b1NNuaydFRI\r\nhZAoJonTvsmHlqExuADCoz/TjU/MGsPvLOY=\r\n=7EJJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.2c1a8f8fd.0_1666805372042_0.9103526245858173","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/theme","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99cf7c947dea6ffc0884be850739c18024654c85","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ecfee946f.0.tgz","fileCount":42,"integrity":"sha512-H8HDrJBZp6kIUYxdfMPYpin7G18/ZI2yp7kSSJfhyir4sYgr7irNWl9DunSI2s90StYmz3m8SiK7XmMhpm2w2A==","signatures":[{"sig":"MEYCIQCtiK3YoV2dDOI60wCPWo3C3NpCf0YVYXTR6NwB0ktPgwIhAJQVMgy73V8Wi+qRzweiEgd00+VW3SDYpVZlZ9Zed34x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZUcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSwQ/9FeI+9Z1+DTovfrgPJFCWs5M9E6SqrHYwtcSK/UPBLcXTJQaS\r\n4yJfVAQ1K3xHt0IyAvDv+4+NczZsevgJhMcRhh3NGkzAuZn+Ilt+DxYsQET2\r\nna86CO0CLL4kqqZhKyUqVSoJBe2JeMfNCRA+yzbNyDLLu9+K5gYzspakYqF9\r\n6w2jvE4hlQw4+z/zhrng34M/h1Y20MiqaliaHIkTVwPb1fqF+Z00GOhMD2wc\r\nwtIZyI9KYP1+W7UKD1qmGD/CKr3YxWBcewNVHaCcjFVJENHGCW0tB3ugjFiU\r\nAvC6aumLbD3Li8tF8AV+hhCqbReKRR8hT4rsqrqttyaf7wf4ljqTi1fY1dPw\r\nT2TpZ809N+BXGzzpLvDro01ZK5fM6r+9pjyKjavpEluCRnzBIQ3ZcrH7bAv3\r\n7cUGXdkw4OWV96/uTNT2+IyMFAJ3N2ffCW4T/5AbqCWE1/iCytLPPZRNqZzC\r\nAI69KtrX0DIvpqMNBIjRrlbDW0I67G2qOMUzvCj0mnZuNv9WAMixVkJm7KGw\r\n0mJ7gq7eDiP/ZxiSdP0vI+XgxA0G+cFuF83IshCHAAa+GY/pFiuIwdNjBwap\r\nnBcIYP018cDyz8rcNCCBVhuvPzyrC5qCXx3X9ZB6kQ7r7Zqse28L0Ig87PmY\r\nBn3F/PWX1O+r7NU74S4dgT80BpsaFfw6jlc=\r\n=C/d9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ecfee946f.0_1666815259889_0.492168509384187","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/theme","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"343839a1242310fd448fe408e4241e0088e6df21","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":42,"integrity":"sha512-SpbL0Omf0dSzdE6hcKSxbxrsPlItFLIjMsDqRdXcmer3PCcI7KtjqQbQTFMNgUSrlBchw3apjHEd/czyCAbV7A==","signatures":[{"sig":"MEUCICV3DwsrbUrWsvJHRMPWXp53og+VrMjZE0HNC6L6gTFEAiEA+INdTiedqG+HcVYIluvt4EhqhzFELxuo2m068/Tgo+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAZ5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoipw/8DS6ypzHaHY1YSn6/q/vKo8op00j0kGR0h35ugVVVdLRzzqhe\r\nSGiemq4jHkOxsX5sb98hj/SvWCXJXDY/5OWZyo73SZO6NtJZbpY6JDbKZuCH\r\nwIf4qpuWed0jKjf4LhEX/prklsIE98SJvG+JBT7y5QZ9DdMEUQbaKlHDyIe7\r\nTXYtpd5CG7wAlddn354twyiQTpAw7oJjmECIzgOT7CAQIPUALd8zfXpzfB6F\r\nKSz7PRtOfW2FNEk8BhQ0qFM3AKVFqGGw8Ktf/Z3wmkemAPB9IbELNH/XZQDj\r\nckS+HQY5KMh0LEX5t7QEKVC+uShqTHZH4/NAyW6TuCMCj4lMoQ8qs9ymmFCy\r\nRCTOCmpAraEMqW5Wh9P4Nb4okA+7YNH+zdgeqRUxqJ6lPf0gDYWNj/2QL4lz\r\nnrCqaZ1G4/LL4nl/EKcZhNKAeKLFW6DUNLF7mah/37g2ToS106AQBvRD/WnG\r\nq6NUp/vAk4yxnF3I8McL33Q7iXTuCbvH8dH+rDrXMvBPCCXInEtfIuSHc5AU\r\nzcAVeQfCKxdISaAv35RwrJg9tunyP2JhaT8sczwPUNW6UzwzDXUbe3yXLCw0\r\nEaJoyUxHvnCz5KIuPiUKt8RCj5tabMUbu/fq6qsSJdhEbxtLIgB3+gMsHECY\r\ngbdClJHfZMZS/EkKOX/kwJ00Tz7qwUHBAyI=\r\n=s52l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.73ca9dbb0.0_1667237497552_0.20514926786072407","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/theme","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"635b53cb94270e805ca48a177b6285365c60ea6b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.357f2e5f1.0.tgz","fileCount":42,"integrity":"sha512-iqz3uRVYVcWyZbbyGShJ/lRYGelKnXyYr24ry4JzBM+jHQPdn1pseZMTxTlIKfkORifJPPYNvnboEq+5nN0nOg==","signatures":[{"sig":"MEYCIQDFxn7jhtU3yvbTDK4+cl9p3QapJE66ODGVSt7yaX3L+gIhAMUvF3W7tkQ0BbTTIvMqAhkAyx4fJoeKHM3uamDLbpx3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBh5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKghAAgFLablsBIGsoVfUlnS+7YhA8RYKP6wVub+DjaSlngDqC/KUQ\r\nIc4kCZCH3d88ONwpdr2DkjA561Ekrh4YsDKfXfvwsM93Qj/jOpF5KaYxShc/\r\nrsEXIyUA0WPhlHkTm1gArt2omh2N10//+UIvCEiA/jP1lB8ZKetPSYGssVQT\r\nAUzIus0QYkFO/CFAg5NwV8Q8H7knmUkOUQ5w0f0MDu9dwVwT4RN8qF6pGbR0\r\n4ICZI7THSOkglBtDA9jqO8QtpGjlGSFwFvmFlRSHojkxZMefCmLkLnx0Mhmw\r\no32JWWPVFJ+XqQ1awzVjWIBXqtH6f/+4+kRUvn2dkzhm5pBNWWl9vUhhqBfy\r\nx0iYmDmLjnfTFgXGj5NKKX3GFjdcOe3k4PpfSSONNJnRksr7nUOceVJMwxHe\r\nBjV0b3Q8PYkerdxD/LgHE0FiNXjXhaO/2Tmr3sBVLiboMWet7BeL71H4rawN\r\npw9w/FFwg4a8Rcv8F89eo9DLBydGDeuKLDCOEPqRXvt1pmqgw2TiL2iw9Kjf\r\nS1xOqo4wnxFGMxO/CthoOCF4dt/tvQGHMw986n7mkdDvFLR3riWEZ1gbCFgo\r\nEnZIUNjXf9rkht5O07taYCfs8HWZLiSiD7egV9GLGaVwE9TmUmL8o5kvm3Zv\r\nPVSgQlj/ioUC0jxQbj4eGENiBcJz1kDUd0k=\r\n=raGl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.357f2e5f1.0_1667242105201_0.06038515105939801","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/theme","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aeb11392d05893074785e058ed74d1a047c2a27","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.eb103d4b5.0.tgz","fileCount":42,"integrity":"sha512-zQezyveociO1alFwM2y3mfSVq6f1opOWZXIj1jN7Uo8Yc8kMOGWARIRVSaQGoCualDJItScUlaaIhDGSIi8mag==","signatures":[{"sig":"MEQCIFYooRWZpB4bF3iUh1FHANG4LFhXsRAFE/KvJzmU0JKkAiB+imOZf8ML+MQzcVKuiI+DNukPcmJDrg3SLb45f3U3Yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCg2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwChAAo7ACCM5jgYJSTBggi//Nfp3F6w7qq0CFuXRBDJbBxoT5Xsha\r\nKmr/wLeo1jBWGnQ8gIg44elLRpRTMclsHstU0L14iFuvS8vLjM17EmNRf8MP\r\n8qF8TvPzLy1n/aJwi7n+5xTo0Otvpp976gwdh7hmAE2Ajq0PUlaJuAIxw683\r\n+qg2/ILChk3xLp1EmKBwmWGJI5hv4NbTEaAMFH/Xt8Cihos3+L9w1kfusvSJ\r\nxE5NyD5ZUOC4FiyeaPxwPRY3fGj2FCls4GxaxtzifqnMYVaawxDDiVFFK1fW\r\niiQmUpQEATpQ8wJOyGo3pFZj+riioV7R2D7T8hMjhaV1exBPJSWccSex0lYV\r\nZ5bGWmuMPO0vopVrz0ikaDjqtOZcAW3XTMAyNlkm8gZ+7m8Ium7gT9Xzju1D\r\nu7Sp1j2TUVdCrLhlz5MA43Orvep33fDsIVTWfQfiLj10i316QRWVCFzQ82gl\r\nX7bmngulyfQ8ZXvKktch8hMgzftiAJAwsyEheMSvgsianoZFGqAQM3THngWu\r\niUvaOOuTI6Tu6mP00njDoLOV+EM/ifDJ9bdxP534vQpXCAw6UMnowmQbdBfh\r\naFflNWGAprOAwNLmibuDrmoHqmU/IcVbVeGV1OG4kV2xtTH/H5p6tpMCLtsx\r\nFAE23JcVy8YiaApKRmDGTH2oBt9EXBK2kk0=\r\n=R56F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.eb103d4b5.0_1667246134267_0.10534145789215432","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/theme","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.af5f01223.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb4907f9b62a041d77d0f3fedaa793404236d051","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.af5f01223.0.tgz","fileCount":42,"integrity":"sha512-DhRplgWD7BPYS7OC1ibtGOn5FX3mb1uHvZzGBfgAOPIUrqSKOFpJKCcHpfLRKxjgYjNZnGhX18X32HKVjHDTOw==","signatures":[{"sig":"MEQCIFpZOLdlitPWYN5ZAzzGOTbuIfSS4Wmh0zL/0Antj921AiBPV9rgMw4ma2UIBfE3BIXrvcVmb+HjgkOQfOS7XTaaFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWcVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT+g//Q5KrbG5/7P5YOG8u0Jxc3stG9s1V1iDQYV/rJv7RSzZbHE1K\r\nBv0Y4zBhZ5Qa3IZnzSzaqR4jglzrK1uVT9gUtynAolg3tS6O+6qwxLPNh2zB\r\n+BSWkm9+pplBzu+zIVmIg3EddZwvnp/TNrxXkO1Hlashi2ahLZDDMIvy7A+m\r\nZIW3CHyrogpcr+Vfrq3qi25Nx04YfHzDCduAc0OG6x7P03IY/jC33bmOPDZz\r\nK2X9PpTXEmhlXoLSF6kyYF7O5cj5jYHhmkEdk8N8iDAdzQk/NSX3Sy9QGPxd\r\nniwSm7Q8sQRxVAHeP0DCopW4y0zHdeBb/ITDQmKOax6L9JQU96hxOF9P3ZZC\r\nHE+nKxy6LGSbm/ixjvPJG8eTsBB2dOb0+RuTi50bgnTpl4fdNgCZxn3two7t\r\ncBtk7RHYiLJLKlVtJ8FeNFvPnwmxB9mcTTDY2f61MD0IWFKXPw/0ZNT5/Ne3\r\nx2Bp7+AybYlmI1dgLWu03vFzrdmq3eHtCz+xgcG5Yow/Dy+iGEYKDRtqDkjO\r\nbKb0XBe1vpQgcZWxMN5qy5qa+3duZ43jDnFIyS7KzpoqofjAPwoQam588XPP\r\nagzS5UB8E4D3Pc/ckCHLWY7y05zwG5Oryr3jNnS32YBiuEKpJzyixZa0JuRx\r\n6GjEAvD7/LnBuvjaigu8bybVLe64yrsm9OA=\r\n=yvay\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.af5f01223.0_1667327764959_0.7307277563562982","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/theme","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.58733ef41.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8dd2a63b2532cf6e5c743ef5e2953f01c088f4a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.58733ef41.0.tgz","fileCount":42,"integrity":"sha512-OSw5QDX3MG9E+3EsvYK4GfQ/p49ma082rNJx7FpIs7UHzSbPlulzUOnanLOdil6+qh/+DZtVWYVkX9eHkbn9Ug==","signatures":[{"sig":"MEYCIQCVLy569ib2LTEqUq6jApD+aMxTxYiFbwq0nqgVSkB88QIhAMz9+ycC4jN+kmL9WXw3XVMwq6qbjOGTr31432YPee2f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrJzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgAA/+NcICWs+kLHmEHpXCzfDEyR5rEXxpfxGovDZRY4cbukjPl+O4\r\npOvSiMX8Eroe6yEJTdRP8iHdUh+QCkZ/+oEZmovYj7rJH+ScLHZt4450msZd\r\nngwyYNjhBayIYbdJpUUHsdcEj2rmzbf8L7eutqnoRVH83zyDAQ6X5fdXDrJl\r\n9mPLcjYIsNF1RpJM06zzIq0ngFskRekZaunOiNvtSAKv7r3ZChMlmCVdvHUY\r\nSUJCo0zIYYR+Ohx2gLFKHbW0Y+czWqVTOsPlo+IZ/4fSS4l0JZW41P6yhTMs\r\n56bKq5vCVpvJWTdoph8hKmkJHde69HQSjV50WNUdKGvLijXZJgo6ps27389+\r\nPVQCaHtfPmbU5ENUqpWlTpM30qqWvdt2rHqCuZ4Lo6y3U14gvoNu2BdUrYcD\r\nxlWlnElhetyX7Jf3U9L9fhOwHms6O/srEh7uW03YYm55CprXmkvtWjLVQpk9\r\nKiVtZppInXnDY2CUZA2+4WlCJ2QWXAod1d0YoFietetxhFd/J+I5xBspsZYT\r\n1TivE6P3dBUxEHRgZmLqik4lPWQX2NH0Q+EwkvkC6jwvuMBzRaV83TaaYjhR\r\nO5dkFEtFnmLzP4zD0sMEbnfPRlo4GWHq4f/GYWLsW5DssNoREDd3/WW+kopb\r\n1Xawvuw/VdE8N4ZYHQHAI46918oOgsGxwMg=\r\n=GE01\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.58733ef41.0_1667412595064_0.16864755109955776","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/theme","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.909b48215.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0281528e94c10d60fb06e5b1b6136e4eab5685b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.909b48215.0.tgz","fileCount":42,"integrity":"sha512-a0axiiWuViDbgvbLzm+jJko++4/Pcm4E9ozbGSv+K1wyebQFUzA0PucmS5QU0vJnnuMA2vHa4PbGNNxg2mUGXw==","signatures":[{"sig":"MEQCIFvZ12Kv3aYNriH0R3lTREuztSGmgGIvsf4ZihsPqc2kAiBgBZhu6YEl+JLCijOwTz02Qa4HmW8wmuLNas9k6YXSKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz5iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNjQ/+JBoX9dZ1lOxYLCmtZqwwdLymIuc7TmPoR9OZ1BKmA4H8hqnB\r\nwdaggF/evWJ/IPo00MfEAjwhPNabAndaNHvMvQmRkSElrhTO/gec8YTiWZ0n\r\nSA5tl31qL78njqVB02qE6lm2RojLOhvlEWjdiBhU2WMdVmADqZYMSOSw55hI\r\n/x3gD1XqMB1rit/Qr2HbUnzzhxRootI4f+gKqJuBlMH8G/gAnB925VVQaoN5\r\ndIj/a3DqUf1ebT4fkXxtF0GVDveGdaFJgTvPzeWCwwhOrBDhZ8vuBU5W5Is4\r\nJX2JMwfwFzuoxad8d01zrw8RFCJCywB7yhOz2wtoxOsTeTMEiibCY2x5BS7M\r\nnBDwIRam00Z0llKDAOEjwR4Y59EvR1dXybtU0dCRY2knyP6RC6/ph6G66JUV\r\n5P/N6s9XcL6D13qBPvcSZPNZb1Fr/bBuW05tNcW5EAQREp/DcwpE/lJA1NWf\r\n3Lpe48VJIks4mvMDs71ft05J730FBcW5UWXcaaIUcVZEpVEWwwMTNV8S/7l7\r\nyWVu+pdaKR9m6Yh9UPXQHrBlS7YmVmva44og8ZlRczDBzwxzTupyiOrifSTg\r\nSvweINTidbIgE5+jNA4Jg7H+J2wlnRl5KFDRBxWWrzuICRy9+Qo02Nj6hvg3\r\n9HGsnOg+RpAOdzCo9zBzDCk//i8JAWqr6wc=\r\n=MCxo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.909b48215.0_1667448418508_0.5408836257185605","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/theme","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa06788d52c6ca1277a63969629590fab0c9bff9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7f17127d5.0.tgz","fileCount":42,"integrity":"sha512-5I+DJsCByoVZPeXHuOhKRmb551jdG80nNvaNevdKgxvUe+Ertm23MrurnWuM63D7tRPxm91RMm1xelEpLs5EVA==","signatures":[{"sig":"MEUCICmB0UTKdelFqsesZuk+ICkQ8Xg4qdpNQLw41PEKjeuPAiEA+rejPYGlJnvyJynomQo+jczoCpYaSSY1VgCiy742NfU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAXmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmou7w/9H3bSFLUxbsz7mLdpcBUp0mAm++brSSR9rBNxjNioqWrZHBHm\r\nMuIymcf0HsPkjVnrWzoDCJOkjQ9k0//k8kZHLXyRe1uYT6SB9GuXKV90UEGS\r\noMBdvNA2TwC5KoTBz6WWpjq6hW4WyW0gIId95jR0gaVCg+s5tLPkVjjU8JTL\r\nw86MtFSR9pxZ6EggjH9SlIfC0N9LUQFK/tqrKnLaDNOCQIAN25Vh4cB84iZ1\r\nLHhGVHKVUS8zcGiGXtAssOEULSpdxV30AKGqiusSsfv7LN2w0sPIa+BXnj3M\r\nOzJYyOoYfqe5LmBfve+6SveBCN+0mPTQlsHbCQY1Ogl8wWbd30HYqvyZc6SY\r\nXYBUBWpsZ7eJUSUwoGxUXmdkftNvoVJdhT7Csinf+IdGZ+wdKUdUt3EJjdDe\r\nJp9z9rlgJ/wfGbEMh5hlGUvBauxRInO5yoTINdnnbS9JJc7SSC23ghxvxJOy\r\ndCYgdrSxSBUG845TVKabh4u2uyA/8xpnzQ+ezmGmC5OA1Ipdefuj6xTjKrRn\r\n+mXruRfZVAlFQEqpIzDJiQoKEOOVprkIhSEtwGKbisfa4aG7qPXqnIegzmjn\r\nMGkOw9nGVtp3lYO16fSzzr6pNhdJnKoLFPR3+Bil85IeKZX3ECRhjA9FwCfA\r\n7zG3jpU93vgPg/q7E+UZE8B4G9vFeW3sFA0=\r\n=pTaq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7f17127d5.0_1667499494688_0.5447855788866824","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/theme","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dc499298cb6569da3071ba13a3ff67538ac9efb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.da95e2a05.0.tgz","fileCount":42,"integrity":"sha512-0kg21rvqCqx17o1rxz+dRB/ryCD/ODwn3vJSKm6gR3I1oPifBs/rTxG15NiXY21nVsVVfIy8azJd7PVj+6KCCQ==","signatures":[{"sig":"MEUCIQCtt/grz3X6vRg0eogrmj8xErKVaFPC4/RNJgNYCNfsNQIgMD1XF69N4rtZYgC+faK2V6CRg3WgKUVjmMMbI6Y50bI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUSmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzMBAAn8Qrh8pNONqo36Jo4VWF1cPpN0tvUspW07OiL04mCiL98y+B\r\noMZVCWfrBs8bmsh+m6Lmd/Xk+aTeyjYDvDEdM4lJGDWOiG98w5hVK77m2/Ua\r\ndmzWHJ9Vm23lrewPBiBNnJgA/fOl7twbu6VMmh36XVPynTCD3EFXr6ResQMb\r\nT125hNaNQVSWyr210HbPMDPiRPwrKBbTjiIG4JmbyEdnB4KW8zEoyXo0NuK8\r\nD5ea2kZziscDhxYkvLZQIVEXo/D07y2qj5SBGRKwroC3RJR7oF94GLA2UOD1\r\nagK8hDC8NITOAAuJn1yRnyiOEz0bvCgxW8JI3rqSPTkwdl+1IBHroRQtaDen\r\nZSlAmbFoJZZmI8H+yHYOmqOhpjQSBasff7H9wTiZaVCdv5tr4fTU98bVRlx3\r\nJ9Ik8C5p2tLshWyjlZ1DzbaWbpWo+inwPVWcDNfUgVX5LilXFBaQstIGrUkS\r\ntJ1xZs38bdncWRCy0wW8tezcpFkeYXr+erzCHuZGfJvOFWojw/SF5f+WI5xY\r\n7zzU8WVE0IHfalfRJpWK7+kTKRUU2C2MVIHdE9kjWYc1NOWsuqIJ7HDZNcau\r\n58bQ1aaUAj88Xtbic6G9UJ5v3r1XDQzHGQpoVKlcfdVX3dkBcbKtaiIqps9i\r\nz6hsmrO1nlkZjmAzlZ0qibOY4cWSK2G862c=\r\n=SrbO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.da95e2a05.0_1667581094446_0.20307765870359318","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/theme","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.4832e2750.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c53ff525628976429328902078a302ebf8eed05c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.4832e2750.0.tgz","fileCount":42,"integrity":"sha512-qhQVQnFX9njyivCAcf4MPHp0vV+Zz0YhLL8od9uWKL2X0RPpLqrHFZuGhIKEvSRGVYsXeuupFaiha3BcTKO+oQ==","signatures":[{"sig":"MEUCIEXl4QI3DgC4sHNPMJrzsOCiCy9w+A0brLRa1IWOb1S7AiEAqm6VmFbMvCsaQZ+ntB6jJPYOTp+lXt/VFZ/TEFZNyJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXxvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7TA//YbFbqMt/4NhRHi0H+yM6pEV52qrdjnmfbn+/X55aDhhenxp/\r\n31qtHH8xNzeRV9uwkovxUSVFbxrbOi2sct1OtThEHllU0AUgXw2/ZYN2KZkD\r\n3EuiuGPxMNgEC9JyPa4plls4adqSbIJcXSqYrxB1vdKOnTsoLQUP0n2tVVAN\r\nSejRX6SzU0xcJlDLMYx/h3ydqsOCXGOYfYFtsxRdpoOCD/soA4u9pmfUnJ6E\r\nU7hQYBgxju1QWPcPZHXuA7ng1dtTW+4eE/vcYq/EwsGYuVBqUDryY8Kcz+dy\r\nNlL1nq5Tw/ICnZjbAaV/t/L1FblrjOHLvRL6+uaVnp76JKNQtl40LB2bLA4w\r\n5JLGdee5qcuakD2hctw7vU4UgvvIlyOfnG7bN+Vpa8+UhmhIS0tmwDr7mODS\r\nO5oUg10gmf0ftBK8riUDj04L1vMD6zL5n4ms/teVPtgA7mvWD3mEITookGcf\r\n9sxZhQn6TSSGG8QwSyLFzpI51mmJ2Gt4/2/f+8XZKRlHJN5idkYXCsJYIOzq\r\ndSA2x/ygnn6KgKsp5nZZA6RGuBCWYV+Bao67nXQJhnP96lgEMTy9M+YKXKF+\r\nsVQ6DmEFl6kSClFlcsUeeUgwScm9c56PU/fgyl3RldnfwxkK41yyIOnxMjEo\r\n6w5F81RUcCGSlUavUzctXTzZDaMFxd7ilMQ=\r\n=UvCc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.4832e2750.0_1667595374922_0.5190244066051888","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/theme","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.215506426.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f5022881572451111d4fd4b03474051d0b1cc40","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.215506426.0.tgz","fileCount":42,"integrity":"sha512-u+In4e15f4U32MOhsaPtPygSug7Wb8T9MnWAJrD4PHGLyWRuy1JhlNNjScT5QIIQ+YlRQQ3m7h0+C5mwfLI8UA==","signatures":[{"sig":"MEUCIBLmdGKFPV1n+CN+fVS2cHmZBgByAmICfBL46Fx0h4qtAiEAiq7UY4j/D605xMhdzIf+qexfS7IhGVZ+cgDIcdrSUx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbbIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmorhw//YsGFZDnraB7QvfISIbtqWKarUZ7fMOHAnc08ljSt8wBSGn96\r\nSv2hmNeat4pVgp19GRsps092M+rqMJFF3KVNzvRLTGPRW88v7HVbOO33qmfP\r\nKz1AopFvUQZHm0z/8NXsIwXXTbTGfE862u3wrMakx3eJ5VEQeuY81pMQgiB0\r\nQ7ZoC56LoyjsCXyhRPjKsfwNyKk5vTrbB3/Z4TD9N8AjsVLouWO5l/lpmcF8\r\nrBdizvjs8TKOQDSurPzwFk7Aaxo+mgIW/IAGENQ4OYQrGO3nFlFnRb3oLee4\r\n66CQE8jqdaiGdAZ/+muLBzJ4g1LZgwiiG6fnqQLqqwvqfdfOqv9vfDd33L86\r\nDJ16Sdr/7YGUgqlNDAY3u/B7Jh8uhQ9+PWr7AJJpV59fwQ93nfzaxnjEl0o8\r\nhCEoKQQmmoHI246i4IxCYqYGHtXZwp8aghhEEeBkNAsf24F4sEIxvZVPOaf4\r\nv2C0KlCm7cSFkiuhx9ESugtXVh6DzuU0PvJMbLatw2ObJosfxRgP8mPKs/qi\r\n5P6D6UPjGRHBERnxlHeR/+33eLjqUx5pFXD5RjCkVbsN1gq/bsx+oLpWESCc\r\ntrNkCdmqvSB+r1pRzYu+e2IIQAtWTHrxm7qf4YpkcC+TNalhDiFkiFyxwHnL\r\nOfyFqENPnKIAzF/Fi+hepSaOmftYszlnY0E=\r\n=J/Fl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.215506426.0_1667610312239_0.41162665602601733","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/theme","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.4cf917476.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1998cdb2a1257e8abbaa62d8da318caaf08d10e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.4cf917476.0.tgz","fileCount":42,"integrity":"sha512-4zGrzCOdc10Afxbzt+9NWY5aHhfJGYATOnPzRcHRYQ9SneuCmNmxL9K/DZVJxdMeAARoTTZe9rWZdogG7UaT1g==","signatures":[{"sig":"MEUCIGqI2HI8Xo/PI/R50dJI8Zaqq9z0QtwhFa28YzP3f9Q3AiEAw9gVvSaUADCgWHsVTZZbe2EuiC6jTANGyBIf45cXqZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqVlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVgA//XfTF1MXsG06bozyeI9S/Cs+4qjXxGUDnHqfOcCkmYWuUshMY\r\n+upe8mAju+en+uzQ+dCzVHwPHyPNZ97qI1KWMyYOXWAFpWlhg8Z32t47V+yL\r\n9FpuijlCat7kOariSNND2qt0XougC1yQUBR9N2pZuZID5njselHjVQrvmvy7\r\nr/ECWgE4Erzw87Ig+R1Yo+HY/jbXb2jGg+B64ekaxXQ7NBOhxlQJr9/DxdHE\r\nkwZWjyc3LLR85HPWZb7BmuRk9eU7WaI0MxlSjZ8e96qz2SFFIbNAHfiyObop\r\nmzxuk90vZLZiONoYriNUO5w6MqheVoJXAUZU4Nhtk2CEnfRBT5hDr3V1HXgf\r\ncQXYQhVRjEXathJm6kg3EsTGPYVbnk+3wuSVmSoc/N6P1DwlVQ6ppf0Qs09M\r\nVJ9Y/1VJK1QYbbE/wurPvufDtIij2qWCL71Yl+uLX8+TOUd9aqmrXrhLqXyL\r\nynNoXy5+cpl7pPWWPBxqccaZbkUQLIjrIUZCMn26Ik6gdl3WzlPkdmXvajNm\r\nmEiCmJF/ehoCx5jbrDrb25LpGWAmjaplDWq2PonPBTVe2wEKZ1/Gdbzir1dc\r\nsfCjGER6Om8tyhrHlCVlJkgcv3U/B6kc81CLNXdymP9n75Y5v8JDFz58YEGa\r\nLu1eWAYKNeKaza5LnfJbDUR1euTEsuewHpM=\r\n=iZBO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.4cf917476.0_1667671396815_0.685613900507982","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/theme","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cf50270cd78f8e54b6f5536adf0e098d837e11d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.eef14bd32.0.tgz","fileCount":42,"integrity":"sha512-OXlYVsbpvGLaq8zBB6O74gAj0IdNUodpHxDwPx3wLuFFBEOW5f5IphYB446/BLlGuQW8ZWw4sOq8bdcduVoQUQ==","signatures":[{"sig":"MEUCIQDt/sjf8MEghxYAUEMCmZkkE4O5dHTMCpzvEo9RA6jP2gIgbKviU5mZCNGH/mpnDAK0E+pJJexVpzzZxoBmJApolh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+2lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonxA//cTNL/Ot/cva0cWz1z4BPr2PCJuvJusWHPr3TpiYyLnvZv9kM\r\nFJK8asf7S9qC1BmJZOvlbhAEqc+z+DCAJeykSmsVx8D7oXXkMwuvoqffTN1K\r\ndOZljoVrO06Eo5reJwtP14byrEy0kHZoj3ybjgkn7QgySruFVRxZQS1pM0e5\r\nfRke+M2wmFMzDyopDxt6eo6qMN+h1TD3z+NXRJZs6TCqI41UqtLmjniF/1xW\r\ny1NdmNwsMlqCroSiX5jmX9fqkykb511efu/zlcfttbMdFMqfynThUdqzLPUs\r\nIuGnmCNmTCoOOcURvqc7ccG2XYLZhSPPZF9hj9JKLXeF425/EK7cTHvN5zyA\r\nMrjcUvTLtita+r8RrUgb9BTcuCjwmVcKHhp/Wk01pxDjG2xxVtlCijYxCyUd\r\nBxA0xya3knBZf89Ew1U97uJHtFhn7UaP16TPMPseZLU+uQ9yWGgFBYvuFmrV\r\nnhUqUTNEyZoohBKGzN7qsC2ODJMOjw7T427WLduFO1m3G+OMW4MuclzjvTrO\r\nnutIVG4TIfrHmTH386tO0LvRpDb83WyUZ5wcSwfpWaN9stf+lhuc/Kh7LrJC\r\nksOfY7rP285cAxc+ZCLrMwryetjZ7e4X5z+OWaLeaNe2dUfoitT41vi5JznK\r\nRK27G20Hv8jzIoN6FtdnPYiUcY8hRThtM/c=\r\n=S/cO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.eef14bd32.0_1667755429193_0.40705911823312735","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/theme","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffc44f195d294d9d3a0162ae719312e94ca7b144","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6faa29fe9.0.tgz","fileCount":42,"integrity":"sha512-lYOaHEnBb/i1T7dv6xp8OgTLl7aHwhV2P1BPMtxdTUE8v15GlAm/b68O9/6MPSTPEyhjx1L/EIC/SmgLv66LWA==","signatures":[{"sig":"MEQCIFyWfB6E6/s/hTRvvG0xBrWEoM9yt5gOetC4AQl6DTINAiBgQPjK7ljlsK5GMCLKsO5uZ5pZJV1r0qmKw9slwUH65Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHeoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdDhAAjgvWhi09yqLDkksBoR9RnbxRtoA0O91CNA54rFyINMDWL3gP\r\nnsM/A7blZu0Nm1q4lK/5a/j8y9mgaHfZWMQdmly+icZEEaiC2VabcZixVTF2\r\nGFWhQquNNrvifCY37erqrGT1Lgw+IrwEqzkjQz+t9CiXkj1j645SwUFulwBp\r\nEG0ewIglktmQwwfyWzHJnSYoEEhJB+cULbvSZ1uQCiYh+PqrQPzK2Mu4SFOH\r\nZ9hx+viWDKoVyY9cGS8dStfWq3p5Whz/E46OLfp2cfLcmFmCtHQ24/fWl6M7\r\nCJfrCetkzIuQ9jCHd15NCE77Pye2R79he5yzcvFoYPj2hrofAqbRbLAR9ySE\r\nSlNVnRxHDnLCbWosU+h7d3LvoI7hyhJecVhKUd0j2zOqJjPYlUYFX+Eqy8kY\r\nbPe1SBXvSxkA7gsY0tPPJ+uF/njpJwB6F62WofzKa8mo/TFaqgvieWz9ob8J\r\n3uL7LQXQw6eDxC4OW+UezfwtvLks/G1d/m1xz5Vgt4fOO8vtqBvL4DI/rKPV\r\n7RRClDPD018VSOr3nmB43G5BPSVx+T3aZuUk9e+CTOB/OvMp7lfeiZOzDXXs\r\nCVJO0Zxz3gSbXSTTIR6VcLeaOGIGavjt74DasfCcuUgJ1GWYquTbS4occzX9\r\nYYHbzZ/+SMSVwzWVLvHX0jkIVCW7NooDx0o=\r\n=/oOw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6faa29fe9.0_1667790760401_0.07767647652627185","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/theme","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.9af09b967.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c082bbae2a781f17b59faef6db273ba10475351","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.9af09b967.0.tgz","fileCount":42,"integrity":"sha512-84f6hUNSNw21i1VgFoxk7RbqXmdR6YfHyJL024nrxiXzzs5HCdn9zyEX68qybGOMevupNKMzq+1JlfMqeq5q0Q==","signatures":[{"sig":"MEUCIQCrseW6Jbt5hJDBzCuJ1kcDVi0xEM6yWPFmBEkTQ6hr8gIgNyv4XWvIPmNfpvrBRdJAkEWcN78rJK4gsIdUFWwaUlg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU3nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMmg/+NOj9r8q3kbG6628XUxilKeir9qrIDX8tedI2NBorw+QYeoMT\r\nZXgmEAFH1DckghfzeH+Wn56CN61oxN7YQzBHqj4Il1iG9QwQCxclxEkF+4Ge\r\n8RLVTRFjf2q8+oYYcEdlVa5i8J0Jp2HXEBfsESGoc2EGZ8WfIksKJVlCJTUA\r\n34WlKOUaWD5sqcY35J2CJepf4LBCyqeIUkEPK92daa/ZpZ5XjPzqVKeKilSm\r\nmEPZmSf7Q/HeT+eRVh6fIdAXHjaAwsRHat9lG0HZRSXIJQ/PhTkXbpRFgMXS\r\n3RZi0AIEV7yyh61+yFTzFqmakU+VSOxfp/KXIHb/CvwVnZa1HnebM6/yIy7C\r\n6B6xOTDhPfCTTf03FrT20Amv9ZyKIzvdxDqhST0vsg9/aoN6/x2pYp4oKG95\r\nZWGbMayjxLdllJeYspm5AbvswBgt63ZrNkybFRAlauME6eyO04kP9bpm6w9R\r\nSKHOx/KHVJO/2CMjSQA1NNpcgOMN3j5tuVolluUrA+IPd20Pq+rfR9uIyzr8\r\nM2Z23MJF+zn7M4cFMPfRawRtVr7SUNIuFjKrJgNSJbqSRzXZqFbnxD6h6YX3\r\nMIjt3OGtDSO2Zz7UBdfS16qoWE2hyFXlZqnA0KOo144XK+BUYvKk/P3RiC+w\r\nS6K9MWu9TqdkQ1EYe5OtZ/LC86jGQEyUe6s=\r\n=D0lE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.9af09b967.0_1667845606807_0.9383969715327847","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/theme","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45012f9f6ca75eea47f19cf58ed1f96c7e058315","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.0f54fbb93.0.tgz","fileCount":42,"integrity":"sha512-UDrw/bAUZ4RbgCGeWuBriD3aDED8FyTdhgSZNZHfV2A2zjXOZEZwPvtNeQ7bWD09FsyCWEnIo2qR3BDrHHRFLA==","signatures":[{"sig":"MEUCIHworB42PasKZXMGrfuxZNdCocvaqwx3sxPtB8+B8PWLAiEApBsR6aTIBKQc+6AGGO7Usbyk+IOoG84YVLCo/Anzt1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatBmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMrQ//f9nMPiET556iXRgis04LCaDwzpzQw6t+RuZo8PyTXt+WBchE\r\n2Eb3V5QvwKLGmlfWPjIRiI88xkl8tWGNTDbhDoeA8fBVBCkLHShQQZ8KkWWu\r\nc9CqAOTDWB0b32USNqbrq/a+QkQ63GfgqbQt8Vy+1Mz9spxeCLYy5bSct1Dn\r\nWWXpNDcrB9D6KhlYav1DOCO3l8VKchk3O1dnhDMuV0lV/nAjmWtPWQ3scvc1\r\nUnzwJucT8WifBIgUaSTfT8RZqdTg639C2OCR7dHvUsu9IzviM5NLO34q5w7p\r\nLFimraE21QQjtmNXipOLxi/X/wQGuDiOR44YfMNUlaBK3eEPWKATnIMnZRWx\r\nVhb25KBimUndIjkp7hXFCT0qTwhETwcjwE5zXC0l0fG/50Mq8Ijh6XyNV7HY\r\nqzZ05Ya6636KtPmG4lQUy3cuWnEgs7JWjkP3pI6rc4BfUTr7CF3ONPKID1Lz\r\nnt+ombN+JLMGB2CTtD5K0Q4Bgw5ETU6/8oyiSFHgFE45u+3fZw5nv/XMPk9Z\r\nXOaDi8CbHsjZXYU7PNqGrE5cU/SxDYYEhsWaTbCBq6R7+vyYXkaAyPsKut3w\r\nU4vyZa3TIeWszxtYssE83HvXOeVCDiHy8P60VXTR3/MN9qTGI2raI/xAfDx0\r\nNJozKKJGO3etRkI+bUsBFvUGGqxeeKgzi28=\r\n=nFNv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.0f54fbb93.0_1667944550250_0.6825804350020594","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/theme","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00105341e8886b4499cfbeebf186d35b18a396a8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":42,"integrity":"sha512-aIvt+Tx6rFU0PpOoJrVjMTbzrQ0HyssdcetgDnn4Hi8h/zsZ2jrYezUFtM8B036giv3gjKkmgoE6kJ5nVxYFCg==","signatures":[{"sig":"MEQCIEmpMbzKDpUdc6ni7U2O4gzN9ActtTS2Lc+DsGZYu26XAiA6q86Ebem7hoZaoKkyQoud6nQjz2GwfhKhkOMGPUwUig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaymxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt4hAAgnTBCnjwRSRhFYPFb3oj0vSh3cei2GMlQqYUztzwnKw6SWBm\r\nzTKvylsvUSD/eY7DhzKIM9BK7XgWTIjBIqiK7CR53hQitsHtOUIOWlxAB2OO\r\nbryCcK9P4/+I7Elj3bIJrSnnC8yecOZ6i2gBT8fwoIGdN7mqxmM4/j6YoIzK\r\nchqN1Jeg3I2ROG4dvMjSqeE6cBwdDf3QjRAwxPh/N9/T9o7c1dL0L1igUB2N\r\nuZWr1OutAuAfHd33Cs2E3IKkSvXzpyjDDgqr/w/sdbqlh3EbXjZenQcRo8XN\r\n/LGt5F6SaZW/ujLrQm3buU5nYInAKgmfkfUvLOHPwZwX7lCQDHVEGFvSVOoE\r\n0GjhfsB8TX1aVrBT9+hqtrq+rec+uexWmZgrsNpLRT9ZpGMWAOysdCMPqiyS\r\n1EhzqbIAYmAeOKXET5KBOWZlDEHvD7x10p4eWRnDlQf057upx5lBYhbTpMMY\r\nd2j8spjjfcdl0K941v/0Vd2KANQ3NanU2SK1T6ApDSKFhrZAPVoduRYzlrpj\r\nzM++NqYilnhrwf8smP58/wt5QXFeUhOmAsnlw777sBjKRrIjAdhtWv+N4i79\r\nb82XnUE1Dlp8vzIG7G65KTGdBEcS4Wa7NJnQRiEPrffdpMUSFdvdiwtwY1A7\r\nQin4zGCRS79ej/JsQ85VJ5OUfFJKxaeqo7I=\r\n=MuFa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a8d47f9fe.0_1667967409423_0.5721796716011514","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/theme","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90d432cd163152a0199c55dcb6b46f08be1d1259","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.66a1e75e6.0.tgz","fileCount":42,"integrity":"sha512-ZXeJCKSqX3K3XVPF5OvF4bWFUH1eWheDVwYHp5f2VnEQbTpR62GIcFs4d9905welDBtuCPK0aQc/54wsUVYIJg==","signatures":[{"sig":"MEUCIBXmAB0iqrMbwXAH2oVa4wL6mmxg1IDlYHzLB7bmDoCLAiEAqMWZF/JyyUSCtYDixlhWIiJlbKzZ+7VFVlJiKrh4Z6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3Q3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrO+Q/+J/dbYsVMJDBXUuIVijfje+btD8exzC7Z5LOsKGrjpB+a5YSb\r\nbylFmKkA04IHM+/KAv+qSZkbAHorLe5ai6Z8ZeoIMOwCNlUWn3qOhiWGDNMt\r\nD4+eJg0MSOEHJ4db4PVTxgNcdDWqA/gGPqTOBqNSILGAKCyus512bmp3GKOg\r\nLx+He4YDU32Q7g3F5ciw49yxnFR+z05G2yHwKVZCwLJrZCb+yJNgB9eQVP1+\r\nRoSyw8HnVW3AFmzhTfKS4SZ/bbAr4fC7zhsqC5nsgmEK3N1H1UQSoH57t+BV\r\n+MC2KWP5l+Q6onhtYZk6phVzh61EamBKtmL2L3spdt2Udcgczy68ktHkoqq/\r\niYxcCkjkHOXKAcYl9cuUMhgSL/GBkP1TCCTjXlO8z2jktsRwraDRV76Dn/hW\r\n2CPrhnhUzeVIMrUakDk4yOzXAADXuTktaQnQk03TiSegqZHQUfBShYfw8dPv\r\nALFKARSRVqg3uJawV+CQ65tyWv6reXcswtn9WdtGOTm5OPr+kgwd2/Kf9red\r\nQT8rGNvkiJQuylUW+knWHnDrvUnJNjqcSPzjc/XzxrVmJFx194RG9G9pRVOj\r\nTyl3je/GIwtwyDIqCU9yOtvvYKjEDj77ZhSAPcfz37WdSezbKU6n5nYmlr/d\r\nHWVACNmznJU4YqafU3goQcIyRldFY7JADuw=\r\n=+zGW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.66a1e75e6.0_1667986487312_0.0617733463613972","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/theme","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc7b283f095dc485a8243ce72c79d5e8e4c20951","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":42,"integrity":"sha512-/7YmtSgF0Wx61v2CW9hAB12UYLjKqivJk7NO2YqNlkuYP5RJQSfoNL/c51naWmA2SSD/77w6uvhb7dBqTF0JNQ==","signatures":[{"sig":"MEQCIF3shZaDKqTBddBdME4/dCVvF+hodVdhTJELxEEJy3FQAiBEzKsn2wdhF+lxf9b/tYulDbNPNY6ECbkG686sGYoNqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":235257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5R7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrn9A//SSGMjK7GFlT/PyawvvIGPOuu61RG8RKVzxjfVzcy/HQZiZfa\r\nWWFOalwuQGsyzHK7ogQogXdDx+DMrynccr1ty3BpSL3+7m1Jmmnr/ZGwMmb+\r\ngj9Bm3cefFOcvIxdewMGvvDeqtPxOlJJpZWxeE9jUIDDhHLWbsa8mNoCJLqy\r\nrDJTqk5hAVhtW7b3K34iziPPvJl5XRzVneU8BFlkev43jReeQCNdv6Xe+eTE\r\nLNUrvu6QdlJhHDoilhp9Ftk26q9u9/O1gCKy0NWLi730i/ZZdF4hvrxjpbDl\r\nwVwxIGxrTSUf4ek/zoFRbE9NVtju3/ZewNpvJcc62JC2x46QzsFwJ+1jdE9B\r\nspuyc5jeIjlE/BLtK+R+O/fHrjxVGlx2F4ukXzLqmT1MZfn+mNPgmAzhOpsa\r\nRh7kU3F07DeGB7OfMtWpmIcJ22oHupW/axTjcUruAxC9Yy523zIcpKYuVtRx\r\nDMJP4FTFqKND/iW+mwAY3ZTLryD7lUc653RlzlcvA6SVJvlN3PqJMQ2FQJFL\r\n6CfioSnKuVzION4xMj3+BF8DQF0TxTK1B/wyeFhfwJoojbFAaA+l/8y9611C\r\nDEEsOEEX3hiu18DNsi8DEjqR1nWKlN34fms47KZ+6hDkRbtwY37sQrvEaNz6\r\nsregm657y0YztTqOrSdYtbAI15YAEnMPhtg=\r\n=ePNS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.5e5c2afc0.0_1667994746957_0.8218985552445803","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/theme","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bcc086e6c757b91f58470a3af8cbf4e4a9f0a11","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.3e3f43359.0.tgz","fileCount":43,"integrity":"sha512-hlP+45Jx7E7QB3UuYH+ZG+nM41P9LczqCAa53Q6wSBhbSv16xLbMQ04pK5JkP6kFKtaaFt1cRq9zZ5slKQSaTQ==","signatures":[{"sig":"MEYCIQCc2lvb+yUicLB3rtsiKoYUdlDanSF5XsBPoKG9LvnpmgIhAOzDwYOArxJVvNFDbyvN8FqD15x3jJpGMpQhy/tJ3E2L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAc7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRdw//UT727UqVaC0UMooB+qgCZvXPUEEx0DsEDXTIa7TJ3+KuhtoE\r\nrLTVzBnuPtJEs8AaQtlNGrX91Td8iDB1U0aIubqTE7F/fGyU1lBfpab/QC83\r\nC5LV1GjdQ0Oku7ttK3baXLRugNoBJxuYV9hF6rGA4nPBJT20jlxu8Cd7VAu7\r\nHfCUXXtUUxdbADb3TSGlwNTBuryBJYGKsttnMQm2ZI4Pb3tYFexhHfyY5c2H\r\nabxUJwH4IZ7V8YWVBOC9N8dp6OBX/1no4H3DAnBXoH0z1gGqEZWeiaVtqQSR\r\nYo5eTVis1Hw9RfFYM1UG07zHatAFnX1Y3nY5dHvil0xA5ylmdMsjTha/L7mL\r\nGrAcUKmg3YpGe4MoHNopG8HPRrvGQ560SsS7X7kOVvXrlzJS5AbuJJBwesyR\r\nyQsIEofUhWDc8fDQKDNGg6l2FtFY9ohP+w/yev1oGU6VhRYON/pSPk2e9uOY\r\nnmiiXJdehmnB4GycEa7F+C8TUKaJUPoNZ5LZIfdpsIDYLZxFr0iA8wmrZ1Ys\r\n5nfbnOdmVaVS8LvYuTt070zy0v25palimHsg01+57l5i5LQiKgG4P9jlB8E1\r\nuv2MwnSTXKZveJmv9f8zD9HFQzIdU8/2EPFyMnVl6KfDQoopNzlJ7vkdctyT\r\nbyBvKdaMEVfnYxjM9C+uBXnkHd/ejaSDYGM=\r\n=5a81\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.3e3f43359.0_1668024123302_0.17379589235036863","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/theme","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"615b4c3842d242ff03ffa0a28c3279f49e9e1c5c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.3f667fac6.0.tgz","fileCount":43,"integrity":"sha512-qantloOO4gKbDXgqKEog3QPB110r9VNdn7MTJWcpLWlL1jlrcyak9n1AJIRgjWwb+EzHXQdKXoeMHJVXWtVQXg==","signatures":[{"sig":"MEUCIQDg1yZ/CvJwUnAtVVkcFvS/gwV4hF2+/RtDDZiWgxC5CAIgKGnzVHqIPPvBnoJZUmi13kFs5ojZRqoVudDDviIOcWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCQXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8aA/9HoOuFiIF2EZrZ1yz2702C5kA1cV7ENtet6Rb1HGThGOB4CGS\r\nWJ92Ksv4UjVQkIS+DrUr9/7Og4jarTcOrnbdc7urPYtXCYG0kCTnAqsMjkBn\r\ntYS49s2r+duVt2YQylO7VS5BNKPyOJwz14nklENrWULzQ1X2FhXbXJPm0tah\r\nSXXMxONTpVco7SjJezFLNFcXYD/NUWWBJYSAXiYrbx3rTJsbKsJ35F3gG8iZ\r\nKcOaSRXh2goS8HbhzHZCCr7UAuOukIGPqC0VUkRwSj5XBT6ibKEQxnD1yMh8\r\neULLy7lo79Vz51fk4OumxFrFvL14n8bKCNSP40aQJ8nmzN/RrZPz+KpuI8+n\r\n3Summtx+sePvhaQVwDHXqmPXw5mB6EzgZtBmXxPR0HtM1TiVTZ4IJEK8OhK4\r\n5hnRlGOLmYbb+AluC0aJjj/nXslsspz1WouEC9q6r6GW7J3eG/nQlDU0wTeQ\r\nDmK1a3J95XkgeyOtdS7jYAq2g8K2tFEQXzE2scgEPee7ts5RMY01bjbXInYn\r\nTkBel13Wf6cYYiQ0VyUIlPl4RAa0j6ftOlGLP3eiN43jPDu5fPwzrYhXYns/\r\nBkVe1Yz9O703RG8cfz63STyhndsDua2S4W2mVmyK+Jcg8EkPapT1hVLDBMLJ\r\ngCIE2a/G/jikhGDfcjVSA9LeL1mBH6T+Ae4=\r\n=luuv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.3f667fac6.0_1668031511403_0.8353249009223986","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/theme","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a67bd9c50facd88edbcb9180e079e96b3269b92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.faa28c1c5.0.tgz","fileCount":43,"integrity":"sha512-VKvupgW0DPF7SW3aWGY43YCqv/LfI/1s1JhOJnCzLoTR9Zs1HG1vlJgY7qf/aHC560xfs5tHU+kid781GNDoBw==","signatures":[{"sig":"MEQCIGP7jvgoGV9VL63UvU4Wgv168HS3uw4mG5Mszl2gpipfAiAN4r8mnC8aMIIPp3RmX/F+8mAE1rvJwG0Xn63Qmel3VA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnmrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5IA//ZJSxMqGFJmECnaELCC6pdeSjAG/R8xDMj2xzcghfQCtBPJZf\r\nYoB0anvlARVLt7f3lTfiST/VmhJjXxaWnApGPUlXjFBQRkfod1676orl6k3a\r\n9jeUF92KBYCDV1h63j/BqNxw6Yneylk/GcuWUYmWqH8Kynd9+Aw5r0ZZhnc1\r\n0Z0Zl6glyY0iYHBIo1xu3XdpX4w4c5KybStrpVnYD7P/qlHAKhHaU5/U6UTU\r\n7evgHz3mA6bnFrwyg8LIkHNANhNQABE+DZbhNjADztpo61hnlYsK0yOADWoa\r\n5XVRzjL/XqUX1hDRH7LLv3PkLPFRoFkCPOKWejmweH9Vqd2fq5/KgrGkv6uR\r\nnqMsRmswjRTDsCJO15/fplAKwWE42QIkcGJ3+EWU0oY/erYnf0vImPTz1y6B\r\ney9BxqupOTE36CaTMHkPlyTokm3E87AUX6nTPLS9ah91NqkkZP3+D3SdOlWN\r\niSDSfauCCasWCyOOmdpU7EeNy+IjplNwDbM2QfGF1N83sN4qyzVEvqWlEHmw\r\nFj0hP3cXPCg1N1IjoywM0XkzZ2/kK7xdF1f0sBdOufbELEJTmre7gnDppSVd\r\n4i4MHou5+rKAAVopgJ3JrctrLIbejZ99fJtwCNXbYvq22bAPbgP+/fH4sPje\r\nsY8zSLBQ4IIhXX5JbGumnvDvwAT2xW2hDtw=\r\n=FeRX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.faa28c1c5.0_1668184491685_0.720927778204234","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/theme","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a868c7866.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea1c0cf4aaa49d2b7a8a1912116808470d99da77","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a868c7866.0.tgz","fileCount":43,"integrity":"sha512-X/4jPHL/LcnHjt6CnicOo9i1jNcxawclVgTznyvOjw54NyTMtOXX1gjtss1DYLDqvKJDWWYZ8TgV0JlhdUiOtg==","signatures":[{"sig":"MEUCIQDczK/4efCJg2Sw8/dP+HIaDpRZqeZc5POm+5ZCPpUKJwIgQl+glD5yeeazNnaAdf4EDhWY85zTNvsOsr/bSfXsUw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnncACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP9A/9Ed3tp5DBMp3ID9y7H/R1SiwUYKNs/Pp3KdNtHYMa0WNjMlMU\r\n+ZTkeSKNU4+kTISI1C8A3A+s2PlJkwy/j9jAM3F7z2EbGRf2EVEa0vb/WvkU\r\nuk2krhol+snjhQrcTK/I8x8QlIDe9+xSclgj4dVSpaH/DZ3uSuSWoi33iEqK\r\n09puPb60RsU/KU1ER/nAaqbAs7EClBDMTaweSlV0SsLpc5BJspK9UUdQR3Dy\r\nBurtmogCHFPrpwJFq3kCsPC1amwXx4+H2WzeZRiCh7SG1yhmc93s9dvdzMas\r\nP+UyMYLkeW0SOSD38yDQQM/yNoMa5REEeOJT/R5bhnn6+//lrvTXeSkS7g1A\r\n/JsfI34aG6mSWIJVA9dPbQbG25NdL6IpUIVTNGDtz+wk/EjJDEVFbVP5Z1kw\r\nzzU+lJ/OKe+PTiN+FLCkgu52CXnTi1PAbErydSfWmTPp3j9+GrcsoQcffdi/\r\nhr6JbrsRrdbU8L1Ks0v4YvS20IioQh46PV3ND5QFEmoD6crivdmOQJpS7uWY\r\nCLc83zxyYlvPfuffLMQw1K8vHj8lbdNIvMSFP+JgRTL3VysKjaHHRpx37trI\r\nZ3pjjH61Cf4bXZ+2vA0rCY0Jg6WUT+JkZJSTOziHQISzMyvaOQLALPIyXdIv\r\nBv7VZ1jF7DRdc+a+yUuHBOAnluS+a82SzkE=\r\n=Ekbp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a868c7866.0_1668184539983_0.45260432834393405","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/theme","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"617b1ed9fdb41f181994afa505605d83572ef52f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.602fe8efa.0.tgz","fileCount":43,"integrity":"sha512-RQweO4AOC5eDBWFR8N6MMwJANFL3XBW9V4yzeJirkvBGvas6ncgWzrI7XiJk7JCPvwm+GLaAi21RxOAJFpGeQg==","signatures":[{"sig":"MEUCICGaMFeh+/abZQ+GbpVux5EWem9apGhtrcqWuOZndDpMAiEA1WOwHZkj9NtphED4wa9XihHKLJXlkiM1Ho16aR56V+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":236503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboImACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwjQ/9Hxta7lLYsok+BFA93L1GcMAMiNLPMbb1juDuxQIKHAI6cJy1\r\nzDPWk3lJFqDCeXcOYSfssy1kFX9EQZYNRhUgPLaM8VGpQZErlJ3WLPRivJXx\r\n3vTifcxKYcdZKjvb9HdPBrvYIUbWpatpVPpP27IIuBYFzRjSSYjZW2DQGGNP\r\npL0nmkHyiVw5wqjkWIIGa6byco4tbIJbljZF4N52m89v5AFc/wqQo0iOuH2Q\r\nOTh35w/eIkCJR2tkTeMHhHWI57C9y7wOxTSdI8g3igsZ/cN1tNrDLA9tP2L6\r\nJkjDc8WXcA9KcRozy9sFP5RzSrbrbj0texJC+HiUIP7pPqi0AvQ8jdckEzjX\r\nzpJpLOAY4yAxcBNjVWW7l2e11fih5A7lYWwNPqljBbKnxY7WastiDozp9VtG\r\nAejI7CHXnnFv42QFaTfxwGvv6c/qBm5nxzXpq4vRRYRdo7G0Spfz7VOZ0olQ\r\nlyQWj2xxmFacXo6n45aQjuMyq1/j7HojxJpLSg9W9Jy1htBCnT2NqVFrcoBW\r\ndJkuqgHuvDKfulJEiO/DKalGPJvxE0b/fqffFa+QvK8g83D4a3mACXXHudHF\r\nHUIQn1EM3+JskBhVC1dcw5upho6HdT0BFiOsHo4oeBRk4y5GRvUtzStAm50D\r\nmnWMcpipYaVEnokwqwJCNxEOU5qVo84gLnU=\r\n=RCF2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.602fe8efa.0_1668186662170_0.4904103445000856","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/theme","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.558c2be62.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48261acef36c34baee11efe33d6bb10d7e462501","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.558c2be62.0.tgz","fileCount":45,"integrity":"sha512-k7r3EJ/jVwjmjE+cp6IIbzTzKGQyAL6P0WX9UXFN+n1s/k8oXbT6JeB1ghcZPMvApyAqCOd3dEQjmDzYqQ66WQ==","signatures":[{"sig":"MEUCIBAalNL12Vd119wXcuWaT9pP0KKxx00WPHVVIzRgmGEuAiEAnonfVY2UJZsvfAJu1J3+k4mNMICgDQiPkq5WTuH/7B8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtBOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq34Q/+Ij+fqFYP8uxeEaQBgc5CxkQxs9S4ckLYkBpnq9ukr5SHHNvM\r\nODteYxpMoDPjFq2TP5Mxg9gidZcRx8odfGLy97eIJg0FBinZ7Vzf2jMUVxRK\r\n59U3uOsVJqdrwhj65ItC0zh0KsSljNLJzar2muYbSJiJUJ1YvYCfj1qvqSbW\r\nVmxwFeAO6tR82Lf20tOwq779m0NgKdemr14QuIKI7YCxd1pj8JNNEldRuKCr\r\nsKCtX/VuUl83xISPiVYatTFOp6wj2QpLWzDi1Hl8W3oBvuB7Ias9raM4GP4F\r\nv4myUc/sC5KAomVN7R2GynemOIWtq4SWBb38G62u1OU6n63WO84/AJ3XN4Ai\r\nMaq8QAPIDnlPUSVNDuUfgOYcB8tXvgAOlAO3Rv6HK42LzSQxKuLGawVgPc2c\r\n4zAEBWFPeYzFYtzrBZ1JOyT+mKJ/lyv9saFMhON38DoYwbNGc8E279XyB4fu\r\nfK6MDel6+mE2uh+A+3vVkmvJmTCgNvs1KjuaKc+DDnnc8q2mvEvwTUmEmdit\r\nLaVp08aMeSPVCMBvmVYlLWwLNDxhkhczzz7XUNjRqmdd0i5iZ0lGVxfWZRz4\r\nqmPgGfEgGCZCwaWVZBmiq2J2gQqxncvXtORNp1hu3AgUlDRiLnu1iFgvRVMQ\r\nJQ9Pbbtqx1je0CIiaWvs7OdQOxjulCX/ePk=\r\n=QMtb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.558c2be62.0_1668206670599_0.37158825512026405","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/theme","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43b9cc1489371c23a336204fae1e811a98788cc5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":45,"integrity":"sha512-hY4D+7lDYQ6MHNq4tFbvq6LqcYy/wxPz2zbcyAkA9pMuX923PpNYYoCZK1xecjeUsTZZt1eFrOhaKbrD+GinDw==","signatures":[{"sig":"MEUCIBA40MRjc9S+EKY5CZhVf8Hy1CjYQX1aWa+7T+ryzS45AiEAwyVdcNvn7ibgJyqcckZCpWZBcsGVlCKN9eX4lo5DiJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmVzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpy7Q//SH1tdYLBgoCSMqaMklcy5hOXgy2+hvF80HDmKlHsGzYtjCRr\r\n/BzO7ZjSvrAEnZK58f/5Dm0IbGAm5ucKIXgnyfa92BfHkKCZrYQrmIcxNYCl\r\nSycG/ZVluIwNDKTtifoWhM/6V8b+9mmBkC33yqbWIEAmNdoRWqwmStqctty7\r\nn6KEicQOROBrGr7m3kdmA01oxCpwJs5Y0a4vgpMx0co0wo7VAdRDNX1Ne9jT\r\nIUqemo7lIORTyAVDfdMB6wWNsiuZstfRgz79aOsxnnyWMH0k2cqUjZ6qPO5a\r\nDTFc9RjXeTl9hJyWM7Nt/QSCWylcA92B+tjzrZN/d/TWJQtQHsPqY5EYvfIq\r\n17+r3C1QC1U8HiZTHnsnOY13zl6vbcOg0ESIafmj8O5VNecNeS6D7yplVIoQ\r\nA6pOCUz4XjTPscRAJPzWmogstvPIxj/GDSl301Og6NpUCoj4noimPR/w3r3C\r\n4bFq8d7D5I/yTeNlYxEMCWrZjmsNjG9YDmbfPDF+PiMV8bw5UOHbCB9C1BEV\r\nvi+vhDid0J4T0z3xaHv4x+YvXAAT6TAGZvo0XEJOQf3FcV6SX46Kvoc5tBjX\r\nyjkX1Dcx6qq7drEqEUQ+UQDoBnC0rKyTRMtMaW1thceu3ypyrGMV81ytlfec\r\nen6fgmdGsL06GMAliERh968bO2Mb5v6LEh8=\r\n=Ho/e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b5c13a7a8.0_1668441459315_0.2562871650233969","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/theme","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5557eb73648ad1cf097310ca41cb0efee8695924","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a6e1c0702.0.tgz","fileCount":45,"integrity":"sha512-8nCSrvvJvDBkCJ4+nVpyNFq8U9BT6udwgUwpDVycRVNaBHTBqE8aHULImuzjYjMM2IxOMjxN6h9yFb+W4UU6vQ==","signatures":[{"sig":"MEUCIBjnjIw8iThyfyWriNhlRqsuso2f9WyM5+AVPg0TkfDkAiEAwm3d1mD6lYfiW6lPcP6GbyLzlLspQ28fsltL6Y3k2Nk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcno1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN6A//QcjadMY23R6OfDhnz+O0X5V/RXU+0evGfEOVudRmvoYsTZJ/\r\n9G17MC2A5jI/dTMElUKeEsv7ZRg6rAaP3oKJZ1XfL2Gp0Z+q64QA7Wp2vz32\r\n4La4jsN8CsMvJ8L/D+w8XDbeMZ0NmRQ5phda0ilAtGtBr2rR6BosKL1VKDtM\r\nknZ0J1z7clsMpOhqAP1D9uCKBdqY/ZE2dzCet1yylBoBqcWL2I+b2bxbywQT\r\nXZFBS1BCbN41ZEyldkimCV+krCSHZ5K7UbgmD48WS5SkswComYNV+/3KC9qU\r\nNuSnsqFj1EMlya7d2SYhAUdGXrmnQhLBpuZ2z9DCCo9ZRYLLb64I3qsxTlz4\r\n+tbA+V7b12Uy7lekQTdE/dkuO+alBwuuUNc0pIKeC3uCPjt45+jkxD2q4OSE\r\ndby6+QLke5KI9lhywDONuDgNArIrrmdTi+4KBbmnhM3ln9eP9CI+IsLRda1R\r\nGerxLi8U4YolGjP7irxFI88J3EjmsI0woXy/xDolXQXxoB0MhfvPZ56MPIiO\r\nn3Ss1wR9IbP81VQdmfWTnK1PUUiq2hWySZ2uq5V89+kwPqvR4nAA/bEJfNbI\r\nq4m6O1k0ehwmMeD0YImoeV1xE2/gCvLOpkin2B2wlLe6c6v0YagauDsNmUSf\r\n0JA9i1FsAqFfMScvJNX2i8ZatLBw6ATQjLo=\r\n=uZHN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a6e1c0702.0_1668446773551_0.26889284090398324","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/theme","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bf04b5450f88edcd340e4c62e6665da6ec9deed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b6f8a06de.0.tgz","fileCount":45,"integrity":"sha512-8sPTHKQIpLoetDjpA82nf9+7bYJ7H2iGLXN6hvkJ2RTJhkJYRLZj0Qqb9N5vpT9aoctwCOpab7zYvm/sYmHDBg==","signatures":[{"sig":"MEUCIQDSU1aeceo1tKM9Yl4no6IfgJMzUb/eahBhKwt50Dw6eQIgS1NRMFSptE0hpktsQ2wXGB6ORyE7e2WxoBGBBZalGVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1uBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoJxAAguCuekIlZvwn4Gbvf8eJmDKdoX6oRg4D04t1t4UTKJX0aaLl\r\nK1bcvUM4myQJ9Qc+QlBxjY6MMwNtESlM946Lort3IPwLzoeVTBtW8OzLXVYH\r\nOKS4fpxHL0FPHn+4dXP0cOrXMwGci7LZf2Frv194VEm4tfdf56Fvi9RbTtXR\r\nx8phK+B+04Y+h+pT4Ae4zVp4VY6wr0kW47C00Sw6zDsjkxw8dHQyUa5WeMsW\r\nHiEX3+r2yKd38johgteCz1RK2g67jqulcqWQxDOUEXA/Ox5bsEazFXnU/ns9\r\niTc/xNQJgmN40gRPD/vkeDaGctz7QwoAAwmipSB8cX927n0JTMlcL1gXAW4N\r\nlmhLcesGveR2jdKPa4mDqGb2kEwlwt9j6jLEahaUvWiBe2LAWT9BLao4d2xr\r\n7ShU6n/JPlCADNX4r6PvWNVgMmz2TELqPlHK4nZLYwq3C98PKLVIjXxxJ3x1\r\nW1LyObLXodds+tOaOlSj7xfA+KZ2IGr7ARPJKYLTYxqnU3AbM+fiCK/3hUsC\r\nJlO1wLa6+zXmy1lzZddTSgPjZOwcsCUkij68qmal+51VVnjQcN7uvszcWIj6\r\n25OuWHRidRw3RSBTVZNkTLYKLSFE4hR56JNDw+5X6zC7A1r5N9WROaDxZNSf\r\nOqnJ7fcdnoMu0/KygQFsSRRYTcbAOXLf/Qk=\r\n=xt2X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b6f8a06de.0_1668504448940_0.2842219689595311","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/theme","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0f0afcaf3f92f0b6003105d95675e00befdf488","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.0163f3ba5.0.tgz","fileCount":45,"integrity":"sha512-Wn0789LxoaeP+WYobjaEWaazGGUKxJ1ikedeKxtXFdesx4/cRQvczaNvpnCSxBP7JNHSobltY1nCFvXaBplDjQ==","signatures":[{"sig":"MEYCIQDOC6m4FavjetIA4WnD0BHc9EHcyWNWhqNEqA/GaOHyZQIhAPg16gNHMVH5PFya+8bggLTuPsjlWyI3u7wr8uwosFpz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9PiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTVBAAgdyuGseAdia2gSuwgjJh7RqHpVNy+ieZZGfiqttjeIk8NjAE\r\n2ozeBpjFNV3Pk7x2woH/13TXK+P4kma4of/jNHIDB8F8etMavYwDK4S9IveN\r\niZ4UPCHn7WWahy+LNcsQwUlyc3ZsjvPzmbWNB2Hfg2FXzO5vp0c96KIWAIT3\r\nhjR+YdpNk7HYifkwJ0z4mAaUtU/A1zgGV8nVdA47HOo5KFpyyNRAYqupOp6J\r\nw2JHKshVNkw25UQMxIcHhRIvF/M0MQzSej+56USZ0c3bqGF2wfxReq52AHbc\r\nFeVSS9zcOfOerR/UkQK29zymBYqdnutKiyRMy6wo3TZkSJM6qzU0/pkxclYw\r\n6QJ68YLltd51m0W05RlcQDs3UerFWtr/X0+NxB+vC/kucaX4jc3w0SuivH7L\r\nASVZuBQbONU4qXv9drBs7jX34GXw7W5x/qu/B2BHg/aDpEn/a021PikU9XQ7\r\n2jPOXCZDXxQThZpsWJdkI9meDPLcHvvOI6HVtbqxM78lBy/wEomwQ5oRlylX\r\n1Yt7XfTTOnWaKPHyFDAFMWmFQMW9of9XyIAE0bwljWmfZuYQ6sBCLTy2ncxw\r\nTZethvfiukQ34TEpqxhl7ETlgCaloePPDwJQsAIMK6z5AaqYAZAEKUtjRv36\r\nYV6RJNp41Mb9Q1ZZ1G0oK+C6g7iRVOE0c48=\r\n=W0GY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.0163f3ba5.0_1668535266705_0.6159877219995693","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/theme","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eab5cc78cbb5b2fd6f97314c86411d12a32674d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.66c5cbb94.0.tgz","fileCount":45,"integrity":"sha512-SbUuHmi6qzTl0dC5Jzk+VPfCD6IIHiNyPDEFjRkiqLY/Uv1kn6hFfbM4zX74fZDGIzg961sBm9EzA+UOGMn5lg==","signatures":[{"sig":"MEUCIQD4cnkif7sPbYCkahhU8PiPneg/t1GBY78GXH9X5O2dNwIgT0jDhaW5szmQ0vEpP1kb1kritB0UKMHPeRDym+bD538=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+h/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfNw//YXLGa5dwlGSvQQjUGKQU4TiBo9drUyAU1fpwTbKkPsblVFGN\r\nlXq7QxQCFFKDQfwu4dYKDIhZbscd7mBmjSsDYHggK0hN2jqKi1DQ4vl7ckZ7\r\nDPUgokRSz+1Z9wrlHUbzbu3Ka6E1THie82fIvDq9TxjG5Ms/gbRPv5IkX9cQ\r\nTym/iv9h42eSKG33xEjvRQyB66/q8ffRwmaifUOBROmd+2GHZ5ib+n5QhSeH\r\nuG6smIqHfWNZfVdaFeJka7POzIhqPmIqwSfpGri/kvJ8cjF+aSsdzVPKEfOH\r\n/TIAsYJh2VAicqpjyUzVHdpP1GmpP9obuHfgf/X4nJxclAYeFYHh8StARwWV\r\nEdv161zNBvD3HsTu0GeTNCnyr4P8+bQj4c0vxwLDrG7rz+Sb8HWsqSkaetK7\r\nu/wWCmDcia1jezh/rlIW+azzh37SxlZqgkYpncdfj1Bm1FPEbBIN3UiEhF9U\r\nZq2FBQteHprrAFlQ18OGUtxRiGriIS7EEr0C7XueXZN4fL9BijuD6ERW/ZpS\r\nzwQfYYK4jos4LBxcl7UBzWSRqVBc5NHX4goIGd5WaQunoHuQCK96vdwNyx+8\r\np/O+Weg9W05uDrbiXkqx5kVLAFM49ovEf62j5fFHthjhbYYLWqgu8lJDgak1\r\n5F7OvXVPZYAUcDzC49U6i7dF+hYey5tPlqo=\r\n=99X+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.66c5cbb94.0_1668540543358_0.3236313609436008","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/theme","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b01136063.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"201e9b048946e9f318dbb760f28f9d9ce58b352a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b01136063.0.tgz","fileCount":45,"integrity":"sha512-LIQTitg39+0vPXXWitGpLcy+701Db+FolLerzs6jk9s1qVkxN9VltQ7ibw/oHZ+TR0mUsHUuodgEJdZXNJCLig==","signatures":[{"sig":"MEQCICY7kk3DWdX1vBb8CwowQeXyk8gXwxfgCqYRMUYRvtRtAiAWHc5ctvBBZwJ6P7SfK0JMO92VfLQSWX/yzgS3PNvozA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCt8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrsrw/7Bp85NMGaKdEXtrwuNzx7LEI+chqTjvcWyOUepiP3Fgi02L3B\r\nSQoZgDyXQQyB2GZQ5dGP2TpTsHrLc0HBf1K9qzLfa6vRS6k+tjgmMC2SHrMw\r\ng2chsB9NgxoYmxT2SU4aSY+z1cwcnaT+FflGSWyX6CGqM0sbmLnGnFOwNRGU\r\nQ6X2xBAfV87yQPLDDEXHGsBt3B+bV8S+k7OVFSzDV/HobKu+nKwxxb1IAZ2q\r\nr8j47q/w4uMveyFUWUKMm21z7NrvzmsK2dR8sOAv9DHm6UPdsvsmpnaZNY1j\r\nnFJ/Iv5yVyeqFm6oFfPnDhkoPu/rGaic136SAIx95cxu47npTdLQUEEUtK6z\r\npa0PGDjS/0BYX8A6hQxOfG/N7zd4FwCy2yaM53MLjbC3M3QDdzNV88hKLFiN\r\njp2OxCIhYrXObTCVnRfQ/Z1Kvcm77T6PtXz3mEZNSLbOFLzxh6GTzesR+rxj\r\ny1RH5vlFEkNGBKLar88DsWyWGSRTVi+ojG8hyPg5/Kfwt8scKTb78M1ZWPQv\r\nvTA6truRQdVqOcRNCPYJDcfKu7qaTRs6XfQYn5VmrfmkdcTRHra9Ipttl9JW\r\n13fyBuulntC6HSQBj0ytDZ4BL3pZ9Dqjudbmb3eHPqjx9CZAa6hgDlRVTLjL\r\nL6j/bKBE95J3LhDAcNqzY+kJaaSjMDnh9vQ=\r\n=v7KT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b01136063.0_1668557692691_0.45358490387601913","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/theme","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"547c5e1d3a64b6b0837030df531c5f9309c81592","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.01da0cabb.0.tgz","fileCount":45,"integrity":"sha512-saLcl9vdCEhep0CwWdHl8kOjtFlLCAmsBZ3SzZb30dm5eKxuf//xq/KDcElQuekJYioAjZQcC0To47S0SuTMTA==","signatures":[{"sig":"MEUCIC+baxSumMdiTwURLE935XHguIIWcq+Qv4kpGU5NpvBlAiEAqX8A18O79u7mAurNUEXfjhW2nZQZzrqmzrlI9KtabTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKlzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6Ig//bITU16KCOAjwm63qKwxbH0jAysh5649shSkANLtvzYYeyEpW\r\nMOqmvHE4KnPLtcTzHFhPHEOXh5lkApXYnwXixYqAs+PEn78Iw1kNSr/1tPK0\r\n3ToWENaM5UBTeKFYs4PdFVv7lw4ff5DIQNUWblLTm5BlZzXqbzo6WHA7a+Xg\r\nceYL5k33KgpCBy9F+B1iz2kIf/t8dA7yJK87VjxNK3PuYTDXxbFtp7TtX1C7\r\nfY/crCODFgReUc0WZ7yFKgijOgyERseyF8Os62X9GKuOfWUwUHSm1R26OuSR\r\nq+Ex+a5CR+1VM9H884Mty6vpZK65PnPOtdX2BmGPWVKlyOB7f8mCVasx7/pZ\r\nUsD+BBrUGlHWxFxhc+TJ+xVB35Bb1e2ZxLz/0e65o95sQj9SU4U9TUQGM/YA\r\nHe2yK/NdAHmF/MrvlKGmoprfSVsYUKMvEWcJVpZpcV5EdQqVTh8+lydOPZqv\r\n18qFdGrjUXAwnXxzdop3/S1i7NBWb/cx/rks0QH1B+21Ee2PuWSStlCrbCnD\r\nnwnOSYU3Q5DWBapYwP7SR50B2pLxDmysZVwpsdP9hSWqVINt4TbrRYxDZuwQ\r\nfdTrhwMJrru1+Kyrn7ZRaHHaV39sX3tX2/DLZUFIYRD7zBPXLFUyQyInOwZi\r\nb57Jp+GRRRi24yn8qfHdhnVfkGmQ2o99OsM=\r\n=fMaI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.01da0cabb.0_1668589939432_0.12681096524517943","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/theme","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.4ac393164.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb4a73996376b812b5eebc792df4ef3ea20a72be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.4ac393164.0.tgz","fileCount":45,"integrity":"sha512-Rn6CZ2aKofmO9+3VEBrpjvSq29YYjXWNGkjWS8rItOz/3sktdaHLtmWVpB/4lURZRM69NrKs6lF5iJso6bCpSQ==","signatures":[{"sig":"MEUCIHnHTQGrGmo35/SZ4vXF+7ph3WlPQzRfPK0QRpeR/59bAiEA6v68BKJ6eaY0zMcKCoycWjuvo5Bm0chvmbrfjlOXkKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQxbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruDg//f7HyueqUQc+/YQCEBQXaeYc/n2acReTeV/HCDESMNVLvNQaZ\r\nJJ2tx4UvdCY7D4A3p0ve2+Pmw+8AXfHYyA0yWlzgTNw1kuAkUbee9YALf6HT\r\nOExVgnLovvsxMhLiMrpXOQvUL6iGg9JyMxiU8iCh2w0u/iFhciIXLaor1107\r\nQNb0GiGkjGNPoPJNarKAkIbJxkrjRHk6+hM4KIAyYVSFI3GbkSwe53NAhwpF\r\nlyM7LPqc0PbcNh+nhtVNuqxc2DpFdQF/RlMrWYaD44WIHyp+ECDk98knukpZ\r\nHPHkcZIqrPQ1HCTs+Z0ST6nSmC3r06UoNVGxRycUoFYIXg1fcupW5rP+mxPC\r\nwi9cpW6xIEntm7N+FF/temIqc3xLm1EoJGHRlv6Avxv2aJKFtANu40KrLqlX\r\nyIZXY7cI3GRM91s7F1PT0kL7R+K2BWZ29ZUnK2lz/kGJCKuDvVD6+PfACPLv\r\njjZf3jG1HTTtlThMORuUfr+n5s3zVYp4qP3Ijjvv9vaV06UMcpir85r3Yybv\r\neaR/x5EjhpGahWtLzileF3bqBFu/A2rCgrdAeqdmvmmWXOHQdHYCWXJvcbu8\r\nKHbrF43kXQYw3GJ39HR2/Bd5Gm1ZJfzVaEb9RAQk0TH31Sny+r1cvHnQkmIw\r\nYs+zMz48feO3yaL38Xq3c3SDEaZrPT1bVDI=\r\n=rxHC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.4ac393164.0_1668615259038_0.148684200364267","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/theme","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6048fb563.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49735d0d0db899c0ff313d095e5591b4bb6d712a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6048fb563.0.tgz","fileCount":45,"integrity":"sha512-3hN10uP54HOPB4DzxLqohX6EPOwXFlLSl8neUBmSLuat0QU3h5sJZNatk8uMX2RNHCraI3PgulprpA4sfLS3yA==","signatures":[{"sig":"MEUCIQCdRRDqPnvytopIHRGKe1zRaTRPd9sdXO72P2IGQrV0mgIgFayuhvlAKaZgyNz2hXtV33caevILR6rbSjfafdoElpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQzmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTCQ//ZPJwYQkk4FjUNsc/nxaYOozFhOt+DZG9UuPLmeBPMiCPiDK6\r\nROZdSia9Wj5bFAsvLe+tnsLtrDBViRZTKtrI7C4AkOULSkH+L/Pet4C87YyS\r\nsmU5YXkNrmB+R/KhYrwe9280Iy1hbuvhWmp/g3514kWHZlT+tRsVM4dTHwEK\r\n8z/N+9eXHn+QhtTasaxgjuhurivKatWNKEJCDkg5g2IeAf3ggZUt2dG8B8WM\r\nt/J7dflYee8O80zsXEDUSqOD0IhfenXTCEGNafKWznksTcmYyiy8Ol+Pz4ZW\r\nVvgXnlyS0Iyh0hrPt/WpR7R7v1oBnFqFib/letoghfO/Efoq2YIjCxO7/BW5\r\nN0gT+spuhKJhzJ9oeGcVD6uBjiVjb5gYNiTKjLfm/f7uqKpZ1p2ixmP/WjtA\r\nimPSj4Cxdkx6LyfLpXqvy4vdWfvlapolas8spnTISYPMXk3hYWnvLgNfZ8rt\r\n32akJsp2deoldU526JP5aDLv6cxAKxiBe64HgPiKyR2jqhkMwZIAcC3aAQ/w\r\nT5QF+1d+rpGg6ipz/mhtGDxNg37EuS4i48rM3KSEk+Iakm/gGPltsRuPmhic\r\n33ebEY7zGCnFVHNKJBzGlSEAAaZE82eyq2K9YhL7aNPyhINr3haxpF37LIwl\r\nGKWfstjGZZFACMptjeaR76iz20Dl1Tle0OI=\r\n=jfnS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6048fb563.0_1668615398069_0.05742567783312613","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/theme","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.3777b03cb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f995c0f4582faaa897eadcd0a7e90c4eadb58157","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.3777b03cb.0.tgz","fileCount":45,"integrity":"sha512-eovdlQhgWLQihfLCFBqqMM8WG9f342L/vc2K+r/+Kbcjt7HG3Bsc4IooHYUMi7dajV6479QTKfmOR0Ay2pkKXw==","signatures":[{"sig":"MEUCIQCLfpY8KR6Oc0mpgdLsM5GunVitOvYhXgSsc/YLV63TUgIgAY+kBLZVuE/emFR35RG48+A9fStXSarYhwD2MzOfweg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS6aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLQA/9G1gCJyDF9v169B9DM+aXtAP2HrYtfKiJVerhtDS8p84xiirJ\r\nbrxIs7eWTi5+XMtIJEQvb4WUsnTFw+xSAaPDwyMSrKR/CNywcwKW9tVLYOO0\r\np47GjTfJPDE2m0Bo4hlh1BlFf8sJ25jOnTuF9yKRbY7mea89SIhyQRGTb+z9\r\nwFk1uQ0TyKqFClI8ptZKtKrcTx56R/Nf/jxuQryl+5wEahNwYP8/lR5OTpmj\r\nsMRg32XQnI6L7AiKlLIZNnSPaStmx7wtmuVPdzmnDou4Dufk14fzcRwoIRoL\r\n3b9B4sAQUIFrvB5WBlKAok4cTeVjjymiR/+T/99K8ywACjh4o8zl1UOy71eb\r\n/CjIgk8njcPikhmDx4P0/WYG1yMaO8fEhlgEZebRDgOjlyXbofUOQ74PZetJ\r\nAYUBOfBYxgU+Sjkvw6ACheORmA2AeLaNE5W3h3KFZcPvcGJnRzfQ2i0osJ+4\r\nS5zk6u23t/+/LxYtG4Rxlf4LK55lx8x7IT1zFO8p2cCPIPMUe4ACRKB8LG8Y\r\nFHvLOeIIFFpgTRkYXO+RChD+HlgFgxTKKq7e/EEaJKTVN3iS6g9YBoxTaepY\r\nPfD/a+PUB6QXjRpSyezPNRmeNVDfOJzk810xxwrfgdWn9VVAbBUo5P7HrFfx\r\nCzGJyfgz/j4Zy5UfsdBbdW/xpjUUSlVQ8Xo=\r\n=HKCD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.3777b03cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.3777b03cb.0_1668624025998_0.0834167045330867","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/theme","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6604bb25b442f5db6afb55581b30b7c92db011ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.f7f56fff7.0.tgz","fileCount":45,"integrity":"sha512-mig+H8GoKX+4O5Tgr8/RA+vc0BZaDZZ7V5q2TAoqHfTRsY4aHlHQoiPTxYMKmw0ClATONBiBec7fPzpNsn9tVQ==","signatures":[{"sig":"MEUCIBnWmlW1tnLoOolGXZ3zXNnLUczVcC6Pr4sTuh28YmW5AiEA8ldT1FHxkpCqQfBXAXBByveEQV8g+X4hi/amDl87NA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUAeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoD+A/+MYjAqsP2Wo1sXBLSXIuWD4HbLIQaiox2deUmibEf+vjzR+Mt\r\nTJ6nRrmIsYNBjbPP3fszO0krBBFOpsbG+lZHa9kPS7Fvq/5Jb3yST9X87+F4\r\nSqy0owSTOdCskyhM3cjHT0v9z/5cWABGlPgAnRUlNU1qf319OsRzLovkv5G/\r\nJrkFQpiQZFBQTyCtQB2tT/SIVSIbJZtHCz3B6Pe01CIOJew8F+MnPDiQf4fx\r\n37Bkpwdy5POb8M/qaIMT0sN1yikO3BLhcfWcI+e58SKXiSVliWIfFAQt4wt2\r\nseeLAhzhCC6qRDO/XKoYK2MZSQkqZZqeBhUJDdu+BSXIrE74cGeY2QdW4asg\r\nCSQB/zGvp087GBDthjT+SCJbFiOIcyhpEEWsf3YtZChDBhkXkbRLu9k/GZUR\r\n2b1g0nQiUwhY1Mpg++TSwCLEYr4EbcIX/1TxkGe93sDcEuYL+hx0y1CL70K7\r\nxpiDAQnKNlvBon5WJ/MlD664pkjX+RpLYcdIAT5sTyHwoJxAKoXZdc6cG/g0\r\nh4kf9WYEODTAFx6rvdZqUrhAT0hn1vMC8A3YChK0/8UelY3wdDf2SvaFUmxW\r\nBX4odWQkjkP1mq4TaOwPtwSy9EZ3k9sujDyq7it0+rQjRJIdy4EJccCus1aR\r\nHS7bczNruK467a3ueOfaqZ332ayXEyy+APg=\r\n=Uxgi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.f7f56fff7.0_1668628510098_0.6241668367536672","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/theme","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b299d80053764ffcf0b5dc307a7845bea19c8fd7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7c73f6134.0.tgz","fileCount":45,"integrity":"sha512-/sSJdwuPTFtkVtCKO0QQ5DnozoBfH/QWXy1rGj+5UAWKrAupPfrYeclYi+zDnFfss1y06skQT/Dx41RXKExccA==","signatures":[{"sig":"MEUCIQCFYwv2p+aqlfkxbjkZPd4/UhcvnSJLw4piVs5JQ2RvvwIgVfJhiRIA/jVcYH1/y0fLsfVXoH3/U6bNHulZ59KVgds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUDwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4ng//eLe3IxQj7hm9dffTNzbHOlZsufRuofmI0SLNwCIkiTJlul/G\r\nRCKl/HZ0rVo2RfgwRgqkO3XLTrN3Dlo4J6tmvZP9NHs0YZMJ0Bk7lxuoKdQi\r\nUtIepVR6OXmdYgtjzz5t7HPl9z6+R6aLLdoos11DL9MbMH2LZw0THWxUIrHT\r\nrM2c+LJ3VcAWP7bXp8+4BXCChnR3Nv/LhHUzr39OuElN7e9+jdQxvQsLu80g\r\n0gWL1kDirDg1x6M0nY/k4QcMcDcItrVuOCixpIj/Kz1Gn81ulGbYU3OcJIkW\r\nPVRYkQU64zCt5qngPTY8kYSxRvo4vAzBsJ1nb0yegn/Eq7ZVaTzr3NB1J0K6\r\nyPygQnG+DEG9wH73Rhr3YsFwf9ymF3+kRZFXq9t5fSbGzENgQ35HQE5jIAlc\r\nwUu3kXOdX+6KzeO4F6K+SQp+0Z3ZKFWvolUwE6F5mA3vxQnwWuau7f/ITHTZ\r\ngkoWBC12We/w1ybbbrYfzpw8eIB67cznxiTlwdns1qBWAL1mTJoPEeAMYJxA\r\nWvMvB9Z04QOwFYdeJJotWXlsGmJceI3x7IH96rKMxFKpZZjeJdsc6upQJH+J\r\n+lwHDWeb1jBCbgYVDqtCvuPmURwVfcnltQYebyEK+oC1sotkGE8IIVg6dyUM\r\nv/E2civShXHXq/a/Neq1CC9s8LwRWEhm3ew=\r\n=c0zX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7c73f6134.0_1668628720092_0.7362746918288889","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/theme","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.f1e037150.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"509e3f9a0ccfdede8c5d8448838143e4a539540e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.f1e037150.0.tgz","fileCount":45,"integrity":"sha512-ZVAV7xF0HWm+vOBBZwGyYAS3W07t5KZzUx8A2+oSde8KR5qVIMVRE2SOOWBXwuUB0t7MhZB4hFPuSPQ/dEaNag==","signatures":[{"sig":"MEUCIQC/zV20t8flSWvYRAujpvvF4zwwBMsBv0ufqMZjYGcbRgIgeE7CObo7Y1VrPThmITaZ6dvG3tMHx53NzCD26gekReY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUI7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYQw//WaYW1Ef1YpkhhnpedA0pxpYfk0KPnpr5jsq8k0BwyGYDY3Fl\r\nfAoOoBAantXz7hhNbwi24aT0LmPRulhqCU+nSRp5luZXqVVYPZB23rxUaG3G\r\nKiind/MTpcT0p14Q3bUGOyM14OCB2BwWxoSAgUglh+QXqtzkPtFnp7f68ZVO\r\n/oQ1goEE/G+UNgOsqSnyR5BZ2pXz9JsWL+yX8+qOu3Js3jstEXjWkSYHW2WW\r\nxK4A9hTHwEQUkgHSRBsr4qzpfhgVYwgaQ6gBT5wlCAJeNbjmPRk1UXiSzYU8\r\nXQ5zOah+fYCmfszdaoHjybDgOZWGhZKpuCAS1S3eAhvHDdVmSbR1PN6pNLSK\r\n8P2o9qSNzpaOBj5pZPCMe5kisMZ08skBl2+C7nPq7oYqf/KrhVWHmROo7pzX\r\n1SQZ2xMS77n2E0MdTBIFfhchYhSdiC4PJ/Hs//96+pkFSfGakahEGphTgvJp\r\n+/6yxb1otIGEXhSalZZ1bQArAMuM7W1Y+rUIiqV0VWcUCJ7x8UNBP+6AiCwP\r\n+G6C5gCrSLZg7CEM1CSpknHXYrr6Q0s1cBI8wODktwNoUXbO96r/umO5kOUN\r\nhgWTokbt3wCFpuyEFZBBSvTKPr5XpgLLxcf0VJ7wJkpe6F0Qh2CoQGNK0FeW\r\nXfHaY7SszuVUA2obgs4qe2ZkokJQW8B7duE=\r\n=PKSt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.f1e037150.0_1668629050818_0.950026397933383","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/theme","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.40b18d043.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2deefd4fb5e9bf73319a2832f37925137aacc153","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.40b18d043.0.tgz","fileCount":45,"integrity":"sha512-c2ITTG8xrkEA09PJH4o5f4hKCRC22yw5xT/R9R5xA+0q3EsuKA4Kbhr6apuEDWN+Plytb0CQhcB5kRW0WNG7vA==","signatures":[{"sig":"MEQCIE4gYFClFyt3B3+D0guTAovbimvH2QoPoDo2Y0Wwth4cAiAMnCO6RBr1PzsE9kXg//BBGgiVH3Axr9F94sAx6u0FoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWr1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP4A//UP1z92s/sLuyU/7w4HrfWIj6e77Ej9h+tAiMg6WhwDaKM2K7\r\n+3WXpKdvlXJIC1qD8LGXOwqZXnatxAOeH04SDatBL72JnDkNx6/dqyMBdMuY\r\nk46pe9rNm8byIok8HI+fzszbvulGRPCQOBBS8MAGUo+u/bMLunaFSe/U9fwe\r\n7p1w2MMSBFPf4FLVx6P+hEOADssaBSUlxNzk59Q33zuOaBPppanyT11AixHm\r\nLfA1qgWT/B1HWYnseZWDEBGHqxPCp7QBPUmnMpgWWOUNfrL6btB7T3EyKgX+\r\n3DTt55zrShuvQQlTOgYXo70mqPvcLZgO78iqPplauwtSY7Js3Gyr0degu13E\r\nk3n2PO7EeCnoOaIwa+t3DjoeoF41z+0wYRCC3awoloViI8FZHEK+MaLvmG5P\r\nW7+REh6fQjxClFIt5GqAi1rFpHgy16gRwxX9SIHsX4pXz8odjVkW9AAjjBSb\r\nnK0MBMOs1FG0fHqLGluzg7ps6qlnIr9q83r7ssDDoM5I0/tFU5IkSyy5qX/n\r\nQPArP1WTRkcrx6/InleVDZkCyKppdBUDlDS/HqltqfKHqkGHNhnUOode0Din\r\nvTSW0VILkoMrJsUeSafozVgqVj+g4koweyTMvLuM20J0JIQq0an8bHHnSrZc\r\nm2Fh8ROzcNqha4vxVzsm4VMspWmrRbzzeb8=\r\n=1QAf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.40b18d043.0_1668639477665_0.8157230314035993","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/theme","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8728dfda3d5ea65617643bba08bdc2c37b0ea0de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.86bde5c06.0.tgz","fileCount":45,"integrity":"sha512-3Rdr/J1xhJP//G0NcFoa/LNzFGr7LEJc0kX2KpsYIsVM0PSQPujgzkgPZnR7OtIpTWPys1jsXdxEGtIrp4v2Qg==","signatures":[{"sig":"MEQCID4V188w3D8BVOnhbPQz/jP19ewYXscBNyRTixO4T2aNAiA8HT2MEurtiYSAj5NZGVaR++sn1B/87gv5g6bct4vMFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW1ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH9g/+KPp8Ydy5AhnzORVrdOS9hA3Ls79W1PJbCRc6YltKN+DRvp3H\r\nL5dFWsC+IEHrKNB+RPHKbZR1nUKqyo5KIMcGTK2JwvnvYYH8oxfahIF6+Enx\r\n7ei/Nn2ohwGDha7qw0jHrK69QtbIMwNYCSjbFRtiqMwk53njXCJiqi/SQWt7\r\nkFih87d+ovEcDrP+gbCj68lcdaZJLIA2V2gct7l89ssnjTDoEqA8w/cjbI2t\r\nSQH9522mpCt9ACQ7manruoOc3djhmQq8tSLDTfR4Mo+geTPsiyJemhs/GQqw\r\nZuK495CtKFH8wO9Csg68A9rgh8pA1oBoZ+6NGwkWz9lkZo1Yd1LIvWlWlY/S\r\ncW/XQyiFBSPKN/ePn1lWBttTzq82dm3zpvv3AS+uU37QZhCbDk5sAMR4vlQC\r\nrDyegwdUp9ovYhnl2jNgToyU6DWevftqj7/5HfsdzsOx8/16023aazIg0hcr\r\nzS0yYA3s357a6me5vZWqTpI7qdQchWCi5iRlRZ7p28BSFJrDBFlsQh6pjXvX\r\nYPCETXSaVri6YTiOCuQa3tTEjc4h0q8yVwn1E6ioneGzwFBL0Qq3n79WbDaa\r\nUiGmMskwUwZbR8EpqVbdqja0OKLzB4pPWm13MaRcptqTtMUqdRo8um6xZjxm\r\nKUWu4ZDcisADgqwFEeFy6TRELmpY2s5E0VI=\r\n=Brfp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.86bde5c06.0_1668640088906_0.9685071961849101","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/theme","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.bb7751002.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b67e67763180df6723b8f29407cc20ae5a88c81","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.bb7751002.0.tgz","fileCount":45,"integrity":"sha512-TaFfyPIvi5ZW102pMzFFYvrri8Fla6aYOyhLBFk9tJYvEdVxj/jgNKfaP4fUTIIJ+3NoBn5No3aLE+h/WHXcvQ==","signatures":[{"sig":"MEYCIQD3ZZYxG8z82hNIExc1e/8IHz3Yp5dEusWSnd3QTC/PQgIhAOQ13litQrlj0ZnOUMJW3FsNQayZc9hkfA7TAaOoIYep","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXlVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMIQ/9HWLNKZWj3MjVJjjozkU9F7x6E6uhVCVwBTxKHtXTqU8nLYMA\r\ncDI5ETDz5REijMgdnGoLmBXwwxOrnPK0oCSRb4bmWVxrLd91choG1GrhSyhO\r\njfL310wMgUpqaZmtKdVBWZ0uZLjQFY0kccrk6a6skbx2Y85SyhqmiwplZUHX\r\nx5zb4e60z2MnM7CG2c45v7IBHQQqbwVMIEocU8Tp0QUccG6DqluUdDubx929\r\nr6mF/mcDVlL87IrIpNjg85O2+qreWb+0CQOpcCjQHWgnecgy5jrdX3vc9nRG\r\nIZ3q+B00+NAcm2sP9KbwBCTK9Kb04ndlxlG0DRAwj2ocA0TFDovfU/GMU6pk\r\nP9pAqHy6+kZEarJU1FUtW4u9n1+SqJ07WT3IIWA7ZXhklvJrc9ARvZHbHXfs\r\ntyV6ILxdYefQI0rmjSVmymrhWYuOzXHDMK3+27rO+jfy5Z5MXaB1M3RhSra5\r\n6NLDqGf2NUF2VpNKrbDGdVYomc+U/RK+1pS7XpKLphC5flGPufS//ob25G76\r\nnCrJxmPU4qkthkIMO76vZZtDCMUEc7Y6bAQb6yimPEfbQ2o9rwiK+U1kihrI\r\n1HsYseu+3Zk3SR+Vb7HBAXTHx69+3ExD0QNu/MWwuZBOFLmGI0TpjG3meCit\r\nDU0r9vVX3ghahhH+Vgv1Jp4gIsJwbeKCiyU=\r\n=RkID\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.bb7751002.0_1668643157430_0.8715424483411398","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/theme","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"514cc286013f274e9e49bd617a6eb9cb92a64756","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.63aca9af6.0.tgz","fileCount":45,"integrity":"sha512-++n4Coxe6yOwi7o5K4fxCu3pms5d5Ln3n8sGK8NACXHX1JBddd7IbxgHbufdb0ZSvc6Yg3MAjm0fb7es15K4ag==","signatures":[{"sig":"MEYCIQChheHaUN7qdRDXFglfs6C4pdoENo/SbgFeJJ510csYsQIhAPfjOdbaTvn4M6Zxl0X3CaukP8jhh0O4GlGic0FGREWC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoTFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrgpg/9EBwNPXCnbilOtv5nPvR7iA3Ynxd8RltN7obkwQg/KoskC88F\r\nlLlpZ1kGlkNuJI+dl4nWCisGRRRmklVogXSKc2uENoNA4z34yZaOpQczbwtK\r\nPcEBWxe62tCuUGbukTXt9I9c8Q0dddNRJt8bCLgE46gEBtZVt/BqbnvbRWBL\r\nppG6X9VW1DTTzoulLYAvN+QRG3c9/EqZeTXnV38ILF6hkx1wawGuxkE4+SeJ\r\nBlhlhll7K/9hGzNXKof+WZCWvsvRqRYhzuJgkF3QBJS18R62RioYaRKiZ48o\r\navG+gDeF5d0jqZ7PZYdKn2KiyT84JQ1jpgBwnIFw6VnnSzPhkpFtTyoB8J+H\r\njIfXPSa6kVTUSPwiFyfCfM0ViCu+XtxBW0G3jnvc+OURi+jai/dUdPKtt1yh\r\nKsDsxyOzWlzu3jKgLEZbml0/0gCvdz+4zcnwHW+Rk0LO3b8ZfUWoc6ic63iW\r\nSAhSxgNtb7e40e136yatkS8Gj696OfcaHJoNteLNLJUF9vq5Fb1/VdagOmoJ\r\nu0Ktnn7iV4XHezVGj5u5W6pzRuv0JHj9xiRjehngkz5gameFSUNohNEiQwc/\r\nzjq1FrVP2S8jaAVp2aCDLUpX4DgTDjO2GM3azUooiFGcIekaqhqz5+YpLypY\r\nqUzcoM9ey1yB8hTOXjtrw50KgN49zOE0fK0=\r\n=PqDm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.63aca9af6.0_1668711621330_0.5001079423568913","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/theme","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a2824997c2e118eb1403536a4abad34d6ef8daa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.56482dc2e.0.tgz","fileCount":45,"integrity":"sha512-Ks8VxCWgTnXD8AsZYsRgKeZFf3+3tSHFcAeJ3ccMNHEgwrhoVLwBx+nC+G3tg+petPCt1nJUJ0gQcQkPkhYjVg==","signatures":[{"sig":"MEYCIQDnMILBmtt2lmyOmY8SXWCMYtSw0XPNgDyjP2slRY1KagIhANwMvspSSzMql0A7Q1eDlKUbAQZtVGLPUuxddYCreAe0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq2RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokWw/+K/YSpwtDLkrXuMbd7hNy/yny7OhPpPGKtoAo+2CgPos4Qqgj\r\njBa/QwWJTMVqcorm4xQVjQq23SrG4U5mtw6ry01LayMvuNHUcVOaQb8yMjbj\r\nGirucOCzSXO0npScoI7TJfMUdmi9crUIVBWkfIjKp25A/JVWB645a5P+hs0z\r\nZ8LagBb2vyshe1h9oBfiVS7yukFzYaVTVmA0NvKKSvsaYV5XSZKVdV6C4M6k\r\nzOcdEoQC7NLw6hWZF1bQ1N3gOkv9HEsiWkGC4PvY1rzcAnl/Q0ILzJEJJtps\r\npCvdz1GQSiNiVP7Bo31Zi8+KAG0oS+fJwMP30C534YeSHCb4BCtDKiROxz0+\r\nptto2QUF71fvR0BO3FVd8Qxqix1YMb6rV+qEn3EAMA+UFUWletrVsS86t20L\r\nwSMlSl6vTMCj95VtSjc/OwQrz/2g5m1Q0yEDsGe2mjbT/RXmEw3U0nlRXoOj\r\nu2xPBpyU6D5WyzoTKuGz7oUvA2wDWb6uU+DNCFVuLE8vonqTPg5WvJFYY7zp\r\n5KvkI8kZbKWl6aTw2QItUR5OnBl9d8Tm5gRiMOQOLaj26MS52eWNf9b50C3o\r\npbMBN/Ra5fWGtyPlA2XIkrOiWBgcSqhIKvwCfKYe25y+lfMLxDUZzVgyk/mK\r\n156e2WnSMLO+T7rnMNExIDhDJ//YfWhGXWU=\r\n=BcsD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.56482dc2e.0_1668722065398_0.9644752453560574","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/theme","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.953e689f3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c6b533cda267c1ed401bd826cd8d29597317172","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.953e689f3.0.tgz","fileCount":45,"integrity":"sha512-JxBXk+1yXXHhwHMRCjIYtDQ16tmnVb4RrRkPuXjQDHEhYen8v+/Ov/YmMj8KbpIiCAdKN/1elLv+6Vi91syxcg==","signatures":[{"sig":"MEUCIAohQuO4rJL7SAdeKjuKJMw3cUrzFtlqbb093p6h9vDuAiEAj2sP5xPdRATHYWM2hJ/x+UjttYcV8FCoLX6UVOk3A7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq/JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbqw//ZMDO9JpSWSShuIHsTsmihK6pV22fRvRF4hs1J5bdSr9O48/H\r\nbENRpc/wfHzbxx/ZFd692rRL8B4IbxpiajFtuQ8PwNjDPGUNbChJhhq/uPY6\r\n7gfoyU4V8FvVbffL48+BYbcPoKEw9aNU++W5NGOjFZLwzFeP5I0uCNsXlfcg\r\nKz7QYajerX987ffppcDEy5z75unGdJCnMJvJ3iPEmIV8EfDkLsrrjmnSiN8/\r\nX4+FiVlepMwRmTu6QBGhANCVxW4u8MeCBSiRG3ELB7+KvQxzIfnPeuI9GW6H\r\nMD5qEz9eri4q6cG/emCgZDto4TKahCGC4WIhZimTBVXc8x15Cj2YWo+P0uYa\r\nLcJYm+Xeim1hy2wHUgy6aR13t9vv6GAWUdWtF5HJeoA5FrHuYeYR31fT0LZn\r\nwoljSy1am+pZyoUWAbxDSl07xhifT8X6rq6mUnaTRwYWuXKEJ+IRpC2IBtCG\r\nQt859VMUwzjUd15xWXWhpKab9LqO/ln8U/2TJNjvCRbF7OmzLCS63Vod9B05\r\nk+X5PRoWLjBiEwLLVNOqdAt1nhxJG45wDNVGlrO40NfIrM8N48QhhN0liUV0\r\n6KIoRmnClh5Ugq4IVBskRLRcuJiLI0EuiffMHt4w7DdoopkDpOie95rX7pdM\r\nrIEPqczPuSr8OZYEwLV2ZjeKFVhBRP9+0+8=\r\n=Itzk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.953e689f3.0_1668722633232_0.4742171315551178","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/theme","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b5606a793.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"024ab0a6e2af2160e7fabf99dcef4d6412787547","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b5606a793.0.tgz","fileCount":45,"integrity":"sha512-n+VJtDC/GtK8/cBgbPY/CEqhaFAgU62XCYhhCC3PkzlMKZdNhkPHBuPnx2Gcc6yTqUlVHqCwtsekLPf41WW7ow==","signatures":[{"sig":"MEUCIQD+UiTrDJxGD7QYhIjIj510vXVbHPAv8qEjQMb5dTGW+AIgRK0BGDXnWNeMcSyi/VRPTx2nMwoiMqL2h9ENkEQpHSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1xeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMCQ//ftabeCi0P6jOzNczui5pfMGlmN55U4ykhWdKCKb/W08/ihxq\r\nTZal4MIuzuoyK1rCMUuOfYoLQgpmB70NnYPQwDKw0n61sA7gtkGFaOA7Ctnm\r\nfVh/pD9JFoaj119xUKrNXG8o9PcpS8jcZYnVgBOognfQOU/VBxsTvUHCykBf\r\nWmqtWWSGCROVZkdO8s5eLa6qnXdtpHITACBtRkDh4aR870hiPABGN8qVifV2\r\nax4sqx4OdJieR05t3cOiIXEJN5T7HX10XdHP2HvZ1Z/+3JnAeDqnQ1dhPqUA\r\nb9v5jHZ16L2ic+P5Qef0Y77Lv8SVDYG5ydnP3G6SmLWVApVoG8Au4KxwUPB/\r\noPzPMLUMF1Fmv8RI7A8F9hc3+089jH/oVzyFWUbw4liabQNy9mA0FJSarkN4\r\nMol0EwfwJDGZdw+koBlsVGCC14n3GEE1LBzenI5QnauCSLKH9QO0ZoTYfMrd\r\nX1Nle41bt2Q016UrVzmSvdU4FmbgetEO+Kh03FwTsB3Dxv+oXZW4KLkx22Wk\r\nc4QAkzMbi2MTbDttbIMzHMdE4vIcNHyqj5l1vtaWvCTyNHNbxbG0ZMKM9VGZ\r\nKL9Zai1FHiVRNWXqiYPaY0wgHyxe7CDx2hILpg9FikCDniOmmRJKxVgcUxcH\r\nPCeJ15ON2DShyeHZoou45d7FSBU6wvUf5bQ=\r\n=lRoo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b5606a793.0_1668766814049_0.8084538984469252","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/theme","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.8c5675942.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87f809f8b2e9e5d44fe26b9ceb420cce662afd8e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.8c5675942.0.tgz","fileCount":45,"integrity":"sha512-Fk/GOHY2RjwGtHnWtqBUzX0aj7Z7baOJPIZMxSnB+ncX9tVxkyJHTJ8omvXUZOdpOmu/MxNHHbhJe1SqXnIxvA==","signatures":[{"sig":"MEYCIQDNKTO5t4zMJ3a+kKF68d+5DdcWug/dyLVO+Ufa03CYQQIhAK2pScqwfhbfYBa4EHglSNDVSpQL9uU8kb6jHzpkJ97Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6GGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqschAAim/G/NCzmHkcIQJO9stMXShhqgNukaH8EmLIhEIoD2OUeHgk\r\nilh4K+4z4mm3pDu7gm7x+Ldhx5U1fsoc3XnG8mTJy1R/qeyFOQxlWSlypDT7\r\nsURaO5E4XGk6ivdP1/qWdxgi1C4CVY/ojviyqfTVnfRBa4EWvv4EKbUV7cui\r\n+tahy3bpN3CXRMJu2v8dKoLpX8qh7LecZmE9UahMfhu0CMvcY14MtHVL5ha9\r\n1XYqqdcAM1GRHo/p7fVWDMcXQJLV+pdR5Kkx73bx2YBpmXZV/l6r35+zG+qg\r\nIfsJzKP495mlxKvm+ls9C8iySxzROMqcISJMCNHVS1C/gPTjgzZPREj89KbQ\r\ngD/yaz2MUCeNZjNKB4TOJqsIzFLjXl47myoONvgmbhRPzjWGhTwgGOj8TM23\r\nnauVkt5udY5pV7lGSsukxWeLkciCbe7gxz6ojHMc7I3smhVDIX3sfGjcQyAA\r\nns1JKFUMSQ14VAvyQsoVzz5AlRT4Q6AL2btsQKfAnVDrqllCPxl1Qv9IcJQm\r\noRVLE+RevtEbGDPDAeuOTMGZAuMLYNkGkz2kSBLMqTC+8IXyPV5wcZLmLGlP\r\n9N60WweAhGkd3YhntYeZlginJXwOo6lNK+hm82ocF2SXnFK3LvqRr1jRGQZx\r\nAJPfkyC/dF99IL7X7mRvxmPcyagFsdonRak=\r\n=vC/P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.8c5675942.0_1668784518281_0.48999404553320214","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/theme","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b4f6aabbd6a0626203d8fdea4c3d0c312d380e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.697fbdebd.0.tgz","fileCount":45,"integrity":"sha512-uhGbIMYF8/Le4YVHgO4AjQ3AcQWo9orEHj3uUFHvmsp+Nmk67NVmL6yp8PPBwdVPJbVyajF42aE8KpY8anOY0A==","signatures":[{"sig":"MEUCIDbcbYqcOwripS+6dlgcPR7X97L6DBNMGvZA5RwXrj+VAiEA+FQA5o0yGWSxUj3jSUb6N5yLyZOmVuVAmlI33/egQg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7oCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnFA//cFrzpEODftKHnIoRzbv/15rkqRQBh7t7kEIkPd/zcn4Vh8DC\r\n1X/Vtmbws08wXhR8VBCHbeSNvliu5giyIrCp/canw8jcd7dNPkuJsC9Q3POJ\r\nf0se4LAsTA20hT9A0z+2GFyBVD3xIBvmcaAMhR2zwxP2SjYML2Qs1B7jpJEX\r\nN7N64ywqKy9Cwg6UxypcNxpaX2YYhasudKR7RndX5SeP5A0iydwJ+sWVNeIm\r\nOS4rlZp953JOKPTM8ITlqUUgvfoEIR+Re/mwI8StucbmVAHeN95E4ge26kEw\r\nuO7Ud5zubz2t7JU2Q5afoVeQ9ztYnYuY3uYQ+A9aSmUJVUbWKyYeuCcDp3Ur\r\nCbbcQSGaaPO3OaXe+qsidKQ+6o9csnKmQtA4NC7s1lGSfLr2U+4t7eEzO8Jj\r\nkZ1KPl8jnLd1QCLEkrenCx7TZg+oiVtXjVySlRUPJA4uRO+/ErDKPTMtb0D0\r\nwBXVLZ6aMNWcvLUku4YFzTNe8kjRQqcq1jMMJpIJoGKGfjB36ylb8addBSRB\r\nCAwa9kL56CdgxVTbO1hOCLCM2KaHXjKtI+Rb+G9LXYNtiVthhHpTMehhDnl9\r\nKAucErfUiO5ZUe69nf98BuE5zQ9xX6Su2u5RqlUbK2U0JybC2aWyOyKw5jnf\r\nesV1jMAuYgCVvEzQPQfNK4QGxAjpyfH1iXU=\r\n=zHUJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.697fbdebd.0_1668790786488_0.08609942454119701","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/theme","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d58410453.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdfacc44a855d03367085e140c891f9d61941a96","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d58410453.0.tgz","fileCount":45,"integrity":"sha512-1yRh5tdzUJ9sB+KJR6Ui/q4ikvxvZ6xgDXUqxVd5o/cR9Ge6maRHT/EFwnK3tC8A55SaJZ6TeyHZwWPTbqHU/g==","signatures":[{"sig":"MEUCIQCtHNcxzmkL4F1QcVsO5rkjWBE0qcMvtKWpRi3gkNU14AIgVP5NrPYb6ou197tVfI4lHHLqXuAgkAr5NILEAQt4Mpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9vYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyQA/6AjyV3jVL5xTnyOD78j3R2UVXAjFu9qi0RIOa1b6Rjxbnvb0c\r\nAxiiPXS64lHpLDNdtRoPIj+U9iDlUFXj2XBe9nMRhmUyQ2Vk3RyfUokWE/sX\r\nb8frjHcw8/COLmK3q+ILZKQT1ZOJ1Y660f0WRV+O7Lu0EMrxNg7G4RUrdSpt\r\nN+8K4uQuAksuDGwBkY5QIp7dqT0mEPaaSfnfYDPRyCK7xlc9L4P7MMfV0nN8\r\n8tVPLIqjACHLihBYwT/u1vzuaLYOs2Obbk2vg3ripPyafOAQtWIHbKu8xaJ6\r\n0WnIsunoc+9rtwPubtY52RRAa9NK5/EOKC+J8QK0Odd61CHIzQhtmWmm3gkC\r\nLeVwjmyze0h3YjAO5tysll8D61wbfeOn8DClrffvCUxo6W9LybvbV5TOoQdP\r\nIQ5qwzOxK0hGsgwQyN1eKXutgVsCcqU4pr20mPUxShuY+2ZhHugRPlt2tK/T\r\ncXilDR90/t91T3RXR8Mby37LIHrbhzZNyPiZxJfvFVe9gUUycevs2AgnN8JR\r\nESSyVua1DsDqrmB0fbm7QTIMuz5X5DlTTzf6CBSkqS7v5CEnPtWbA/82vWvC\r\njsyK3EBwyuSVSM2MNtWdxy86cVD2OO94ouWY8SYD1eFVGfU0vgurQhwzRIlX\r\nFtyRG3JN8uuvNUnQfI0eyWzFJWHB1615wbA=\r\n=w7Fy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d58410453.0_1668799447771_0.005427953522631146","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/theme","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"489b2b3047caa6f3c05e02223c8129e66e3d2803","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7971d6ad5.0.tgz","fileCount":45,"integrity":"sha512-4YUyQo4SOatHHH15/h2LBIyxmVxtefo+QC8bRopF13f/qq5lHpX/stK6chf1OR/z9BUxnNHZWXd2LG5SvJGs9Q==","signatures":[{"sig":"MEQCICDvyrcGUFjC5mNm6b+cehl+pdjfmRjRl+SxrNIgSw3aAiBO0o4qjKeBqPi8zpd3pG6MfhHhM9BY9EdiYrh3ScQFrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJdrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIaA/+N6dPNkB0TD/kH2AzrTYaoXW3g/bxgASGNpnaDSJ2HWcGQv1j\r\nYLxX6/vD6QfDCHMZolNAlGw0s87Dol6aDqISlkI+/nLXQDWmEtR/+xGOcP9I\r\nQC1j5rS6UaCG0ZMbtkLTN9xa1fZiM1MNs2JQ99rj69ZpTH8JZ8nf9vwiv51m\r\nlUfC/biS8Newg7CHYNyQ+qOgJwfKPug6dBim5Gh0Ha5qz7ep26numeLnswa7\r\nkxu3RxLBpeJRQBYhgUlurI7iu8Ljetvj0KRub6amcnAt0Jw7PAsuFPkSm7U7\r\nLmQlg3RK8OAisSXql5swOd1+L7xqt1UIUjqWMStUj8Aku4k4dIRuavoY0yrJ\r\nxKHKByxhS9sgTjvEPTRp2pARPzKUrg6kysZuZDIayaTrXBwm5pYBGWcq04ap\r\nQAbu04I+THpuIba7VoNI1ZxQLVwpnaIYHu861F2dgYJzwEXSDSiEKYNdelqo\r\ny2y4XCTX5verO2l/gCzLyS1KpVpJ0R7aaBHPGePRcNUOSggopEjWLAcLEl8b\r\nlDr6IlDAzPGXGt+fXke7ntBC/u1nVwkshnfLUj6McR3J7bi97lpQqHBHkrhV\r\nsHJ4t/yF7hFDBv/XcwYCAV2MOc9zu2BlHNaG8znGGLoMv315ZE0ohTbxsa00\r\ndRTsTklnpPJKsBSKwKqUHRszYgpqNWLpwL4=\r\n=Wzhx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7971d6ad5.0_1668847467091_0.9999157980449245","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/theme","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d53394bf4fd89d8f13ea58a2af8325b17cb009ec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":45,"integrity":"sha512-qvUelhwpdSuQTfUY/5Cr3CqhCAqtmDWQ02MJpqnMq9h9SXoy2t2p/DDsUwVQXK0WvkHxz1ehgFxoaQqZj/+8Gw==","signatures":[{"sig":"MEUCIDW76W88PZDBs+hOg4fSwG+z30N9ek5IYLpZXBgpzEWsAiEApTejp9zo1jepRfhbS6gNDfU3uJsEYuyYxj+nvrvatU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1iIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpv8RAAkU0BJRTgTU8VVGQv/baCp8UIZP9ukfvwDb0DYiKSDxtgjL/Q\r\nPwaLDNJVQBxme3ONN+5/GYL9ahxVLEnDsCUOjYaq2A1O+CjCs4o1jG9/rl47\r\nGM+unb0dVPghqEzYyH/KzEWgnsNb+2LqorL3uge9AjXu9yqPO46dnQKSjNFt\r\nZEEFX1YS11Sjzit0LfhZWf2f9cRV1/tsu3EFofJs8LM16ZZUiz8XAJBNJYhm\r\nACJzAwpWoNWfl3kRJ1rVG5cbpSfA0f1q7DAW8DCTEN2jxFtZjrYC7367IkaB\r\nWcEAqBvSC8k0+HRyQIj/Yjofw9BwKTTIwLy2DSQyk3zGCBX5fDUuAFyi5hIx\r\nKkTqPb4bbP5X0rbITt1EeBvADNN16WfTD+jCLggrvoY6qShu+MLiLF69ZHjz\r\n5Y+2IGYL3HhsXplnx1u4NX9ONAiR6fQYCV3JYt9uRwuwIuVjFKgWLIPIbt8u\r\nxf/C2Rz7cjmRMwmlDY8yBlTLzIxoYqKRJ1OpknQ1asxp3t4ThsEy9RjEa7V4\r\nml0MY0UFGjQ/eMw9Y36QzxOB1Bo2GUFTwsBC1Dk0oM+CeWzVkP0q1PTKu5cC\r\nwPs6zQpqHETzaHYqayppGdLpHIie6vNEyU5Qvryyzt4noq+D9mlXyx5TtXRW\r\n30CMnBPe3GHBhf2G7WWiYH7y6XCIgj02P3g=\r\n=GQUD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a0ae73b0e.0_1669027975809_0.5061991646334436","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/theme","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.96f472604.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a48038b4dc6c2cdcb743ebf7c2207cda98ca8ebc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.96f472604.0.tgz","fileCount":45,"integrity":"sha512-JAtkqGhQyMq3tRmtJ7A/IB/E8JZXu2HnFe6CtKN1N2yxQm6D8MB1NCKMHcY1l9/kYB5gnx7SpLtsgp75MBGS3w==","signatures":[{"sig":"MEYCIQCIjclNE28Y6UN4RZXCF90ZsIWgrE+uMtyAyj5pBjXaWQIhAP8rQNIsXZnGrie584aEruBlEJx3R8Gic8JyGQ2Qv3RX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3RnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoevA//ZYa+5mJsl9ertd1RZY9YK8nmfO4lDuC110snlpA5T0an5bSE\r\nb022SzLjR7owbOYZGrxkiDMz7CaXuL8fM9uy8BNOB9TtHKr92nJJ8lK5nHfc\r\nkPib2fQc5eY7jzdLCW7x2QXGKzr/IdUZ0SriP1EmNPcOXezxfwbRE8DDEVSh\r\ngtvvgHzR7gKQCQLMdoIfFzqI60ajLpCty9VF2/bds5iC5rWhZTV2mvlCU/er\r\nvKvm9fED3eW0zVZFlLMeckfrhA5ZvpKB8oJffomuH6X0YyeKPj0zaomzaoaz\r\n9dy5FTsRJh7rqdyG4q7KLBxUa3vMTJ7V6oNR4aaDfqoWkkHljlk4jJQMip/E\r\nQUOQs9nW6TE8u1xTHuli95RQDOot+aNRDRRTHgrWLe/1HP0NPx4SHJgTeE89\r\nB7CBBzRtlfosOLNw9tCWanRoUsegP/cpCvtXuQ13udfAL7QNG77Byj8RUU6n\r\nNsq0PvH08+VMOser4V4DCLtsGl/dIWsoqVZDMps6VisD7T8VJi0nbozTpRIX\r\n+GfGcvjHC9rTFlsv+MEclsu6jEZQ+3iVN/aEz0RT/S3uUFdsVbPQUdaYQOQX\r\nAV1DDjRPesSg8aWHFtWlEYFkWpq2NJDlCJqEi8F9ETxMnih/DxFGFk7DMUbh\r\nb6mc76vyjtvPd1HND6HjE4u5p2UWNiXczm0=\r\n=oLcO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.96f472604.0_1669035111509_0.891236452607169","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/theme","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"720852bd9889c041d38a71e462f727f60bcdaa28","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.18b8f31e1.0.tgz","fileCount":45,"integrity":"sha512-XLTVtrRecTkFHd2SB6Q331qQPOIizs7/5UTw+r3bHGpwl9oCWAuMHhA+WLTFfXlMDqYxEGBJ6K1J/5kGdCenDw==","signatures":[{"sig":"MEUCIQCiWOeMopeuNH7hWF0K8FmbqhmbJ/Q+7RkUdyJGOYB2EAIgA+QBNECahD9RXYKPzq9yIv3P/XSenNBSwqI4IbhG5CQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6DeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoovw//SJm+xRTh71eBzwXsb2aaiArwHdH26hRL6dEHm+HWozJbwxGQ\r\nt8kRRNyWJZloKxRy/vfx7PcGVqkRsTGLnWQesmQp4PPM2KcEc5GIxCBpSvZC\r\nCbay0qw4DtEWSxSPbpStImSgVPZQo+Ly9chwiCdHKoiFc0Qvv+m9B3pdfVgO\r\nOgGKRQTCpBGvf7lNwCHJRJiMF5Q8QFRyaQdHsFCedFouRodLcgiHPAdfsK4W\r\nazvEl83vhJcEYllrRJJSo4If0gwkj/RD9VasSxej6iTyWHFmTC3wWDMZDuEw\r\nt5vyn2KGu3NxoODYS0sNJHygC6+2O1xQKXZICY9bFjgVGyfInoUimBuLozDs\r\nA9Xz+760gjTnepj5ib+QwnTeXWNqfEdHTNHmGAC+DvSkvARPcywUfRUFTiAq\r\ntxnJRz5xHAxCevx0NkHbHnvkmc7eRGnFlZH537r+wFWRHr8H43LWTcU9ZWUx\r\nBDghOHdvj6jNxxB05+GNgxsh4YR17Zpm1JJbAKRfDZMiflfWPoj6TPnQG7zj\r\neC4cA8+2plu5ec6j+LTwZCkZ7JQoK3D2ePRpuZSF47sb7a3hjvkfLrH0yk6q\r\nDJcXYmlmHCpmvVHuHfKPecvkwPYnkmfSTyiNLK4pIGOyGhGHEY6PkUtA0cIs\r\nxESD8s3NJgNJ8jzFRbaez01pkA6TAHslyKM=\r\n=mgKS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.18b8f31e1.0_1669046494188_0.007443095457571269","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/theme","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87d473a75bebd26eb78eb4a1163a3f3b3201e1df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.912f33ce4.0.tgz","fileCount":45,"integrity":"sha512-THeyZ735DQ2PzyOadiMjUFt4XUWnijraTQEdMa/BShgEl2E94oXaIyFx5Bbavzs4wy5eu+FuNcV4ewdvxRMwYg==","signatures":[{"sig":"MEUCIBRMYn+IUSlbSo2K+MujD2ZNaN+cuD3Mbnw0wtxa72I2AiEAqQeQTeGOQEGwh8SGzvEdzzX8fovxcds0UORtj1CEqU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7sGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpERxAAnyYgP4q1q/hYJjdwRweHaLdVPnxGN1GGG6E4P4bggAQTG7Y7\r\nprN9uOSeKpH/ik2+alE4J6iOZZvK4QydWvggZ+Ty2I+l/FcaZTjNsHzJ6613\r\nEhZ9Pg2qB7CPanX2fdEaQSneAcRL/JfCfjBJI/N0br/ZHnzq+O4x+Za/0hE9\r\nsCIITrDHGAPFokx2i4CVoMaAu0CeQN9ekTVFtp3dXej9uygB7HW84E0Pwpg3\r\n5xcdEbFwRW1ufkb7eSB4sbo1S+2E/YIaksFpxwt2c1jnLBtgVZVvYr8t4IS4\r\n3kYjrYKccs8CRUNwvS9y5IqJZwnK1/mKh1FnzAE/U2GPFVRiIC3qzQfs/RLv\r\n7ma64BAhl7CWSQ4uSqbQDBR9W96EGWIouR9+4YkcCg06hsf265799i47PE8O\r\n3bUICx57VqUytqz5y4KdnHYYEN3mHoPiQ42RT4S217ADrtwHMsfeTMf/sbEQ\r\nOzId9emlrmsL11xxEDyLGzf95Q8hPgbkhwyhKJRAedhWYcEdnTATkHkv3n/a\r\nAkMednPjRwmS/DKLkz89XcfO1q1Q0c9ka7i0HDwlxg8HMspbbt6OPny6UNNA\r\nRtNOd0QQH0vv6TKspsb3GFeXBEhqD7MIQdtCTQT686SflJhG3R19sZQMj0ro\r\nrCwOTd8871WCJ50uE9gS5rSXxGLCf6unOAg=\r\n=791X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.912f33ce4.0_1669053190516_0.04916973095522548","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/theme","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"224c61ff0b19f29bd58da8fd522898f790aef810","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.1e1b1c369.0.tgz","fileCount":45,"integrity":"sha512-XgshRJ1Dk6IQUD6Mm2Hooxk5tXJA8AXPlUPwV+esMzZ7gR7NfZ4CFvqpV5JPf/JOIaEBP/vM5Y+gA7OdhmeRHA==","signatures":[{"sig":"MEQCIErVk8xwG5L5AzQm7bwfD2mBj/Sqi6hetnScOS68Lh+yAiAB/5KDi8mY5lr/Drvi8bQghi2XbuxAc3bkEoVs3FILIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm2fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6oBAAi3UQkkhvfPozSLPTXNy9mS7s5OQ+x1AYouLNuanEuUuiBBNF\r\n7IjFC28LfcGxaSVdYstjrKAgOtIYEaP+XaUyilI+bJ+1ZoZNDRxU0sFhyYsU\r\nEJ98mOx2OGRHNU+hAJcNND9GwAycyPto1OHIAZe6k56lEfQ4gr+GjQnwv6qS\r\nEC9G5HiFM8ITk57xvuU3tmWuO9NOWRDsF7Y8jsHguhNydUnJlppHnOX+b1pz\r\n+SZct80Mqn3fvKPia4zd+KdkkEYeD1clPAUnL9IV3fCREarOqR67AcnFrnn7\r\nUJxsd1NYdibmUS7TuiSy3icUZ/myPXVeFM9kdqSmSh6EsU0ZQgdaaJZWyEQv\r\n7nVRKDeh21ugtGTGYCYZijHcDG6h1nkNR96oTecFGYRTiNhTqCyyk73e4gNX\r\n70PcmRW7vMsdZgE/uHFIFzJvxzrsVh/PZL88k2t78rafHtzmdwOnBUOj20sX\r\nDudhEI7SJ4GGRpoxi3KPiIkYw9973MAhK3p7mLIgPdxD8nso7U+sFzjjauua\r\nknehRbtGlRmynLz0CbgPzHjU26j0LFXoiBmeisd5gCaYibZOq7R7XgtzzapX\r\nPe3eCX7jKPEB1Ckb7SSn+0Y5PJd7zWAiBIte9tQkvK9h8llnF5WdKt2WMl4d\r\nNB03EQL5vP+fgbntd0lBrVd4+6Up/ZmHlCI=\r\n=KcjH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.1e1b1c369.0_1669229983449_0.2814226209284536","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/theme","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dccc3e68b0c2556a3b68ebb372c90266ab076a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a2ec49244.0.tgz","fileCount":45,"integrity":"sha512-faSv1Oy52exJIihBEqcF7Mk+d3WucLqY8xD2X8tMJXd7wX829G8sZsfY9AeLGhno9o38P1WI9q+JjmZ2smyPFA==","signatures":[{"sig":"MEYCIQCvJe/LmauHacRJJTQIiZqFlRXqVDSe11HKUQEgxukG5wIhALw5zg5p8F6e5gkqJdqHGgo1UBivgz6mIy7tGqNHT7id","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnTBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprOg//Zamogl9TYYxRchhQwPPYQae5UoOBkL9r0wrwli/axS9TgaBm\r\nABssb5MLqKXUxSgLKfBItQxRJ3Ym6t9vg1tS5fohi0NbpSsrxaOawJHDt/39\r\nKQK/BGdG6KuUdmOSnGsGcnGoGvtWUwqvfXGmNQ+vO+GJA+jEKHu/TYVGAXTU\r\n3VRKL2gDk1ca+0/qUHOBN/dKIUT1vkXcBxOPHG/hl/3KAyGeO2IpIH8FZz15\r\nirLdcm+bQqS5Bh8K7jkU496gpQCg8jAEgs+wqsDc9fD6frBg0fyH90SSjkT/\r\niDrOKIlopZfb08y8dP+7ejPLaMYt0CZ1hVgVq5A3fOwurYS8yKpzSP2gGsoB\r\nt5XsF4a8vTB7aG23Y8ChO6tRxeE4KDsyzRMasLuJ8os8452OS3busAwxY1Z+\r\n6rlXxup7cN0R6EfsK2kEVrWttz40DS81J3Gh7sQ2aPFNR2RlP65PvbRCbrJ5\r\nqf2ecmDBjNdQlshO0ahLS3KQ+MDcpgma8pC1i0174yrbg1xjonrYofmswL3V\r\nUCwnQxRT6O5FIlLRITCGO4M1l5QB9s8rbsD9N95I4W1zOp+6MQjds79NpaZ6\r\n1AsSCyZ4MbGF/0ZmV6nN+DwODRWgJIh8heliBLB8ZeqgTHvztVhphiiX59dU\r\nDdFfbJTYtHUEuMIbKjTb56nCnYs2+uuzYjs=\r\n=swTe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a2ec49244.0_1669231809088_0.3983313341751755","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/theme","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"080c1fdd465f9c6e4078b172d328856b4e5f25cc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a7458ba0b.0.tgz","fileCount":45,"integrity":"sha512-RH4uJGpzCxiUzFmUBkGwokAdHvK85QayOVuBBf6qZAUDH3Pfnlcb9aMo7z3w1NvwFLMfJuyxrqI6TKTT2Un1xg==","signatures":[{"sig":"MEYCIQDxBPxeIcsXNumPlIgLLJBeromqJLEtuynJ4wHxk8FIFAIhANwf44sdp5rd6mkK28RHyYlQKFL2tcW9oOvWID0kODn+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn9qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYgA/8CLwQdniJqGWWDnIO1/Mm6WhbievsMu5j0RdT5P2pbmvzi31r\r\nFSIzv+bxKdZn7KFy6CKzTaDYZduCqbgdFLPXGF6bWoXTF+m+9Po+lr3iZkW2\r\nvuROdZ2a2TZaiksEcjApEr6SBOToXxM+UE14BLdj/coJIZa6zBAjbm3jJN0W\r\nfWSUlIWal15941YBI6QIxQvE40TpDPnzyeOkuBvZLP9lSg6r4VmzlLt2jyCh\r\n4u9d3HkzA0W0s9rgBN3QPfwV263TcR1muMMWzetT2V9HG6Hc4N7GhHKYcKZp\r\nbz+XdcKHduxqLk2dxldkXKzfUNitdEUx/Or+a7wtIwmVGFXLW//qi85Nayyf\r\nsbDXgLLzKLKuLPH0ul5/FGPlBELu/loN5lF1NjCWjp2MOPpUQiRh3jHKGQiV\r\n9+JzDUz5n6oWWJvlqHfONUfKs8X2U2A3sE//KQSBUBwB3OypLkBg57D0Ax8e\r\nsBW/vAYXEAtnCXWXvLT7REa1Eo/jTFNmx7706xnSslNMAOViGY5I6760QYSe\r\nXPpZ5tcVclpEW3FIZl9bhlHrM2gDD1fz2i2JfuizYb33yV/U6jX6pH9wM1MN\r\n1fRFZyBHEPS0qBNY4f5T+Pdc/JCVqCUexgKwGzmjN71hFU4HFtQ1QnPn4eNE\r\n8UId5U2R0ximXDSgpdhdnvkb5lGlJwVdP/g=\r\n=N8tb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a7458ba0b.0_1669234538425_0.7242666916469513","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/theme","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bc3dd3a9792b7024f77493db2b302fb6f5de48a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7c35e5036.0.tgz","fileCount":45,"integrity":"sha512-XAl89WuEc4SYdHbYMJp+VsdyQqNwE1BdKAlpdeZuYSTx0ssa9qhJLqO8UW0QXOnobFpvZau9rZuXwnJ9mUULzw==","signatures":[{"sig":"MEUCIQDJQ8wyk2afvUTP5tDqfg9ylvI63jb1K2FhNJzGBq75fQIgSU9X/hKVY1PlZwCz6LRuo84di/uUOcCv9cNtPqNCGzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy2HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUYQ//Q9OXfkBUXEW2kA2R0o7Zzulc2uj6Hkcd0wyIJNs1otDaArWx\r\npVaJpOJ5RhbRSuXi2akYv06VJ2N3yZgBdfCJkFBR57bxDs2OFX1UC0CNB1ww\r\nPcdIjEXthRfgGmyVXZngZL1kcRixJXpJmnUWkfkpsJd9LAa1vdAFTnt6UvLg\r\nDeWFRl3CqqJZzXC4BrEJSXt3M6va+ritTkJBpHsGw+bDDMvC+2ak1UBtzBdD\r\nVkzGpavDz7T8u9WE1DLWSt9psxgV98+IAaNB/EaC7YALcz2SP8GL5O4hTm9H\r\nwbJQDYrUAE5rTEEKyhkgap+CO4AYdCll9w1SvokkNhx0N2uuTiik4YVZvyWX\r\ndvUHs2vG2loWkBO7t0dilURHmTc+EG7PrwMEIZsonhXw9tSfxGAwJ+089W6Q\r\nN8MEN3VM3MFKAl+ZRa79BVJlo2WsI0ddajSdR2xEHJkHLqV40uZAPxkPdQKz\r\npDUG6L6M4nb14X6rjCzYbbvt/xOJThBwlMkGV7A9lcVO3qS/9IrbsvZ2uKt+\r\nbA+cfx7soQbaSPdZyhlQcl4f8h+bWZlHv8FaSZVdEYPLVR263lgTYB6KZB7D\r\nlF5ONVh/Zp30i2+Io4j9uPdyr0tMyAfN8Sz/8VpLdKlZvgYUbc+Rw1KSWi9V\r\nd24IRVkpyfZ8zDQUwM/qp5KyxMoRsV1niLo=\r\n=Gte2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7c35e5036.0_1669279111580_0.1609462010752194","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/theme","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f616fdbee2b7ab6f86916d3811589a61b4f8d90","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.4356e05c5.0.tgz","fileCount":45,"integrity":"sha512-HEgIKbRR1WvrslXT5eMGz8ppLNdm/5e/Kbmn642qvVpx/RxMXBZZctuPi1kjyE/nG9c5h5uVG3DWUFSqSUxspg==","signatures":[{"sig":"MEUCIFcneITWNRAaTc8HBN6OMGsUXml3zDsCHJ9RFVMD5+ZnAiEAib7/HeqONBXHWeN1OsitxpN00b4qgtG0LsIPK41kud8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz+sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7OhAAnOj8vN6D4sienuYELZgNcj9mXk+v5uLXKDklT5tJczfzOCXf\r\nx/x7dfhTzWsISmmVJokz8GFIh3+hLBqNs//Vd3nUq3YNku5SwXP3ar+z+riT\r\nF/GuF7z8VxtlyGpJ3acE+C4j0HjgSGaKJKSXMsLciwgN3JrXBLkTUtY/jSRp\r\n3jORiRO0xoOIMPAw9oWML3sAPgEd1m9/Pm7OHCROOQA/Z4H9gxdjFokkjecY\r\nFqCylHAn2L4UbDtjbji3dtm03gpzU2ASN4k6Go/gc1ch4cQC0VGk1t/dDRPH\r\nOMDRX2QqlZfqlcwNghkEr7E6hyVkZ2n5THnEW4G07NSJ6l6TpqJ39jQX7neO\r\nFMFwcp+3R8ZR8UKBVtS7SGxlqldz19Dao0yh4f3UMXL/pv/9bwwOanPZ5krD\r\nLU9KLMbgmlD4XIMLgocVjTr+R1oSTsOMWGnYRDOHZRf1dv6mdos33ESShPzl\r\nijkRjFF2ysMs+jIVvHVBZmwHSfNO/AjpVMFOV0rsTVHcynCjNbyWvcNWPeyM\r\niR9TlCJYPGSlVUeKU8W1ta9XhfGYCohmCBTRiX4/hCb4l5ZgMtSYuKdfAxs6\r\nbQiAn/yGdZS9o1Y53vF4+6D6Rs+Ako3/5bAw6q1JCejWLVUivyNS4U58CPdw\r\nkk2T3DFEqFciHnX22JU1/5m13co5qV7jn4U=\r\n=6hNF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.4356e05c5.0_1669283756228_0.6665359415080887","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/theme","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"841a1a2095aa552b7cc4b5ff05320fabdc10dea7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.cb605f8af.0.tgz","fileCount":45,"integrity":"sha512-L3KQiX7udqyKusnPCRFnQB+RxtfS8mjh/DLkiS6zqxIBG4c3zwV3y2xctdfDbJ+eMJE8Df4KFBFouB8sOz+Y0w==","signatures":[{"sig":"MEYCIQCMnZGTlbIdG3naGIVI3a95MBiSaXotEd3P2FL3vr6PsAIhAPGpdjBKyDCXoqRwavGBMQKEn1yUj4yRCmlSt40ZBN9k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0QLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwKw/9FRh8FYhxbqCDU/um+Ho9oML7EsXqFpbQ4VxvArLusjGllUOM\r\nOw+7b1xJGk1N4UOK66O4gGMNwoAFb4Eq+l5DI1133IyRacGrNs+8fORFOLmh\r\nI+7RtWsELPvGURosnjZgbOOD3g5+xeuSO341fY9ke5NVNTABJz4KEr4Pr2Jf\r\nWl2wkjDfY0xLAWhUNNIP1ijm5Of3jd4XPwYPQ3rzOSm7n9Mq7nIwyqbVTwTH\r\nCb2j2GZDb9A02QSBT1tAxkjJtFXbJ7K6tkR32wDyRi3/0DS9pr4T3LnxGzSf\r\nP9sET5bkfgrG3A/wtbDD4yvYSxqjY2zVanpHS83A8+Wibl7Y/TIpDaHxwDoF\r\n8gAdg4KO00Ji6LhmCMRvOmYxOu4vVaRCVl72OaCok8zmI8Ry2ndZDoAmTZ0o\r\nP4KykG9BlaTubUVqdP78nZbNGFiUndlaaMssfpX/JMWCKyPGjev4ferB2KIB\r\nYc6Gca++3O7Y08LQ3ERalFfzn7UV9LS6wAGhraFKuTesZEUwRUzICvpU29XC\r\n9EcQetOifW/wXwiSHjkJQ+w0ylrU1EUXePXPtNAu99DX7r00wlaXufbm+a23\r\nbug9nmT29SzYY6rF7XzpIBQgkBugSL703Bd+JPKgPlcQ26T1bsPC8ymyItmU\r\nZrsDSjGQeM8A9GwOEIFeY0Br3Y1MyjgspFk=\r\n=zxIP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.cb605f8af.0_1669284875057_0.7755230323781654","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/theme","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b30ac8590db2c8aab2722b7d83d97bbb8889e367","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.05fb07f9f.0.tgz","fileCount":45,"integrity":"sha512-ZDq990QNKPoHPk1rCvtHwFMoYjXlvv18iq8rm9RdVSlNJuh0sePxW3jVVZH4+5+2N+rWaoA4+FSNomqorlOXYQ==","signatures":[{"sig":"MEYCIQDJpxvgdiwQKD3fK7AwI8V6fk6khsIsDB5dsUzKQ/tUSwIhAI3uTeq1OG3ToWuDvzcyyTpTD6y3Dj+MRLWaZUBKZ1tl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6YXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN6Q//XXuUHUS9Lu250UWzwGX7hu0KIiJ9vIO9G8jdOMjlKtlDDI22\r\nqA1RqXcSF+kPryRZVEgAg9itVcaR+v8/Cmz+Dl9avENygQ/0n0HgyTfPKzJw\r\nkeDjEemxbfntw0lw0YxhLrGriTkT5tPPqZ+xgcOHLOzgeEC7HP3/rYZhL4y8\r\nKr16WEuGwpQ5vH0IYjfm62eHTjv5s/rLSUGC8gDpWSOVOAJeDj2F/JeI9U2w\r\nonPPwvvvDz8jTKSFxUGNE5fsDNz1tJBsxSrwShf9TpQWeMKcarpyRV2OUNU2\r\nQvX/bZXWELNtal/C1vEU11KEHIlPLp8Kbl2LoDS8s9tyyIZIZ3FzSQdD6KCw\r\n+2LfVQ6tGf7Kb/KNbTFhumo0XhD5pFy7kA9CcYUCVKjCKtRexvxIteDIxeVd\r\nMOF5y/68/spxXO7kwSzH78wSvuPORMCdkXIkxO8Sy+WkUnfSx3vp9n7LtD7i\r\nBIobuPfltwcrECwgVZQ5KJhNNWssQqXi50bCvuLU0TKh+KA/tow3vGvlmLHW\r\nlEg2PRaykwR2PZj8Z2SjqSZOZjGKatGMoiGgq86cn5QqI9pDn+Am0qv3n986\r\nJ7LWmOmHhHdd4ooiEWt/qAXvLdVJ0KjaGIsSWzW81oPxGh3KzXmblKIlGAPp\r\nykZgHNY1I+y62S4KcTfLtSQd2tyU8g//h2o=\r\n=/5+2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.05fb07f9f.0_1669309975588_0.7973009381335112","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/theme","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a911b386b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"200c66b1461d4143a53791d3f7ce2d0e699eb1c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a911b386b.0.tgz","fileCount":45,"integrity":"sha512-i93bWe6POAgdGI/60Zn75oxHhgtA30Tn/RKSCRCJEogTTKbkjm6AhbdhUXj2OqZqlzEBlMtU6dm8lyx0DpQY+g==","signatures":[{"sig":"MEQCIBgA+ljUWhVgC2SwkL4079KuFWFjcyjL8W6Y1//soospAiBg5IaXlINiN9m9SUl/grkZhHnDXMHAbjC9iggTxbgEZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOXoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpj9A//WubrqsEp/13J2koHECXA5xSBK6ROJyS7RpBv8jbkT0OCwHfX\r\n43KwBnOlL/r5VnZPYJdaNnxmsyBK8AERdfey8q1Fq3Tq66e3Y+GSh9vYZcVb\r\n7OrYq36xXSBEiQKdBJlRNHfYqjnlEbvV7rKb0Uy/CrqL51kzQutnuJmxNF9j\r\nI1KSd0ocn9LnmHY2+o7hOzIasnjNDu77P5JCpnyvcHdyo6bHzaEltkEIOnSp\r\nbYEHjEgG79cPnfmeNWfq2b80Us+bFRJeEawsGUHWBDIEraTjrVkuzNxL430Z\r\nGX2XWuPksHtyfLFfEvzNv/6eZ/TGYb4vq4x4yoWyVI7ZbFvDXB+6fGQVLpfj\r\npGFQLkUDu3CnPpKQLpx1yj/eoJJSxzzdftlS1NHTVSysGAl4dmQc6Qs/8Awt\r\nNLQ9LAUcixr7snMTunWK2PQ6BaXwaHNQe02ngYWH4muoiE00OmTmupqpoZT9\r\nTPOrJgZtF4I1pnlM/+FS2LIpEjQodceugFXo2gjipfJBJ9JohcIEBpHOR36x\r\nVP45s7sqY62pEdgCDRDnSh1hrUJgPRb+dlajP1iqXo8hphOKW3ts7nvrWMBc\r\n1HffGNcaxms2f8+fgTVBcfe/JsvzqbW/uiZ+qQZvgfWXDIsVxp2sDnRkP15Y\r\nLhEJBaLnPjyVllyajm7KJUDfmrewot6PIwk=\r\n=s3XJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a911b386b.0_1669653992390_0.7204850446949662","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/theme","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"890cb7e00e2cf10934fc1f91db9849ac4fa2dde5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.2aa8050b4.0.tgz","fileCount":45,"integrity":"sha512-KHAF3+h+GSlX9SP7aBa+l3f9iWar+C2JUemxlCMs/jXZD63BNdUlvsMVkYa5yzcnHqRCcE0ii6pygdBX2CS0eQ==","signatures":[{"sig":"MEQCIFPTW9CUsPeECpEBLcSDVtRPWu4kiXD8mPsG2AaLNEiXAiAongUQBdY1tyH4IhrzNnSC2yvHBpz6W78I2gC8Iyqdqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQe2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9fA/+L5995HEtwF9TbR1yizj/WYxqQPu9bFpfMjx9HTtQscJZ//mI\r\nOUty/zt5OuwEuPNjEXJgCwTgT7nojOw2PzIbW5BE+e95Rfls+cxTpbklR4NI\r\nBhE3ZIWqOmIBGSQzyEVSgNweBq/DDxJ4JTM3WL9r5PAj4m85ZZuGjFsJFo6x\r\nD64DL3kRM93cZwnKh+ZSG8dh085dp5FfNqGGsUKxm5oX7mt+HY+VlBJkh9r8\r\nLA3WxG2F3I1s/curtXg8j9ib8bPsRLzf5KDg2QdQaL+DdLYtRNeVA0CdAD+g\r\n1S/EMYnGXHaSsUnxHTg0h9HjCbFKwDMrLaDZWGSTdOGBuuzuRZxEm01+Ett2\r\nQHxv4QqO/LWX7fPBtt4XI35KwC/9uE/G2SKnE0ChM6WXlGkfc0+L2wFBvclj\r\nx5iZztJaCePfvt8D3vshtLe81CGz0K9bmhvjV9F8mjAB5LudtPw4QCR01+ym\r\npeymFp3T0DP9TG/N/ns0uQnKODO2NNv6SadP49vIzs7uxBcpkDYE4EIn61Bp\r\nns+gxq/KMPWihI+XZLjr7vt/ZMwh0mxkj1tka4o1zFP6/lSZh3hcmbdhrdD+\r\nbScaNxd7SO75pVz2JfNRWg6RMD/BpJbtmm35hnsehvTirXkpBne7rVqm2Emg\r\ne+PPadFpyOkVLnub46e0CPr3COowDtoydzs=\r\n=cNiu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.2aa8050b4.0_1669662646284_0.251349881266711","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/theme","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.323904a9f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"679c0fd50e1ce2343481848dee686f7814ce0df8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.323904a9f.0.tgz","fileCount":45,"integrity":"sha512-+Ceoo4J+LqeSGG4VMSFC4+Gn4XBipDrBW/8cZWvhzDqwVxt0Kb+95/d9jZu3CWVszOeuWqjbihcvN6yBCpP4PA==","signatures":[{"sig":"MEUCIQCScQOGBsP5ujGzznEI9bVes/qllMRUsrVyZnss/h0zVQIgE+Nw6+IkiDt6s4yLyXGnvP/k86EKGxdTdSR5tgH3FwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiYuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2gg/8Corgw0VMVy1BGQSJE2NNcQ9dzKoYd66/9m9xsQmBfFtP/1lO\r\ngsB0bTxnpola0ZIeu6ebc+wj7/FlJiQHkXCxBcLskYS3qjX+mhPKmb0okM7T\r\nyvYJWXJzYAok/4yo6Ulq6vK1R28TJEi+Vx/9r+Bog71scaBnTvw0LgTOcEv3\r\nPIx7bc9po6JWGDS3tFJvOdjciXAMibwqaJMQjKq08cnEnltS9TJD+KrWrLad\r\n53t2lhd8333m8X+/Ol1wol8QRCUuVPVuUL5ii/XcP94s0AdgILFisgQwPIuE\r\n7uBxwqwl44oH9FbmoaHHookbrctz6IHk6T2oM+as5oHmzefR2HX3WNB4OFXD\r\nvIf43nMpQ4cTKP5xzq3D69UhRfn2HIHS8WHBq/Zs/PNDRw+sNJ0P52zSIGpp\r\nxzulvncuwbhEsEUbhr3F7qPpk0Xj113KfwP2lGWUGXK/3GKYPxm6AIqNHmvK\r\n9O5sKILNi9CvN9xmVgcJbPaS77SY2ICRPv2FDLGugRgeZsVX1tc7ZWzjR5Cm\r\nA0tLJmE90FE27uOzkDyRLRvLlm/SD7UovpXwV2IhLOkexTy7m/hiA04fYFbK\r\nnd5Q36DHeQ+J6ozp6sts/735ER9hwR5Hf0Ax5PxKSN8NdPLdxcYvhlxDJVW6\r\nldNk4GkUT11JPnLsb14eRKQe2Ynsmi2XBic=\r\n=D1zu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.323904a9f.0_1669735982331_0.2785359474685509","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/theme","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.168a629a4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d44f13bd2e4948830774b56222d97043b1404ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.168a629a4.0.tgz","fileCount":45,"integrity":"sha512-ErQHncxdQ50ffpmyDRjFLJG4EtOrqB3pf9QqMbUBxQhBHt0CMzN452BHjTIjq8gig2uV3Ua5Ekrsg0rTF/3VzA==","signatures":[{"sig":"MEQCIDuoLYExQFfuEYt0buQstKO/HHSLcX3FOhON9GSsl6lfAiBY7zkRvszUWiOTKnD0JIiApQl3bvD53e+Mx6LY6YgHSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhje7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUFQ/9HhmsIvlL8YgFzff+DclETtE6T/A7K1erf0GPf7OMwUzGqFs+\r\nDAjPxxOCxYCYsCNlf41kEiSRvpUnTtofvhDK1VFg/BgbZXZk/p3rnqUxHHc3\r\nRp5+CW2QVVwLUJTBeUs9Nq/mg4Sp1X5ReY8vv2NgOKvOVhz+EqPcgNZah95r\r\nC6/yfU9q1tUObD7shhdpe2cVjeozm0CQuWhEI2u/i/qfUEI0172i/mWHRmZ7\r\ntO7gx1ZwydK0JI2LzdJhtcdS4JpHTBEM9Zwg5OqmkIUK6qgqqpD/VhdFBKAX\r\n8z15tKjWPNbXGGR2fro/gB9CDGaZJqutEyfHH6HbqGXwcxjj5c2Uat/ygQXZ\r\ntr5fP1bGyc65/9BfuE5VQbav0M4/43h7ChfQoc3lDLidDvF65HPc67bdm0og\r\nbARS10oJkfmKBvhmj5/p0vj0+DF4cfjO472Gtp270HSTcj9UBuAJeVF6frkb\r\nc0f2J+wIJP2qKqQzlpWpu6FEmsWYXCzJtjiAZOl5fSoGXyYduMpHVP7GHSFt\r\n1UoRgbaMM37c8lTGyB5EcBgN3tu31yGo89A8uYTzgv96D2XqeUWrivpFP1rd\r\nwBeBvt0CnsNbB6o01IFhSXZ/cWA6ZxtsuMUP92noFV0KuEqwszgsBIWgieje\r\n/ldUQDjXZhq0K40zj3dpFEBdwB0RYI5jRaM=\r\n=R4Aj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.168a629a4.0_1669740475487_0.6797688330150364","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/theme","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.65c411674.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26ef2fcc3c7bac3c87227343883c40e9be22c1fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.65c411674.0.tgz","fileCount":45,"integrity":"sha512-milREdMzE/ASaEYre2MwkDfKMKsCpN0OdYXCq1kYWo2gtybnh9by1nUuSJhgbCVGjQewPPJUD6Oa9TQN03gHGg==","signatures":[{"sig":"MEYCIQDmOF0+BrOpLNCA2EEPg3WDaJxNBT4TxruNnS3fE1K66AIhAPqZLQyVRrcE5sGzvuUAYBx2Aw47g42gIhrctZwmAkss","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":245976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkNUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqc7RAAhCXQZu6ihqxPJRAFPRrkd/0smMYzln42um3NZ/kZjE+AokUJ\r\nFcXxJ9qsn6/OmpwC/CToNUnc8KU9HoDcrle9OnVJBnaeVaE5IHf5uGe2n4kS\r\naPEXYGVOPYrA0Wdx5HYj+t5dMloU81fEGML5w9IUqsOH5D/XiDKbU27/5pKt\r\nNK35ooQiuhnJiNhc+jKdKUjnBbcQ99+bJUj0YrbXUTZwUIhQ1H6RUakNH+CD\r\n4DOxyhHU4JH3d6QzknfHZm4zt6KjfrMf+W7HuX0t/m+LCkxsWUVzA+A98s3V\r\nuxVZnwYFAl4iOo5b90D0W8pZPEd+GZ3JtDjqlelLr0dUjku7WWMEqL9NzLXl\r\nFicCEd4ggAx/A+O6UQOwL1FHCbvs9hNU2h8w7UA2Pbcw2L6h180JI3RVkFBl\r\ndJ8fXwPCeikJISa0oL2jbJLH1OeiNV2y6A/zDrXsenP05Z9VBuE9hmOybWS9\r\nSRDvLOuBpH2yUk723s0GI7LeGL5Yy5PaABY2cOyJu1Oa4XiD+r0rCoIpeIHo\r\nu+nezMUInOn9b59GabN3WYGuDxTF4rJPv1fSdTOnQsVeDGlhnu6JIMXCSRs+\r\neQ9Wdj5zkanHXxgs7SuNp00HQhSSkjUespspBircJS7WkwriVuVglNGZ28BE\r\nscAbysGAMOSDlPuAixNe7JBKSCG/zrN4Kro=\r\n=xV6z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.65c411674.0_1669743444333_0.06923539521229194","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/theme","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b77f921ac0904162bdc9fa370eabf1b5a4be712","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a86d36fd2.0.tgz","fileCount":45,"integrity":"sha512-RqLICurl7dBZmiwf6SS8a1IJmSH10YYffXtu9JvUezBCIi4RuzrQSlAW2gmGJ7PR0YZRiXKOEpulfy8cYDW3ag==","signatures":[{"sig":"MEUCIDdt2YsnXM+qSQmuprVP1oKyM+jzgYnhHOxM3UhcXcpNAiEAl5ELEBTNxHiv+ji9qe59PZehI9eVySxG3baG5+pksxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrxCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomDxAAnjGa3q/vy/m5g7ATweJGmJR7S6sJbLzip2oT1siVaSqs2QbB\r\n+qeiJzZZlMANjnaYNMAZgZkkkr/xv7jQYM1jhhZCaEHjqff3lRaatwCxl0Oc\r\nE0/W5oiENel3InT0aKTk+QJaoz3zETk6djlK5BzrH3RYXMvXf1ltPNW6lSDf\r\nY8/xOh+egYi76CZxmroRh6vkWSSjTaqjW7F9fNSMfEFCryt198cRuuFGSCsN\r\nkbQPV3ZLBSbYQqnpZ4e7epw64DdHQ3a5/n8PskhimeNAgygPCV9nFbocGhL2\r\nw9+2/lRMqftGv3vTLsP4ak8NKmQjs2t6IzAFTmwONojtyThh/7EwQ/iuCmY+\r\nhkwkKC+QfTaluP9CMIi04kIBzRfWJN2gmNEMgVDb3/asS4iniiLUWzYWT9ny\r\nKfoU8xMKEGmuIeUjUMv+yzM96ZWNaUaRGO4203t+wkF980REknzv9EYQePw3\r\nT1XD7f4MpzGEt4tUhqOEQFQPK+GQZkwvlbbrE0MIEHOlZmQ6jGUH7svs+lGX\r\nDhQw7KT+TrxeEeh94FHUID0qUVL69LpdDAoOxXgEENoLcX7oySM+cEXMzftx\r\nZkSzC2jNkwStfpUWZEiS1X1WUvDfzDCeMB5kwOHIeSybaNj/+/bxvpFY0Hdc\r\nYgY/Zhr1Ee1NqmAALOjziNRHrCAtGmqyHGc=\r\n=1CLu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a86d36fd2.0_1669774402210_0.9928781446969928","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/theme","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a42c330d5b9c1eb89a67da32add4c4fe15d981a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.3a1f46c66.0.tgz","fileCount":45,"integrity":"sha512-gdH2prH+Y8x+Z293bC4QPQqZg3d0QFI/690Q0l4asAAihQb7rJG7zgKPLa67wbl01Vrcr9LHvXFU9b8vrkFxAA==","signatures":[{"sig":"MEYCIQCTNx9gI/MY2h7+tFLc4YrLNM/wOI46pLDPMA8XM/z3zQIhAOX7LZkuKZww3NwJpEYntJbcQ2TXK9W5UlcdgahmVDi0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0ctACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1Bw//UpWRtHsdvxnCgFHN43vBFL6onqZ/Rs2WK7xIcImc3SbEIzcW\r\n+HIZ+lYJnZza2jT2PrmrVkIsAeUEVvR4rl6UTe7R6IwKnDA8MwX0q9pdmXRl\r\n+T5z1l2xsd6/yQKSndm+Kdf8g1lMLFkyKY0BDScbKxj/GrU/ZHw26IWXsWaC\r\n5BONDVWRO/ISKjtyFwZznPjKc4xJXeGP2UP4ZqeJy/FkPrio/uK5hUEzOdeC\r\nhAiwlgcg6O3pRXCd408QjP4Ip/B2j9jdVCquNvNbHiE3dctgL8gUs5uRM8wD\r\nODxILNxvLdAQ2ZnYu9Hm6AMLB970eXfNn4TgmughOqfEcJ/6Wsn8irZq6O7r\r\nQKqroaQmFq0kTfkLdOe1aAvy1XTn5GXkgtmgmepWZx4ZNR+DbQ8FooRHPp48\r\nUCkmCfXPPEo48YWVDE8KrAFJ4jFjZpFeRVSgBOx/Aqn90gPy1SxA5EIhTcXz\r\nHp3JLAs+3xSMJoc8NkNR5MCobddIZEmrIev3Bh77XoP5UzEkrOwx2Ok+GVrT\r\n71x4Rlbyv3j0l4LNxxPMxwMdzceaSE2g6g1DiT+Fauz26Tilzjv5j8eC553W\r\nyEJvIoEz0qEqEAdcI6feZa8szXLGlGXbwwZvu/bCQ/WVLVj3tNmAyo4AV5ru\r\nvRpSCDBMuWkNBDpcxdoHytg0rbn+fwIZQMw=\r\n=DUnp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.3a1f46c66.0_1669809965253_0.13742569303382757","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/theme","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"157ed90aa6d5a158014945a558ae8d4b3c4f5dbe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.32d8a9648.0.tgz","fileCount":45,"integrity":"sha512-KQTTnvLqF33IdISyhqoURBQS1N/r7bb5HEpgHUkc5ghSAUnbExCgiVs2VEviWL3H+nCmrXSqyUCAQnXhQGOaRg==","signatures":[{"sig":"MEQCICd0Wr1qI0G3po+yuZl/jzsnUgzSKpL5QWHrjv3UlPNcAiBMywScYuliUqN8VNZwf+16JEkPJ1J5uClT9NWuvyGlRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOQqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0iA//Vv0x/g1V5U2sdzWyTnymtFN2yN8xH/kz3LOkh/IXmROEmZQt\r\nenC2lobBGnY6OBHvxd66KqpGIfW1bOPVKIHxZgt0DAxZawIbX8N5qnNWrYKV\r\nu9RaP/U7iX+2MVa41fK0epCM9l4wHPIFJszdrviMDO11jUYav4RtgH15gJHD\r\nTLbTW3a830LZPP2xE9BV6g6FKHx5iNfhPaxijX6OsBAKzY0/A3sJJXB3OLqP\r\nVeLKMIoay7lqukUX74eCfnPrVtBkDCOqC0vnNbBzLrYvSZbfJZmdL7d59cMh\r\nsP+4rKZiPB3f9otQyynsiy4H6y0NCKZ5Z4LaJsAboNEKEIkfdnlHPw9WgM1G\r\nivPFt17pYW6tkGj/yuEmPmh5Z16z4KO0ZFnneS1tl6Y5zKT/+zZh2blR5QLG\r\nFOl5w4qJMP5jwqfZJWAgLnJbE4R40qMfih6PvD2CEKGyiH9CmrwThGh1fK91\r\n8EmJm/wHSZLG4NUV2HK5Vt8zOr6UVKzSZ+v96RXRh3X0oa1c7OcoNSL/GOoc\r\nxEJBvFC1jlOgokMUZR6Lsw2xkkIItML5z2ZUBpbcgdIDxKkZqNP27RTiMDA5\r\nUd5Z4PVjMepCepPHAj6B+p2zgZm3GeThA285mYRSxt554oyTmN+jhFZ4dvTU\r\nnjci3XLEVSe2vNV8enGzRCufsBYu8GzLp1w=\r\n=kRa1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.32d8a9648.0_1669915690213_0.11641831868080788","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/theme","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.03618ab70.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb849f28ab66ac350b796132415d9963a1268f74","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.03618ab70.0.tgz","fileCount":45,"integrity":"sha512-sVrY1X+sADJJncSRympClNFqHZ3CLPX7+9b3dBxn35ptP+VQYf72VIBQSbk9V4JFaXaxU1pbtKDZLwRsdk/5Hw==","signatures":[{"sig":"MEUCIG512PdGTCbz5yv+KmnA8qz61OpM/KYDc8C+0WhEe6wcAiEA0wLJbLgTZ9Stdc+aXS7b/Df5hwqVJwZb9ZnL+KkJZaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRRWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKeQ/+Og/m9dJlTYA4FTPjjw4L4ZZp1YNR+zoBTddIQtKIm9WHbeTg\r\n0puYqsnPY4DVKXiqvr6XxafD+6PGnEv9Vi2YbyLNrmBR0lGV/vzi+i54Wcvj\r\nf2MJxdhLnoLl2SxSECFWmTHvhbny+QwaGG6xks5J8GRuB1xOH5SVoxcuQidK\r\nJE4fOSENw7+xcQdXZSKs/lztYA4dmsW4oO/2u220YP0b0mskjCJMgPbVtHUi\r\n3A6/wEJp5+f0+1lJ9gEjIzlV+ni+1bY75uVPCSjUzPL9UmAsi4F8AXjSMSmq\r\nGjGQd3K2H9kfJGPTLX3FPbBTxywUvcQgFQw2pElzZS02EDNGSGu4iYHhepjA\r\nOTY5tgUV2dlrbnz0a7b+8kdDiRMnnri3QhTZ2UjsgTE/hcGh5PKudCv1WnNC\r\nUgv/kKWb59dI99vlUHWqwmD5dNNInXHqo9b72vYp/Ppw2REokWbCK5Ud7viG\r\n/bs1D1tzpJcZB6ZoL9RjO7ba4r+tppk9s9JzvCON4exbvZGW56/Tc8FMIUUg\r\ndZ3a3KtQrg/+6lLpBK9sw1/l/UwwQFZJbum0a8/lOSwupv3Y4UC3VO+GxrzS\r\ntsXfFfoml12yy+bzAYUndnKC3ueql3NdgLrAqcsO0PvW5NdaJqufB9V5qALt\r\nWOushoiKU+9qyTHfEf6JZOLigi/ZXugdlOQ=\r\n=na0B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.03618ab70.0_1669928022518_0.05187746439122631","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/theme","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.68aaed940.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5da37717bbcbbde2bea8e92088ba438df0d24168","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.68aaed940.0.tgz","fileCount":45,"integrity":"sha512-RlbtuzJZSPS2sM3quD8A8drUTrzWNRVeCbl1WaeG6MvgnmK6uIbTLizr+K+JEy1UoAZnAXd/LaKLiTIkpy46KA==","signatures":[{"sig":"MEUCICTgLYbplayIHy2bvEpPuBckhLuJvo077voOtQZoqeB9AiEA2VFYqSIaFN4wcBEqoY6+ira8P52ZfS/EnNkyUqKd/Ec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRtAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1Mw/9Fxg3E2A0QKauEplAnud85BG1tJUoct7lrNLT1OlKmUaOBZjR\r\na4Bw3WfKmIbN/UBAcBnhD2xhHGv2f5xyLpsCUjESolh8yP6JK31CA4JAuvBB\r\nPIXeyJwWlOYWS9phNcBpmxFisfvRMfaeEzmFfDyaBH5oHaSJYyht8QxhHeXj\r\nCJyLZ7c7f7ut4ZOijR0giuVEtXR3rZ5hjHUU/c8Fd2qaUFAKezvo9bMHNjUs\r\nLsOc/F+9Ofg3vkWhG13Q2AmXLwnj4ZYL7wzyWGrwynyWcOJsL2JOokCg+tP8\r\ntb+uwAxg0vZVd1cBRVXstZtQx8GlYk9mB7T5+eyQp21V++kcoN4kUUUOM4bF\r\nTf+H3Y0jDX7o+r3Rd4T3tCnKlKOqphfx1Z61pohWlPBKivLgxR4zm9Y5fAr1\r\nJU8Vz3Efl8SQSXRm0wmiyCy1AaFNBTEPgKNASFUiDO2f95OeODXkDmVuSXbJ\r\nLnlsOi4M/dBi+vKEEsLVUGAjm3Xqjh/5T5iPWiHK8pxXOUmaH9LbSd/TRQwA\r\n0OZiCukxPUYOBAJdHRgelhlOy2X5RnZmTUa8ZWIbk9ccI2QsgGy1BdvrvyZN\r\n/28gMtb7xmxU32eCWQcC0m7YueergYyb8hWkYvgu5lm/HgzvkSL3sHVE9Fna\r\nIu72SXt+hwuqHYzjIwQ4anxaxF5WJz3rXoI=\r\n=obNS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.68aaed940.0_1669929792605_0.2660659298759396","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/theme","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75f43de32b57fedc9a6f39b6cd2c0d9faa01f659","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":45,"integrity":"sha512-lqMTEv4aIN+A11yJXf05DTK6m6f5PAFLb7fCaulKProwLJGORx+LrtDw6bO4yOW+5BCnReoieUscLIZmMohrTQ==","signatures":[{"sig":"MEQCIEECW3P4r1kdzD41MVbjnFyyLNxxmuZ1CjCNJH7At2iMAiA5G1yCDDcz8GY37RUskN+d5nBbywUeaxfZDXELlpizhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib7LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFew/9EG830mC38yOG/jR2ExnoDOvWw22GcuM9/c/xGz3B5xrbf8fI\r\n0vvWMqgjuyGsvVT7hxtbdVPG3l9+0oe0Rd2mXhMbWLRQ328eVwqz6tE4gYKF\r\nHS8V5+76CRk2zudXPLmrVlmk+u7lnXEDNKh2nRnGEwE4RV9FioMXyGT7Ak4y\r\nBR2psgP1ZPwRc3Y5N0KSB0otDmeiQyEsu2ihwggb/1OkcAVS87qCD5Y4sqKf\r\nj8TqkH4J5GnvGiXJEY4Im34I8jdqVxyI2vYVG/eyMdy1YUpd0GOVXDMDJBD3\r\nusW1C4Y8g4gol3gmzOI/nd4kJGKbMP+eVTjs7trGdjoTyMQWjwPlUugML8Jw\r\n413xx22XBsPS8W264sky4tcREioufO4AOJV/ugNjfvOrKIHbWZ93d4SUrly6\r\nCwLcrmjaW2qy1vJfdLM3WzDuY3i3Amo6sonQjyTY+Im11uvFLwIPCWcQqoXS\r\nBpwYvRbBQY1BgHaYcI9MKBaTGUQbyfMmQkneVBRn2Wi2k4WUrWPhPIALfCTP\r\nFFIBjrbr1hzWE9x+VZX+5anfp0sG36LtG0A5x+PvEiESUo8I/f1lrlM1nV0+\r\n4JYWbbe1QMUbxsQ/m1iCpFarixiSlhXZgvuCJB+eTox+A6JdT+fvvYyjx7Ar\r\np4vLA8S+ru6AeS9igiCGL37HMDfg2Rkl1j0=\r\n=UN/H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.f0a0bbc75.0_1669971658803_0.7218000368615873","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/theme","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d83f3b8140d438f6200f3cb7b23274f2f8963e4e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.dd99c8764.0.tgz","fileCount":45,"integrity":"sha512-GbOAWq/LbRrJ1i8SFZwFHRrmAamnPWiRZeQEf/w3XB6fTTgRHJNkqUMgkFB0fiDr9p4OcpJzvBApFt/cID0Tgw==","signatures":[{"sig":"MEUCIEAyBVwYtPGMJ+kqJ4xFbwHsMMO6w+w/HBIpFAGntRBMAiEA4PNeVxJXap+f1AS5Tjv4ZCwFaB4OogXcRHZUxfADtEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigTrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxsQ/9HIt2r7teq0f5dc9USTSUmCpTUXosIp4M7FDo30J3ZhNxV7Rv\r\nheTURvttRNNo+jeFBj7DU0MMjqQIBlXmb7FO5p+jex5pf+9yUkSSY9esMZfS\r\n5wgx9z/BmsYLnkwdq7T7ytAH7WvcUzEqWNe7hXy/rc2jIMxheUqRWxHLd809\r\nRcEpwhm6g7F8WEXAgtHtFR7E/8XO26Q3RWXhMc5jXEn7qy6Pm38xrUeHMGP6\r\nJ/5CPreoQ1uRHvJnoyVTEH6a4mgIGAQ9a7ruWXPheKJywe7BmuD2I2FsXIQZ\r\n/2fQ8Nl2e+DAbTq0krJCkqDfS1Yx0dvqF8EBDUvCJ/wATkVTJAwLl5q5Cf+I\r\noOjqcGcW0NxgqgB96PL5YuwlNjxfZDAWicvREsr8YcbPl01srpJ5Isg46qkc\r\nHM2h4LNt2lZ84eWb335sV9sfxnH94vi12tywYhJxPCwHSqQ+AoOopU6hN3p1\r\nwMk7mnYifpSHM9nFk9HToCNbcJVCTJHhV92zMdfJ2hdxrNxAUAdjrm4ZjVrW\r\nbJ3MVhzBA2DLBKd1sOLXj0mSwAoNikj859bGTzmXnMjl/8XPrnxBLc1uM82m\r\nC/1hUsINFfvWRboWKkx+FEILhRLWLxSjf0S9Xv1AZMijNibj/BvmlJjkngPg\r\nGYrHBnmIDTN/d0K1/sk33PxTIebuDW7vbh8=\r\n=FbKQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.dd99c8764.0_1669989611733_0.6381040303452261","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/theme","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4534dd96ad1f5d6a8a086f5c22f1ae27582c3d97","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.fabdcca3a.0.tgz","fileCount":45,"integrity":"sha512-CK4rizb4J3g7qSkh3iFWKMKShOaMQPNClhjR/KuICVvVO305f1OttRGgfhxadL9Kmlx7KF+kZg0lAN8TdttTEA==","signatures":[{"sig":"MEUCIQCuOZzCgXgBP1mTnvqs5dDEJAoUGbJdzvSD0ze1nYkSDQIgQHMO41ESNtAlnNUfJoJOxVePsMFMTTL41Q6B7MBLlw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihRWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzMg//YWip8ZCv5/fzB5N5ct3wY7/h6aiXmUz6VLIsnnGSqQtIjyO7\r\nQKkWgH8voauX81DKjSXLitL+T2nB5yx/G4Mzq039vXzz82mWsgsgWoq9ilJ2\r\nrOjYpM9o/gCDuGMup/lESxV7lx8/wpI9kJWVuffs9yXKOi7zfurN6Ox1o3fe\r\nikem+uq0kBnzYf4g0HW+M74dewoMS3XKPjuzn74AOa+Wxc8JLaiLBQZk8d2/\r\nxQYHBk+lWimTmuijF7g86ZmCThbvEy0++Hrczg+JSv4f+u/gUrC+cj7+/2V7\r\ntinIcWkB1V2ZK4X5DDRzQaZj0GVcpfnFpn5vZ72SgTM4rc548Rw0TQeAP70T\r\nf7I4rbNMEwyhswhjXfIBkRr3aJnaS8wIRbTelEBCjVahIEJDXjgvKhYGdhao\r\nwKMdNz+7ZG15mTQjz+GmgStMxngMoAW3ZcQU645dTWj6Be+kqqSVoJ9oUp6l\r\nRyNMQ1AfFa3m/1H6mwt08xIN7xNWvfmGlyFTr5+krvPDHatw+l2xs9AnCZfu\r\nM0YtBKkqkIR+QwsZx+T5dxzXanEuVzbhIBDlgQlIQy6XLZExO2fVo5Ss2z9+\r\nCjIBdleSW1UBD9r2ebXHPdZET3psvffEehXQfYqYQUMJVnzWWl1ceq0SZdvm\r\npJ8h6BIflJPTFh4szeY4tGn29j8FtcGHC+Y=\r\n=cqjv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.fabdcca3a.0_1669993558051_0.6682557108001412","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/theme","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cbf308099852a2a98a4dbdbac0dc21cf39f44d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.2d26722d2.0.tgz","fileCount":45,"integrity":"sha512-gaVu6+8T8cJHfIlSukz7IXhM54yTBqAvj9wDOHgH37AbYQSSQUYndp4CC9n7v3lMCRVer0DE3Qi3+FYRwdh68A==","signatures":[{"sig":"MEYCIQCWTWyK6fIk8ioEzsgBpbOj8I3N9Rva6UFyHMHoE0umEgIhAP+9fstP6de5Une5igE5VBBi6gLXOcGTjx7ZE73YK8FS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiicEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpopA/+MWiQvOm/+CWJPH01GbquQiQHpT6U6sr7gWhdmoc3P5oKdqWM\r\nT2YODJRSotfNryWVpIobmwKljp/kW2kcXq9/WAHox0uTtoAEA6ibzIen14E0\r\nqI0GK32QgimBoGOkoDL79PLVP6dcauueaOYJwEHJw5vDCaEyHt9YJbTp+UDr\r\ngGol+S+3nb0bI+xceGSIcKjjWfzVw8VTBOw+NK1yMT9cZ+RKb0rh4tejZZef\r\nsdiLeQQigZ3F1zPj6UYbUwkJA2igMRWEMb7hzCIRI/tDD5G5JNAuVv4E8Q8+\r\n2rhKnSAbQSLECFQkovVJYoUO3su1jtCsUcaDudpKP2KH7rLnfOZl530Ftmcz\r\ndn0toB7vxutACJEq9jforKdC9on4R6xrSBw0Misx2cW2z/DJTcdoRNOkgrtB\r\nUQXcyQFVZj/+AHoqresYEe23lyy9UemSJHtaTBNi9JWpm9+oujcH4GF9z8qO\r\n071Y74AiWkPQX5TxWX4GM7TYQCVTgDj8UacDPb9jQIVSiu8MUcY+AGaNjwCE\r\npRyCHQZ75EhEcAEgVmzvMNXunrrsVgYBcOX3wnZNWZw/2hcZKidlNCyg+dEz\r\nPKrZxXGfiMX6VtxjzJ9Z9qzvKyucqBEf7GDXI196XL8JkfKfDgpUZZOk8uSU\r\nlslLPOQ5d8kFQKjn9f2TcBdWSdkLxd1KkjM=\r\n=LiZ6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.2d26722d2.0_1669998339923_0.12632484330307947","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/theme","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"680c95c82f9cd51c8db8352757aaa5a3fc097164","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":45,"integrity":"sha512-h4XeFSUHve5eu/VCWpAkKKUgH39A9eMcREKBw+Iyr4Ic2CnlzTE0rL6kVyWFuH+fVBL4xd1/yfZme9mB9HSc+g==","signatures":[{"sig":"MEQCICGVtcKlmwqOnqJP7TCJxbrH8Ok7N43T41O7VveZaHYcAiB+q7nvUUY1Ji9fJRlFoKbvtq+j4aUFCpJk/NlK2aXE9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijjZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozRQ//YWfP7EnU8H9/w9UxvjCRbq4jEu4t8GmwlP2FNTrP3sDM+aJn\r\nMktLalnhpI/Fua755nBBNh6O4aHIz+JE9xmfN53LfEhmpo9/m2MM+Ye/tznj\r\nonGZqtaPnVXAw6KJ8JgHOeC55bmUwIqXXxH32d9ph1iAr+TlCyvjMZicbCMm\r\nrLSRVPYOPGHopnI6E+boSWjI575ySHKKHK/cQvddwHbI017cKSpJcP1QEFd1\r\n7ItoIxH8NTMqINz5Gxs3IhWg8DY8mttZa8ShO5E5ikJZpQwEOLfJQxia++pq\r\ndZ2dczvjbG3cGYe9KtW3PDdXxVpBYOLbvHcFaAium59I5ahWw93+tYdaZRla\r\nkA7k8D4qppE0gXLo9EyR8wMnbjNgJOJfB46C1bhX7kQTXT5KYgnVYLQlWOJg\r\n2siMtPZPSPC/OvgKPd3ND5CcBqbnFdZy+UNZhWb4FwVAQW8evM7f3167F2hm\r\n7iJoeTwvzW+Q3UjWMgNJw3YWENMX+6xhsbir4jqpFvstQasixTUqQiAInX+r\r\nDlbbNi9USrYIj2Fe6JFIv7XRDQQbrbMjP/1Qzc09UtzTLYaL1TeIWt4KkUyS\r\n2ebVRX1dXL262Zi9NrnLUm676z0V/Bi0EKhck6CNbsJPQdS7zp47S5K2qcNF\r\nj369g1jfqffk6L9LZaMG5H9ymDyCVMLR9dE=\r\n=6G/O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.eaa0c3a86.0_1670002905586_0.8651481323580084","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/theme","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0483159cb3a6f5706bffc615418e1c7ba898b60d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.79a613bbd.0.tgz","fileCount":45,"integrity":"sha512-PhYPIZ0zsxAyKFuXHIggg3eeEMHGxrXktU/cJ5/OtqqmXhS2ITLArQtD7ALjq9W0AfjuZO5YusE1dNn0fzuHzQ==","signatures":[{"sig":"MEUCIHLqfha9mCeMXk19v96aoPi/XpJwNHPvBlqLIKfWq+mMAiEA58WcXJcqVY+O1k1sVQDY3/XX6wPS7GkRNEmNv3h+Jqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1CzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrh5Q/9HbrmSvm6pdV6ExRLH6v/rKKcyTAsJcxQYd4kpxb/tJi0brjK\r\nBD04doMOwAouGzsssW54FERDMgbjLKZ63zTn518tqqjZ29WuKVJnp13cpiaU\r\nFcpukL+P1hBK2aV9uSESIXQQn4FX30xNfgiQT9i6MTzpFz7E5yp9lVadDStW\r\n+rse7OdTht4omEDoqzjpJUL7fGAwvd/HCrKgrcHjPweuINqpDh4JAQObgDDg\r\ndWSIxgQfXJXVeFD6rQ6DXPA0rG3W3FR/G+BSKbQf31A+FbJgifEAP39jipYk\r\nLVwt0julm3jjrGbKrQrSRe9iq0p+1qe/FUmtsHiq64B97P0dIM3OhFBgtfwM\r\nsMVnTlH/R5bEaC+K7ultiv/SH1JTiUVj0WpkmsbVzXJsMcJf+UjnY0q5qaxm\r\nF/xydZWdDaK5PnWI9NuzaZVy/F/w64zmrvVwLIfOs6l2Q7dAt25y5D7S0Hju\r\nwYQW7VwEeA18ZW9LDmNeDTcvbcj2ewLIRHOgma3Ga6xsjoukF5IBHEvLD9UV\r\nkVJHcbcdoM3mq5PbYOCNDObV3c/e3CMb6Pqhht35w49bH0UTD5SgvMQ2Qlgp\r\nRuhC6IlD8FrB8rgwWmMVYz2PuqpUXftj+Jf47B+4O05NqbeNHyu9JiJaMLw6\r\np6mFdidxcJ58s6jpEBGgECrIOUeFYeHY3V4=\r\n=ZaVD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.79a613bbd.0_1670336691258_0.30240544514584666","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/theme","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b595dc734db916b7ba8ccfe34a45e7281153ab7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c871fe61e.0.tgz","fileCount":45,"integrity":"sha512-4IswR9Zl1/NP1el8tuAYeRaC32dpUuDtNFH1GvvxqieSjrcKkrTPDNukiLHPwL6TJ0ZLDEc+88dhAxyPjVMXIw==","signatures":[{"sig":"MEQCIDAl9I+uK0b9J13aA1hAylzeRqDsdR+2zpzP8WonluRKAiA+QnnSH057n5KNVfhutCRWBgsMKUHojf6iMXpkTe8mkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEXvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2CQ/+Lqq/SQHGyrwljYl9mLAIZmZtM/DDj7rGDZzz6QdDCz8z4NtV\r\nMHszQnwMZbv9k3Bzkd8NCdbYMM+FP6bylhArgKqRhu4pX4cAjclLj6SuUiav\r\nh2RTU9XHH0NCHgJmXczTVzbuubWeFZ5ASrZDaQ09iLSfrQxB/OwHz1+xfm89\r\nl72tanePNqTA9lNG1Ytte+dbj00N2gEtNflAqHK0JXpja/EpIfto88wXt2XX\r\nUz8738q70zw/Mkgn44ghFJUYxPArux/RmKEz4+mFocnFWST1/UX6Dv6wbzB8\r\nHP4eBU48rMmeEobVg0mhL/5oTysrCLFVdiGt/eCIgpiJry9RaV1COiEoad74\r\npo/138oZey27J34Zn9JYhT1of8se4rw/ZEHt6D1BKkhGqkTrTTm77Itbemgc\r\nqh5bhHub6v6AjR8+PM4juRNaPdnG3wO+J0kTbGFVhVqYWZNh6JDN0p6q4sTP\r\nNzqG52PnY8Px7/wY9QVFkZary38wEPcOAl+8wVQ0liyuFTK5LSbn9ieZ0Q0g\r\naq2HJdStR9/0qMav/HfOJd4zIj34KmRep3Upa6kl3cn27wSuOAtoy5mnwT+N\r\n2nDu8xONQSMbN+dgyN22Ii4ezSCkaJ0ozvEwF4ZbCDDq6NZS3UFnrxfBjzaM\r\nQXxATsCUS6xPyt9eM/P2vXzq+k/hPz9ancI=\r\n=F7Jl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c871fe61e.0_1670399471106_0.9217662809432716","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/theme","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7115b55448878f7c184c61808fc820e398bf0634","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.9eaee7936.0.tgz","fileCount":45,"integrity":"sha512-skYs+KcuLi/tVXq3lEIoIA4AL3tpcZavhPkjtEH6Q/iYAbxpdZKYBDrWaYoxmhQ7BeorFJ/PQNib/IWrqAL5OQ==","signatures":[{"sig":"MEQCIBun5NbqhR/z2NOKa7jetG8uncPMTSuuCwfq/jIL2ZtwAiBMPcCSRfTbToDxPMEQFQvDIffwXOwo+9Ln4e7DcOuLMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPE6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6VQ//XW+h31AAduCfBQ183TfDKrTx4tca3KkMkj9Eh4o8ou7b7adQ\r\nlgTWRcUPEPhGpflduRxt4BpYuYifMkMUKZ60Ohd1fWCz+ih4mEsNNYZuonA5\r\nTSVRkQ1lbsK+3KJKxyp2fjBmmBcXdCOFsTPxQlB/9xtHhQiPmj/hMuYGCxOK\r\n99Vxm4d087uqci856DRs0vntyl3/9mUdH3mipUZW8iEqh67HquqALb66I6h4\r\nWjTHiFXoSCmyBCco0jNBbIaFKPYrfuiLjXYBKy+fB/iC5NKgT2831RYpry82\r\n0LHBc6St/9BtBBJJuI5bpBslm0FgBXAbg8hNm9Yby7ap41Z2z9YYrwIMmqlF\r\niqPUIGPZPmdJlFNTliuwVmK2U0SIhB/rNhHpzaPykUZBJzPdUlOPtT32w+Q1\r\nrEchE9uKKkBvcjuK6SL+5wEdAYBnrezL8zvWMRzSbeH7qvMVBjPhoS5kM8sU\r\na84U6MWaVY0pSWX/kM8rdFlW/7G/E0Jmt0C/AZG0GJQ5ohOK6oRxFJBjAcd1\r\nnfXijodqERIpLLuA2AYE6UyAsHeIJBFH8wRVmgTRUWGk+2raHV7xeas8g+CC\r\nSa4n2SjLnVAUcyktkuI/K4Q+j5qVrjIvMD8ZiEw91h6ZpY/UtzR62OTZxXqI\r\nPvRC2Sp9LT7hSiBkcHiCkapyN4dZGaQIQeY=\r\n=ZfAy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.9eaee7936.0_1670443322441_0.9080350674522197","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/theme","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d598f6956fa11074da20669c1ca59952c7336cb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.1d37bf601.0.tgz","fileCount":45,"integrity":"sha512-Q+XpZkb4iHaXH/jd897Hy8PJXgUZSfT/UqTM9AiBUBKzLF2Ygq7Yl9GfVV0oR0Pw6y8fymG6BrPnUvrMg91YAQ==","signatures":[{"sig":"MEUCIDujpSytIhOqsexIsvYyJ6u5TltFcp+zfzq39LvGoTG1AiEAw+oSosa1B0uHhEpwuzGaXaQd2lQdO2srh9tYbvki2OU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPo/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhLxAAixwLFdf3K6FNh2XwuA1I4lXUx1mZQV7ZxJlfbNQcDTL4pGwC\r\nVwJqKvLZHAsA8sygOgb9V8CIxI1Jep9PN5RM7iJjAZVvWPEXgvkc+FC4MDRU\r\niCiMUCG7Dp8Edxu6dBLxZ43RJ7v4ox11qrrV61AFIHRsDOGXryRfDFQsBurq\r\nZDZgJJJkO81W+WeL0E68DdQwKEvWuDN5fTmLPTKU20A0ENIMJ9lrXAZAJgIb\r\n+Xya7EfyRdkK+cM7fvN856GIJr/7NlKF2MLocU6df9kKhfctDWfYp5LlXTHi\r\nVJ/Y7iVkKFbjQLD7MUBe3NHWCEwnGI87WCEKwmPBCTlN46F6gcSuuBSn4N++\r\nA0W2DU2Oq/S/UBzOhy1NAH6njhaxZ8VHDlIzQSYCEuGWELUNS2+igiaAqEKB\r\n6I4PHg67UX335g7+CxLpugQyrcqV0agbnfwGe55Lomj9J1fT+oFQi+8ueR28\r\nBTs8vVCWsSvTzZwxC4Rl4NJbA6xzmLjCpNa1/bBt749ExB+UYE5kQlsT+TDF\r\nw54+JEvAyrd1nJSXIVea4gzV77U34/FTC1LfxmM3cdNuoRZmxJc/wNJUEBkW\r\n0UIcMGVn3aMYqNiII6qWe+bm8VRTDWypfic1yYsJRbaTvut/FBpBV3xdRzZy\r\nR1umHnjDdsiBhMnB8T6/e1KcJTW90Ba1pW8=\r\n=0svp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.1d37bf601.0_1670445631107_0.41213867305658924","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/theme","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c56213c783e78fd0f13be17f2e67813a5cb5ef35","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a5fe069d5.0.tgz","fileCount":45,"integrity":"sha512-uvbG+vg3+VUWoenoxrHrZYZo28YxjGd09HJLz/F0bJQe/llOWlPtaSH3xvu/RSy1bmGOJ/+tx48sqbxfwDqDMw==","signatures":[{"sig":"MEUCIQC3q0NowgvPW6EvkDhlVp9pT5lAbNz4vSOZ2tn8qlrwsAIgHTCe45bTgEwU49mIrv+vmXItjYwbF8paPyn6rZrpQI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4HLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQfg/+NNGnm6/LGAsKYQ0Y7Vi+qPcudJI/7yWpD3kG9/45hFrybHd6\r\nPn9snuNmJIAy9chDEXJ/XVtc3l+8MtLW0KJ07gV8G20NLsHvzejz4l5bP1e4\r\nRcEcCmhmkbs6QmT1FSyDNB6eNqDSG0Q4JtU0xdZ6vwqhoiLyqAxooWPnifva\r\nj4Qv2ozck/N0EcfUYq+eIRmdACw73qyjlCODD1e6YmIGNfAyQLASqKYen4X9\r\nHioV5UbIRczNLYTk4NgBBEojzpUyEe9AKyHLCN9hy0Ua8qGZXLcdUeCKZZrm\r\n6unrK6EdRe9juqgDHv896fA837lLX0yVmaLiN+k4INscICOdwlSYvIBGPfDt\r\nib9YNoJnpDHhcgGJDCJbnM46frgxAWIMkUkRs7ZoTD38MHCstwTydsh+QTyt\r\na++D4qLFyd+VmlKz9u4aYP5EPNPcYu/hBLl/k8OnVY6YKma6ubCtvhp7SEbo\r\n1lRjTV8ZO0gnv0RRMeFiuFu9Jzo0+FFinHvdtfSAkUlT489y/ch93zXV0gVR\r\n661rrZZ9PxZiw6p6HELk3yr1Oh0oouWZuzbQZrU8ErMCzTLITnjrc70BlWHr\r\nbD/+s3GoIu+DarCuDKuZRfQMY86CbOiWYqqJ5cJk4gqIdWTu+Wd5BqHz6Q6y\r\nIWv+AtYgRN75aVcLcB58ChU3Kdl5axZpj4w=\r\n=Rh5U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a5fe069d5.0_1670611402916_0.33842083492447883","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/theme","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee0ea3a5c5f1bd608d28c7fc0fc28f81436a48cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ce8b5326f.0.tgz","fileCount":45,"integrity":"sha512-9p9tAELtNoT90TFYaj51kIvULHjFsWYqDanfWrpvgeNIF/mQye7KSoyCiMcQ4/tR/oo2oRxbSMhcwP+OYN8GEQ==","signatures":[{"sig":"MEYCIQDwmoAMzYElat1TzG2d1BnQIeaPRCrI7ez+6eoe+h210QIhAICM5DHCvDSmdFclcCtkrNHyJFGWIyUmhxssqbldD66e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8T4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmou3w//ZASd9rb8qCrgKtCOMgFtC/cr8/oml/rgspuBvERK4tLucgP8\r\nFXoM5j1CCKd1qsARSIl9mJ+aQFyf6ou4aQw3Z/Z3sgldXLIYF3K4dvbN4JGo\r\nCq6ocEtn2Pz4+cRefYZwWqa2Q4HIyC96RTssxNicXUzchn+eddQUBDsd+pte\r\nL3YGA826xu7kQqGWlQ31DByOQ93o+U6hg7HSevxl3LcKEfymKxleUx6EzDme\r\nnoo0uf1xWrDZ6zHCH6Etk+W+guUV+42iz47Hqj1QqLyBqnUyGQNvgeMsJYjA\r\nDpnPbdUW6P0cU8Z+tCSsNzTJe0pAAIcqXZoYOJcTuhyGEQhHJUrR5fzpnGz0\r\nmD15RiJC79g2UGInGPRmPSn+tN4IxD5ZrE7sdmZ3CeCvvkWtXW8H51D8nN0q\r\nYP68fLNI5bENvakA1aW6NWXQikEnNY/tf0BYJSAA2vI281r7JRtkrm2V4Npv\r\nhYdkurvokCyo3Uid76SAxgImj5n43oyr+QuJX1zjlA2wrAtQTzGtTpDwX+KO\r\ntQUeRX6cPCUSUoHgOVUrrSFP4jNRvBXmQwREJ9SHYpqadqEQqxLUdgWPNT4n\r\ndyNs43hIIJ9HinhToFu3feukupcK0h7vIqoJ2Pt75f9oVPTqza+aB4M7mvmt\r\neC2K+ulFSx76RYxBNrlL6iH7TWG7jsQIy9A=\r\n=w/1x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ce8b5326f.0_1670628600142_0.34189378815880755","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/theme","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5195bc71028f6d3a9869756105475885027fbc72","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.43f5323bc.0.tgz","fileCount":45,"integrity":"sha512-kK4TBk1BOXRDQ/NNFmiB+BLRts/AQf1+KuSCi87+pV3sqdbBJ/aaU52nQS2RrWYTY1yS3ABbFu2v38JSP7xN5Q==","signatures":[{"sig":"MEYCIQDQnx57awk2wXuAw8Z/t0Gs0kzfHPWB8BUeyYJrvFv6KAIhAIdsTOEJEk1yGFaKYN2oGNdseUKPDE9RvpsYiGLrWgFi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1qnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLug//Xv5Xl0+i0mNSatGtj106XnG1bCmLfpgxSHlbzCq32LCKAhMv\r\nLIv0V6Q320iUx57z5rSwIqPnwrZubMyuzU3mRBdN9DedCQmD6U6joQIy1L1U\r\nrVSYAsH9sTGMCkX5kn/ZFUuWmM0KNe+jyVF6/VsR+oJh/7MwQzS1oZGre240\r\nQ87s+FCvNWcPPF4rrZRIIvjpsSzzo3xnekLgBjJnLZBLR8KZAVkVRnF3m6/A\r\nCS6uJpgrTcy79AZMiOoTbmljwJ0L1GEgw/NWvkQTWFQyL5Y+qKsX+2Ninld3\r\nEm2F6kpSLnAEtyf1/gkJcVFCA2Z52cdF+M5cDQPoCoky/6hogikjechkifCK\r\nLZD3a/PxyOWY4OJ2ji3lfKREznVy2aTaiWODPlrhWPEKVjYHEavxmzetLvKu\r\nu9wnDPtqfZMopD205KAwazf5pgMFfmaE+ARIx6Jmm6NwbBrmGugCoZT4X2y4\r\nNCnw3yVTqKC/aIq0pCGcN1me90Fys8WNwS8Vq9daaTRypbYbGyoXq3Wl5w50\r\nw2sfGKtUioPQHECppnXBuN8u4dMTpVXW7EU4d0QnuIII3CrEZJubYBYVzXpP\r\nLtxQ5rsY2U4Y0PGHmUs6LKMRf1Dem+Bid9dSbZ5TJHr7lgf4l6m/sLp7QRAJ\r\nEZnuMDAvd80yK2q78umLpNRxQDKaf9sOzc4=\r\n=vcrx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.43f5323bc.0_1670863527455_0.49192997753864165","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/theme","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29a2e680e64bfdaa33387b4db528c07e5cd694a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.5490e32e7.0.tgz","fileCount":45,"integrity":"sha512-OEyDrF6l3KgZmJsHiWmcr3hZqzVi1zkHTrSKf4jrqqtBfD3n8TSaOKAVr2+V15EE1nVJ2mgF09IWbz8TBMkgMg==","signatures":[{"sig":"MEYCIQDODJ3HVV5nvYmQbve7WLQG7Azi95bhI4LHZumhTUR+sAIhAP/t5yED9pVLmwmjaDkjnWhTazf7/Yfg3EpHuQwQpoLQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl15cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIQg/+MS5aOYrb7Bm2BMw/N8/NqebcCtxuQYdCPKyOungngnC1Dmr6\r\nb6F7WDQdHSdlFkPWmwq+ZJTiuUv38AT9jj2JI2UiQExJJMHp0RhdIJmlBeYg\r\nnp/taixIlMoQZl49inE9N5e8HoVmpNtncH78ZGrrkxYWwXnkPA/LPrkPXJF9\r\nILuPP34xgGABddnrm9ikHcWZdTRmpiQCZydYy+SUgq1ZLcttPIQjP/eq7CY0\r\nP94SpCHFWXiil26KSuMA8e3Ex+PnH08577T0dGtz3kLN5+AtnHzHcLndmPgi\r\nAD4DrSjEJVidyezjWHwAfe0F/WHe2sjed8RfxQ6SGTx9j7vNUYw9PTfQPlrI\r\nMpqu7qG+QTameYMCtecmk33qtgkEuovDk4aW5phdSgXFOWsk8IFEpvWJPeDv\r\nLsF7t6Skuiek2ixilWbvkL9uHlGqTg0CTe5XqNM1C+3PTvrexiR/XzaT5e7U\r\nUNir06vV+Gpr2q+UaWjEjOYUdJ2bV+uCL9Q0fK+QN6/qwva7hCzr97Yj8VyZ\r\nP/Ugq3l194uWN2tPM+iFXpiO1klmwrt6r+0LJ4Log5Uv356nwU1Tf4QygEbi\r\n9Sm8MM0exGaGAweIqsyaGdQg2XoPp+04PeuwNM3Ah/s47HIxiuhwc7JNDo7X\r\nQhOfVRtCH+jH3o0s/SHOnu4s9+POybbwPdI=\r\n=2Hkk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.5490e32e7.0_1670864476130_0.8833066337167925","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/theme","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.817002c29.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e334683cb8f0cd2f8436c9101f06399df0c954f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.817002c29.0.tgz","fileCount":45,"integrity":"sha512-aRQFwM+nj984mirqpaor1DfoKIVvEiTaFtvlC+98qqFCM/Sz+CYXt0yzOi5q8F5V/1tJeiPx3CDuCwuA1fnvYQ==","signatures":[{"sig":"MEUCIQDHMTOzz4/dacL4DWYNWFlk3s9pwcCTEstxp5+xJLD8vAIgbAU6RGWNYHrMXYkLg6hfZKsAmoV2866bjneXXAHIrWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPRDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUMg/+IAuv9CYji0WPzKLNZ+MDxZO+T2rywBdhn253D3gko8B+J1Nm\r\n6TKzM9wyts5jhPK8IL8zDkXtV19nWiewN9TxdHn8T5C2xWRSSxkR8jkeYI/V\r\nZsdLiizqponUjWSFBz3rXMQYyo/OEQhXFVduBGDsJ1khzZ97chQ14N90IX2A\r\nsC4RNO320wy1GRCsopPXT5RikfNoNkA+AHwwUcrnef4bc7Xq57+c7lk3xKKb\r\npKePqoKS9EPU9nlatH3mys4BkefDH+GNu6q6H1Sps9a6h2yrKNvIppr2OV1d\r\nWyE9zYkxCT6k9PYN8vQ67R7Y21jSyzNJaODFU7PTE2/qtKm/ZHzFCuXqy+Qd\r\ncg1UGYcKWyiwKdjEzwrFF4r1/kPuHEWTg0H7tBtStNqWzCblodp+i/VbL5o+\r\n+WfLBC678fk24F94iJPGNqywqICRF/4HvZ3RjRDhd9UFJuAJ7vM3hMpgZrHr\r\nAR5YFkOirvhdZVDItqZmQ7RfXgrFNYBGuTeII3cqY5tRVTricYbX8v3osQ6z\r\nH6ddJoZSFlvuFtpIjo+Fr6aiXarJO//9CS0eYtd7wjYQH4emj8H5RYDCSM7p\r\nscymYTPpSkLgYNjn1umiiG27Oghp3Vnm+YzmRocrnkEGz6L8X9zNlMV+TUHx\r\nxberBUaGxAYEzoHXKgrKq4s4iFsd2meLkHo=\r\n=homZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.817002c29.0_1670968387628_0.26942197307559","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/theme","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.313a1326a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be038a9e144bd1d3288beb990e92a320d1375b38","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.313a1326a.0.tgz","fileCount":45,"integrity":"sha512-TcAdHRd+M6XyM3eKHa2Exm7rG5P63U/uqZut/x/CX539l5VcqoMZc5DDLc+vRdNIl2U1UvZtjnOlfZv1i2B4ng==","signatures":[{"sig":"MEYCIQDQRZb6DOTaMmWmJ2RrmL3JS90Cj+BoEhLhWEmsvRcfqwIhAI+8khpqYd/C3Ey3jqxzbdByxI8YvNFuEYhcvVPWyo7y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaUuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpxxAAlPkeDQ9nGTy2ZzmHOBMbXalUWFcK70RbAm7LG+lJ2OU+HSiz\r\nECTl2eBESZTRVhv8297YQ9+PeYTHXcq2iUCORBsA5VV4jDA7pORKhbzbnldX\r\nWl3NFNKt2SW7FzfI9LYGEFaHphAh2cR/G8s9zadxIR0oQnkX4HdKubrcKkBY\r\nFr9x5tRSu4zd9npHJYi73pScfb3+k0DyaPmBf0mQZ+xc+6KgMoa1nszFhb9G\r\nziMakGX1u5BdQV7P/yE8ymQm1d947BVy6y8WQEmdJMQDaPpW8uikJHgGNWwl\r\nBDbS+9cB+2dUUqGwDMtsivw19bmAtZ8sHAtrKc8S/T5HHXzlZUK14UJAhrMm\r\nbbAMHnB35pktHSB+09eUgKLINVaY2v2cZx+prjCmZLYh3ofnbSnIyMkc2kss\r\ntvXnpkPg9aVecIwiyhjaMxRwl513fgAhqAymBM6raxfw8cbEADXKNPQWT535\r\n+jc371vNBxdPc1M0KOFjpWOMSwQdQIbp9cfT1OXmvJcJHuZxtNExt5pxGcTp\r\neTkmyVkooliKB4a8nscoHAHumpf2nQ4zpW7dOj8KKnQLtTBKRZYrKEpZCwp4\r\nw+AcLIx/ps0h0SZouiYZdL0EbFO7kcktw0OEvWTYW0jbPa/RV4ht2xC40h/q\r\n/sRvve0S/WHykjPhrAu9YkDj5NLQdZVSZXM=\r\n=czpd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.313a1326a.0_1671013678145_0.854785452282808","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/theme","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbade5c1a59c9cb36921df6ddc4a35a6503ee0d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a69c14e10.0.tgz","fileCount":45,"integrity":"sha512-C92Va+be8f4aj5Fucug7vFK3bnpZ7+LIj6noQ+4GIzr/kNyBlOvVmT5hTDLpa4pI6tmKXCZblttz87UE8Hq8MQ==","signatures":[{"sig":"MEUCIFQzWy3iAiu4wEps83okBxiCIMs+YeyjHxgWAf3WA5ztAiEAv3IjE4vjgT2DQB3sn4jjpj8HlSZGetM9pTDGXPy83E4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbDsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo06w/+KXXixc61uFqD5Y66xmhBY9+H6hxZsxwh1t47L5whWGm1fOSt\r\nH9GG0AWT6Z2Od6Xrvbp24aZw8cdvRQl03CwUaBP8KQtGbjGtfkao+ZiJ+oLR\r\nYNoXHpISs9Fx9nVRiu0lU7QAiAbyoKLSPTlTUc+bWUhLT67Aj/jNy8B3orNN\r\ngE+xAI0QCN+jIwGVFINGDE8NRZH8n2jLUP4YlUlsiXbKkPhxoAOCYZIFtfu6\r\nw/622tR8XRxb3U2qR1ieS/jinua9sJml1dMHb8HlU//q92cU7IR7ND7EOFXS\r\nIDSUKb6+V/cW7um/DU0IW3RF7+02zazdkgnF0iPBYqfMXUM21VL5ZGHVUppC\r\nYRqNphkn+hjdvZg+ChIr9VcV1wZxBPLStYBAlLdSMcfb+8IEuw05QFvNV6+l\r\nC7Kx+HKoGYIBL/WFe+HsGiFCqJI9YUnYQOiASrQZMpgys99IslVpZqeeN/u8\r\nri9Rbg5R40ViYe3zrQjql0qN4OSyBZdURCVGHxA11BwPVFhlqTxTGyUBjINn\r\nLGhyYmXqBWu7zJXmVnfFBa9TpF3kw4a9Pk9BLSxT512z/OU5YSexweS9aNX/\r\nBMYF7xFuSrNcLFiJ/Agh2XbhvE+5PP7BFsbHacoUzreRcMMyxl1bggJxEhHG\r\nVvkRpiygNBaJQENMK2yv+DsJEUOuS1fgv3o=\r\n=iGKA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a69c14e10.0_1671016683749_0.8955759731769308","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/theme","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3458330406161c0e54284e35aa6b238d2265da9c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":45,"integrity":"sha512-bczC0TTPL5wL7Xm1CUf+qE6YEZZOp0eEvz1i7r1l8cNJ2o7haOeyS+pUCegnR5YzY6KtnpZ/JfcdIQ8BoSBGZA==","signatures":[{"sig":"MEUCIAMdtsGgYHmZWKrB6kJuO+En3KqbZVQt0ViBRGBVC2H1AiEA+y2xJgaL2UyyHOHJZvtNy0g/bHdJxLyf42hwirrAOE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf1PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXYxAAigTIYJUUMGv5vIo8kaj8yFohKcOUjl0G2bpzabpq3Ld3OFgD\r\nGjXPleXfqTMx/tHjeL/37+gEeLhYhovF8lsnB976yZGDG0NU7SHIR+Qs5ac6\r\nUz4yUh6u0qcgQaozoGtLJzn8fKhFciUCcHf3HKk10FRkrfWthgB+O7QeAPYf\r\n3bmaKC3ZNPO+TR/wP34ImdUi2p/rjLHLBS1e8EelmOcXydnJDiRrmgPk8QXh\r\nB/NW4/rmIV2nLXg37YzrtEqwFSgoIMj3D543vabeH5G842yNcGStRuI8dQYF\r\nCLq2oF7Aw3rkn3WzGgAMiRxTn0Znl63IH9u75sfDeuha3HSgsK6IonPZFrxH\r\nnYEy33QuEJ+HzH59UdQdWuL85tQ5GTnqKdk7woF4MgObGFv/WQOYECsIE+32\r\nFsYoCvzpwSgNtQonJTCDJQQaySAtlMjU5oIgyDcSc/Jwp5tgqNf9Rp+4WjHf\r\nY1pJXFChU1gMSN6gwZJ2XwQ850wYf56hCi2DZHi994y9kcJaB7zAMoG795IR\r\nti5ebRWP89C73STb67KnWXTyETZ2G3iq/2y2oHIv5TGz1f8tGzeeqtGPu9PH\r\npWBcGFYl7quMSRzua5GT13ClPkP6A0KZ6/LdKttPi0fuSLx6OsaN1U9G2MIS\r\nHQhKpQvzqlBBAyQdLWLew6O33DqdeQoZP5A=\r\n=zLni\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.f43e0ceb5.0_1671036239068_0.631576024505067","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/theme","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.34767110.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc94a754cfeffb32c2aa2a3bbc31c3343f41aab9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.34767110.0.tgz","fileCount":45,"integrity":"sha512-rgYt8uMlWZVGHjYGPEiVf5iCSuru4vEo9RUPV3jmhpMFjaNtU1LK0SBF0BOdk9b+UKGmyH6Bej2vIHeUEgx86Q==","signatures":[{"sig":"MEUCIBKZBdVfKoyyoPBNMa9XZSQdaxDFcPGbcTBo/fya/ojiAiEAq4ZPQThgdkgsvDS1PYYZwEn67wYBZe4MY486fsEXQus=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgZlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrY2w//YKZRX8kjSfwQnoJLavKA4JUykBUVdtQh8Kl2ufFdJ7VUfemU\r\nCWOQRAzwr89IEJ8/hNBWqhavi85oPMwMa+NN9AUHsdLs8Sr6Q4DLo0+WFKpj\r\n/O+8319duBamCtDTi9WfKB8jcBPOstvMgqdXWgmWV1OL4LRE9kYbiSvKaKX8\r\n0Lz3pzvUZ5o3mcAQrfV5h/NUE5V6AJoraEY0QKL06EBSP36itFxZPlLSnQgh\r\nBdsnQLTye5FB4c3tjNGpb3NKJjBo/7z3Nl/kKSznrDPbrNI+IPwLdZwH78mt\r\nkj+D50pwjOIBgMokvyw3LAGZKdN9AnSygWgNclekMDmmX0o+M6Gc/yODHD7v\r\nvgYHYNDz1rA/BmkFRzHH4zaYsdpFAijv9UogvVo00cFcYFnX40k/d7x6ViOi\r\n/8mpDCTxccG15uBU5jB8MJOzAN8BVetDUU5DiOGok7Tl+CyWaWuU3VAIFxfM\r\n//btTUT65pJABUB9CFWJrrgsO9zWq9kD2yyL6SqOMp1rP0MQILG+zVOnF5Zu\r\nM1Fwdd2Ry5qdT2vaQ+a63CnU31YOhTgKqEejzwQQIstDRc1zj+25SUOHUyA6\r\njIsc0uhdd3/h77Q2iFNYXlU6r7GaWlq2MU8hx4k5uKBJa9oFkE6zmMiPtbdR\r\ni6gII7t/g5bDuhF7TFohBQ/U2W5LEtjN898=\r\n=Fxg3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.34767110.0_1671038565633_0.7433251634018565","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/theme","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"263c7110984a65fdbd9f79002110651c477b1a38","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.1f99f3c50.0.tgz","fileCount":45,"integrity":"sha512-dqjbxF0IxV61Grvddhm/3o966qKcQ938bTyEuZQo6dW5zyxay82Qax7MjB51D778JlgHdu6y/CsowTPGBvQysg==","signatures":[{"sig":"MEUCIQD6JZG2RBYcBha88AsjBS3MZNTk4NnG9sm7h+hAcxbs7gIgafENnBTBOwyy5SLsFH79nTbif+i/CNx9tvxuUQjOhXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy4rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpL6hAAmEVnU+0n+eUPm5FkxClSXJrw/aT8ORfJKKO+oTseki0RGQJS\r\naElUTnmS15CShGaoFs7xumRwOzrCPNtens6sYRykhDzfvgRM7wX6yyK2S3D0\r\nD0MR5/k13fP7RspGJEHx7+zGYBkHVLLByDovZv/mJbLOhllRC1C4Y1MpMoui\r\nSOuNZg6vWwjSSqLf5DrB+bOy67WlOEBNCTWvBiRyRCHs0t5R1TFDNQF3wa01\r\nWMYpyYiJ/LjnpeOJnPqKQI5883GYMsye5Z0VA5rKHPPIyZVAQpnNtFmqS6EN\r\nN5g/GpjqZb63f9Ae+t2Xiz/20u0ErmrzF2rIvXvYqj5BFrrFPWek7+SgZjPo\r\nb69V0g9wbYI6x7Z+bL3zTTyoaZOkt2ZvL9/ulqxbbPtZTCA5/9kDrhds5w7H\r\n52/MyIr1DldvVE/F7RVBckg/H5XcHaUR2g5IVa/PwYepUH75owGSo7rSKI+g\r\nd5pC8GEDpLIJ82qh3GydpuC1ih8MFhPWoCw9jq3ZFuJviVwoQb0Cha9ir/60\r\n1cVj2tvxjQslkP41Ka33irsME4g19GJluEdhnKhn6aX40OBkNzOt9q6wkLeD\r\nH6j9bI4XK8ysYImkyVJz36QfCnDp88NCf+PZ9yQLp6tf9Aya3+OvzN0YgpqJ\r\nqS1w1OHM0o0i7/3boX57SQQ+Vlk1UrlCYwk=\r\n=xqTc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.1f99f3c50.0_1671114282854_0.20813250153317386","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/theme","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da334d49b718d368189fe6081e77271abbbc2628","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.cfd69490f.0.tgz","fileCount":45,"integrity":"sha512-qOZtf+9YoFUL/NYxlMIrRtIvk3ZRwDyByl+N8IIsWwrW75c3VMLIsQOAWPY5Gi6ChRLZVZh+wORNzVzRBgn2QQ==","signatures":[{"sig":"MEUCIE2UAXervhd5SiQn2VzqyomTHF42BwZnQqnuiinW9ebaAiEA+qk9zev7ZDltB2kVPr3EjAGfRQ+L6GEq8NI80Pv/fRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNASACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmptdg//c25lKkG9yZJ91IpiaqTsfhkiHYkIF5pT/MhkBrThujv42J7h\r\nn7vAryDUZ1UL8jqZwhb919OAXkmPw0mgaCDl/kA6eVw8+dcl5SxhlaRO0a75\r\nk7ZVPQ+0o3YQ8UpAYyMkjeXuVtGn2IOhF0TY08d2mMj4ZRnkRLaeBihFpPM+\r\nFn51YS6kE5tocxKfSsSesZX3XTj1tDYnfTihvI9E6vS8IzKwqbKWc6vduLEJ\r\n7XV/dcgnq/AL62z+0xIh9VUKdoi0RBCiH817ldTF0ru1f+U1l/cX+4G9JNgt\r\n8cntRZwPGvgsN5HtXy5kN7pNflbs3zaGYwmr5qf+7v1GPU1rJuzqSmB+qY65\r\nmtozX5wsnfiaAgj9qL+Y+PZKwxrzL8JAIV7CDH1svGz8eFmKte6lFbB1/weG\r\nXdl931MXsTazAtP1RwooSrbJ7IO4pqaIsl+HYjLhzaiGAT6eENiXy/Bz/Hpu\r\nAOiGUuPGXtxjUl4GPT+QMAS9TXCiRjoHSPd+BANzT2/cFQaiww0N21l5Qyw3\r\n29vMDTRkG7KwdL+SOftBeA2iQggRUgSc3IPYo+u/BqEYua1N9BoiOfFjpjtj\r\nE6zI1GWoTla4N3o4fZbxHqIOH1Hc9g8FgezpQDG2EkxpwAUp7Z+BTcVjfi5a\r\n6RGeo3r79GRee+V9T/mGbZdgpqMkhsOwBVk=\r\n=Pr8/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.cfd69490f.0_1671221266440_0.48860809330215127","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/theme","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3acb80fd3532a567ac36afbe3b04aaf2c47edb8c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.94ad8d986.0.tgz","fileCount":45,"integrity":"sha512-PenAPk88CGkd+gqybqHkBXHr63cl68n/aZs9EB2M8VoJIG7OlXglzRsUES0L+penm/h1AWDuAdEntSblIl0xlw==","signatures":[{"sig":"MEUCIDXSI2RN6+DY9kXoe/pJvu81DiPSz9qQ0J37KxOxUUaUAiEAvhJhJ/h8yASTvUbZ3TU+oDRFdTbwaZP+8Sjx/N8Yi9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLrZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1yg//eIBdPK3NiJIx25xYyWScbcMcXIpOA9P3tQGR5Jw0EtrtUEXj\r\nEtV/AdBdv6508IhEIpghCsr0oyeqz8dU733vrq0xAYfBMujBdu/iyFe8kTPO\r\nWs8hj1j4KrYHIM4iyBNh6hUpd+nZVgoq5aGIKboSRe04N2gvsMGkn2zhTzyn\r\nZ+XJD/n7FXSLfRMQBdHMIXMZ8W4qlhQrcj0SzMdXRSJieBKtQUSR4woL/IUZ\r\njlUH5KHl1mxU0MCQnrlGAt1TubzoDwrIR2tYOWcGv2iRaBm+d7CIjgpr2/zJ\r\nz+zcF4KpbMhukEfDH5xzb/u9L/VEyqEJWoKSk3Zp6X1PFQMG5G7ZXhe3NkM8\r\nOzApR/3jSSsoJbiJX5UdMiSMJGg0KJ7QJIjyFttgRNtMiVe5Z27sr9PPaauF\r\n8TqekDnBAfM14FrKfRqrzHuwnR3KHxFY4IIIpBLOZrfq/EqVHLPNtPRzLUgw\r\nEsuEfurWbhtk5RXSHzc4JYDvKZwpq6hfMrc6cYDroKiB4iSj4i3oApOMzVCX\r\n0QmiHY85scE+9GlFoXQIhNNMyc+JdGAvz93DD97bqxrnNVL9qvsW5PJNOF6E\r\nSMmlYRxZxrg4DV1Yw4FAA+7pRgfgQCd64BGyLUXLOEKdN2LwMHWQ6so2oAQ7\r\nfS1uwffLzEwdMihsOxjWLuvhfA03IWUD+4o=\r\n=SHxb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.94ad8d986.0_1671477977365_0.017983629135756463","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/theme","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.604264203.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fbc18f38fb1bc4bd70f043999d83b770e5b1f5a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.604264203.0.tgz","fileCount":45,"integrity":"sha512-nPUM+gdW/Yp2E02WCJ87fqv4npyI3y6uBacblO2a1oPqcHUYo3VpK4fFZsA7OmcOatTzG9LcAm0koyHMQHt5hA==","signatures":[{"sig":"MEQCIFm4Ko/kiETMf85k/hiWbWHlRFcxEDVwTNxdDM/A/1BIAiAU9t+LrwMzm3H4BUbHXP7GqGKKar+wP5WPROesdELdnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo30zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoU6Q/+Ki1UJTvhNDw5d6lfw9nKW4ABnjWMlDr9mvlMVp4mVQmkZ+sZ\r\nW4/2/MFAg5Lzl3ufMWtIj7+chhOVTVX7pdoQLW9hpcL/7VETYdGmz47ctmiV\r\nf4Jq32WKmYExB023L23zOHi3hX5IPSMN9LiVdARSYLsSvT6d8yxSR/ZmnuzC\r\nMBVbOzWtWYLAMrzlwKV50xq/Mcxq4aUSxNz3SFAMHFZ7dpV7rrpM8NIfy9Tn\r\ncZsYbXw4KAXasOBBpaR1mNUnl3KXOJASXEzLJV0JVlGtb9+Nw4bCJ28e2eUS\r\nWRVMNpCNNUczf2KJB4S3xkIOC2qGO4YQrDlzhtawe31XUH9i6MEXVidONl0a\r\nqtvNx3Nw7xPpi3DpyuVVjzaxcX5OcafjDonxb/3IqTAQCjiCj332QpOXa5yQ\r\nCLAORx4QxxSrMYO3fGUHANi0CwKiWJvu7j2U1wdry/dfggw5EGvIKR2Fydnw\r\nwdpwdpLqD0W8pySt7+aErZTfSWqVquzTDZBgGLt1ZDP86r1nPY0G0YKkdyO/\r\nZ15Vue2uwVmbHoK0phFX2c6egH5Mdu9bfIpUG+O5sbOf3ZqE51Vs+umE1Zvm\r\ncg+2jeTNej2aDlgJ2XqM8QHTbvpYgNfOUasiu39OdwweiNVUQjVYAX3cJiw9\r\nwJDwotDqrMtIvoD/IEE2MjvvGy9QVLjxQno=\r\n=ozTY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.604264203.0_1671658802885_0.08539463191989238","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/theme","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97f4c8a9fd674c3c5362a264d99a513e95bd4c04","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.85bcff6af.0.tgz","fileCount":45,"integrity":"sha512-yIaNgDjBbXu02rt/4WcLbPzqTH7jHsRmgfDnqX6EyvwPt7GAhJLreWYJ2JPH2JvKLo+Gnjzw3ynYi49CBBl18A==","signatures":[{"sig":"MEUCIQCFTdEeRFNklOunHUg7rg5HMLfoWaruEi3cbmyKoNfbRQIgIboZcyn9zqvh+ldWOzJ4gkmSvCn6mZ0zGThm0gPOx1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDBUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGtA/9EI0oEMRmL1v3FAn6RHVvjwz3X5jyRljoi/GBocZbWy+lpapL\r\nDfv0eJJU7WB4DZcWtGMrbb0mE/ryGab4IyK9YLxeuoLirxQd//hXQYvchzpu\r\n9g6tcMwCUh3urKwf00RWoQl11xPchEcmUD96Y+/VVeLKEzjYBkETAeKwhqrZ\r\nuk/pjg0jdRXB1DXYqVjgqyV1fY5bFtJ3fF5322M5+g1ulDVjPDPMIBRysJ54\r\nWLsbVSB/0S0qjPy+gT0kjCaxDjmpUbcFKoJgUorRX+fEc3dlsUX9LqON5h1c\r\naWqMaHr696TcTFFTsJzXos6EICMINHA8SzFpZWOWDcYrS+iGh92KTv1n3167\r\n2ZPzC+xiCbrBxk2OZSlacMLDQl9hjKrVV/D0HSjXHUrf8qgFXMHMGAIH/+z+\r\n//ZK02Rq2Y6TrpW6PuyVO7Sp9G0rbUNO4NWzKyelBxf4dwsqiI7svD3rui5u\r\n3s64T4XH6mI5dgImSpI2OLcaoE4vV8xhdc+Qr6powbQEqw9FrYBzfWntkt2N\r\ng5DToGPI3wIZAFH72S0Rb7Ob9g8cZ8pagkFpuWtreQt2AsOUWopm1LnX3Kmg\r\nxMl8gu8W/GLPllhfAEQlCBa19xkf4urVzQ4ZYgbwlm+X15gd3ErlAdLisUuh\r\nmJjmwZMuWdIjS7GWpm2zoQS9VTpKkQf6TZg=\r\n=OK01\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.85bcff6af.0_1671704660632_0.42166713988961946","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/theme","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01fc516c48cb39178e529c05957bdb9fe23b414c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ece3e8d21.0.tgz","fileCount":45,"integrity":"sha512-C92pTgR0Hxb61wR05ddo37E1JfwdKMI5DBM6zR7prPC54B5nZ4AuN+MCtx9yVByHSP+4wQZwoGVUyMgJEnMVdA==","signatures":[{"sig":"MEQCIGm5ztyLnBHf+1hsoParhSl3Zj+mlCRaIszZd93Cirj/AiAESGaOWMVdXBnex7IeKbL89IZvtkLArfEuGUmTe7Yv3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpI+/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZcg//U9CfN3lp4bVG1/pT+J4WWQFcRp2u4Lx8GwODFcWq9blzQGGF\r\nDHHC+rXuXU+99m4QgPxDugMTW1Os8TAWYZT7+T4LHsg7WFKxoPXpNC/33AJU\r\nERxfIlr0MfMEjaYq+htUbT+seWHJE9a7n5NlNV5xxR2m5VvNx7aAihCL2mNb\r\nY0jkuoMeNIzAd1vT/aVNoafWZ57v/0cgEFb9y6gDHEJUuRk0IYh0c1sPzOv8\r\nz3ydB6H+vQUZhbZfaRgfM1kk9iQh/IxAmAuWeBwSqm0rit7nHpxAZg6oDWyG\r\n0Ov0PRYklzJEztvnM8LDtOuhNFUpKyJ7aZjOPG3iciQchcQtYryKFTnSRIWk\r\nOOcZgA3V88PO3M/hubOFrXyz110HGQSybsNI2IXERkRGyEA6yUNXgTKD/o58\r\nAiDgkbILqaQMQTqNsfQfVXQYSRq+q8F0c8qFxfKLvRPxnXLs9Dr7aj3OZFDA\r\n/aYXHVKROjZ9lsA4vFIqsQ/I3R0EvSzQjp6Fqx5hXcikmxq2k/9MP4jG2hAa\r\ngwWejYzNqgRYR3MYkPtJ1mHMASkOvGPvXZ1WRCo/cTzCXeo8SPRnUsG2GDip\r\ndfr5ASGCUB9j19tCgkhK3r1ZGZFbTJWY3oBXzZg4Jf+7pWw+ysZt069FyBn4\r\n1Y1Knx6kSIvjigoGpXbzPdAgO8M6woK8Dgc=\r\n=Yq8l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ece3e8d21.0_1671729087063_0.09245285678081094","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/theme","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00f1b71e8b722536598ea7b5987ab312a5b89cb3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.278ad53d1.0.tgz","fileCount":45,"integrity":"sha512-HxmPMgrWRo4hyEnIdTlfy/HhgWbS2y/aMNlNY6WzhQuCrrO7UEZuV1BqyettSji6ezLl+aW7mQCPIXp+I4H09A==","signatures":[{"sig":"MEUCIQC2iWGOJrRVTveA86NIh/hWQnqEJ3pHJUH0DWqypYQBwwIgLPWaxltE5qCir/X8XxMEgdkgZGTfwQaAJQoqfHw2lcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyWMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsnA//VckAO/su7K/ADdMCsybQWBcKE2OIaF1ECRz9e8skpexOXDED\r\nOvMer2D4ieIQJ24RmYXrVL4Ko0N6GORCrZULAzV7Fmu3ko07VeEr1fKok6E2\r\nGDsW5F30VZJJs9EuxhZzmmmiNgRcIZvPPAKUKwQaAO8qRZYInwqnRwOHJWVf\r\nTBRorhXQ0GrveDJ1Gkf1bpAJlbnYhUd1ATeCEk7vmEi4C1TtfMd3PrzMVL3i\r\nBRPjkEfHsvOA9oeqNnmfTcCLrsDnCAVFfXficVw3XAHkYhX3YsnuXHwxRH4i\r\nozDGXFxZiXmSRfGK2D0e47/BXdVYCNcDqhc+Tf15264QQE/7oLgwbhPRlSax\r\nq/yUfN0JFs1xANPO0iqzc8IDX1wlMfHGxtcHkBOwrEwKhUP/6sDX8LK7K8sP\r\nrGwN9ApBgTCxoshas6YDwNaEd1HFaLTRsTTs4O1TRm2a9iUPuCZ7aDltTpBB\r\nBukz4c9rQGohG7zr/88z9DMwe2Ek9MAsOxwVSnM3yrIZLGpTaFTSme17J6eL\r\nlL751cTVr9JPPikewzgizt+0KMO6S0VgMdZoyhE1DbL1aP7dQ9HM4pbr0sv3\r\nSZw31+IoSywcpzTsYUsMY8Hvdlf5js/CDvuMFS3N+AdFa5WJhWVq8Gta3+6w\r\nyCfyJklttmuBi2F1106ayaCNfAjOO9QAyIc=\r\n=xMj8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.278ad53d1.0_1672160651903_0.7843225443506756","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/theme","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be349fb5d43ee4474cb9662c0947f8cae01d8a68","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a7d8389e1.0.tgz","fileCount":45,"integrity":"sha512-80gv1pDFP3/518HyOCH13rA63TC0/ublLVEBZbymDn5+JSQEQ3iN0oF6Oo7jE7a0vZFIvzKg1aPc8MjUkEkaqA==","signatures":[{"sig":"MEQCIDUJ9xk3NCXOBr1fZmj7bSTSSpW9UwdnAuxeZba0U0qBAiBlOQZdlYYRgZNH5N2XT1KIfMANGWO5hbYNv6m82Y+cZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0FeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrubA//aAQedn3u80Ewy35qbycKctMZtKYfPGo5gm36dayfoyMyUHdu\r\n73BLkrbn12hvLYkACWYLoEGXto24yMPN9tq8Og7bursqKvGZdD40ezRvAV8a\r\nIlePsal/+zp46kBkciqO1bYqI8UlFbKqsxEwcfU59Ls2D9TpBUCgzelVSvSG\r\n5Kbg4lK4Q3GrgrhVrDRyUkH7Vp/2T3b5cG9d6wUNa1++jdX5H7JHcxqJDPtx\r\nkLxacnTfaKkDhfmz8mHN5XkgPfSkrhL7KRpETS4RC9x1b7LaMdA7UZLapkxD\r\nvSt+NPl+pZiXJNfVlfgnOkQzI9MWf4GM2PKuMc7T23J34gIM27GMARc5xjzL\r\nK51aWuo0os5Y/XpsDDQvuKoLWiLzs4zlM+0sHr+IfW+lcsJaWsH+IaT4LEss\r\nyOi5H5YVKxuddx7FXBAZCjeHGyecPGv9ofRe2pK7jDwxPY6h8fNhh/5j5DIR\r\nXO3IvlFW0NIsVGSjScnAVsOpUud+AFctIo2vRGUqF+Sc3zY3oz8EWBe9mkBc\r\nxYfZDNW8yZraGuXUTUglfKFlKB6R54LQwAytnPSwaVzNUjZQJhD0JytPaBn+\r\nTQZfWQV6Z3Rr3eDrHvTzItRKCvD5dtSoTSBPVIU9+rCmimU4r7WgloWxr/Y7\r\nc9nVfBui3PfJ45Bz80L2aDldW6AEv8oC8tw=\r\n=gRO7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a7d8389e1.0_1672167774569_0.9573492580000518","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/theme","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc2c8021a25b87d1098d142c2271cd1491da74c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.8175d5eff.0.tgz","fileCount":45,"integrity":"sha512-lXN+HTvmPx9NeIFJR3QEJ0jL8ZbzwCo4zfpF90IwCMTdfIWB6u6Cn60NtYFbr0Cs7L3OVmsTNSAvmabRS4Vhtg==","signatures":[{"sig":"MEUCIEkM/wP4gUa/bOS8O+Dp6/Sd7pkmcFou9wn+KRQAkg9BAiEAzpP6SHcFzzgziC5rGKv1Q3lAUfm+5AmThjmqaWQ72mA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6D3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmptxw//WVI9t8SgD9rwjigNjbgVvd45KVKhilQaL0YPw2AyKP2C3oFR\r\nRX3LFat2fdF72T1BGQ0XXiopeD7IFCo3i4hW5IYpLLVaPhltdMM4ZjHrbB5O\r\nAMnRC3E0PGwHWM36KfovZT6iwLVlkkMx+PlFzvMA+Fc1L31kInjcMYNsDwqZ\r\n07V3Kup8rrGTRf+AcNbUSkb4lqpzbvW0QgJ2s571P5gJNKoagCFDPMKERYRB\r\nW/JjGyY1MLUKQVl9X0CIaQRtzdRb5Ft04QY2r4JQKrJk3vRwbbRwOhSCSdeb\r\nilNls0NMIRuAZOtXgyixMFztzGke+kZvKBn6b9iKtp4IbjIL5TYObA76baWn\r\ntD2xsZ8sO8zQ/6abRmEEL/JFqQAZXHhOVl6VnUEWBaoPbji8zZDKz2s2J2uF\r\nj9mF+D1MiZ0OdWuz67387G7OaF+tiHPCADc+pxGaNTBowPpc9cSOtg9KG8PX\r\nPlh9y2Ybap1+Z81/56HpJWO57pQ+plbkMwjuwtAn+D4/NxAUGDTb3wCcVkmi\r\nrzXAQITtsTL9edNIUpFvAJnzG5vXjUvteHaYxVr6WowPLE7lO30QIKIxlDjv\r\nxZKQ8ZEmJ6udmrdJ3lWEc32ddaSnaiivqLeBpIVS5DVVYEQOMrEuPcxENQKb\r\nO5zxq8UtZURL8uOreh4rQRARHGsiXh+WS+g=\r\n=nr7W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.8175d5eff.0_1672192247463_0.7500458054420112","host":"s3://npm-registry-packages"}},"15.0.0-canary.16abb41ed.0":{"name":"@material/theme","version":"15.0.0-canary.16abb41ed.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.16abb41ed.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"252739aa2ed302dd81d009d8554e2539bda774e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.16abb41ed.0.tgz","fileCount":45,"integrity":"sha512-v8fKAFZ+Y6qW97CKkzr52H9kv8ktJlmW7LYhgKODvPW9A2xSZTHcVDqMMaHuDHtHMa3+DYKXZA11TRNGv8+ASg==","signatures":[{"sig":"MEQCIBuRZZs5qfvMsyC208j4SPvnUlMaaB2hn3+atUJj+xwvAiBrhN9ygXEYDnsQQTd4AZvgQF58D43zpsN7K8fe7tMliQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrJsEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoV1A/8DamsjZavm5NCmI5hAU/vN1L4rz2GAFeelM/9E662c4uBAy0Z\r\nBhMhBr5JL7H9fiDpikVcPTbAGzBqpGIcAbPdVLHcZH/Scx2ursUvBG/azd+H\r\nBhD6AGrxhPiJMe+QkTqvh5zXsLeIRuLwzUd6vd69D1aunQ9YPjW3nPZrVTkd\r\nCF9WkX0wwdG5JieIcXs/oMm46rdOG+3M56zF3vWKxgGBBeO3eB81atTAyNi7\r\n5uxjiGCT0xbzchTTjmwNAv16V2Gxrck5FHX8yD+yx290AfzccLTEyjFURdx+\r\nGFu8/23TFLzZeepekpWMfPx6Nv7v/aTDAp5Z3h5jgpXmHBcw/mjrKSMfXzHA\r\nCcVy67tiP9y6HSTyUNeH+d5WhDUD3tyqiSz1oCQ1nnFyLKcgMmFVWFzRLjg5\r\nSWemu0ynVS2ajHSPFOoXP8Da2npRxePwvJo94yTJpbA/ZyK9ueRPgJvMk69r\r\nyv+543bvLj1Qc7PszRZy971qV0QUvufzHMhnnfan26mBlg3F0n36gn7Xd5Gf\r\n85uZ0huFvY0JWOxyTvaRwM/V6ILqCLjEFH47V6O665lG6th1hPFezwe7zvRL\r\n8I6+Qv0oe+lc8FqyoJMzx0gQJvaEk0Ivh+mVkQyGE3hzTUR0uA2Mopu/K+/E\r\n6MvXwpqCdzli+y6Ea0ElV388jLNQRsOM5KQ=\r\n=Y4mp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d76b7c826f30ccda72f622ff722cc7585648dc34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.16abb41ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.16abb41ed.0_1672256260536_0.20525630686736207","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/theme","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2cbd380dba8015296892f8ce859221f1a4a1cde","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.e21dcb86d.0.tgz","fileCount":45,"integrity":"sha512-SFliUCie4Xzq+yldfDEPADv6f/BUYWnJ4lFJ7+uCZR4tXSxhlWEkSCuDhE/t6lGVx7N0taWwoWi3cnZxSpcRrA==","signatures":[{"sig":"MEYCIQDuGyiK8fjYrOET8c8BbfVeTHYwD2stcsVykrqJc6/rTAIhAN8pXyJRgqjR63wWhq1Or9oqf5fpQeaBv3iZ3m+WdsGr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ2xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUqxAAl16RKNKnhQNoGVXJ+fX2vpJE6h0XjpYyZzFxScEqYz05pS5B\r\nEUXYHG313/f5x2BZP8eI5NStjZxf4AQNt7WWL+JLzmRyxSBPhTRKjBM4yaKo\r\nTusbU6PYk9Bp5KI7bYShr2RCzgTILgYtRSKywKmzQwiPhQKYkGCONKz2t17U\r\nKkWxsSI/vwkb+MjRmCMRKK9kOOZSZ6L4v6BlUpkMrKc5C3YI/e79AUS11E8b\r\nv0n5ADr4E3CCdoxZ6EMWqSTceoTfDK+unE0lPUhhu39FJrkBXupcOEN/c7/p\r\nf1Ez76XOzqh5wEx5XIOMXlwyaFX6SXGBYqOcJs2v4ov57rKMOBS9Cm6Ys+Zu\r\n/0pB/ws0BIMHI5TlapyRyHp/ffC44Qs5AR9ZAIq1rgBXHV1LplFcWivCG+Oa\r\nCYd/DEiUYwDGOBKfSqqKilX6DcjTl2YaiFb4VM3xhp2yGZIB8UIEAhL3cjfo\r\nC3Mwahq6mL8MIPoeo3ijD8MLzEc2jTD1j6++aQtzi4FGhcBkEaN+A6mlRyLx\r\nvOteJa8pHgkpPcSzlrAVZddCLxIAWh9I2pUloGMExDKAbHg/5kmWl/pRj/+9\r\nO8vWVQbol4JjsKmWXuaLzScDFVzNaOSXd5Uk6HG+KGDgSan9f/eBmyQLbxCb\r\nsGp1+RBP+EjgaCj4BOddcFvwf22p3ev7qEQ=\r\n=Kv/2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.e21dcb86d.0_1672322481732_0.060498996856592324","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/theme","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e5f660138b0ceedf0819358a85f78288b4e31a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":45,"integrity":"sha512-t17UgEuCAgZN90r8G8r8ncDykkHpfuO+uvM8W8U1hyY1JcKJnkD5LbUpP26nQ/duAZ3JH4/KFyYPPfgZblfcrg==","signatures":[{"sig":"MEUCIHf4hzjXJyxhH+9Lu6k8BH8cVd8/+lnGLOoW70kHia9tAiEA5s/YBJ3g2polYEGU/vA4wiz1T3ocRNgBrV7D9/Is3fM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre0dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXJA/7B4EKcO2N7Lvh6EumapZA3UujFz/99FZbG5+ztDLsbVNoJ7YN\r\n6Dq9QulQWusFMgCwIHS/QMTjHHirzp1NVoqxyrLYrCy/Xxe6V+FLV3P9unpM\r\nRi8pB216gjyTMwrA49ri9UAXGQabOQCXDgFTCgnqzpOYyI0nJXI723aOv8Tu\r\npQuNB8/xPxRbxW5M8Y32vrJCuXmnZJhgSniulhvc+HRhs7xiR16vAyjfkkpc\r\ndF6jLeboDo0RKIci4AGeDrUonElhMA3/b/8DiiKB3EYydFNqRpacmTOPeXH6\r\nomM1jwcVZKjbdlPeUMs4WSAuZkzHg6u/0cX2MjTrJmWO4qqjmMRYU6eLW0cU\r\n8xEQjv+vE9XTYzdL5p9csGnDO4RPQQHwhtK3ptM+98XpO4WYgG7Medeb6ce/\r\nQm8ElL5jP0tO1Wa4Hv3vcyGvj2h6uAmkcjjvLEfySh+k0d/0J5SpjSHozKuA\r\ntGhqrQYt+zoUt3rwqnO529lg9QMej9q4DhBZRqcNhcEVev8OYGPMg1NjOwmt\r\ngTeJ1aChwdkI38AdGiNTpEK0SA3tBtDv4nRHUswnTTrgqIJdAT6d4FNtbRSR\r\nj3Ji7XJWSBVIiELfnICVrC8wgXnaFw5THY3/vbYGVJYLOyTTO9Oj4s2fHMcr\r\nY2La0qn25hVAx9IhninpitAU+gVIPr3E+uc=\r\n=O5LB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.20ab6f5a8.0_1672342813232_0.9449260422454366","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/theme","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b9806f623.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7366fc725c949312b08fc632fd1d35b9709f1de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b9806f623.0.tgz","fileCount":45,"integrity":"sha512-1joJsQcuYmeBs+3K4+ZkgsRgyIqrTEM7NIZa/aCklwuaVWQES+NC7daYj8PnT7kP45QDGsuYi7ExQzdq+tnViw==","signatures":[{"sig":"MEYCIQDxCFeftstV4HuW4Eqr1/qpy///U8ULPwb1sRTT3z614QIhAIL7KU1FpVoopwvrOtTYAr+WYrvyZnqybwZ/GFsGT1st","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh0hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2ZA//aqzNt4mXED3KjQDwjBir8aInafWy7KXkZvYGIuzDnCd5uoiE\r\niLW2aRNdO+qHXU87WPDGHsHjiJcjbo+xa0HE9TlEhTFCqdxkGvznkVuorUxR\r\noGt2UvXKYKBpOdKyGKG4SMYDsi3hP4xxKODkW7w5dDbFmBHdXDdKFSG6p6ao\r\nn4UBcvrQOCjD7effxn/rPXgIYOgxcM8Jl6w5K041mscPyRCE6hpQyxLuat9b\r\n7aPg5DV8y2UJqBlFkbEMVOQvo2kLI5k0rFOA0B5tN6m5DXbcVqWX60k3DAmJ\r\npl/nbqdE4IMWkW03wTTI9aXZMRHBvoqEs8I0VrxAnTK1qED6McFfW0YIsiHx\r\n/NKWFYuXGJdLOPOnHCuf42oxki5JDX+VamHIiifljkYk/1fYxC7lf1xeX1Jv\r\nv0dPeQqJMgPHYiH17cjEpjC+UNtJQST6ZKnk9tm3St+GYp4SnkxaGAjKU8Wp\r\nUxQJsc7WFhirxVssD5tiTSf9LQgfMTZWTko0WxxewLG9yxgaw2YvEbwKkk+c\r\nXUEA73u95ktZAF/d3OOBYJQbVJYpFKlQa5IMOlQP1mHJ9BMxmQqoDTWwI2MH\r\nqYU/NMjd66vuOGmgAaaZEFoA1m0rnNRajDR1QhNG4yivi3t7E8Bnohamd1gk\r\nrhVRxsS39TnkVQoEJlM0kUDmUNGL93+y8/M=\r\n=oT8S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b9806f623.0_1672355105022_0.85965186533638","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/theme","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05430cf4782a2749071380e52e3a1885ba330e10","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.50c9f550e.0.tgz","fileCount":45,"integrity":"sha512-9z87uySpmvKxqH8+GLoXsV5rpEtOCTxjyAbVnuNNjBM+U4jL0Tel5aS8es/nfnwYY+/rpx1OWPkShH0PBoCSfA==","signatures":[{"sig":"MEQCIDqlj3k/mZcn5ctDLepeK59hF6d63T0Q/H5NCBKfxMvIAiA7XjuK0y8Baf+2SIfrA9R63tfV+C6kLxdDdZqlk52Wsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE3yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBew//aY+dD6ZHBA485wKLNa3rfApZVrMsO8EHUjXMPFfcW0zHV5y5\r\nN4YQomEFf/otESX/sxZLm1/RDfpy9lNIn25U4ntRKmaMmHi/B5JbuwhbYLKQ\r\ncJ+4vJjs7ZUiEpq9eI4sGrP9jUIJTH+CdFApotaDRP+UYZ/Blcg4WXNQl53n\r\nTLWidiDDv01FA+vzMGfx5zZfx6xBsF3gC1vHrKH2oKRij/nfL5jLp1pXOxlO\r\n3VbwGAt11YmEgxRcS0sq5dnd/W55ECXEaLwg2oBE5RpaSqSYpps2Np5+uUaY\r\nnDEL7+nroMpJDe5XmRm9kTgZjleJEONA5HDgWPxeCe/Gkb1LtfkaFCOZ2hb6\r\niz7HS5uNaTvCsUguMSW1BRv4FcCCqfOa3Mpiz5prv/2KpBfaVm9v7v6zkI0W\r\nenEajdOGa/phN/RYV3/UCzrLANn/sWmNTWAx0XixLVA1mWGbqBA4FwQ7bOqk\r\nMsN1aaMEp5UovtyEwGyfYUjlKMYPI6UTUzob3sZVp+c/27X9jNVPg0hEpNxr\r\n4hQTISugHQCETkVpwan9I1cni/MXCRGYJ5uYSIEXpnhOJpIC+nstrDlg+AQU\r\nsllyCHj0vcnwaodBGOeP0ZpaDmWRrVWCEqGyNLD/ktQiaw6M5Zyw18JtOi37\r\ngIAat33dOBo+Xq2DoN1vPf58ImxBisO0siU=\r\n=jO5N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.50c9f550e.0_1672760817788_0.6933779560110922","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/theme","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.af490a848.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cde35f3190b2c14d6059261ffcfe5dd4be0ef019","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.af490a848.0.tgz","fileCount":45,"integrity":"sha512-mrMp+a4mlhVWtP9SVG1/p+Ju5NNmlxhKLoNKUXTmr9vn8y0cIoVWA99BHTbOy5/kORn8dgkiWuzgtZjW5gE0/w==","signatures":[{"sig":"MEYCIQDcTmZsWl/6PeJGQY6JhgG6w6kZzTTCl5SVfqTuH+SgNAIhAKtUsI8H8HaJHGijHl74Jtbf6AqYaKWjlSefufzc3vmB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFAVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriDBAAk+hqnyWkfTzPunv2Dmeyi9wQzKqgeBc81IqV6qtOQBJCPBMp\r\nZzlQb9iPb85Xiib8OtEsWBPJ5brZH/5y1MXnt988UPBDeDb/qbWDAcZ15Y8q\r\nx5P1k2gNRfdLtsF9e1WeHa2RbvZt0g8yRJoqOpQnYIr1mBzqa8wpAc7lwxsd\r\ngUD5s+mSaxhq6xvgIYsl9zn2V0mvYK2YlU9R27ExvaCEJFcJ58WLGRq2ktRS\r\neU1HhbxfPcPoRFzFb/H3oH7Fw0KxbKP0dt7z/A2vwvILkmScjrxeLZmZmi3Z\r\n/Wr5oAvaypZSXULCxyzKmc0TgMJvgyx1XjnXGM4PRFVo+afEsCmXO/fV50MF\r\nGmoQ80EPJt0mf1gNxwxldhwUkMrzBGg+ffNdqnGe1nfXDteL7jbpIyfHHdfu\r\n6Q0vUeC1TzhB3kgeFS033adLVS835bx9/cxEV8K5xkKmx/RtwfLOhHyK6ndO\r\niYscsOnhIA5r61daCSazr0fEXtrSZwSOt3qmqTGT4SXe22EfiAWZqCK/CbQq\r\ndL4DkF1q7KLezKTK900zPnNFRiUH42LuQOjb/gmweCFQhM/exjaJ0pMiiy6v\r\nl6tMudhBnfRaeLWXk65l/SC8YFyqtk13xvwNIyUrFb0KXBJTxwTENYl/f3bY\r\nR4o1TgBLfAcN1crDqZ829HI9OlRV4lwgyOc=\r\n=2WtC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.af490a848.0_1672761365426_0.6624289282617108","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/theme","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f579f942c670b7fb723314becfeb8546f32cc8ec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7cf487c98.0.tgz","fileCount":45,"integrity":"sha512-in6PXJQiD1z/2qD+mTNOOWKuehWsRDMmI3rLz4T6spFtwB1EWRlbuyDQ8daEnssgzFeERhoXOzWh+Ygag2lVBA==","signatures":[{"sig":"MEQCIFK4kFQ+3j3cwy8TSnMjRbvXwvNXGU/kpRNOi7/IJmorAiAx6GalQyoCIKGNyDz3rPZ7hshRqjiuvu7C5uMgrQOQoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGfwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppWQ//SlFAPO5f/GJ4kY90aOkNHeOVkrSEmhw7Tz0soZr2mOR0/FJc\r\n1BpvbWjPGG2GuZEDt9Hpxyjo5u4cVyKEwNebYzk8wq72H4x0UlPI604eVMgA\r\nhPXPMY5CmxKz/PrcMK2Uv8kcJLQL5EJxYwVQJ9T3YjZYE9ZBXvc/ulanuvOG\r\n6o0cwXDF2chufTH8CB0qyIPBSms+sZpvEnifzBFaishGeCaUGIeiebZO660V\r\nWwALlukHt8ocvP/6Og84T194I/PnpqOxUURfK9Ham7W1RadLTib4c6buosFf\r\ncHqfT98Vv4/jycgqiKIv2mvgwS0W/vrOMFdVMTAH9G9aVHPLAg+Ln3yuMyc7\r\nN0rRXvlpi6/RgsJfUSy4VEMglqIm/xjTXGXdn1geEYhKizL+0lfDRNOlJbX8\r\nZLapsqsuw9kmUHoyBnfSD5liZFmLtiD9MNavTgXckRxgPNscEsGeriJ5l+D4\r\njpLI1KBFrFTr/1Zn+3aUTScXMkPLE6jpLdodOETuZrrxRlO0GkLdJqpLkpEc\r\nMxby+UjB+SSlrLNSzB5n9uiEtwAR+d8CAd/a0E/hrto8m/Y9AeG7cQVoLdCn\r\n5O9dtFvHyt52+C0A1i+IrZ8jsk6KTTC9vvnxBCVfW4ATwgTPZKA4NhFdXI6T\r\nPfu2SgHfaDNP6jzk8dtFwqljjWWF844iuBk=\r\n=gDmY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7cf487c98.0_1672767472529_0.7252157516313091","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/theme","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebf1475f2161437b68657c6646cfb0af8e806a62","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a52be2d5e.0.tgz","fileCount":45,"integrity":"sha512-P/TpCj9Jkdh8H1AtfijDdoAZYvfjwHpjlZ5U10JxMh48nCTcV6XedBR87XN9lU5plJmSIRha2dEdENtkoEoHdA==","signatures":[{"sig":"MEUCIDvOvSJlzC3lLOl/F3+GYlokQiJHJBK8FC9GPHXwiWHlAiEA8bTlv9SpSaTreadXSGKUg5RA9r18IUdaaUDIKcIeABU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH4aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCDA//S+n7EsTnKyS2vbTW/VvyTy25KI8AQ+6SSmO/6sdGDfMUDEPg\r\nWW4T29jH/HJ2ERkjgT7ptYqBdipSBgKn7Dh3iu3ez3SJGYxfvTkSx8xXHOM7\r\n/32TbEuOzMdCTxPgROF8J/N9Ald92aOd8/eGvtHNdfv1pOwWHg0IWTXNOAvr\r\nYjLO9WKKRph6MIQzf2YSdN8FfurWk20VBKBYjQj0Fk8HLDsU1X332xC4ypbK\r\n89ISKHRPIbCxZo4l5mf7domZBMOoPICbTJJuACRXMu95Qm8lWNJ2dxyby5Hb\r\nEesJL6JPUlYkrWo1lhwSpnr2mEln++KT3ls+P0YR9d8e6/Zy+CPft770aLBk\r\no5Xf9Py2Khy/8SIRKs9decNX9urSNc1jfL7+pWgh4kmJW8Dsc2wYB3PNY1Nz\r\nk7sKEPE9iN9bwE7OFlGYz+WsqaDY7Y4b8pXKhe3VPEh/BHzO2Yk9RKkiYpvP\r\nEnB7uwDF2URTWQYh2svxy4Z/vGRhzREYO3M74NHP30kGS1W83zqBWFDOJFRt\r\nGvueYqrcd/Hkkl1wg0sh9HIXf5UEdXjrnPN/50mShnCSjBt0/2V50BHc7D3r\r\nntD2e0p9XkH2EMEjIAHWM7fzaIfFXuhZRKQh/y2npPuQy9nnVWsdtH0hPZP3\r\n36WigN5u+j2aUkQ8zfBOmfvluJUFpu/t9LQ=\r\n=rWqN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a52be2d5e.0_1672773146596_0.9392577321083091","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/theme","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"042e158d99e5ccfb1e6899cf3d2f3d46ee85887a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.e38ba17c5.0.tgz","fileCount":45,"integrity":"sha512-DhtTADRcZhM/7gq4iB0ELZ6eElCJbupeC1ztUeqhYPeRVKajRXZw5J5Dxpp++G0dT9rxiDoaIQMPFJDu6Y/Xww==","signatures":[{"sig":"MEQCIB+AKO6JMJTb/zuyOwQY0MQ5k7Lk5AqFB1s3yizcGn3GAiA63F15VDRlia/SSEXAWt/uVBWtwBzgbyOZv4i+hDhW5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtKzPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLGxAAmz9E8MVR0WIc9TAaqGcD1jnzn7v9elcZXd4+Kpvp0IBQs7gy\r\nn3axJls9eZcOgvp/ovZ6FsL7bqAboW6F5pEz1L/UXbbjtirwUFL2ZEBcQT09\r\nolTJVR9HSVSx2FkQVK26t0LcxVUg8uf8VWtIKaPGUmKtMIDs5dd9ok3SbTKm\r\nn/7bN1swK1IP6IkXfFH2rdSxhATzJ6Y9RVl86u/4AyzpU7PbLD8AxAeGLpcL\r\nATp4lf76iBc1qkM1Pev0jqc678Sjt6aMdkvMdZTmV46qnyHq0sAXGkZD9NCn\r\n0yTFhrRvfmUx6OVphAZlAJM1Wr1WvJeWQw0y6ZJzEj3rGTQ6EzKWYwlLJody\r\nHZ7g+wGqvuN8krqQHC990hwG8hPy0N/JxwPMsBwNu71k0HUJVdDGQTKTNGHu\r\n7VsCTUrog1nFnU/HYbKQvryqaCtmq2QRm9tU4KM/EnNHLpjlDds6o4hkxVVg\r\n7xjsqKtR+mYpkzTgr2cxmBjeI+V9AbaLscnmEjQJiS7c2dIJMv8R4fO4q/1L\r\nSc6y8lw2tuTv2yY8/T7QzOp2FWt0TTbZg9ahvI+SeQcbVBmRi97EHP/1YP7D\r\nCxgG09bC2RcCnlhdN1b+9tras3bvPWOVMrmLddSdrdDNN9hVjMvpzaFsz6Cc\r\n/Na+BA5NLIaT1+bCmto7bVFAjdG/UKADeXQ=\r\n=N2VT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.e38ba17c5.0_1672785103035_0.5634917340006229","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/theme","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5750da0c51ef4cda0be336979fabdb763a66617d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.49041a6c3.0.tgz","fileCount":45,"integrity":"sha512-X4+e2Peh2A/VOOfofYN3NN5w3YS1+MvyB0L/ExIVUQatQmrYOJKHYJ+ZNytysYTooO2wmvYrSyp8O0IwBDAVYQ==","signatures":[{"sig":"MEYCIQDMrMGuHymLfqEibRjhpkpvuT5XaboL3KEIiDlb1+QWbAIhALkzquPtyj0qCyeesnjCfmoo+9s4MFKIwgPrUZ51/y69","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZhfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7+hAAnNa0wX1VITUzWRrMjyNzs+Hvz7W9hdNEE3Ww4jBifI6W+ekL\r\nuRxgjP9LfxQyoYwZ5lQk2SY5/wLfoW3PJzjPqpmDsUOc+NSlV98GS66dIld9\r\nJa6hbn6eYvjTjGLc//LXFDcr96L+YIozCQZPXxINCcqz8BvoZm/nXKeKQ2Fo\r\nw1VQGbQ5Zpm2DRsZKJbKnI0uKYmg+6FZRlv3DSh4LX6JXPhcBA6X+qUgRCdc\r\nH6Eiu8y3/l8ilGn7VwbnYO/tg8BfA+INrtoif0iRjj2i1/zGv+JfyEI8uXPK\r\nTGa0D/KrivisceasV/wYYRjUXTAfdg4D+w6n9y+GpU+GxAWGbSNXJcj7KX33\r\noHuh41I+PAqkX4w/kiCd19BV1s9XT6Bmv/T7oeEbNwXwTOWwDKTjfwWLkJTo\r\n35GJeva0QrHEdqSzlhdqxoMXl3qeaQzCRSdrXiiGQ0ih7zqKGW+uYfgAFVyg\r\n8KMroFnKOHHsqF+SfPZsLjiNVKN774DBdlmQTWX0Kavz3hXupS5ulv7I9vNa\r\nYye0f2KUPcfjYgGu00Nj4EPNzEsipB5L0Y1sDf57orzvhoTHBVJhogHOv4lv\r\nV2NAIJ0snsYl2D+d+A1OMjwphnPNUj5vs6O8DLo4yhW7uOSj1bAa4Xrge8FN\r\n+yXK5cNBGkibJEudKIrwx6DvqIO++2rRLWg=\r\n=8CUl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.49041a6c3.0_1672845407592_0.34539479351603264","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/theme","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c492898c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34434c36973b5c31800e9c4350466f7bcfd478a1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c492898c2.0.tgz","fileCount":45,"integrity":"sha512-E+g57xA/qMqNSdqn/Q4Wis0Zyhe5UUev0q+YdkZJ7yEqyeKHi8kV9+EXQJGQNdiXLQKBLmc/OeAOW4s9mcyNyw==","signatures":[{"sig":"MEUCIQDr6Jm/hdnZGzDCqbEt+Gg/HMvq4zYOuiglrkQZL40rjwIgMvAaNYWp8GcYV7BIHUD7wvzII3A82FmVPgEOD9Wy5Ak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbkRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+Eg//Xs7DH4MHIQ6p4okN2IOvWy/ZYKYhQcYGRmqpp39U8n4rj7JT\r\nrvcHyeE+18mxJqziGCKcfvACt2Y4Fw4/AK/OKOPG7MU7jTz3RRJmmD5iA9sX\r\n7HYIGra+6BK6LE7TqoIgNaKU0HWgUpr6fjs3jCrx4sV4dltGRPE4KmD3DmPQ\r\nBYngB8B3UQ8qUKeIwPKx1W4Qxg/STjdnT+nMQyIBxKAuIg6kGFmsmf+QoV6U\r\nITvaQvyXYuz6jbl5luAdFIfpbXaKIYtuA7Pk1IrfOGBIfiDerfXtKd586ZlQ\r\nAwTxQNHDd5kVw53l8Jzk5tDTpA4zuABk3kE2i7DBNuKxfQawcYArJlX3kWOr\r\nHqI18HPNcAHjpc58Zs7QPg6zxUQd6T/l6jmsSn5HbwShqUuNICF/Xw+w/NfJ\r\nYbIR1bQuf9sfW71oaKEjzNiN1guJXNLaMYactTJsSDyc3/ZKVdE6YKiewaaa\r\n7aSjqJ+a/XaUBRDDNWrrYo81sjkAfF9NohxyyO3BFPH7Ra/X9lZEpRK2/kHW\r\nwYccgRGc2GIHzXoGB3b9MuMzOygBkUatulIEfee1TFdjq0uwQC1ny7Btre5I\r\nGYa9FqsApnWzzkp9WJ9h2beUs4999DEhTyiJOnsGeEPx027Iig1Uc4BzLA3/\r\ncMV6WSG97QdxuYRVThVlfal/fZRvuV0aod4=\r\n=UmSI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c492898c2.0_1672853777526_0.680122667110449","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/theme","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc492aa1b29159e69a35d75c928e1fe35f81327a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d7a2277de.0.tgz","fileCount":45,"integrity":"sha512-Z1YO5Gs3eXNOg+me9z4veGP+Q2JNjtpVV+19ifbOomGSh+qGC4zaoQlbzI4d3ALiF8lBYnL82TsE8bjoy6S8Sg==","signatures":[{"sig":"MEYCIQCkaNfpOch2g+rfEhviQTGafZkguzFSg+G8VuLWs/vrcAIhAIbTY/KYyOHcWuQkLXi1FSrJAUO64jBnxZxFxU03/M34","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfEAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmri/RAAgpyat2m76nh38+Okphra2Ir1fe7bGbNm6uR/VSisVf5MVjCz\r\nNCx+QXMy/iXpocXNSbiKGEBQPFm0r8vOm9QLjbn1+H9GOWWoEi/SbtrMq+F5\r\ncT6osyeBJGXCxLh2tQgZ1BsoM0QefcSKfo5t2GwWH0kPa8Dvg+ePvcQmedy0\r\nZBd2YGrSWfNll4MmSBF+SMmN68zo28EJYhgfMX95Bx7PZ9D7LFvnA7qQd0ou\r\nqCKssgwGpc7NICoowUP+KZyjOPhR9Qa1t2URe/V9lFPOVDZRAqErj31ob8Xj\r\noxjOSOPmYPBJZ0w2wOoVmqr2sRoHiJwdHNJ//3ACzYCIzSqTj1LxcyyQsUQ7\r\nAGNUe5Y9QtLyTw0onQKMnKeULkRka9adwBr2cxN1SyFK8H1xxkw6RzF0SZV1\r\nbufHcFy13rPGrv2AEGHRSGFWDq+wz+T1bv+QNqUEpbfPDU3WP2303NxfnyjF\r\nnAitGk0+HDM+8YWBBzDj3bMN6jk0vAwBTY9cVXpqo2oz/lOXS4JJVxrqV5pY\r\n+Hj8WC8ApACXFndYBQYtmb8hGKYfnFRai4ffcxpw6bMaxCtkR8BFluOE6dtz\r\nwdi0CVlHfErYHZSP5mRaInNXfMe1t8VswidU1k8z/YyH5cV2f/2a9TcWwlwl\r\nvOVMGTqaA2G9O+tcizsOqdDLokw9cqm+TgY=\r\n=LsWZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d7a2277de.0_1672868096615_0.25802913225556345","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/theme","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c2afc34cf8b8aa804ecdf6af3dca30991f0551c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":45,"integrity":"sha512-Ho0DWUZ/JZ+NkzgdJGc5QHarTOcaqm0RnibAW/y+0BgQCgVYNQHbQ2oZjqr2u+pCOC9n2T7GVdvm4z+0xF312Q==","signatures":[{"sig":"MEUCIF8dfKYghUeqT/imv9oZgo7x1/OEKJ9EbTwUodcEQqrDAiEAgSO9RddaeXQ/KsFDdxgMVC7NRY1m9dM2jiG6WERq/+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiGNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2/w//Wf5n73X5Lc2DLxyku6D0meBZm+tzlOahCFgtnlEaytvvRlvD\r\nywytTGsMNh4lFN0XKF0bfZdhUjErRYM7vz67zTwMHTGgETzHhlgE3s4UFea8\r\nrQ+JcdVKuy+Dkny7RGb9DO0106OZharQGpina1+k6h1FotS20v9Q9+XkfSVy\r\neFrrKH6xomXYlPGK8H0yQzgJ1ZlQBoucOztHzwhJFe+vpp8WLyj2RLOz8Zu0\r\nFlg7gc7pj8dkMYLi8SZ00gkK8VpC2MQrn7THGY7YzFE/Y4iZpKfQTwdlK/pz\r\nQ/TITYRITjwUzsSpH5Ro/oDwoyIeAUTwyLyoOQGSWfJIH4mN9bb75xIuRD0O\r\n6yIzWLXfaUGGV8kiHcu7iwPUO+yyvvT7k846/AM+0v7DzSrYyrYHa04fv6/a\r\njFxiAIpWNYugFnhRcSRIGGyzfgpQh/RF6T/7vV2uQVM8d+s2jt9uJYFHmX42\r\n+QojGFONuWTGnOqKQw5yKoX3I5rJsxKOBV57pK0JwJbFNbBgEXZwztI3ZyBG\r\nsRAf46yVvHUpTFZMK5XmWEcn90iFsPc8blB93x2K2wQMG7XwRseEU7pvIRIh\r\nQoVJdO6UrK1y8spHhhlfjIj1zEP+3zqsZ5zTydd0FrAZqIWqZao8TwtpAVT8\r\nkrAvVdh6SAqBeACGiXowHClqWcwInXvo8+c=\r\n=EGRv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.fd95ca7ef.0_1672880525349_0.8922430391003568","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/theme","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f21b9a69d52c6db6769cc9c626d27018bc08c4c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.1eb44faf9.0.tgz","fileCount":45,"integrity":"sha512-nRqQegV++rMa8hltp/at0dFdHmO4R2czCQKVboIGIxn1RFlD4BK/vIhMrWyqwKtmwTAhIa/k6b26f1hf0kbxvQ==","signatures":[{"sig":"MEQCIEWKdz7NxgGks851RiXdfs3sLLNfL0dJOwZp8pX6cdZEAiAc/hZ+/7eQWFR5qAAqZd6lI1L7eQGMpsd7kSHRa3uGHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpOVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2pg//SnmqJK85Pfm6dgYyCQjxjZPAlUKFa0RolT+64qRDNWDATWLo\r\nIKYc07gIqMpyHdi2lpDScTv0vlpLYfM3tssGXu6ly6hbEsz7aanKwszv7Unx\r\ndGjVCn9qcGntAmlsbKmRR46ddjY4sSYPICrwBoUSESEEDZdF9eshBWP87IdH\r\nNXVL4FlS2qfHd5dZojxpJVjHJVpgTgKrKBVb/VG1d1nwpIH+eYzc8C5KcnMS\r\nMvbhqyHLpAywY0KjHqU7c1fnmAFZv+VPH0Kqje+vHDRegy+aHNhq3IC4IEaJ\r\nNMHI3SIK9Y8xDr0dhQwCQpMCNlQIVBNFyyhfAqBFOStnbTylGzdIrqU2vhR1\r\nQKVTuIIqIfADI3gUL/o0kF63tRYtrai/qinyGfQZf0yFRUeppDD7k9f28gF1\r\nZFRSqj5K+PVAX6pi94zHPJdSXV2aljAC4DJmnoboDYeTUE/wsons8sbgFtVZ\r\n3YID2RRhTol8ug/pXiXAVBQ22uIOuVLn9GJ9yiCHbvcIeSW1kWv5qFk+p3iR\r\nJRVtMGbRu1WY3TvVmub80Yxwd4zg8XoGs5zAnn9PX3U5s7Fv8A8xgjX+R2iR\r\niKzotaJsl0KzVUhX0mcCOn6RIyy764vYfk7h5MGDeluZ+vvwuMnol7wAi7Gt\r\nfWanfa2GjeEBmqJL4j5ivULp3viAFA3sems=\r\n=r04B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.1eb44faf9.0_1672909717145_0.767428794323815","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/theme","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b42cbf0564f4d2c96499487c029c0c64d4d770d5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.adcdb7db9.0.tgz","fileCount":45,"integrity":"sha512-8YPZ24rJ2fOrQpfFa8j1z5A83o4dQ3QybIjaR1xdQ90g1CN1j3TnNcM7osWDRG1ojXVuksr+5Lk0KEcwL3TvGw==","signatures":[{"sig":"MEUCIQDOhZzzf0HJLDPGI6m1U1siWFjVx8K4fknbBU8DQX/4fQIgUDkPQzAG6i+mvzTiVO9JUviosiW/IWM1PRXwbAx5XEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvjcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9mxAAo7HotDS3YoowZkzSO2UosN8lQ6dvEwz1TnHchb8LWlLoyqcQ\r\nfHbjShyQuvAnzUBsidLsIHB66c0TqlAH4zxzzoi1wfeeFCqIrpLlQmFOlkWl\r\nl10ehEZT0H8ZWj1ADs6G7ESyS4V2yupnkaKpzgCP6WE+jfAL/0+BplXgNSsC\r\nB0qNB1F9TdqnOSX3ARq10vjySTHDYMmryrs7sJMQZMHNFARqr3ynek2EBwei\r\ncnV/SRUulzWkJ+l9ePZ8UvFgcLNRLz7vvwcs61hp7hBOgsdesOpzupIa4COT\r\nTsLNntJTFW0dZ1SD2FCpV29aQ/BBj8G88RfYMR8f+4C/cnbn7URArOp9O/7C\r\n/caK3tAXPEffAhuLe9+mdAUfTPxwaluzL4F9IUadzQl6Oijn9r6+oxj4G3Uw\r\n44hEQgT3aHtdqVoJHutNJ2cL5xOcmI21xswtvp3J44HQ+s/bSEzpACNmIwIH\r\ngeuPPhe6CFCHYK1owqvBP2uNyFvW72/uwr/N2kbyOdpgEf/1jE9J9AOPEVid\r\nQ26b2z/F2JnOofrxAAV00nsizW8oboFFG7zEW4FEv9Whswoq5VmtxsO8VzXp\r\na4gfVD2GZnMxS3Zw47cAa3mWTqVc+pD5IzAm5lGwI9QGIkJ4YYury5EoIdOl\r\n1Z15fxZ+7EtSrryfsXZb4A7tsaR1m6bGr6Y=\r\n=Qeju\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.adcdb7db9.0_1672935644193_0.2668788244791285","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/theme","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.067af7eff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e4d21a436c3e6082dc91534f8f82eb9b71eed19","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.067af7eff.0.tgz","fileCount":45,"integrity":"sha512-CTlGeKh2PhzFDr4Mj0qCTGsMoEtGdIUCwlyGKuCTE81AFgWNf2gn6HGJAGNBfu4PuYHfYrctGXO2r/a0714txg==","signatures":[{"sig":"MEYCIQD3wDyMHlenO953jfbQg6XYEde21uWUySLIIz0KEjH3zwIhAKzoJBPTzOKQHB3lVHuw7aZZl6CTKY4AughtQv6/334K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKuMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoE+w//bMFlKxlxS2uO8YUvTZo8TWSe+f9Y7pZcpQccxPF/C/cQgP9f\r\n/MQkSN/f3gL1vNjO9GfdGiSt3ECj+rIWcw+xfjRIP0AVidpTpqUXZ7annRe4\r\n2pCOK7jIHqrxg7QJd2D3ZwtoD4D/NFK0KnDdT7sM8Wj+KI8/m/CXUPHuSgoB\r\nYSGJBTD9t1B0ATXgRYFDtHTXEY35QO00cUNNYTyVuitCGNkA1QmUvG3fPbvS\r\nt/Xu0qMBYz4yP8Bs2Wf5nJlPMavxpI0xDU/aIAlVFXsniPT49Df4d+CoJ2M3\r\nEk4h3437ndphp4pkrZS/Txb1khnzxHGmUUDS4TSara5FHy9E6hO+axiJSXOn\r\nqda9Zjc0Ckt+oTL7IFkwvckoY0YNTFJy3fzrJgcBFPCcbqX59khm5clpg29k\r\nUTpeoiXfUkLOG+lU1zSTjUdT4JHbW6y+LfSFii1CStvBbn0S5XaOlthPkRy/\r\nRUN49Sjdo4ALCtN3Q0NIftuM1Rk1yBhDNHuCdnRQNlfPMIKl1qZUugjmdfi6\r\nB2fMUKuZpPpu4J0L/NqscEXyffj7Z/TneoAB8ZdIkzClVcmcmhfzDnOX8ClB\r\nWszzAz6xt6WH8s17uQQztP8EgUII/ofH98vIUD3jKGkmHsLy9nEOyapKI/h3\r\nJmAUjPuMR8JUn+gdMO6PnfMDu6enusy9qSs=\r\n=bDou\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.067af7eff.0_1673046924025_0.8325169673685953","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/theme","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc2763424a38c8df707e8d88d870ecc0ba01307a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.21d1196a7.0.tgz","fileCount":45,"integrity":"sha512-5rFRVGi+Bu5bCvcGki6kRAK0MN8uUxBxPpxniRpa22BABgLXr0DQsCoVJcFiP6Ov7phcLPsx721P0gIXpMe36Q==","signatures":[{"sig":"MEQCIHazwgjR9Q4uROAq8JxR9XER6kns6JcpXtPrckfa+ExeAiBTcQOJf6wOI3y3eJgIhlNXigZeayBSG8OVSTuLDNJ/Bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju++FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvphAApEuj5jA54NpIWR7oAXoxe7FmrRyUGQbAKCpB77fcFjejVrCQ\r\ns8vrc3ssXNSrgp/2nJ+D8c0WFFV4J+Xs4pKyakHfbObqRdu4uZF1EPCjm0oZ\r\nCqohQe4SZY4FyiJTIiV9O0EE+QqRIQV6motqgprvmTGLDcr/ITQ64MqjVN0x\r\n8+ewjaPemes2dqFsoeqKdnZkZsqCqdBVm6eAFW2c4pmrY3uVTg5nlQKoEVKD\r\nLshFW+WjVg4eN6gn6xOXSCtMN34/INeLIPN9dEoDPj/H6o6pzWnV3WH/wK7q\r\ndCrM8QDX7qv+jpb3rrfX2LbESgWQcRacxQDh/1I2Jjs9x2hYBfxj9Il/KNUx\r\nlgVcjD/vT21ULe0ZP23zEix+Nm/z2ZoZ2/15DcuwWlTcwJf93GcjEFJ8iNCq\r\nA3BLHD6Z6bnHX4oPmLablyjY6m7VU90mX7I0zbT41fsLIhEhZvOzU7NbOTqN\r\nv7E5rG7EoOz9HmvgmNemosqSaPfnsRjGHyTOjokYYH9k78pvXOJVxu74ha0r\r\neuIFxMjUFfy5mVmyGAGzHbdf62IDlKzw06R5jua35gscQhl9TA1HskpgZESH\r\ncwwx7gA2Ube9dwXuKBsC19FsTgWKcUXk73zCRZeN7puwyO6ab25NDT4K9QLC\r\n0xkhUdyryDgTL5IJ5VrhYxbKt/o3Dfk2SbM=\r\n=KZyg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.21d1196a7.0_1673260933773_0.21430379462490645","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/theme","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cf1053d2343f8f92f01570367e290e73c9c0528","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":45,"integrity":"sha512-aW5zgZ5FUMZGD3nJM5uJR9VjzN20ET/XsXRnQukKYmmXW4Q5PdO5e7s08GusVj/VX8SzWw6QdrxYNtFssClwCA==","signatures":[{"sig":"MEQCIBwwoQTkXjTb0JAOe71GsxmhrIJ0Vmgs2Y76cknAj/MFAiBsUryugrXgMjqy14OV5ctMNwkBpRUgVNoz0EhhCz+hcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJPQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvphAAlof6wmIklEX9kUhrrBFIfoCRPjvieOJjejmoWfv/PTgWFuWu\r\nFp6S1vVj/OAqWdSMYYDBaVnGlHOABN6Q2rvx6Wb94nlKC/RSuh9zkpWER/Uv\r\nhC2GyMoreUlDjjJLVo/K+7CWLhQI1CfibhLJ+uqjlkUU463NR6RF5/o3WoYV\r\nJGnjTI9Bkz3DhI0/nl2dWc1ty4FytNTkRRx9mLBzrXWiME/JhSqZ2Z3as29Q\r\nBB2SHFHy8mT+es0oA8P9oYo8UZYgIFlK0wgJmV5Spxf1qCRZV3m1KnM/vDY9\r\nmvhvubnHUR1a9aU9Iu4PrkqaGyKeZ/kuAVbvGV/cVjrg8Vd0wUU9VEeJDtzZ\r\ndHde2NvApTRzgZ1kI0y1NBFyp/9WiUzg6XZojIRvCGtahkDCd0RpHsvVNXXz\r\nmtgSxoIfcECqs/WyftfMKmmFP3uf4PNVySrZxw3jm9JtD8g7VWFhRE/QM+7L\r\nxxwQ5c/gBQWcHfmd37K0gl77QQwEtTvhegDjAOjg8YPIoScXfX/k5pBJDO2s\r\nurwyV0WtEfw6nUnU3Jryw892fH1To8MI2VATMbyNrw/jCeg6aioj8xCgBY0s\r\niwxr7nIs1lkIqChcJg3cPJ0eAWbJN2HE5aCDgsmVDvpJ5cNmLzYaNuI3Wr5f\r\neOYQ0+3trpfxRTXCqcVJmQB3OL/SVUBhnZA=\r\n=og1x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.8d2d8d3c4.0_1673302992630_0.6209220964263065","host":"s3://npm-registry-packages"}},"15.0.0-canary.f476fdece.0":{"name":"@material/theme","version":"15.0.0-canary.f476fdece.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.f476fdece.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f994a3d7ec4b1ae3a65fe72b461bbf77178bb30","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.f476fdece.0.tgz","fileCount":45,"integrity":"sha512-NQrRE4LOiEfAzBqFU33LERPHTAKpRkueIWcHNp8FWRHovldOOB+1eUjTpH5tMjHRYu5xwFaIc9abouoe0qYdkA==","signatures":[{"sig":"MEQCIBK48/fG6pbPhTanFHPG9ns+kIPvMXVN1H1vveDrfhBQAiA2o/HJrSDMC9fzDB+MAXkTfBaEMV6UENOhPwW46YDMgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvY66ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpftQ//daDWHJPk17vFidNZkRMbQOvjrZIaQneiK48TMzDlA+diXQ4A\r\nZBY65KU+MxTiLxqEFIB5HwSepuFJk2+xwFii1uvVPWF0IFCCfB17abttabFC\r\n+rWDCEmwR+UEDLs5mHDqwL2dXejGxPE4AV+QS7Dcig3IwCj/rI1sdK8LhhDp\r\n8SElffdDbL1ttJCX4XCH5uKb+vRtUCBAgtRL4XTmbG8+kwUPu6rZG/PvmOhN\r\nGLPYgboI0ZeMRBrfK7C9UBfBp4JtseF69HuHju46PDeBFAzmt57k15HAVPmn\r\nKZRQlOUa37PIRtjS+8ySIaw9ps++SC9VzZxgaf65oMyRYyEcS72oPH88E2Dv\r\nyhA2eAmdsiEJ/H/DsPWvbTPIU3dHDQU4rdQtvp0u5SAOmZlnl/I0zcF1IYDO\r\nYh6zomXcScLBE+M98lGsQrVgSOlFdUyk1Mbw7PXfJ2lU0UcIvNY49UY9tVfz\r\nYxvf7VYitWP+Evsbvp/kiupY1ewWqXBa0exqxH6d1bB547z9qDgiZXSkmIh2\r\nEvfXO3OlO/haQKeZHKRZrdrPfU2oiJg7QKHNPDh6dZ/y/xUnS+uzHQ3frW/k\r\nUWQFYOQRZyvdc9qC6CsnnsXxJAYh2qMadw7g7YEa/uMjW8h1UoOtNBe4WoxO\r\nBDz9z8NYgOvGAWrXH31y32Jv7sfgz+xSIVo=\r\n=aF6e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"672d5b55da7c88d57180edf75e7ce65ca2fefe0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.f476fdece.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.f476fdece.0_1673367226186_0.025731951255329122","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/theme","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45b0f2e4ea8f263297589c1020d80fb4e306d10a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":45,"integrity":"sha512-9OLd466Iex4wvQGxnWbeWpcTA3it5VqhdNZhkseK5NfiGMbhMQCUzJ6913HLMF5bzmEEawJ2DmMtzG95Sb9fwQ==","signatures":[{"sig":"MEYCIQC+6GWtpZw5deLzpUsRLfuoqtZ4qLBC2O3UQXzz296h3QIhALR/aMXq+UxnW8g3uksgrjAArufpqUxhUnj+HKtKEhH7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZHgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrh5w//SkIFZ5blO4TZzDABFyBfkDlIFZNo0LVagNXn0Z2fzsKiurbq\r\nFhguwihtVIkh77jzBSVzmfhGmDaySeieuvN89jOQdVQDCQRtjQm/PO8J6cPV\r\nfpJMdDUcSlVLlRa6w9Y6Ab6jG/EmyL1aiCfZRWEkXlAn6ytMMK0x8I1X/B5Q\r\nJ564CtfIomw6hExYOCI6GV161dK5/FCwlp88ImxAYI36LxB28U1GHXi700Sr\r\nXuC6hhzvJgGJLltNwxOIBG2E5JBvapyA1b/hj43HfXPMbn0sv6MDuPXFt0PH\r\nOq+sk9BIzBgU2eOFFuEKYltprFYkDXl8Xm+5BOoVvvuQ7CKkOcOxPv8/plMm\r\nA1EMteVzrh4/kPpafqjibylZtrKYb+/s7feCW0RYjFlhb6BTlSjrxtYFj1T8\r\nYW9pvKdbANbi3XZpC+/Xt9Kj1awGGcVxwOUOFTFrj0MVOpp26uuknBCOmc/5\r\n2r15cMH/nUEtsGpePOPugcBqLUPg5VY7HzkRRDyGD8LpONLorHFX1FVlNwFM\r\nwJhc64mdbo8GmUcybFll0rGUZjm6rGwD2Ez5Zp/dYWoI1jUJtD9fC7Gc9B62\r\nKtXl56ededvtSVP7a0OGtbiL6JfNaWHcRDfuiPatL1FahyqQUSPMq1td953W\r\nGSSIX7HCt1E6TZgOaA/CcTaOelDuSMleOfc=\r\n=Co3O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.fc6ee6c32.0_1673368031777_0.40895623777514856","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/theme","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccccdba19974f8a20caabde9ce4fdc5a6296fbdf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.73537ab0f.0.tgz","fileCount":45,"integrity":"sha512-3CK5/YgfGIVx+ItIVao7X4iK4HQTo09Kfx0+CWnFZYT+GFFggQxGawu0YAtCsmYs9En331ay9+m4BINJSbsLQw==","signatures":[{"sig":"MEQCIATA2tl5yTAh44SmkTwdSB0XZfGHgk4S2prwpzK9Sm6VAiBamgE7ugCs03oektEVnJofrzl4P4syQf8+6n72JwW+Gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvaonACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmostg//b9jbpjmdBcbA0T7Skd+Gatql++/O+X0xwVQU4wlfiFdzI32E\r\nOgKMTjBYxVAjRv9Uif51DApeiRpPrO5cf8VMaTSSLOYFPCCFv3gVPZiZTLMJ\r\nYXya1YpOekSxU8bU/cqWSkFDmGDBH1qpcrMiAitg2WcnEmcB0puNbJpqhUad\r\nWT9psaYXjGUu1f8YLhcc8sIOBu2HahBfYfGEKCXLq47HqyWbLJOXdRmV4NjP\r\nLUqlF6CgcsfbgGZn4CTj7+lEVopXWT0w1m4tRr1a+jFe/LYYiSB5oYk/tCIT\r\n0FgwaKQDq7Xfs8XPCmYaSWcls9zxisAwimjr/w6iBW8/0sJKF+B67Vs2LB4I\r\nCsAqbtUQG5MaMORnPuKjWTNsYrtGHt24qEYsyL8Zw6hKpGb7PzLVXfYle7Nh\r\n9ZGqiLUvgAfp4jCGLfVQgCwTouAc9Z1S5jT2KmSP5C6ZEpytCw17owz8mjea\r\nI/DiUE65mzrQAQmQtW+yZLv3rg4KliFNlWQWJf+KuhMP7quNV2gwYFsPeykO\r\nndF/iM3RXpx3ByiXbP2/POgxTRzZsb8uYBAA/btZSBEpz3mO61neYHv9ceiX\r\n9wzRImwgP4tMVFCYVfDs1Nt9mcjnMwT30S4l7/62VHz4WRvCnU4ZpvWlL4wz\r\n1K3d8aMDQpmLVXGJuo43ieIoJ1WIRx6am+Q=\r\n=wIQW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.73537ab0f.0_1673374247621_0.9401274588595141","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/theme","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.684e33d25.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fa6faa4fbe6f17607e2313c826e5edfecce052a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.684e33d25.0.tgz","fileCount":45,"integrity":"sha512-AZxaXXAvRKzAi20RlMxzt2U5UmkCWyv7DMWEBXsxtG5Tk54mi1HsbVUp3fxDPTlmL7Pq8p1/DESg/o7TgRCVlw==","signatures":[{"sig":"MEUCIEpfcWk2iEmFWXbiCnwWMRuXUXindKd7hH/J/igH2xFSAiEAvzAxITYlGNAT8Z2tRXymJt5cBT8qEIefW1F9C9P3Nr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbnXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrywQ//fnCombniQelTglgsr1NLa1cOS31X8vhmVq+P/w/R6CluOFKR\r\nj+7aJHW4mNxU1vkfoueyMvoBYyNIkMyhqKQZF8TeF/N6bidjBXlkZV0Y2owE\r\nTi9PGbkY8rMxKMO+zn5443P7FhScpqGCivzaoddkYVpzHjxBbzybgV6ugjkp\r\n3M0iu1ktp+Glt+JeJsgXylbAvTAcz9UZZT4C570VqNU6+cZ6N99NqeUAvYAK\r\nTOnfq391aE6iMMiU6PUFIuLLYrkQfGZyPmmA3Wla7W3q8d2sPKWEyzhGI+Ur\r\n+djRYQ3Ky2sG3+awh1Rf99wDgU62kiUJ/3PwU0C/2BJeCrTonEJxkTLT4mrV\r\n4dlYHqhHFaQNfxQVVJ11hHwf/a8HVy4vNpx5tuB1bdBZ8Dos5IJJJ6eRrZau\r\nqRPjdK4WbAM5wRY1qQneojGqM5gIeEkkL35oADjyqjrzwCGV2XtR8u32NrpG\r\nK4ph1n380Fddcv78Pdce46i+3gc/7TY6omZcZqEmwe0uhLpulfWdVeE9kCh5\r\n0E2ZeEL6cUR0sqt0SL9/Q3JSxwI2V3q19HlXkRQgT7d211bVjlbaOTlrnvpA\r\nkaslE4diqqOXNPTNCTolqhRXH9VpheVnMYv8oQeIWy22KSFXeYzaK7Jwg3xG\r\nDDWnC3l+oFtYMfrw8CYr6zCIaoTmnuQ31rY=\r\n=IMWa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.684e33d25.0_1673378263220_0.8513199924513868","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/theme","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f6edca2c7212eab22f47145aaca6943dbcfa96e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.0e89aab6b.0.tgz","fileCount":45,"integrity":"sha512-tlfzjk8eJFxagpTulKcKfD9ex2CNSv649tf2McDvHYHBEq51N7GRoprpqaQExltFVfK4oN8Yb2gKfTllwUPZAQ==","signatures":[{"sig":"MEYCIQDa0y5YL5W7ePAhtKgUB+pPdnbPhyEe+IyH/AuIeWmovgIhAN8rNErj6QgNHS2viLHpv9r2+05YhbQOMUBAGrx7p/VT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuDeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn8RAAgYZzAk/KFHZO1iYdvJi0XVhj0rKYTxH76aVJNtgF0Yt4uyul\r\niNyyfo/zAYiMNnuUbZ1jH15R1XAp6ls9Ag61btsjYjeMn/UdaQoiv74tcorw\r\n389h3kaceRGeQB9P1lBXHV1vSEahLpfFxF8R0GxTGrcwkAQ8yrwGul9prL29\r\n0E8lh+JPd6XVQtrsscauWfcTUAHpaTHMtbK8Bkesd5NMtF2ZOqYhFlgCUrEp\r\n3hHiyC+53g6103FLwvzKqfV8jmoJyCqsaNtDhu03B4jeO+z3p8DbUTXDCKP4\r\nlfQgJ6+oTNmM0sF8YdW1vvlRIoujM92d/IAzUPSJFrKA9YMXGTyJN+d6oH9E\r\ndtxecCeRFWruMXe6Oxsboph+hCHB9DeuaiGUashN0/WmcOdAgJ2eRJDdE8GY\r\nH6bFHNh5gqLli/o2Cwmxn1Fabc4JzlUB0nyYInFQ/lbFyM5TiY6jB05XK1Hb\r\n6uC9sYxqnl1p5wcmPiWC8tZwLb0CmSKe3Z7QbTMibTr/OBdYBLMwHzzFfgPg\r\nhNuGNoD2AVqYy3cSIFhr4lrXT+pjvVoGF0f/Wbd/1f5KakmnNsbSVZryXnV0\r\nQkQ0powYefBfGMblhEEEcJqKR6YRFuhtOqS5X2SM4quhoJ+lq2ur++wBu79t\r\nvFKqx9HGz0OybvradWQT/HueZO2gbrHtTWI=\r\n=h2hM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.0e89aab6b.0_1673453790147_0.6754637373280745","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/theme","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ea6b952ea8f6124dc0a88885627085251a141db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b0103d10a.0.tgz","fileCount":45,"integrity":"sha512-n3zt68qu5naGh1Ivis09uA/vGUEQnL+OHPuRk0yjYlQy9hR6sRi4BhqJ4vK0gTlOE8r2kZt22Pa4XDj0G6nZHg==","signatures":[{"sig":"MEQCIF685wuTDdFVNcTqsBEXq/CZ8/iqo6QQSD+4EvRRKWWoAiAxIXJ34x6V78pImRCwxNU8mNXwNqmtXiRLxLsqmPk3bQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwnrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRhxAApN2bnDeMldP0IIgrpGl2z9gqtaqOafP9e4saZG+yITKNGUuv\r\nvf7e01Z8UOGq5B/AAUymcjwM3au2DVQ9TtKjH9xJYTmux/cSMUABe3gtXTd6\r\n7CdzWZQIVLPxHRoZBOFrfCEi+jBRL0AlDnmbtyfwEJdnUWUuaM/7impH9LTK\r\nJ2YmIKiFgTdCXT3j5WXGzpjoh2NpqIyrPkhnZJNkDH0aKXaVmTerFCKEDtZ5\r\nkzDiiON8Gm0K3fWD747X5fRj5/MU6rdtvKWd7XNp5j+tF1dH5uTvXve/73rr\r\neTLPgF9BRgiYSLPuDOGGO6eKDrKZgAcENfW1N2PF4xMWQHpfIpx9h/Wq3lsm\r\nUKAh/RKpsJE48uNR+AIqtlKQbHW4coqCHWkTT3LHnVqiFAV9tyr4w8t1h3Of\r\nhfaGez9Ius2iQG1GKiV0q4WUxtbeUnEWdcx2UW01sFSBgSenTr4LeVNNDBKk\r\nfcYaBRXaaCGD4n03DvSo+kqazZGMyyyGez8t/E/hgopJLUaY4f9+9gDKZ0UR\r\no58L91NVIbxz/epvZyy1S9CHDHpjzZsCzn6d8PM0p181TmB36vQapLQeCGvA\r\nRupQdTQKfKmveiOewqobmsEogYbEkwxBaQhpLint23wK/Bu0i+O5F2kTsi5G\r\ntvVCp9StA2Qt6iWsrMDLP7kSaE3EQgU5ix8=\r\n=5bRf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b0103d10a.0_1673464299634_0.6534558475533225","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/theme","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a98490a61c806407cb2a12264bbcb710d3dcb41","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.50e7a5312.0.tgz","fileCount":45,"integrity":"sha512-i4Q7cCeZZeoap2j0jUUTdUu9tohdjTaBH5sVqoizcWuyyWI0cjqqC5ms7PUm52Q2P9uQczTLR+Apdr8tqHqzhQ==","signatures":[{"sig":"MEUCIA01tjLvNL3nJPKIBfu1RALHmZJC+OnfAJ2yzlwSezNCAiEAmthCOkDQ8wlWnKBBLt12YjVsjHI3JvN+ScLWv8zZMVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyHCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrmA/+OHT2hZqO0wuKRBWf9ui+I+8mXu4JJYF4tf7J8Vp0sLGVJbwD\r\nQOc33lBrr8UZ4wyEw6bHZwoPGsalOhFKuwzDYNaUjZKgzeNbq92TSFFqW2bT\r\nu0Bc4gzt0hgJeBWjwE+1ShJQTT6LUCGpjuZeIAZLP7cHXTzACyczAeVrLPey\r\nr1Keqk2+3WLkGobzcbp8oSTh637oHTMpkM5oIgddAYBuvkVTAhOtUh0FiwR+\r\nZi0X1M4M7Mc/rUqSCGdNkB+CJZr+YnKlNoBRZQ85MVZyQ1Ap0Gi3lkxEtaAl\r\nYw1bQNggFcpcoQPurPwlYMthrrGx6X5YBxS0OAw6HoK3YPxRi2nHmdHVOhcE\r\nM+84zI+ZaYN6g+1yZMo7Xvn5cCJsBtXJ9W9F53+3FbH2R8+Ew2LBuSZoU0SA\r\nSr3/yU0ZjRnf8jYG03jb3Zc69qTu+W7bPcLLe8tpuYgePa9p1SVH7MPVUGNM\r\nHzjIgMh6V8lqCMU9s1w92JkrX67Y/BWLWfg/500H/pf/FegNyAv2SIZCYkcO\r\nxSZWVFwptVEukVeLkMxTDCSgXDIQYEd8xjP3eRNVWZTfQ/O20ls18EqQUQvz\r\nGflb68PlaSfFFLn+SYhFqUF9Qhl7cm/DOFNdMUzo0coJT8eQpQtmc0wh90kJ\r\nt5GQ+YEciudq6xB5OCdqkg5s1fTr9qMwGJw=\r\n=ts45\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.50e7a5312.0_1673470402418_0.04096481005086949","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/theme","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.202823f54.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17cc9fba77ea4739d09775882e145311bc2f7644","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.202823f54.0.tgz","fileCount":45,"integrity":"sha512-r/SHqrHN1LiLjsg+g8rdsizinaTRPikEfRtN6nYOsinzyp6bD80aKNl/hYC5iWUZblvG265yYwBXNZtlAOCGoQ==","signatures":[{"sig":"MEYCIQCdNzTuOaq/dtSmhUFpb3Ff4SMmLYeF5hvj8yyvOTNpcQIhAL8iMThsWfytbqyEPcKFLoo9Q/wpoNCPU8LrMcqFylAf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyuBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrePRAAhfVH/Dq4NUYF4byKV7xrIU/UR77CEf3uBg4t6TFYtybOY2+g\r\nRLJkBvcATJnOy5R2PlEm1YHd7SblyCLYvLVylcvxUSkhl1t6rdRkD9GOKfaL\r\nnFofFFBBYwvfIIWZdpXiOXX+e+rWMUqxL+fDP/iaiqIeDSlCA56mrD7Cftyr\r\nHO8rsuv7bQewU5v2XcQBvutqvkfBlcFFusnQknZNKK6dfBtip1thhtn3bjax\r\n00HIMpVBHe8WQcXHjiMqcYkNeCvJcA4xP6nHRasp9fcH8McDe5HdLvoz9ZRD\r\nIwQLg0P3sgrYEAafbRFSN4My6N2M5vuoNUlJ9qJV9+LfJjgqQeDd0HAlYGG0\r\nTxrCd8BZ6BmHlEeLW9r6eFmI1vGGuZ17R87pqnrUBrfeKZCd+pk8KPQF/utU\r\nPxlIRbWNMK4+M9kGSrIRZ3oOciNRu77hgq9l1hQlGGrOtolX4nuNRsEUx14m\r\nBKdgZ2X2qkjKmD072IOoNYcCQeQ/PQknsfefAQ4j5fYMeag3q2+py79a2Yet\r\n2RShOO3dlTRcSt+LyTQgSt7YsbsZIIgJm4FGKoahS/npTd9XB//pnH8YAHhJ\r\nlCDs4pRfbsdwork6rZCQJpcGb7hkl3+Ng7hHtdHAB7QcldJTCMfPxaIYX008\r\nIwxllomEYL8fa3cxPhDl4B7NBmK37Xyf5A0=\r\n=Jxa2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.202823f54.0_1673472897343_0.7988437973248472","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/theme","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e6b40513cd5b806237ca18b331635711f446385","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.199fe2a2a.0.tgz","fileCount":45,"integrity":"sha512-SNRHupbJaLSlHzJpUDashR6AblVUPOl6IbXeLaxkV2OdEqKa1z75XT9s7QZTVdH+GFwrYpeb/ohvzuCmKkX/Yg==","signatures":[{"sig":"MEUCIQDjzzrxuAIqDKtUSWnUwMT+aS/pwiJFfPuHSGwCngo95wIgMQdl0Ybw8JiB1wuut1OLo881nnctu4/WkmTpm51UrJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzAmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoahw//QT3hqbLajxzmiz1kC/dHU1fuzD7ittiow25wtE5dvfRBxbNK\r\nv4bN2JuQNtyypUEZybe4+0ExZU2eqj1MtUGwEHHgPt9hl2QeNiF19CoafS3l\r\nO4CS6p1vZu6bCXz+cJBL7yk+gRzx7BSr0qCs+sZiuOCa+K4vIgEE1olIHmM7\r\nK7vze5dHJE0W28J7Q8f6SyShe1KepTapaVZiVXcFC+iXqiTZVHOhVqdlZTIS\r\n12nRbBzo5XqKNXXeN+tieGVUbCdwT5rIDeplnCpofuBdfqqlwS7XTxVdr8el\r\ncQ7OgBFthrTKCn+NVkdgYRptT7bIgje7P9r8pcYZeKWhjkiwvlIQyJAfYYpL\r\nGFl8Vds4z/obG3KQX2+BuXa7kjEPSO0O3sVfnBeQqRCZqh3svfmIypFr2IJk\r\n/kz9m/pmSP3yl97qfZrI4G1tWG2fstG76gxtgVFD8RGtNQ2M2D0hov82cz91\r\nMnFM/1SfHPBfYNzilQmouHqj9tHxfIxRE7/kQDoUNLltTnzSeb9jNF4G8dZM\r\nAlxQ4J0OGSJBCtnFfivC/yRMIew7Hyr968hVodtmcSBTCNlE0S8Y6GFVTbXY\r\nAA7DxtQ8oawp56cPVc00PhZbcYhsG93DrFbxnev9Blc+a2yKWzbPvvuB7MZI\r\nHABb4vD0D/iCnJnuC8HviqQ0/S9NlPha/m8=\r\n=M0qJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.199fe2a2a.0_1673474086132_0.34168312713349813","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/theme","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55840f292627e2c16ef3655442eff35cc38d10b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.8c0786d6f.0.tgz","fileCount":45,"integrity":"sha512-NC9JtPs3RZIyV83i44abui5cCT4B9oiGZKBwUaWK9tebWG290YvTvciTegzECQpwSPZNA3KH6dtFSAQrbAgr1A==","signatures":[{"sig":"MEUCIQDyqqj3nMwS8TGjEc73bWTWI78CgP/PBjYEIH6jKWO0FQIgJVfx62XkoOOxAKP7JN6Wx0/UsV/aCbh3UqDw55ivXBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBqtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeZA//bfcyf8OkB1bbNCLnV/jQQeKTIKMN6oCn8pq/a8wrWR4HolBV\r\n27EkkCXa+Af/xkyFJApqjvhZU/zTtQkzQKWcwC5axn12J75aTHyLYd7Idog8\r\naNH41ggZGw2PgoCOVHVX2u1KyEp7105o8TfVeJPmGk0xnBLJm/mZvwpG9lk2\r\ntX1NNrvgRaDXa1YvAb51LeJ75Cy5CGW9BclEi887arJK4ok4bGXI8vXT/fkn\r\nZsf9IyfJ7cf2yI/mbpZ8E/WMfOgUITNn5Of5NpOVtfLy420ybP/J+kUZlVFR\r\nH8nIvcjDxRv9KYZkG6CK6ex4u4RBxPfstMW1Kys320Zwl+aJdTTHB6d2imSg\r\nuCe1ZSPLNszgcsFPLqYOoMaxfpdFUOkv2GS4VTKfJrDA5a+lqOfLJaOxI2hO\r\nRuYmWzXspDt8RM37P96o63vgJThKhkg7oywmea/bACs+PZAAJ6aT8sewYHTP\r\nhEjdWe8VBIvddrbPp1UXG2tqbeStaqFb//SOdjwLKPiXecXcsLxaJKh6QXtt\r\nqNVS7e0uF3Zxzbes+rLTivU3iN9e4Tb3NJOeBVMkJkFqxac+wG8mRghwO2o6\r\ngO3496U6m672mv2TOcx5WQEUypawUHYEUKIxFzxpfReKIDZjbjYHXG9Ez/Bs\r\nHQNgHwgscx4B4GI5TSFIMbf21OA4dASYxOg=\r\n=NZMS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.8c0786d6f.0_1673534125720_0.04769332256514569","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/theme","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18cb92b206c10e0e8af6a73f5ab789b8af2d6822","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":45,"integrity":"sha512-Xbt1oaHOEk8S1kwitnEj9carbW0lHF7GtgtiYSkYFK//3DsaJakE///+D3/+3ZdfM/hxiuWtqvg0cMV2R2GPnQ==","signatures":[{"sig":"MEUCIAt0FS6w8lwMBW39AmeA10Tgrqv1eCgqxXblvV2kvGtVAiEAsXCAypvUQW2QqVRNVFtoCZAFJ1SeB3HYbJcWcf9gyUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvW9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYeg//fgNmIG9Q67M2CqWljU7GgugTDVZqqQpbsYo+NRZq3m0IjCli\r\nKqyHXF+pv2/2B6/vbFIXFs7dLkl0hkFWejD8kFscvq6bBDQLMCvHl8jiDVXD\r\n2LdhzppY9L0XbaRjD6VZG1owahO0JG3AkgP0jstL5mhdP9FGGgZEG7aCbrLa\r\nK+jYbq8rtHuf8SCahTTAwsY0gIrh1v5mBGjWMJhkML+e+Yq4lcoXCZ8NZKe7\r\n8H7C34zyykuymkV27vvHR5SrCYVJsWV8wj75yL+sJ/5RONqYyrmiC07rHN7Z\r\n/OA2DXpUODakkHOVjrNnN8FA+myfIYHEp2i2t0Yyj+EuuCotYPZ2+y+aa2vH\r\npW0q4+zXv5PvKZDp0qtk36sGjicfSBGfEMj8vv4CWPyf0NnGdl8I4l9ge54F\r\nZHtyqKBl167VD7r3suw/nArXEwbn4n+edxXBhl4n0LG+9zDBKMwEMARkEYim\r\nY8v51BhyNsQ67WNER7WhPPaRBv4hg+JgMr9VjfCDlKIDtzln2FU8wMaJwdmq\r\nvaTLog3OgIdV30c0PEK7UT7Nc/Z3F/3OZIh+Q4Rk42+6QATzVg68RmRjPakl\r\nKta0zA5LVYDW3gfsimubSZZWLs7B0nxyZJRVbAwc+C6Ld6G3LdX/I/ELiJWh\r\ntGObAs+YibavqkYpc/hipQ0S7H1gzE2MELo=\r\n=fROC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.8a74f7c6d.0_1673983421375_0.20537892519125833","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/theme","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ddd7c998694e8c0445d8293b950ee1b27bf1a59","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b4687fdc1.0.tgz","fileCount":45,"integrity":"sha512-qypI75NC0Q01LuiUm3MnQFcsBbfp04l8m4aUwCgL48Ak6323SZT/Io7L/fm/HCvf7/luEt99AhaNgPc8pJ2V6Q==","signatures":[{"sig":"MEUCIQD0P8aEGP3IQCmQxOio4jy2SFC+Qoh25oO46DCHBPy92gIgFQFcz8JL6dnD5HuJ5cHO9DUR9Zarq+O0tUamZPvhtb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ6MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOww//VENf6p3GUSx5izbMOoBP7aXJHu4Tz30CeLfLeSYkWtK9oGNO\r\noi3x5unsZu0f5JeE/VxcVwdaA9PrwuxfFNooR+rZrolU2iw7bAtWLSAmoNKK\r\nYS9JUM9Iw1CvBHzzHu+FcGdeSZx18tVyQWddowvj0PhwUnlwE+hBW9KNsrfq\r\nxaSBUBBUManaaewRPfEMiJAFnUxDnIhUAWqeGchWliWrQqK92FB2nlCEDAq8\r\nFAie8VgqFo2k9W116UIU8AP8Mho615ftkrdEaBdsesl+KAZUIfXM+lvNb1/w\r\nmlR8AaLJ0sXAusq2abPvY60JNsP6dlOwGPvkU867ndgFY6T5KafgNYehyy5q\r\nq2evl3KwfZ9vLJ5G64WQA/fPfe3zw4poCNAX8ubA61MZ5aaOEVwxwQZjbJtX\r\nTcOSCNk2aXfURABRSivShSyY1K5mKeN1GrdX921O5sESnqWwOSMYisMwJ806\r\n52CWVrX8vfloWYTxFZkXV0t1HTFuY3yYqhSNDxk9HXrGBMFOgf6GPQPxqXeI\r\nZ7PJIea39zIBQiDAsNjqDVN4PDDv8EmhMK1gtFyfuL73+5+qIoCbcvhBvXKl\r\nL3b0+kxH/nZ+rIZEscr75lHC5G+5yPh5QI1yd7RjNLfoZn2gRBlrZaS+fbm3\r\nBbY6l1j/VfjLXGZzcjsR2ZE+4/xcz+eUbU4=\r\n=N57E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b4687fdc1.0_1674157708267_0.8106762814904755","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/theme","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b836b9892.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38861ad9fa058421a26f1c50338331804eb75051","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b836b9892.0.tgz","fileCount":45,"integrity":"sha512-knB32ZYNWYAfBc9E/B/ZOV3Z4gquP4WlIdG4dFasrKrCCWd2+BPpSrgD3bDASy2uAabDSg+pEzDMqur/QCZHhg==","signatures":[{"sig":"MEYCIQDkyC40HydRxF36PxR7K6la4gngwNifiWvvXYxbX4bvlQIhANbn6upDJcp1vQ+c0LoJFAYAa+W9xfhPcXHKnjtFZLFB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F3hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO6w/9FpdQ4d2D97atBORhh7m5OSDxTKRcVjJUAnGJtGKljuuZN9Wz\r\nfspqY8ULFvChcm1ytzQUDYFrgT10satuGixG0k6+g/JYMUuPYCHBJZfDMWeb\r\noPHIYYDAxmJ6VfjWsOfqjXAY+JEkACOQmYp6qYtQ9nyLGlO5LV5YtuAtE1ep\r\nsWBG86Nc548AVAaD22UCQhtbuDtg1RyQnGJDgXqw/u5oTwvi2gIvnz59rDby\r\nCkTs4fe3YjN/iQU/iUqqk2WZPesGEhkSW+gz105y4zEWygfrGanlP27sRqFR\r\nx4xlU/zkO1GUJXY/ngB22KLKVpRH994Jo2pczMfyouQF4mmrdfHqcwZVGagh\r\nWfPs7HE/ZaoU8QkbzdgD6r43YVa3qns//szndHkJN5fd97+ZQUKgxfNWpM9R\r\nj2i/i5Fh4hh2/g3OFxbHlmloaRu5Opm0uc2ZwlouYfAYBf/DG2sBSgkFcFwO\r\nLR/ZF9t4+ySCCgrSTqscz6oq3E+9AlJb5baTL76hNuXl/dcY2a1JeZG0t4Xa\r\nduvI2JvFugIbWRaHtev+jQwmgM9qAUrXrcpz91pCfO6RJCapbtpf0B62IiZd\r\nnyEedesqwbi2gxfVIMG8/IWjF606ccU1mxf4cV5YIIVa39kSU/4NlhZvahcM\r\nC4Y9RHyNXtCwUf0LalwDe85uUF5m8BhzmTg=\r\n=2ce5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b836b9892.0_1674599905241_0.6954177517300282","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/theme","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf9085fb390002e8f066b927a42c3cded73035fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.e8912fd37.0.tgz","fileCount":45,"integrity":"sha512-dePw5QlDSa1pw0eds70sVeYDWymrDMm+2UiHXFL/NKrWTBBVx99VYtQnNwaPx9V3m4YcoH7A+PPB5MKikDhWIg==","signatures":[{"sig":"MEQCIBuKKMqmwE6gxKhgf0B4TWko0DqxaAxlCc5tzeCYeBYwAiAKrtccjQCwBQl83HSC3wCrCZ00GzzFpzXDofGGJtDVgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sZpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2lw/+PTOkF/rG1prs9udXNaDfY9iJ5tzO8ffwZgAhyriBd+jQnAqR\r\nxu90cMDkd2gOR3FmVrlBL11pF+ogZMTYATomsL+76fXwYjCblN6NMdWYYbcB\r\n7wJxoTADA9mqJS4YNZ6mNze61yFYou1ywS3JLDQcGM1MBRl0qCqKaZYjcZ/g\r\nz39A1FfS1OXbMMlL3rxIVSPsczWxFKcizxBCmEelqxRxVpwJyiF4glyJ+AA/\r\nJJJ1ZGJq+PoUM2C48lXuWYVNCzubHwtDykiJ/HBqxgxLMl4oxU7/PRwpsBqY\r\nXMnTmigtBMO5aT77uxW/ghPKVCKSEz+P3BY6UG2UPY0poCAzodqB/GooTwdt\r\nIIA7UdSrGa1hb4CSsBjuKJj1SfTmFuPzt/gb90QbF6VZH2YpvNo2tFXOhMgU\r\nLw4ohjVd9GVHeZ2EwWHws8/M6oamdG9eUwkH6992aC5ayAaZd87AhvKzirQc\r\nbPbc0oo29St0bte694422Fcg1YeRZyNt2eIm+NalxYOoLyuJ1DQ5H+hx5Cfe\r\nVv+d8KPFhN9CElKG1oDSiVVCq3Y4vdLXTnPuqjFyd49/mcMS3B5+duAGpZ9l\r\nJ4XO5Lf5RoL6MmScdjnZgpoYeQE6qKK/atOf6HPGyBiCAAsQl5r8U9LOv2ih\r\nCXUr4LH35+mT5MU0fu1s1jishLYHUfFoHvM=\r\n=46vs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.e8912fd37.0_1674757737503_0.27858221521688153","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/theme","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87c811c191db9d57befb5c8fa3bfeed3223be998","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.16fbd30ff.0.tgz","fileCount":45,"integrity":"sha512-xRNwvGB+mzj9aYYz0C5E1UGuGU8gujqD34STKmiUwFjgIgBpKkrJ+aTFI9/Q+jxm7pkaiLrUvVBWhe2F4E277Q==","signatures":[{"sig":"MEQCICxiJMBYq067NmVgnJ2COF9qNFl1LuujCzdSN30Qjl5EAiAoOEInSZ50Hv+hFgTl043USxNA/JU7WwSzbKUFev+1FA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0secACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdfQ/9FojW2+/1b90bEb5exPNiWx6nhJb8p4l8+vQgbZ2NxubqGKbW\r\nHoSNRKybJ//bSnTI2FC13Au4O3LBzi25nOlUsylDLpNqMMBSSO+/GFilpl3n\r\nRYCHcCjEC5GlBpopre3EU+KkvAKEmFvgBq/DGAkcpIiSA0e5zzG3aBijEmKL\r\nwiSY9mCRIcsXWyuBYIl/sX6rtkBcAVWXy7maEzSDDcxqA1ZPPnJAcVVj2Fre\r\nKdChhbO3K2GfJ13ttp6FLKJOX4QeTU/LZEAdeO2DBc1KreZJX2MDssFwm/aT\r\n+jixGzpaXcSSQe0guQhCdLlLXV+prPEC2pg5sTeEMqG+0iRIohpdQUsRXpfH\r\ngSdfxbjn3LCChLyxKraWsRmLADKMzfd99fUncL70H9QouS65uwkSZ9cj2uTt\r\n2Qvl6A2cx6qV6IvtQiXKCPmBOQdZbHvWD1bURy9/k2nzA5fRx3qGx9/ml5iq\r\nUHennY4q2nKKRYnoXdYlGzsqXcYUZXFLzD4N+dFezgy8Slgo20f5l5UVkfiS\r\nL9RjxA6Z70H7zfsVsVB8zqVygfhypV9w60wMotnlhEi5xyj39VxyGNm+0/23\r\nLjqDt14GHFTuxjnD8Y0j7Gk7inTMQl42Jd+hu0vgAAWY5u6Db6MKUkWuhol6\r\nyGHrtup05aR1IhVfuG4nwiS+XeEc9b7e7i0=\r\n=Ltdm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.16fbd30ff.0_1674758044355_0.31265045874465924","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/theme","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.033ae083a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef92f8e82c550a4637196443b0b632f11ea4c665","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.033ae083a.0.tgz","fileCount":45,"integrity":"sha512-1aqlrv3EKVwPLhgY+yEbWnRc5EhFkQbWU4I/UVqsT2H8iInj/V8u0OhU8JjstW1asujKIUacig4xqqZo3CJPeQ==","signatures":[{"sig":"MEUCIQDJL4OlvXNlKGJDnLsumUG7TwIp125s+HhlNeqpCTHw4AIgUqJtxR9ZZUYfEkD4DQ//PLGBu7wS/F1s4u+bPYS9Zf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tPMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHjA//W4QG9ZnVushWMcZewXdk9TjWiZockq7TaoKUoi6Xg5DZSUTJ\r\nGhDwv75uDtvOmkI0stzKM9QHP1LQdPmPw9wPf34pGwmKPl7rzD2cADpyLCFA\r\nb/TzkB8pxV3K6xbMhKfZeMVoh8ksRCdxP7Ps/5/7aAxc2CewP8K+XugnAM6x\r\n6orbc/0x2xNzRmMjsNRR1vZ41gSpS9rpKFIDDJp7RqmEKDI9eF2Tg47hovw8\r\nG06bKF26itL5Q2d618k9+Lc07RzUMi3ym8MYkwNvlGyxA5bLrPKQ4VGhLNY1\r\ns1TLOadZgFHAWGiP6nh8K7AEsiubjizcfXyF0weY7irlai2mmUCEQAgSar0q\r\nur6a0OcIiDxF0UGln5YP1BtWJcWqIqZAHI7ikMcbbPJrJEhSZylWAXLeNsZa\r\n8fGE3iCjy5nZoLdVilt5ErM/b2i2DDb9/bU7b2TFWsY0e1yYD7A8wxW2Vj2i\r\nL/b/Umpsi+pUFI2gByVdzRGLvJeauNUNqrxhK+cuMUdDrfAaUrVw3HwCmM7/\r\nTm7VsJEsYw7mxx8DekyCugOcaKid1/eRQglG2VNFy98RXpofkDf+rpaE0pfZ\r\njfVSH3kPaz9mhdf7D4063z0YfeXEGHA2OOht170SGDYUy56onI6W3k3x2DNu\r\no3U6ZfLGEKPpTPligTgI6/QAblhiVZkY2dE=\r\n=XTFh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.033ae083a.0_1674761164471_0.4596047005353521","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/theme","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ccc699475f382d5078ad3d0820f576573ec6157","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.3a705fa1d.0.tgz","fileCount":45,"integrity":"sha512-K4gXdx4f8Ve4i1bGLE3xgbeLuSZgjjWI8HfUDi2PEjvPY+SlLf7a1nUUSUqOHnJ4xRcdeuTi8o8+jBlIxXLq0Q==","signatures":[{"sig":"MEUCIDkgqo0enmuzWZU+kSncmmVNTeL1oMQEb9qnogGlTu7QAiEAhhfZaUizm4MIIZwgINZWtpbLi/tvHx+6mMJVqSjCQCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FNqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBDg/9H+FtUDfFYun9rS5M/h/74hhhcFRopTGChIxWVSE4fCB9sf7S\r\nBxqsULiXjdZqv94PyPoViApayyE1oCOIvgnw/bRr25vtuA+xqu22aCe4lCGx\r\nNrdvPT/8fwdVixdAHi15nA7C07Y9re7BiqyAdoxsoJejoTlBX9R+zI9lfV1h\r\nXsd+vmC2jCbfqeeV5j8crNPpYUNx15dUCPEAkB5gQ5vU2iEs/Wp98LoHBY/b\r\n00Ikl2ZH2ZHkemlG7kIV4ZFCGzFgtHOuNsVfK064yIJ3V8PXBeXMI8Z/obmi\r\nWrrYqOtA5+Os1zQceT2Obhh0n9FINkKQjjjoXRb3CJ0WGf+eyviDgoeQuRBZ\r\nz60koCDXpAT8Tbt0m3XarDKNjpkrsSep1MSqeaneB4jbjZrg4582K8STteyr\r\n2zYHOz6LQoDkwwqVP2N9OcrJsfCwJDPpBQY4ZfqTojc7udNIu9z+TBNuKf8x\r\nv9DyssmoCbdceQsL5QmeZXUfRiR6L/Yn6W9rJUn2Iu+Sf8xTldmvYlTRd6nc\r\nBc1ySYnOnce5FYKce9hZtYw9XqjUb/mtT5NNLkxFCkUuNmxfAsx3Ztyb+kAB\r\njXdKT4YwtRoZEdqtYN4/4Fdy6UiCcqxe2moFRMy/f1jT46X76dvxLKPi6RbC\r\nK2G+Ates2IHj9e0yxAwcPiWUqFwDR5rGeXs=\r\n=8l3/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.3a705fa1d.0_1674859370779_0.6193032356049064","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/theme","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a3b7db857b81d81d3a6ba4121b5eb3a20982956","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":45,"integrity":"sha512-+lZgL+89C8WT7wqi6VMf3AhTjXX4ZQkbw5X292ly5x0FQmKYHG4x6fBu6BBL/90vGk8kqu8lOl/Ruyd7CJ6cBg==","signatures":[{"sig":"MEYCIQCXMdHpdYNVOwMWOIBGGmPZkVyvTwV4itPWfP0vED5N5AIhAPxeezbGbS/GjHtVSiFMJRr8mgj7Q92wBdIgkrV+1GjP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TPDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+UQ/5ALNY31cRHB4eWbRa2ZlCJp8X/bxBKLOCQgIR8+g9mCMZRz0B\r\nCTmFQ4y7opGEta9g4TsTUqobW3JPPWKc3aNMSsFEXvmbPlLcNqM6qlIxAS7m\r\nAIq0jlwiSmcS5Ztffwbl99wqdLF0msxgb4ekwlIBrb0PpdJjrmW2rP4iX/Lk\r\nHiSC7qYo4v6AmfklqbN8+5KYwVIiCsQTfW7GcgGs5/3MUy0J0WChqs3ehslm\r\n0nMwyMq7IbcRjTArv9UBppYbBSqEjUtps5b1TL5LVuBK+NdlbqrR/DpML10v\r\npBa3StNWF5I9jomIn1v0n14O4c6E2BbCk/NQYoOI8ZNc4FNY6MvTZDOyPylk\r\nFnfXq3//AU7tquykk3WdidjwCckdgIW+OHdru/u//8NOkzNnpWAVG+X59+Up\r\n2DJD+QMEpDW1cspC24PMTUnVs5uDiG2UbvVO3r3owLxUpacNiLNh7V52qpeG\r\nA7ayHHZw/q7QKt/9StktvLxj2fEBIttWILTIJof07NANddm2wMRaTQ6d6r1M\r\nmhdOTxhXVHVUG2qW4jSFOJg4LPY5LzdzSZhfD8GXGf9GY/R/DMl3UwfGc2gR\r\np0C2JzzcjyUDZi03Lai5fif1Jp+imxx1JmqmQIre4RxtkpVXDepAuFNdFbB0\r\na6ZbstPO97Vfyu02usedoV5kSIqoFnRTtNE=\r\n=8XJ3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d6bea2ff2.0_1675178947029_0.5574270004759885","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/theme","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afae39c15bf0c51f44a35130beb35e0a170a3426","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.0c94182c8.0.tgz","fileCount":45,"integrity":"sha512-oGNGh/4JhRyXBfa9ovmUQjlI0DhScTaVzhKjJigI24XV0XNNC0XCds8OCoXc10gQecv1i7TwvgkTdQRKxQNP8g==","signatures":[{"sig":"MEUCIH8ZNR76vSEAH73SD0f7lOfS1Uu55aWWXU1OcAK2nzfhAiEAlPGhOz/uxJQ5GYVfNa8ofrKO/A9sj1iGcVisSZ6/q1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qS2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo42A//cBjvWuX+oi4l7Tc3ZC8DRA/MXv7clCHPrN1l5mfcx5JjS8Ca\r\nM9mbkf8u+lkFMxprBl+NcFFVI4mZcO2IWpxszCPZxmsfmVbiYC+Hmr/Fffcp\r\npNKY97rbg/VraeYNWvGXey74jr6EfXRxe2QLD6ZilE+1zBCaqJqYvpDMj8ma\r\n+KTd0YsZpJsZ+0ZbvC9bBYXV8uL4yNCr5Y93htl4ZNTqR+Rc+suHnBSR8wod\r\n3CvsBndVeRpqqNysnyKE8mH0gmIRWyz5dyRax9JgtqLWaYeHSSlACz3ElBYA\r\nZ4F0GlNSTIQMfVhZa0R8w5M7Nn7AFl0bvwjQkb51RxhYGMExmppqUay19eEd\r\nTI6Z+ByoMnHTzrltf05SGmkpBWADvtHPe+m9gcTZbEeH6PHmqtZdktdpzzk8\r\nW/NGuiIPslSmZEint1eVaGCTywE9WDEshbOkCvnui1fy9zWWTeJbC72dRSMz\r\nnlOqcXYyuLumKZsIZTHpy8DDP6Ol0PSqc5n5CCwkRS7CQrbJocBQ9gILaYkO\r\nBmtuis2C/S25P9UzBbU00P5uRO8byHBex9ATQzd8nDvelVurLn+i+v4cKJJE\r\nP6OXF1OHbHnssW6Ck7DzvZ2oRwcjNc5EOy53yRO8TyBbgWDdWO9tqhrbeN2+\r\nJHM4/xDWl8Bdpq/ff4wXN3qjKKEsSrlUV8Q=\r\n=Tf1r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.0c94182c8.0_1675273398536_0.2768768158798993","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/theme","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.15b221540.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88218f3e136bf39bad711dd8e55b4350d2186858","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.15b221540.0.tgz","fileCount":45,"integrity":"sha512-vl1DNGqE8cFgxsPWH/i+1XePmzpffTmXmcXZCJ52l2Yollh7F0q0/8+MuDyZ5lU4s2vGWDQ6w5u4M10HrgMmmQ==","signatures":[{"sig":"MEYCIQDtYPbV8cDlWaUKaUFndi+FhsFugn5TWs8cX3UsL+amugIhAPuNOUl/S1R4KfoJZVuYOvtR12gQheeNEAhoicVBw03+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qamACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoniQ/8DZYNWHorq5x+JzYuP6iHM1i4Argr4J5zP0MKySQAXuI2yMQw\r\no9OqarAi+mw0naWwcXbCRamdmQoxAErVXUZOMj0cgRaV5It/9t45WY642kQT\r\nWs80qDtHgeDhCyJ2IWCC8LcXDqb0vYgPdu4zRjorHAOxHnnunpqZ4uFj4TZm\r\nQUp5GUiXj7BE+TnRBntcbKOnT+FLCOkkQ+uxqqLa/Pywffh+9lyxFq7IcTEe\r\njAADtMoNXHQfGgDzXKCzq754zBsV5RF1gT4wK3jb6opFm+8R8pxySEma/b3b\r\nP1l3BkLNwYLsCsLf8Gsi3v1G1TXnYs/XCANgY+qXl1aAFglM8CpNdy60D7dv\r\nia3KwL1MuveCHxE8qHnL25b5eKzYDRpo1XpDmIcte1KuM/UHl/ewuG5V6f33\r\nan9i6EJRZxwPcni4jaRUWlQdA4bGhvtqT3Mzm66Or4sS4yKaH3yK0tBkmWvu\r\nL4n+G6tZRgrA8PaneltQhFHzct3M+rOahzcoHljqT9eT6Xx/Omcba1OHZG2q\r\n1obgo7E/+XBmMp7cRj34Swzqx5ayWyGu0VTY4mqpYNUsPJ2l30PsPyT/yKh7\r\nIfPf+W2pTo/CHz5Yn7fhAsuD5atPK/z6vosmTLoVw4U4f6dLNynIWUd5Xc2m\r\nPAinC36iH9DS9Gq1lxliKF/3lX6HAzu5as4=\r\n=3h2Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.15b221540.0_1675273894584_0.5356052043727786","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/theme","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.eeebb8bba.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"808cf15e7c14b35818d6158c706751ab7ce2126d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.eeebb8bba.0.tgz","fileCount":45,"integrity":"sha512-ucNOcMlSKcGu+RHp2vNlUPD9ChPgT86FnFSD2uUrSzHfn4c/WXuJPG123nDbGYaSndWoegdkwBhSDhwYZvXpdA==","signatures":[{"sig":"MEUCIQD4amtZXUAeIRgFIdIsXuiaSQBf6iBJItCMiy9DTXJOwwIgLha47ubb+2aWchWjh1leHJH0un/eSgBz+yqQPnpUdeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q2jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpp3A/9Gv1drN3+fnENzmSOz+bSdQtfRtw1EYr1hib4aoZMbVSz+Xa3\r\njVubYPmI8s1vaE7gvVoBlpkcxiMqg91vD2JjUnmp89/TINmRoZZ2G7b0XYTy\r\nQ5TVlqMJBvpSuBq+6RD5VGTsxB2oK5RfqbheLzrfMSucvp/eET40oxKjsGxW\r\nJxPo2USW9kEOpFTDY9q0PJ+85ixQ5ZTFluxDrBIVqNDrjw2zAAKar7hJ/I/z\r\nsB6NqVlb0fxmVOOohhFnqOjw3m3gX+7elRiusHlwrDq4UlvOmiJiNE2+uFa1\r\n6gsSyBG7+1Qo4CIs0jApUSn+aWeKmtcv8lH2ZLwmnHJXiOdgf2kmczHmXtob\r\n7YjLXMJXa4eS/wqb3OBZLRTeCy62XQcmh9rsBAUnYPh0uXCTYhrCoTBejIGs\r\nUNpl4rvKaVcQ4TLSnLd5kCpvCcaz2SC07Dm1zzR/63gOrToAJx5ZyLpoxcw9\r\nNyixNIUM1C3bFurDL5TWAJLy99bKhxwbNUyZEdh3Je2KY9ZYVDDEJb126SjS\r\nsOtL0PFIAZyJceJXZWsXDJzogk9whvzi1knCsmIxn4JWWlLNqoc9rUHeFCaN\r\nBVQL01r1/soaQmkBIvXWbLHr2s4gU9yzaNETDZUgp86q67pVsGid9Vmt8lKE\r\naW3fQpZ1CctYxW0pisnVvfjJCOZDbOAeoWQ=\r\n=64m3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.eeebb8bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.eeebb8bba.0_1675275683603_0.2152025826921391","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/theme","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c05d509e5da4efa3107d9c59de49ee9d4237a26d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6a4b3f834.0.tgz","fileCount":45,"integrity":"sha512-WXMSOCHUmXJZgswJi3Zk1/LUCeAwRcl4s3gahYsQFxKpJIty2DZShbGRbHo9lq5cdSRE4WDB6CqOI1raLQpz2w==","signatures":[{"sig":"MEYCIQCzQKg2kbBudyuDbVUpQvhGeyhQQSKLC3zAvvyQNXG4KgIhAOmRLPPhnbX54DkelNpstofz0XFbgHAksq8AO0tqq+kq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rYYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouLg//R7EaDIMfo5xn3eVuL/YowmVyaaPL5lOjtAcA7hgpZSMxn5xV\r\njoUEfSMZyU503AkswJwBNe6X8LhtA4EIdSLGUasARdD8prKUqri1xWr588aN\r\nBVWlk+mao9zUDCQe/P2Yqr5jg17wQdC9dWHOMARttszS6ZP/IBQ+OYOIqb0P\r\njkyi8kHKmdM6PM8eTcgrvviQNLSo3EaZBbFYRmkp7CD1B4I/YmH+tGlSKt2L\r\nDLMV1ysWHRLLxl/eLEtb5GY6UFSr/Xt48QeZDGUPB6ZZFEXC+L9Xg5nJENd3\r\nXu2AhMSLuVaE9l6MuR9WyPpF46LbODCqeSdeAPmjRnZJNmN3fiNXbTOAgvHk\r\nnlSNSn8PYvJe3CeLfpuev2P8wH20swkprleL39JXkH5OMQipO0g+jO2E1dGY\r\nCeULwV1WckBdrJYJgcbF5FE3Hwl1eWMn6gHDCBPojTcMBmSVdqRKv21WOQuU\r\n/op3Et009CbiJ1eysgjNppPEmSqOGBWhmDSnyXkZsX/ViY8Wn3tvIFUAiBXM\r\nbLzT8JEYizvxTQ3WARnarNGPXRkdTjvA3ieq0I14jcrVUJWU0/LKo4goDNY+\r\nwXPkfq4ANmLV3YkttotK/zd36PmvGSqS91mZ2+eNu2pCHDaskRaajh0I9L1m\r\nKtY+QxtoOmVRfaXfhbRE0/evSqxFHhkZSzA=\r\n=zSn4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6a4b3f834.0_1675277848070_0.21913371627995493","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/theme","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6d1451d82eb71775bbc2cfe9e0663d393a1e1e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b177b40e2.0.tgz","fileCount":45,"integrity":"sha512-fXidmdNFrg5f9wuC5YNb0SnqC9YFaZ+XSpUjsXz9z7KtDMMfl6iVcDolcaF6JrOIw0W1nQwBRRKTsQUNEbW8FA==","signatures":[{"sig":"MEUCICmMViPeEvqyQvDkT245CCGyeDJzlflf75ykm+lKdwq/AiEAyMaZEjKiSxv9f8Wpt2gGn9cuRxBmT4EqRjpKPoIrawA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y74ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrRxAAjv8Lvlz6os+WcbT2dmvd1H1nWLNyjHGgwSPON4vX5IC18Zpc\r\nOHPDNUjKRXeri1jtxs01ouT1B1iFa1QxLKq+LQCOQq7mUzq0xBIyOiFTmmCj\r\ndl0M8MsjdOQp0jFono3N+xoc9NxTWfFedV18vKcZud5xowteTUE1sWBnTuf+\r\nNMrapP7kJYQnTk7u7KnrxFTosj/FPguTvi+VJqXNAdIV3UzcxrNMIZjAa6y+\r\nk2yKX9JmhUbCeLJv630UjXVbra9fYs8/InPm53ahDhVaVZTfJ4fTemEuFHwH\r\nbE4O/ClaW7op3ZDHNzLuNoyvz7BvtxUcrayVqzjiyu+30wH9TZKFYhMAvyox\r\nYMauyh1a9VXlyjzG/WWkbdB0hIHq/Gnjq98LzEo6Y9LTT4Na+jE4Kp13lVSY\r\nkInwYfjBRFe/fIQ9kW3fGlnbqeRMWrkyT30eFSfCnkBIXbppb2Z2W/+JsTNu\r\noBEfjcS1MJMMYbLwwGo8pYm3I+eRL4zXfDHIQl30JU9MqN2wpiTdJrkArvbF\r\nNdTYuVf11HtT42bNuuinO4nFNrdrkr9vP024QbeWKNtHSFdxoSWmAavk47Gf\r\n9VyVIDLHjLn5irYoewnQAnqBI6LwHJHEldFpy2Z/PnuPE28ZttEF199uaiMR\r\nEQh83QNn6zFcArWECQMb7ied0rnkkrCbzF8=\r\n=MUSd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b177b40e2.0_1675308792038_0.5182326002294544","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/theme","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d9f821042.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30d68079383db4757669f61275d4495a8e3d222f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d9f821042.0.tgz","fileCount":45,"integrity":"sha512-N5FvEi0vdrIgJdTzeE1kROwRSyUtrTJTXdMxdoegnnIOF5Cv0DLsVF196yRW0FhMfiEDYn2QsEWxFnaxJUfvug==","signatures":[{"sig":"MEUCIQCrizeZ4b1z7guU2UtygNSty6IJJ6Sq3SCtcfn6jRHB6AIgH/bL0YBPs0CO/JrUirayJmyO3c69FZUijQ+nKpuYEQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/SrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7TQ/9FK8hkgijDR8rSJHeabTP9UdHxxJLJc4y1ogAhRgwxf4k76R4\r\n7WgG30mH9sCBEn4T/UFXbww6zC12vRtZrn18WHJ23TE+dCZeiataBIksmS1f\r\niu2w+AwM0I9ptbeGl9f2H5OLsFFeRtVkRfgyKA+topZHiwFCBiHGoHobt7P7\r\n0QXmfytDJh6QeYY8Ls1hYMYZ1qfFYmS9iZqnLnDvpfu083zedW847Xzii89g\r\nFQNXAXH1xS9oncRQPe0ovQAZmc3qNkQr9QbrF2429qWuyCVlxtWYLOC2lLxH\r\nszrnRpAnnbq21Jw7Zpi5bl+zClpmSbMkSPw4emcPMA2q+KSrbFTMN5992c4e\r\ncivTSVsLRGXUJxaagdZBu8UB+UIAy9Y+cYIWdoLDM3bcr+pRw7Wkk5SEYP0Y\r\n6WRHb1j4lqn/K2vuiMyc7WNb4t7I1v0QsXd86d/7fypq1sNa7eGX87P8TjKi\r\nY/oR4Y701CT82gR9i95LRqQyNAbsawjQymkSnGcaF1kil5eaDLGru1VgqUsB\r\nHeQEHkN9lSQ5k+bQaAhirfEEkkpwTk/O/VBtA9VYYKy0bE6rSaee1735DbgP\r\nk+QGmvfOWUm+zonJfibjT1G302bfRJjqdOMIggh54Wh1pYUqilgFBAVkf0yp\r\nHL712Ph7r/Ttn/lMoZqW+sLT44pdCQUaV4c=\r\n=985N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d9f821042.0_1675359403222_0.12321682464396955","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/theme","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"272927c152f508a3e746d62f1fef70159c64f18b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.47c7deb19.0.tgz","fileCount":45,"integrity":"sha512-pIFkWSQv1uQ6k1+Q8W+b44rD13+bJb3hBqVtMmPSyg50pvDY2F5qncthz2DCaExFHq37wJ2BwaVq+6EV/GKDdw==","signatures":[{"sig":"MEUCIQDe7itrWqx2lp0o+R9vc0JftMjyuzcQ30yHSQmYdatNpwIgLm3rdq0tQyyMKLYZG8zSO+HaMLQWM+KGyNkZmYM4jD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M73ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqxRAAl4W5tbXCUXMFL9KUdgSRuIwooCQ407pNOVHyzsahxqELCIOW\r\nPG0QDN3gISpqFB9V5E9uXP4J6A5Vkpsz1kDJNpgCxukTbVQdY6txyKtzOjqe\r\n2ij9M44Vr8Zj3kPiasszyKipSIV2oUe/McgMDZtaVH5+GNec54XnzttMC2LC\r\newU4Qnjq6mQFz/PAHKnj4KOWhUp5lxp4Fr7GhK4Do/GpoOQoNHv+/rnetlgH\r\n8nDOJC6qyuCp5Sgt/s3SJxcnic942RUuJRflfEwDoi7cvBUnrDWRSROYbNVG\r\nvN+iRtSEcFvW3Axckf78Kigq7T7HWUJRXdNmSVpLMG5qg33vAuEXl+vMCHOt\r\nBYFpnwFo0sDKiWK0MHVy3++DAYQF9SYcjHtOCPBv08oBp5GM7XzIyDXn8u1a\r\nz+UclLnnqntquK+qxJoGQfTjH8o5B3+NLSRxnDoUbqYlssyjXmxKGsJXslnh\r\nlefogZtMB3xS/HYEbBuGFVQgK6WP2uQY/YxY8kJg615xiuIhv2gFCTeifJfJ\r\n78ygPlbbrNwdHa/OCX5BGgqlsvV/9ZYsy+aZoblXkG+8JibKJiY1sjdhQdrE\r\n4jsbC+tjCM91QkIHJOtVpImnW/m25xp4LFbr2OroRogPHO9KAmNoqh1TZpXS\r\nhcXAfoU6eLnUlJApDvU2f7742bvy2B22CXU=\r\n=tTFU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.47c7deb19.0_1675415287586_0.20497268022003445","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/theme","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c78bd07e586a52e79aa7bcafaee9ae1128aeacd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":45,"integrity":"sha512-HEzXvXwqY0olmvEnb66sa1UV75+yisp3oFGSr49MNtM00IlEAInTIL1feq3Tyu73w4mC69bo80fDJiGbcFQn6A==","signatures":[{"sig":"MEQCIAnJOxkvCtycJQ0sqYo6K2jX2ciBlxlRKIidUMJ1rm5BAiAmz91K3Ge0fcAUT182dr5yNjjtNztMB84Nk3qY8AD7Eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3feZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3Eg/+KwwnJ38y9P5wc6OW2eCEk6SDm5C13+k/h83IWF/YMkopLx0t\r\nN7M37is2Xhx/RWJzwv3Gy7whgsClXMlvXxg609stPjakculOf1NiP86ngzMs\r\n2BNfqAGbRNP49ZR20+eWF7Cfpbm24M19m0uE2GaLWB01f55W5HPhiviDTi7/\r\nm2prAranaRKHyzKcSwoMnVcHGOu9t9UI6tKDD2SydX0Cf73yP9XmQ0t8YDvZ\r\nbQ206C7cErlHANvuNJHN6GmvdlP+lCtvmpbz7MEZh/58nW0BGCx5nwi2DHQg\r\n0GK4wPlOPwf64k8/RARXiTLjf8DqroDTvqErwoSvmipPZXytYJjGSRGa9ITN\r\na8rHQjxLfp89ceexscP1+9G5ZqaFqaJAlJj2zXHRqBggLdSWCFm8ZCXvdE6X\r\nIJxmUh4Pmg/NW8U4awtYRyX05AH2e1ZvmSpxXL/1SBQJbMCB4zViOQvtV86t\r\nYqilJQRSzpUOTQkSkXGFnQb1T9mdo8VZamu8aJklVtvI3Mit7hqf9aRglpW0\r\n3FF0qS3+sD/kNUBRxet3anqjDyZpridGP5B2Q1L9dZFd3DOb6nkYtKsvYYrG\r\ntK4Sj8avI1dtuw6oR/pvl3a5B5dj/dHgflR0s3rkqzTfcgPNCWKiffuNhoEz\r\nQ0BEsgkr6C3lH/0AlM5qXAxHeNM5ILGH46I=\r\n=pqQW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a16dbd1a6.0_1675491224899_0.8635701723760341","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/theme","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.93416f87a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc5060c9f128f2197266b6c9808a35dde2e41fea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.93416f87a.0.tgz","fileCount":45,"integrity":"sha512-Zg959ojVnvSILke9CkJ25BBEBJ4j2+6N9ptqEUZjJn7oqcJxbGQQYgTG6wUSL9DASzgW/0fJXaB8/a73uba0BA==","signatures":[{"sig":"MEQCICvk2aNAaxVPTgjTizQHquvyL01ujuCVXAxT+GgGLpr5AiBQ8wuMxkinYx3AU9BH2wMu8LUrmvGQKixj/StppvU0dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lC/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+vxAApSrz93hrSkxVrfAPdT/nASeV9DmDacgCpD50lE3bw4Bjndb0\r\nJqR591PXv6Vtlr7yl0sCPnv/D1L/oRmEhuMPll8ZXYBtEeNHc7y+lA5Fd8+X\r\neEZz4oWYQ+/A3kAWO9VTLDlWH1POyNQb6bk1LA8Lfw7J1uDWE/GqUzF+hlmQ\r\nrRGSI/SyPwQxNyDhHykV1dlvybH+PWf+yZMFK2SHSfLA3hZfuCZ0OAYGrEKW\r\nutD8uJwhP6s6FYUakwOZ/MHsQkJNNGgynzvFYSlqKdCMIzk0pC434HzEkg5n\r\nQxdMao/THfjC6ADlIRepGmptUEQUWBTEB6HzIVa4gzrXvz1cvZytpiZj6TD2\r\n+q6GJuqi61EHj5vVx11EY60MZVT7Ez/WoEbaioShVuCHxIdgj8Le8U1bvdMJ\r\nXBKFC4LND8YaAh4igB5HwG2rZzEDJNVzhcaH5V5f0MJEkfKx9cetPdVsy8JU\r\nkwrIyZCi3UZM2rMQ+gsTynOF9OCyAh3jOirWiCvIzPa8QN55G6ZlOLya4e4H\r\nEkzrHqwf335gfjZGRzk0ocXsTJGaWhUFhtyuJ1wWIk6uCQYHeP8zOvymZwnv\r\nnMkUZL+sGiYgdqMo7PYCv2BIRxI+qQxQNBvon8KTb0h9HVRFOxBUnf3TPTkX\r\nDWKhmvZfuLiG8unf1F8UK4sQYqJci4sGXO0=\r\n=bECw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.93416f87a.0_1675776191542_0.33810211843827864","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/theme","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5625f2732f2ea552c0d7abd628b65ef270095bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.49b8e7442.0.tgz","fileCount":45,"integrity":"sha512-nMwCAGhnzfrstNwAn4H5MncF55/nY5uZhmkagAAZAsHv5d66m/MSKIc7tfXYCgat1IFMMMH4CvaYEmFWW24F9A==","signatures":[{"sig":"MEUCIQDHWfy182M+3k2hv2xwLM/17TJq4J5sdFfLH9SL/04fywIgb2ipc31Avx0Fj7IeEnbfP8zpZwnthhwH+aaJwBqoaX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tn0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKGA//erukPsWBljtA5B9Jw5blRHt8ODGgT6OLzGAZwoW3wfCDmWJB\r\nnTSPW2lGIeg8KqsZDoP+4Bm0dmKkZKZqQW60JsJVaUD/F/aDgfEcMjx4J5qJ\r\nu55sArUfTEidYwxkdx1Mgc1Svp0tgCJSSUS3mgp5D8wZOBM0zj7oymTxbSiU\r\n8RREgQQ77m8/Nm+Q8U6kCVCUT4JzaJ2wAz7w4e1y/1EC6lv03+qxA4GU2Sfu\r\nvLAAzOoPWA33IymhGhZud2MPqSj8+qxDHF+qCKBK2sbYAgK/yCRd21s/peRg\r\nb1oUt0XCRssACp0xY8/SZ7u5ego+zPgkJ1bY0UVqusUqO3FMt2UnlQZEo7cO\r\nxrWmGhFCdhHlz0fgtoYODlexcgU/YtEc45gDOsMJQh+0M9QJpgDXbNTt4Q5O\r\nn7fGxZkjhsI0pype+xlXE0XhpGSOwdBkBYX1RatYHe6QnAUDajH4ZktIghSc\r\nsvfwQ+RZPPVho2mYKhjQy+o9+fWY4wsfp2LiU7Ga7Pkma3LQpXFLd/Xr3PTR\r\nVQjE50YXdbfk3anwdrkgBxIK+BCUtzAScHGeEHxJawPHYQRoS5qhxXNZv1Yl\r\ncHN7HoEQZYJBQ1f0lSlMyO5KODN3mXllZRPa6OV7fSu55f55J7RrdEP0m2YH\r\nzJgjdyNkTkN+hj80BaZrxd1cjYXZMlNcYcs=\r\n=+cpA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.49b8e7442.0_1675811316278_0.6626231489555245","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/theme","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.de38de758.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c656c45910be49adef4707e02a7f9f4644178c18","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.de38de758.0.tgz","fileCount":45,"integrity":"sha512-PPVH/I84/kDO3Y0StAV5wJupo+70pG30If3TjoPSybLj2poiWmiNPwg/yqWxYUdXBxo1xPWM7yqqMKqX9GdHGQ==","signatures":[{"sig":"MEYCIQCsB4H5QPrfG1OOPiO6djjmgAb/ZzOq0OZ2TiktFMy6SAIhAO7y8fTqTn8ZGw/HkvA7icnsHaYV/H8/F0Pt7zhmKb1/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RQnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQMw/+ObZrwVxCjRZFbGOE0OYC/AGNo/ikB+k+dnwiFruzKyckXQ1F\r\ny9yTD/YmZw9YxVl+OmkgSI4dQMm+qdVnBLKn0eRR8s0a8csCeoQKM6pVU7q8\r\nJUxIGGAhe+c0eaZViFF3GOByNTCP5LxQX6WtrOE11nLNZzgxsPWYtzuQlOtn\r\nMma3y0JhGDLoQD8NgNDkYMQMZSFGw2MkASC6b2C5F3TkzmeM3RcQBdnPldiy\r\nbY+kNo0+s8KznQc1tG9Ug5E+BgXtH/UNwGSPPwTw7EDvd9nupmEByJ+OowQL\r\n2h6EBUrXmJZAD13rrfdh3y1736uNnsDeDiwukz5Vg/TFnnA9PY0bYMDuFl47\r\nmomyggguM2UXy9UxVvKLlo4QXsE6iwVHCBN1nogyatOzOPI/tlQNsJ51QRqM\r\nv6P4VCiUssZdyiIWT11PEp1ccj5wVVB2akPMC3bulF1o5mpuYIgSPdGkfyMG\r\nXlrWdmnZ3t3bFYT5zSGyt0+8K7XLZEzhtpjJpD+8tfhBdPY0r5TCzkkmTenA\r\n31GuMhj8g4hsSBt7xcYQjfz1k8hj1valIHU9BRwEO0gCuenpdQuow2ryCQl0\r\nH6sZx1Pl7kQU4CCuJaZHoBOfReSI80CgOvs5Rn4SzkxpxZuCz9v7IUW9ylgi\r\ng4S/EcTV4jr1z0JL8c2RGXyZ6hJJsUmz+z4=\r\n=XRna\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.de38de758.0_1675957287296_0.04867484935855404","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/theme","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbd415613f717cdf3fd74fecd7c141c37dbe24ce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.4d62de70c.0.tgz","fileCount":45,"integrity":"sha512-vWbY/+ZZIVrsGaVzCDgkYp7sm5tJJNXJV7UJaKwzZN/91PG2PIKv+emFeKyyR+tvJl7T0025bbSD1GsaLCfexw==","signatures":[{"sig":"MEQCIHZ8VS6eqJd/MlhddUUmwv8mFTKgzha1ZbHRvX2K9kNeAiAVhgX26GD2VSbhOGsG0N/MQXVLAdKJwnbiUprs31GrWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W1cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIEA//Xo/xsZYIDxdQirbAYahJc4J9d4A5wcfhMean/d12nAIeLmzI\r\nDB9q5XXwzYKbB2asGRiB8t/4JDeB17zvoxUlFb9udScU+ons0XFediZ5Bq8C\r\nqn76HyafWKyD3kH6H1RC6BI69BYVNdreWqXhx7l0Y3qOJqso7XbTofG3zm5p\r\nwaBOMwk89tONftHGW3SXbu48Fl6Tio08Iwa3RMFrpR2quJto+TeeLykT2ewG\r\noLrnCmgvBa99KDzERcknfSyg53WmMFPK2SpCIexE+u1rEGp8q1st47zbcnlT\r\nemhPwI33MrnnAftdHuhothK+xk8hg2/VhUVcpYNhl8hl646J+IjVmY/lVFpO\r\neXk5sOGxb34nsTNY44gz8fq7nXdW0Sd7iF+uFht9TgmrjTnvufoRLvtepajB\r\nk6lLHiUKXuDqBKzoz8nKsn3NxWtGMrDv18ruNJgPa0+PgjFJwTZHFMm6Qtft\r\njuMHgtT1gR74efGcwPN/ARP1GgE6KMuItBXb/KA00ECV57D3oO4dl67WicV2\r\nImvHC/NyAA5PGs6D1TYSA6s3pMV5dJLJsjDeds+t79oeZ0xfPmqn8DbGMptV\r\nxi33Vdsmu13/EudbbEN+TQPHhETXDX40MWEnBsjMxoBK/pJia4hyc2suJVZO\r\naxH4s97CBUpeE9sYlDqQ2tVWGBWdMfEkBW4=\r\n=I1zT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.4d62de70c.0_1675980124421_0.06944803998888172","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/theme","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82d8a8b06401604a1e8ccbc86204db6caefbafe9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6fcd8d418.0.tgz","fileCount":45,"integrity":"sha512-CS77m5NByhU1hQlgtsPE0XqIsvlGGiW4dqNhtWI37eW5GWLwDFesPr6le1L4dJfOg22LfaAB4YrBCr4Mge7ALg==","signatures":[{"sig":"MEUCIQDwZpdK0pxqUhs7aUJo87Amp0XgykakiiM19Dv5PwB8rwIgIJz8bmo2dCsYdZ3q2EJcjQ9+fGLa86zzgeyI3anEAxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iOxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxgRAAohDCC1NXE9s/Bhw2s77w+t5fTj7bETKoicS0wglMyr99yyLC\r\nINsbLmWPD+AQEwhmSP6vWjPDmJZp5F4hqrU0xq1xXOgazZDaQ7aTlpwXKAR3\r\nIToUNv8Fg1W9zr0bvOR/gJxeocweS+/Sb1E5lvh1GqqWnx0v4Yw1SPfS31P+\r\ny1nO6XEvLC+jQjYzxPscQuUzrJUPdJu/1Lby0tv4N3plMJR9s+ar/tyBadKI\r\n0nxwGV62BX5Orog4VmPit4O7MEA2TuvQ7kK6pblCWkPcmPbxI1Q2Zt+dK7WF\r\n5q8y0p9RlRR1lN6o8bBPaB9Ucdo7UYa+1lUqx5Wh+4Gf8VNqMlNHsiYJ2WbA\r\nnYMnparGD5ptmkfIY2FXF4kTe4+ada0PyRWU/wz1vuFCCHS3wEh6+Ok2LIYY\r\nUlJ0leG/vEPFbDGXYFyHhUaKFxZEH/ZlO2wQdJGn1SeC2OwG40xYBzhLvycN\r\n5NDXbRmP2qjZuZjK/8cgQWCmSDyAG07kiyZa3m/Uh06lLbht91HgrNAki9cw\r\nk/nyz1ZOp0DoUByfvo5BxPMZ1CbwtsXS3EL0aOkn8e5RN8IbwkE6st17XtE6\r\n/IldkWScot5oUKI9rOg+Bq2yCVuJ+JeQFkN2K1jh7s9nluk5EDkg+TCpYxqq\r\nTO+50VsVZt5XQ5EjkiEwu+ZneiIqJYEvdAM=\r\n=mUXi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6fcd8d418.0_1676288945123_0.5003508193448609","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/theme","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.066d9439b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de8f57edb8ec2dcc3588c4307edb62c483a08353","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.066d9439b.0.tgz","fileCount":45,"integrity":"sha512-AkYVs7cdbbp+vATzJEqCOB3kws4kz7xMZqATX1VxqxjXDYyDrvNDVjD1uLpjhjnOuTxPqddJ516hiwGcsjwH9Q==","signatures":[{"sig":"MEUCIQCdQgI3wO9ZmKPu0WuMoVLCNhgcf36tl/zK6KPhg6cK9gIgWvtiTPtxONjIvPSuD8ZeYN1oEqMLwA0mZVoMRMe4tk4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TkCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0zA/9EeAm4jpoNf5UHDeSqRsnftmV0R3+/61O3BXwsnTbEY5T2cKD\r\nH9yTxX2oJ99ik4GVjRNyH8EDF1RU0+Q6lYYGEyX3D+CoXGyzfRZX494cjy2c\r\nyEaNdX+LmUVZ3msAPhd3DoKvxNVVi6HzPyfK6WTs/raSwascsX82xVXc3m5b\r\n/KZjmkx4EBsOqXURYXcpbG+sKKVqvBPHhmXG7YSvw7g8wb5aCreDs6KJTfMd\r\ndH0uU4RqgSqgIxz3X/BooGUV4SMabJ78XzVxZA5r7ftw3dectoxosnpiUANf\r\nxiFZOm8Aew8+fxVFH233tRDpS3T0PYr75WLT2OP35JPLbPhBpsF0MkYakQ/I\r\n5elfnmi1KhsLtW5GTErrF5jiEY55xr8tDalSowt3u/rWVpQJuAeAiNhKifrn\r\ncNs6CgQ+gd5JKAjYvWKpVX6wueQRvJudipH39OOVV3mFeu4WS5nsHlPcZg40\r\nxGjV10noohTvFraAkPq/XENU+ksaTp2qNg+9AS/tR8g2MA6xxtPtZFeamD9I\r\nWubxqnu9KmwL5pcywhzpsfy5mwBA/pqgrM925hrHsA6HgNPM03aX9gid3HCX\r\npzkTcfF0MvnZfHH9fnqkEohbobTfhxiqjo/ARx56yt/xh59qu8Iv+roimNkx\r\ndQbyYYMczRakbEhh3hMa9fQHz3LVzYA+CTU=\r\n=u2xw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.066d9439b.0_1676491010504_0.6882271314747306","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/theme","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"470655c281a9f87618fe2e9b827f927dbf385f94","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7ab32468c.0.tgz","fileCount":45,"integrity":"sha512-5bBvckxZX2Owy3HNh3zHFT557jwAXkvoEDE9xdMzaIIPDdszZd5Gu0gzw1ob8DCoxx4neFcnkV4iq2PJUiQN2w==","signatures":[{"sig":"MEUCIQDq4iO/OTD/N1OZFjmLmv97HDP+/u57W3tKIU2lj8nkMQIgZDxtXVTr28ocMPgDHNXTkfTvbH5rQhwTtZYxmN4Xu+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q5fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmreog//fwOeH7qhgNi5Q2lTiWxC9Gq16Uh/9k5bX3TdcWC53rHpp9l5\r\nNIm0XXdQ0OLsJGPgF8uQqq+jErSR6d7fZjvmzo2HddBQQuStxOj0RR/yDCmc\r\nyf4hc78d1n26FRUIw9UYofdpCGg5VMF9C8z+FzIsGlYd8Dc09J1bh7qbcnGJ\r\nNOqi6jVDMldpbzfF5JW4PridfRzg79prfM2kWmvPXUbT9V0mv2S4ZMFOoz4E\r\n0rIi94YLxUmJV1XfnmPoMhCLJ7zDFDc+RbdcCsExiNku0BKQYXa24bSVA+0o\r\nrkgdDeyUyAwjN5VaV05FlQv2zaSav7e3+CNH+mMwP2Pp7mW2Mx0GsG230dGB\r\ngww0yiitbMLlHrUVR7GkxXj0GZdE6MRnDHK43W+GfIxFWzuixMT/xxJirBRj\r\neIySmpkCXRvo5AYL5QpHKlEglRJ0syW0qcm+6S48C2Ssj68iR+NXsJOu6unv\r\ng1ft09ziba0L9U6NjvKET2sp5RoNkaFSPttV6I2OHvpmLOt1TI4kRMzbRff+\r\nNCzTnUSM14J2xjg2a9tKqwwsxPDw/xsm/uCB2AzWyvb5Xz7zi+tbTe7gY1Q8\r\nDu4jRodXto+4W8hLvb0t3b5cN3N3YqOCWw/iaMd1FoDkQjs2BGcz4kMyZpTu\r\nTvq1Z+owYqxTJs3IOvHOK9Fj4RKxao3KUwY=\r\n=VD4o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7ab32468c.0_1677004382876_0.2332307356699439","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/theme","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5dd72c36e9c912a1c80c58a78124630c7d08231","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.fa27ba61d.0.tgz","fileCount":45,"integrity":"sha512-3kRU83tTNV3dE/1r6Mm5/z/jMQ5VxJQor6rXtqzGtev5IzPr4kLGu31eS/k86+la791yNOhe31oWPCvBymZJ5w==","signatures":[{"sig":"MEQCIE3JO9soBzbcUiELcbhoJzHZgrqBblofRGN3TEOBlz7LAiAKTVeZMD7K+0nYmlIAOGOV0l8op7orG9sciFsJ5xtn5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NfLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAYw//SgzrNI7kAGo3d9ky5NejgvO9ewcqM1rYVZFfC2lB+oE0GI6v\r\nXXv8bWQiVy3Wv7OyYk7xPvR6HpYeWPe9a/m+OGYorUUsJSOO3v4+cSOw4DMm\r\nQmgava8/3dljFr/WMcX5H6bl2IOvXBB79W90ONzXHlD4hA8pKJNvMgqVtqsk\r\nuYHMyoZ6ONTQ4GloG5kz/lZzVE83/TIBWegUOjxezeUxTPVhXHwUYz9G0Uzo\r\neUDm5T4jboclR9eP+PptdBR42IPr/rz4+TfXky+02+/HrHszr6ZIcojoNGsy\r\nfWJ10O7WjcRAMW8P0hegcF7aRMUKLU0kk0CXclDscf2nPeQjzWpgHbs7qk4o\r\naSHwYNr/wY/9jltUncSamWBLWDkmIz7svzw9EF9hak0g9IsKQjolrmI8MhyT\r\nCcMzsQuuuMOiqkJwdqPjdsAO8r9UuLuVPPOAgVWEy15BfpnqTrNDjHz4nWSx\r\nHP4uTqQ2xHGJqM2KqlGVDW6m+lsyduMBlgb4qLjYDQFY34P3xCD7rGiWiw/H\r\n+Grv6+ejhEXfBgRvpZxDm+A9vaQXUNuGwROoH1sBFFQVADfpFsg5TwZ1RVKq\r\nehXQhTF5ydOh9bRDxL+cKjb1lGUypRm2/yuahf7xr2BtqBNR29s1NBqAjY/C\r\nzdQb8OAgKfKFYpEOf1FMRuQ8JQcdo0jp6wM=\r\n=hMYD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.fa27ba61d.0_1677514699514_0.17614558097106436","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/theme","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc73eec1884c9bb4fc9568b50a31d7987e35d977","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.311ab4d4a.0.tgz","fileCount":45,"integrity":"sha512-LGyxEMyUnTCZG4m3uwBRUjONGf1J9tk9lN71jNXC4vLDRlk1m5fopeV2bqUDcQlwQSX2P3eXSEX1G0t5uVBzpg==","signatures":[{"sig":"MEYCIQCBmQT06WhvT9X4gtgdvt5jTefY3XTiBizkFJsy20b3ygIhAJ4CYVLxay1BaWP3V9kglCTlcGIrJtnJ0m70RgdAgPGj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/Nz3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpirhAAg0JwkupM56KwS2+xpAC3J1X/unK2zcgBiQcVMFK10K05oR7C\r\n/tUT0BU0IinQ3zZp8AL7XnF5GjKGKvdODfsx3vRU1ggW4+A85XBxCvyzH+uS\r\nD0KOHDmm/CS8NVdNA7ReM7PMpVElotoHQ0kWVs9h2cEgm9cnRxn8S7Zvdt+e\r\nttKgDiYuCOyuBS275EClNIFUVfkg98YUv9BkLT9KMoR2vK1JnAuNjv6FnsJY\r\nVB5oK/sH8THm2LtxdWBNYWS6vI8d0nptRZIQOvUW0jFpaiSt8eCc/7e6TUhe\r\nmtQ3QGg/L5K4zLGrxbR+QxQ35vJfGLfGIuaHW70K5m27SbZc9dKc+mNdHu+0\r\nhLE9Nh69fXMWjhBOLNir08b1c+s3F6bpriNudfvTbGuYdUxnluBeyxGC0YgR\r\n4pBWRFCkfW67IVbuv/hOYVIBBTInCLwBwsFdY2aadX8w1jPOswVXN6fQuX2K\r\nR9HVeINC+fUcOnA++GGvW8Ejfqsz+lriJNfojFmWBafCbCgCHieouyXB7mwv\r\nEq1+29WyzEB+Yrk5g/oB4L3x/N6AxycOMnkTbe8dsdLO0QngvfUSVkT0Ob/i\r\nb9mqb22Ik0fMUfeLqvptz49gsRqjx1iyizQCy0ye1nCmcoQSsZlHvztZkyFa\r\nM1s39sBbPQIOgsFUpRiFQFJmgz6E1A2gvdU=\r\n=25rx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.311ab4d4a.0_1677516023008_0.031297417507641256","host":"s3://npm-registry-packages"}},"15.0.0-canary.901c83e77.0":{"name":"@material/theme","version":"15.0.0-canary.901c83e77.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.901c83e77.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7c34fdd01716e1f9b61d444ddc12e295548ae55","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.901c83e77.0.tgz","fileCount":45,"integrity":"sha512-0omv428IttXo+YxuXxdF1Kl4BbPLuYLHdIp2fPO7SrYmT+Mv4Ekx+/asyTNaPzihdHvhnF4B3O1hNJJ1tLe79Q==","signatures":[{"sig":"MEYCIQCy14M/+kVhF6brtZTEMmv2W9Aq2hEUemshtxdWu+RUXgIhAL5+dfhkzu+VsDYzCX5DYA5YN8KinQRMyqCbWzzu37qC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PDUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriFw/+KuRyo7vqTWYokFY/coRhtCEprKxzuCKMepDXxG81NqIxeEXX\r\nhwtwNyvHf0UGrf6Sl+erTRjYyEl8T+EY0lmaFhc8LmHANQM4OcKESQFbfxjT\r\ngfPS4tbUpjlUssiPJKTdCp1hm77ZdixPulM7/MGLLj4bzqGs7qmm2IYeeZju\r\n8eAdbvjQL4vGa0DoPnEMPIxet+Vngs7aTRt1dgtXwUReXOQ85I9chbXadJWV\r\nljt3D2d8qR+ohQvSriJ1l3BSRYKyPEh5njPQBHhr+H9nPK1SbyT2eDFqzr7A\r\n8Z8DHBKlvXkdSYyvwe8zyMpzkF1ixvrPNWDD6nl0sVkScQBFLr5/CBzPZWSP\r\nUzeXixrhQBPmg7OGp0PV5uz8GkN4ZLkoIEAypIMtA26t1gp9VVDEoq3XYE+z\r\nSAzsP7h9mKSgc63eZvgHZ29mjjAVPhJBb3WhJtVmuzJp46o8HTzd9op6nZCy\r\n5uEa/KNJ58o5Gf+jliGTx6KmplZ4X64uC5ZqXvAHTxEdO9MNV4Ie4JHkHstO\r\nDGuQ+FcVEEmfzO1ml8kFGGkG9w9FZK6AYqkUfDEfVclYeWhlYbekkGlYxOHS\r\nX1as3XBWf4K1vIcfpBXA1OMIBfybQ2F+Kp5/iz+sbGk1zv2N4kVQBv0k7fem\r\nbMQsNSOIu2yu1fsp6/YbFmmWqep8uGGUF0Q=\r\n=SuvW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"86c988d321eecbf29bbb6cc63f7dfa18cda02d4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.901c83e77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.901c83e77.0_1677521108457_0.45713961117665813","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/theme","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d29e5dd5022a7cbc520a15eb7317f95fd9f7412","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.5cb8e2174.0.tgz","fileCount":45,"integrity":"sha512-eZxisraOLklDubCqZe+z54Y/5vfPQDPIRWPsRkf+4eQsjlWURXf/XdEMSm+/LyuPITE3vW7Haf2JcJBCo4+xNw==","signatures":[{"sig":"MEUCIQCsjTmlvG87aN+lrmWHcZUO360h4AT8ixr3O8vzBgs2qAIgel9dIQE3pfsiRWp3YDfX7A7b4kJWSwAJSQGy1rBIC2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/36hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRWg/6Au9yYzCqHRDUKtpeEDcxG26+pk9xKQsVSbGKItq60AFZN/Xf\r\nEEEFk73PvPyEANtO//RVCOzEhTJAT01kr/CdOOj8pciRfDN2jGXUZXxE/0ih\r\nInjh0WPI4+2aY3KmIbG99H0FJ/HEu4J6T3RTm5zQcoIK7+xPyCT7aGEC+cNG\r\nIuXoXYi3tcZHzcyOREt0opKqNn8mGx3xGmCIhMkMPHvKC3y6PH25vMe3Jc5h\r\n/t2fQNN822YTcx1+jxYYZ+aYR6xYSkmoVx3ZsXcZ3GkmGG/uQfuPVZE4DobY\r\nJHE/vchUPRu72FoQTPV2almbn/iG3bxLYv8SAVyf6KLeU5Tdpj1/3FAOZsfV\r\nw8ZuDQiEoR+wao6D7YUcMu6fNqTMnzxsPRS0f7TisW+tw0dlXUIJDWekYMOR\r\nNadbbrGJtdf1uL9+Atm9X56QLBVkmnn7rQYuzhveV5ZR5spHMQ5L+brVk8HC\r\nEg9cKiVpK8OSJEroLqsPkLh3RVlxaUfAa9a/L+UfliQb0vKZ8L5BoXenVqOK\r\nIhV3+juYCgra9VTVFlD11xS/KpHSBlbD2nT0AsYqeDUp9PH53JZTWwN9BS3p\r\n2Atik9AzifexsgV4Fn2T56piPBMc7UJjRZZMly8uTAsBFYpyvS0lKpDha1/V\r\nrj/atrfdO9sKdHUuBG/RpnXwadoU+V1a8YM=\r\n=v/E0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.5cb8e2174.0_1677688481666_0.25366817428551514","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/theme","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.f32339937.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"263f7d604deff1a97aa294795ca7de1f19a30f22","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.f32339937.0.tgz","fileCount":45,"integrity":"sha512-s9CNsA55qGtQlPntZ1Dv0I/k18tRGTIIrPxJcFOSIsFWEOZeaWeEIKek4j7MPvtCEFqdzuihdpUT6mbrJJclzg==","signatures":[{"sig":"MEUCIQC11b5jXu3Q3ncTRLN+d/r2x6P3xkntyArFVyTXf9NC/wIgUZo49jAmSj+8sgGqDGYtjxDNbgvPJRYg59J9KxPl77w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgNfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+Ug//cprXp3/kw4aucBg9r6omCa+aJ5jmXi9R1wFQ/A7J4j8578IE\r\nc/M7lXb6tOo3ejeiBN4QgAfFiKmp44EpN8rSUSg2MqKVf9GfU7wg+9pV7N14\r\n6PSkskXQtEAso29EGx9h/SqO/zIqIrRsZRJMq77uXVVwCM3cI1y9ehrt/npT\r\nXFCU6KE28pjNsHVGu2HyhADayoDPN29z8L+dIn+UxUbPsLlULFkb0QWJULOF\r\nhnqPODimFP3IpIoHUwOcBQGbTqKNQH756fD1hH7okM3TVcWy7Z2jezfKiPRF\r\n36jeyOyqBhW0fX+L/1W8CcELnJMcMy1UC2M6TUEdwKV5/XVqxZhTuuJibJZn\r\nE5WZ41XGV1X8nZNUFsu1T36nYHmN8RmuXc4ea/KRUmq3O3BxMyFS+KAtBAeV\r\nV7PmJn++QupGdDaj7l8Pb3jDg6Cq6aTLDn2F8fmcNx9U0CAo/c7Mpr6Lrifd\r\nf/OUhLW1McXxDDmGz0HSN7bZWaueGkTazbwX4bwyazqsKn7S+BFPTRdLAHZC\r\ncsj/hTqjrptK0JaUbuZQcsN9dhW3fXNeqcPUQrPLbrezmwr/CT/ghAfXAdl5\r\ndOXo+1JoBq77xam41RjhnJj3sb8E3GGoLMLEZUFc/oOdGHb9dYsECZHtA2m0\r\n3lJVaurrDHnnIhQIcTNAK9f2DmDHqNUQHBo=\r\n=sIpk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.f32339937.0_1678115679270_0.671768984578831","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/theme","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c9539010b2bf388a7bf3bac7469987f972d40da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7644d63d5.0.tgz","fileCount":45,"integrity":"sha512-M8zH+I12M92juAVp7N989L0blHXIVg05Ztr+MFEjSr6G85gPKzWrHibel5qteySNASd/ILbPbTD/WpBZ2K+2dQ==","signatures":[{"sig":"MEUCIB90CY4bicS2l0UzZ1ZlQN0pMBFPa+ciHTqI7cJCQXViAiEA3svuwVBSMuRuXjFdBzp9USjO/mMo0p2r5CbyWczpYZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmiaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq69BAAijxvi3xlAq1nk1LuhY0Y6GRpaZV7P7CDjDgJ6fbeKS5VBC9A\r\ne7GlqIHiKgKT5UTDuPUhmlWCyg8DFLQ82GTeauS61rkEbHfdBlTMN4yE2QK+\r\nkzHuQbVu1nQEn4b99U/akoGoF8GnXt1RB2VUcdcv5gC0JQfcuU3VxTDmZzdx\r\nEc4q5cDl0zptCfj0LRT8DIcDQAqHz6mHCrzXbV56N4sNjQNuk2EkvSVCayZe\r\nmba6qJfiNOOB0Ai+bbhvZzHqbwRulrwIgu6ZOPu1U4aJeiPSSxn1o2hNip5e\r\nO3IsAS1M0Pgpq4+ixftdpj4rN1Ik+JqN82cbBO1mvQjPiX7yr1K3o+TtmmPH\r\npL0kY9GPZcTDHhHBt+xGQARvEhXGdhGi2UGj/AGdxTXDbDnbofIK9yNqx7HC\r\n8uj/7tmpYCNUJQJajMAE4BmDU4FSyI1Fg2jKeowY92/Tj79iysTrRSnjQ7eA\r\nCbgy7ts9+BpeWPl4WH7vTyLsOoTJHi2Bm+dUP5OZyDTY3ecv5gnA/VphrHQX\r\nIk3qpEJtlvGmRK4kfaxpnlClDP0cIlL2iishtDNkXwRoKTlfSqxgf3OriLFP\r\npONkhLUhbiJPrs5xriKgsfXelZAsnwNwDlBy0g032Pt8Z949G0fPG5q4ZGaD\r\n9Pn7ujgFpW4345+bZsBV7xmFHOpRxhJqSUE=\r\n=xhMh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7644d63d5.0_1678141594090_0.99759888877755","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/theme","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d96330c08.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7da59f1eda921793e97966163fa433e61999f22","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d96330c08.0.tgz","fileCount":45,"integrity":"sha512-smVaALfta4OwdMa+c21RzYZFmbYt/R46Iu25xJqujev1MPggBu9KxpypjxYpt7UmZ9VsS2/YzKK42wXET5DMSA==","signatures":[{"sig":"MEQCIGpRWDpK6YhTGr8dlXtz+kFU9xym67qR4GJgw5mgV/g6AiBImjsdi9VtgMl2mqAgZjwT9urN4FUpMmv+vkZyBH5QAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHRGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLWw/+PeFzutOPkTmnf7EWtGgsdCPtzsJIdBOaU6QL6dYX0u272EJJ\r\nv07xceWFtC9gcTgbW4Br7K1kRg7O1g5+9th5Eg74lTMWZspJREyVBX0qYRPF\r\ntBYMHPiDGfYCNsfpufn7lB2C5LHUcCsKpT7DxFhi2youZsnUSP7L96g3R/b/\r\noKkfrTQw0EfFzIFTFc3/bB8wvCFqkEQxIq/jIrm1I9RiA+MMyQFQOnNog7zM\r\nn6ZseYULTVHDvxASMwIVx7YKwBZCNkmfb+0afLs55F4LEvv3i06MahiR/Amq\r\nfOIxInCp2rs9D3RXUXQPzFjAGNqvdAPR1lP+lnrrTaExDyVJBiOId0yTz5ax\r\nMMcIgWpJ86QADVDPUc4QPqNTYh2Eza5cRzJGJEPRA65ZJO9JAzLkB66lyt6R\r\nX+Zhvo100lbX+ZxIGOYdHORUk3bX5Emodz9wA/JaRI4cUcQwCLMdG4lqNuoF\r\nj9Bj6t6lVbAzJJHYymZJW/BC2V0JpZYkVNhV2eRmr7FryOTqgj2aPSH/OojI\r\nIZ1qE6hJBwf8mfopyLNQqW9CUizzw7p4E+su5O/KC1hY+I0NNu77SEi8LVrf\r\ngR3ml7laOlLtS7LEIvqto26jMh5cYFYigHIufSwB13methnYEJ7g9g91JMYc\r\nVZP50imbSGHk2NfhdAzP1fQGJPFs6mlCEqE=\r\n=RmrS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d96330c08.0_1678275654301_0.3165297966854377","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/theme","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c1bb60cf6e1803f41d8f631e726e6550b89c3ce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c99cae77c.0.tgz","fileCount":45,"integrity":"sha512-bFFRod1HfU950clm7TNVxap9xGagynVqJIH/rd9dI+RjHg1163hc4Y7W+aSCdkhuef6UNBHQwNmBpaUdzfkOpw==","signatures":[{"sig":"MEUCIHGtmOULMSjb7cAlb/Po3LYVZBuaFFGBhUkaq3vP3calAiEAxAHqg274QJ7eFB7TAcLPDyn60emaIb95dpKzQ3EdefY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR1HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpcng/+Nsfr7nIfDMw2Il4+QGBSP15SfC/bOfNbCruJSPXQnSNGctwT\r\nxjd5eqgb7aYpZhLZiUs45JB0jU0wRff+JlUf1T7YwAl6LLkbwVmoptuaclp2\r\nMXwmCsLrEjWfzyT79yjCdxPyiRxNxeqKVHWli6FokJJ6PCoafUQW9JTDG51F\r\nH5LgspPXfhm9bx4QYlCd5amTB9BlW90/9q3lLxPaNxPV+Ty7jgifz5JX62aP\r\ngOnja9zWTnQi3H6G2zz+k1+ogEPE/zKpFueIq8CJygZ+gZG7FVB0B6YvLJ3U\r\nbfqAP2Co21OASHODGcfCeYoZM/7a5ayEYfSFJ6bjwm6/VfPwNdOd7se1USkI\r\nBkev/CknypSrr2GMR4g1zdW34FxvUHhwqIv1vL7e3LcXEhupLZsJlCET5qrL\r\nZro3IwN+3x6AMYmrwMkOWhQbHyEhCdPfNE6cTejboRytj0XS7UDOQ0R9FZDr\r\nvZRQxrApM9yoGwDREBl6nPIWpF/3wQmHPfxcMpottRMVyyHHCHptOei4OqrL\r\nuxipqDk53kMc8IW8DBpLofGDuhQpUesi7VejNAS3sZnsxhLbr6haxnaX08rs\r\nxEa04AHW09wuQOxMsf7zzPfnvD18oaky2+7V5vCftWF+lVFcDPp0R5dzQIP0\r\n2BhPn7bicEkLYfINHiPNLhJ0IqREXVKOiMc=\r\n=7ehS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c99cae77c.0_1678318919715_0.8116506488530832","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/theme","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5defab9bbb9d76dbffd35abad4aaccd6c9500711","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6023b1cd3.0.tgz","fileCount":45,"integrity":"sha512-XkGeeqSWBlgqChExptAJcjyr3bGLkCXWTXdNvQty9cchsr/GCkFea0R8beEKE+7rnQO0NV7MUh93Yr15pLWu0g==","signatures":[{"sig":"MEYCIQDVw1yEfaaLIUZ/sd6mwkddPAk/bj9IvomqO75TqGe93QIhALYdNQBYCREKViN+sZ4eN1Me0rBfJ5+DE1M3B3yk0HfO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCexcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFERAAlLD6F5989ae6q7QbJniG4k11Gg4nAEXS7CSQ3uav2wOtpNU6\r\ncpkYrUr4mp02F3Qmiy7KkGtSEH604BSRABQo/qeM8DH2ZeJnhHFZnR4HUetk\r\nQ0EQ1noOPcOcHCFqyFgP1Xdn2WTBaDKRY+eltbvbcSSl8vglV7WfJMREw/yC\r\nyqXTA61KAHPpUss++o6OdCtxrC7xEByX2Y/xakctc8LB9AqDGOSkiWqDqNrP\r\nNyEgH3WFiP/zP+jdftUQsawUHZAlf1759wzJaG7VOqC07eVU2f2oLsDhy+Y2\r\nSrEF+Dn+gPlFiJHiOqTGXkY7+2AU5PxD8XK4dxGoXtEXx63UY+g4cWNn6BuG\r\nuTgFgCKihsm5P6QntJ0RAVpUV9xeDV4+uOnA/QQ/ZUqwKVwjf1mYN5yIH/Y2\r\nu1Wc1siPCZT7q8o2SNJ5P0wWnXb9avvE+4OhCNS54IUBDTpZ7RG2chRttANt\r\nvk6owlXVLtfdIV+YRpQwSQWfXIc5SJUJFIQ05DR6KW03THJ2lJjRORD/Y53z\r\nqUA67qTYH5aY86HtvV/Xi5XJlcDsBA3JOcPvar2ZenbXk+IrO/XJi/UIyonX\r\nSxDVZNTfni0FcmkG87PLwZfWqGI71DVk6Pxa5rWm6IH/r4NyBydZzVkknJp+\r\n5wJU42bleoKOrHA431fFU/lCIkgLcffNEWY=\r\n=EK2C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6023b1cd3.0_1678371932145_0.04578603022128003","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/theme","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.274610c77.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84538d2c39f5dab42d37b6d1674d2811d82e51c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.274610c77.0.tgz","fileCount":45,"integrity":"sha512-TNsu/VYYiAJ672Pk5gq9fxREkVO6HdzyjAFA8DkzrwvtWMWQ8ydDyGeu4xh2v3i7pC0vOO1QQPTmF5RQSeEMvw==","signatures":[{"sig":"MEUCIQDHl9rrt1a+zyP0ooflJou6SKznXQFRBqUcc5wc0qRv0QIgPy0ZnTNwmK+WFxshsPvlulqWFjlFuYO4ZA0ERwMX9ZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfPjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5ThAAi6ZGhBbn8R/HidkRALPCdyDPwlucU5yW8jDv7h1OsEMl+lXJ\r\nNXqCoQHuw6vhYOLKNQvTBKl6UDLEk5iKNGcDWeOtw0dR0X/UDXSU7qE6jqFX\r\nmzFRZmPbap9+mq1LDr2piwXyEgW88cufZdPhAl66TdX7CobrM/hjKBpbiyiR\r\ng0BqEWVXcQiS6+c39kzYmwJrZbTEEvWekFLruzzQmigQrNF89AscgKQOAhtX\r\nkFYB2AArWEuNeMELZ3ZpPLOm9n5aK5li0hu/978km42E5OWAx0rLZqH0TXy8\r\nvGh9GKnu3/rDwCS/qhx2MA7XtW8P/WXg7JHzsxYm3W36qZb4NjuITPBkoI2F\r\nh/6HxdU3m3PbDs0dojuOj1gECtbHWNxPVIUueu2ohQs06ZPaBJcesPom4tmj\r\nQNmopM1bfbgG5L71y2N6QgSWZIGlXrdWj8WnspwULP7OLQHWkgxN5PSw65XW\r\ntOBqkzz+xDARZZ1au0+47RFDXLqGuUAPFO6xfwuQP3t7+FjDdGEYwMThToe8\r\nzsLskG6jFOWKWtMdlhvCL5iDkfPTEZcQk7GLidobhEOZRAbcvhkAhXBadPAA\r\nlJ3TltOhCsXWXY2rXvyLP9DEgBInoL+NzT0XqcB6JDA5qeTQmL+3VJeb/Jtj\r\nRZiBEoe/lMIltbvBjfpZXLHZHot8zCV6Au8=\r\n=fVWQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.274610c77.0_1678373859712_0.7769183837615439","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/theme","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a274583b9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86256b80daefdf1f015a046b134eda76cbf3e129","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a274583b9.0.tgz","fileCount":45,"integrity":"sha512-Kj3uQ9YCTA097VfyE2aXT7DnOEGuxGtj7UpAEWqu1FS+yPFgzbzvmWBkpUxfj8rmDpuLIoq0NgxOEde++2F17Q==","signatures":[{"sig":"MEQCIDejMWO5AJZbVw96aVWMCigRY7346+hs/3UBlAz+1wGgAiAO50zJsgWYUrOoFyWXayuMKWiPivEKoNMshyRy9yDlWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjjQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSvg/9HdAq18udQqtvVGHuBPnEyDgHk462FQzppgFKo7TO0qgTmqU7\r\nRVJCPG0rulA5CER5tLME43x64Leyq8NJVPlLuiLi8IKCoEEl14RI1W2M2L8V\r\nt9bMrnwrE9ujKFKtTARUDkFKht1Pxk/MbRiuXzxU87iraUiAZbntIse6NtW2\r\n3Qht+NshNkaAMnLNKfS31fXhIBt34F50GQPFoiYyICPgdsozJXDxzBCwxmha\r\nSkPoGBRLiLFvcRYk90lJqcZS/0qZBq3HE3qPnutet1iDmGnMue9SnRSnwP/p\r\npqoBUG9shKkV+ahpy2SCvB+7E7fBT6isWmzflj9TCWDGiGAJvXAsTlHSFiQY\r\n9JhIOnvG28UUla8WTJ8R8EFX1A/FcHrzJ7BYcZO0Ai7Fec8JRmvGzivNgODa\r\neDzv2FfOBs0HMkRyZRhtQyJceFbqTsruasRlTXZAo6OFd9J4xpbpxqyl1+43\r\nAqATG8SCYnOInhNji5lgXElPkULXWa+7jnoHh7GlZurmv0MB9OtmonzAlHB1\r\nlT1gIzYZ0X4ZMjKuiC4Ccfk2llRhYB3etSv6pxRMfuLeDyj3/4uSk8jBjBIF\r\n8xmbBGVvk0O4OWpgjk8CuYjv2ICNN9cmsIaKj9xB5KVIblH/3/aBE9UX5u6u\r\nPx1+6t54MYYHRE7WcXIS89mhogun4zog3fY=\r\n=fgMR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a274583b9.0_1678391504222_0.5937793543675263","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/theme","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.da22ca960.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f88995b1bb760a9a329230f6b7f8ee5a508710d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.da22ca960.0.tgz","fileCount":45,"integrity":"sha512-yOc3XYZDXEsm278PiqPZ8RTHyvJA4lhRB2jipCXOnYrMKJ4mqfL94isp1fMX+2o+XunmyDHPH6hAlE92Om4CrQ==","signatures":[{"sig":"MEYCIQD/0BfgSAopGvPyBHVQ93lki4CdltRi5R+aW5yq2kasEwIhALJHFmWC9BhCLzU2GrMUYAscX2ACSYkYiSgaLFurqOLE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj7JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoi7hAAnUM8pqsA8y1iDJq8eOK4T1fJOfeLKxruWXDUF3a0UxLhUUCI\r\nrxKlRwHtMPeLBSDHubnt/nU6HFGg8pLJfmiysRTDJCq4YuB2zQACKMUPSjE1\r\nODY/psqg4T71RA4rvFg8REZvOqhKKztF8XptM/UnbAt51SL/qhrivDdLmU2p\r\nHrD/Fljhkfkbwo7/XhmYjhKi7Xm2RrK9wvNq4JbCjzPjQWTv2A79uKQ3nvH+\r\nxXi09SLjo4Fo+MVTioyn3z2P5o0VlVn972jNp2LZboUQ1uZxPtFHaNNk1YXn\r\nFJIOHGOIj91oOOM218KAPpGEFiYDmpXaHNY1MB366L4QTxHuhJ6yNvD42thU\r\nvE91Eti/M01xk+SSspH362kLUUTsdiDnzfZmcQB0y/f6o66bSaD5fC2Sm9NO\r\npmA/y54sK/RoSlgotiICIFHQQRqt0y8tvFyBV8oIvqkZ49yI8li2h9vJHQWB\r\n78/SOjwA4AjDZoEA0k6EabTNFZo2TgL5Ps3JeQAf5cF9tWaY57VLyB6uCJrx\r\nUNZBSbCJHfBrMegMMYjd899/rJRRT0cgioWYtbTS/4LaNGHMTmlkor1JBDS4\r\nXnwi2m5LPO4B1wj4sVhCnEOhby+d+HvQBrqmqHWIBSkOk4Q3QFQHLOuSmZxz\r\nwkMGA7jgtG4hl7ndPspUHwBbBTIu5YfWQ5U=\r\n=d1WR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.da22ca960.0_1678393033026_0.16947416467603515","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/theme","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8703e915dfef0c862b775397318004fbdf41a488","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.304a94e8b.0.tgz","fileCount":45,"integrity":"sha512-wnpXYzVMecjI9hOiUKQVgY0XO9B1iioBscip0zlOpZtKzQ1C14hOSeG3R8lg3uPr2NvV/Zru5/ArUhqu1ktewg==","signatures":[{"sig":"MEUCIQClpVenkl8n1k4nZjd5Ngv+wFudblfNge41C2mR0mDF2AIgaQpk7ibmHsLL+5bizTSaNomkAtUFfJT8XnbtAbt17gw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkUWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeGhAAn43CH7D6LTjR30aQBK5z2lrW180v/+UpfF7L5w5lwLJuIJ3R\r\n+nojkQQHP2Z+9yB3i06frjjOkZnJy/ZgegvZwE5WUbtHTkqJfazsFrZCpVhv\r\nQbfqQ59HzulcoFM0K8wqLjc6PHVCLrVnuI2fl5baYE9ECjAtLePX/Wo08En7\r\njOed9XOsbKOt7vfRCNcU/lsCUsL48G+u8dgn4T0+Qih/ApGRxgj3Zn3E61jy\r\n43CEh6nyxxXsTKdRVHbETG+QIkLckq0GMe2DhYVdetwPGe3/G3unpjYSYgNd\r\nPFa1Rx6z59I8nKI5KQWtnhRh0LDi32ao1y05DMHZbFjIPSxcI+GyRtkt/mfI\r\n79Aq58fgpEBvRFKQlHWYyL8vdTotcW5h+0uwb/l77X9s8cku48ly2q93aid/\r\nxJKMKADzx2aHcj0fl3XZK9TtHTwLmphx58IbhYv53rA5i2HKL2Sl7WxqZ9ag\r\nSyEFfE9b09ovdMxQptkFBIvorchWMTCq2Cd8C8w8Ve9YBD5cV9HR/DHArHXN\r\na3Xlzzg0s2z01I756wJDo+G0jdbOKBdzu0JJF9JXaPtVRfos+jT3ZIUIANB/\r\nsE4UBN57HNtf937sKu/8WReM33Irfs/4/5BjzDiW+sKtjLt34PVq4VKY3G23\r\nJeH2875XRgMvF/y9vwvplA5OmVvqGxHknmU=\r\n=9aH4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.304a94e8b.0_1678394646411_0.13617998906874873","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/theme","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6c265915c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9be327d0eef5253acda7b1ac5e2b2fe7dee56015","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6c265915c.0.tgz","fileCount":45,"integrity":"sha512-g3CP94RXu/HkXnlvlxPLTg1QDz70gPgfK0LQ5TaaPk2o9N/V9dUi/xBpDPF2Z/b679lVZQzYNKE/CkLG+TTF+A==","signatures":[{"sig":"MEUCIQDRgsFtN9Ef+vESyhaaF4AgYkshWp39+b4uHmpHRsD1vQIgUuQJ6oi0iHwMmpyFYH0u6jIIlpWPgsA3ybfCa7dwEeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClOwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGjw/9FKLxZq/rVp+G4z67/6A/tvFwtKp9+t/7V0JZ/D4TkoGi4WKn\r\nYSLO9GbCSbBJssoAwyL4aLwjTQsS+5KgnGELLqgzdZiXAI+1JCjZSOKqQrgO\r\nQoyYKK+9LT/zFsrd5I6J3nVAn3e5J6+FE3AGSWmNWHcntx4u+pXKnWfKMonT\r\nJduksRYH0U79DZh5vEHPpHFdFCgNlyhBg5Ezsc7WMy2XBTAl4RtwVDngco/q\r\nZSewVlxbX8RWqWB81VhWz03WghcJQ1500imbo9KLhGFPIRqIdBKdAdgx2r6p\r\npFh6+Nig3KiMkPXp4T6uFuLDMhJS53bI1hlO9SIEsYRB++iSGk48Ydpt1zQY\r\nI9oYxeVOeoot+OlzaYNTyXQJGXjyb13atASIMagY8xD6Bn22B3riqq7aOCZe\r\nP5nNk0iecPgMT2p3ox1ZkvyrU6UbkvnO7ypZisvecRMr057oI9zJCJYvTIZt\r\nWHi7Pu95aAwSYfnF9/8mdd2Wl/NW7KKhF4Lacm8vw7PTWA06YiEI+VjEyCeI\r\nUPWFvFq9B/pu38jCCzUa+haL3ipEp2fy8YdakQztP5Dj0osHz+/kfR/NQf8p\r\n6NlVY+RuvXC08tt29kEXwEmIJHCEIX5R21VW4JXcmoBoNMF1YZSn2bNcBzPk\r\nExVeWwblIKzW+DlG7h9Bf5WwfHokhGFugKI=\r\n=2xRd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6c265915c.0_1678398384023_0.1847422251359243","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/theme","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.de5224633.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c1a16f0cedfa87c85d7efb11ad539e3894a9e20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.de5224633.0.tgz","fileCount":45,"integrity":"sha512-L4WqmBeUO2VwP9QclNIrrnADulPtJVSeGqG8DgbCRTCvBeQuJf6boG3xznTwETcdcwi6V50Tq0gkEudB8mXjVg==","signatures":[{"sig":"MEYCIQCxov8m05cuDMym0iwXpKzvimRLwzhdSUKFY8363odk+wIhAIOeysH7GHqXZlhW1UkuqCITCdq1PLubp6L3Lzb4Y7/9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnHNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAWg/9H2g8bo8Aeb1/5pQLMZ5BW1RNC8+KMvfydLAIx5HEIu0ZeKDn\r\nKlXy1Q+MyfpBE7RLKPXNDX/GKHqFvCIxlFS77GBT/uk9oNovP6QIzYO4a1Lj\r\nKciwwICNw2+6gi/CmeU8dgLddV1vA99ExMiHl9P14O2vCJ+lmdBxn6LrnDn0\r\nwqpstnHdPyZcL4uN9YULObnGr2ywGeyngGKiLHKNmH6WUC4Jpre902yZVsZx\r\n5HBUACb8UlaREUR8Z0Fdc6Ca6uGmviCHcRxhDW5/wXGX/dJl2r6RlMxGxYGt\r\n2q3OA0+A4giXnme5M9snDDmQQwC+i92B/Y1hF8ngWoGDjgM25fHbxhmczkF8\r\nCv9jgkhNI3nC62zx2n3h7igDU3q9M+VY0YiVTL+mBmjGGKNGkXZtaQvYHUlO\r\naWq3AR8SJSYA4BO+K4h5M5RjSQ3wXpo+KJ9WF2DwOvYL61fEmjwP7MFyKs11\r\nVwKpSBEl0fqeeqcmC70Q+6XP+YpTh7T/YqYHrgNTIbLn5ZVBPBU+g1IQYFXu\r\nzGxoCeS5BR+PU+yy1wRusBdjDRUxI2fH6l/t43wgzc/rkWA1NjAqRJRWb0rb\r\nic3YgI5HHT5AMl9nbDSEYRO5ZTJDOORK9958eZnBF1gFukjtQzwggZZDnhKL\r\nuC4dhETM6yhWSNhM7WR+zFyTP/iz/gPOnjo=\r\n=LgCQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.de5224633.0_1678406093533_0.17997386716651786","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/theme","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.8879557e6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e87437591f0ee4d09f4f59976d3adb2f239119c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.8879557e6.0.tgz","fileCount":45,"integrity":"sha512-UqE5Xwqi8wYx0I0XUKkvh+A0RuK4dp088Zct7sY226uaOYjcBFWNGxYYm+6I/r0s4Slfu2Oi8KeUP05++tZbXQ==","signatures":[{"sig":"MEQCIFBsruoIxPf8zHLMbMYis828LRDEQdpIBQbLnplQ3KjXAiA3g6UuUJClP914pXmnMLc4iQ+13+t9yjIMVFcY/Ge3gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzmEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG0A//fNPlIAxEOVY1WaWHHslCyl6M5hLX+SljcfuihE0KxsgKz5t8\r\nSdNkdXyOtzL9khEGIVf/nztKz807rKrJr+Lj8Iy6Ws9KNEMeJxXw3A/PnEue\r\nZvVuzLijG5E9fl36PEZlav8eivp61O9YxiSKNl4sjNUsoiW825emfZu6093x\r\nqj3/FjdYDv8tnt3ZS0h6X2LwP96z9KKOK6fDf9bHviXA/Ot8Crn7q6EJ0cp9\r\nLedZR2QcJcxHEWTy8gucoEWKva8E7c3J7UIlv1UF9t0n4wBty+ff7RcseLN0\r\nmU18z9/fVNl3HXyY+ws6ZS0s6+d1FEbdCDTrR/Q2/ajVAfyOA9KCU3nwtNtO\r\nInwAlNkW5Bqw5Eq52z+myOW+2VKyJIdzwmJYZhg0EB/uEExj5Sb5y5xagPEL\r\n+SDi6VnRAhz5EAP7LCYA9RSUDlPlR330Qa4byQ8d99qN8aRmGwnRwBLzp5uB\r\nXqZW1TsaTwxxyCDvkI/hM0oPavK/5fGI1Z80lSuXExTu/UDIrCawBitLnzuX\r\nNo0Y3A+h9RfAQQramLPbvnOjI3fRWVrrTAalK1XkjbmfWleu+opnL78ooCSM\r\nyJW+AjxPT07FRyhoLEJnXY06v3lV30tF8wPuDaB+8aSGpvimbyFyfc4IpeCt\r\nuG5lCrgeg+n/6Z7F/n1DScJkcVGFxO5W5GU=\r\n=w8h6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.8879557e6.0_1678457220441_0.14395962449984867","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/theme","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.23073a303.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b205744fe9f081f18912145e46075023ac735b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.23073a303.0.tgz","fileCount":45,"integrity":"sha512-Wy2JBhOBrXnnkbfNlqEi9SyMyQSR+Br56YGwfwhwoeKAofojK/HcaKpsRJJyDnTPd+r5pQWKh5t0e7/G6g6vRw==","signatures":[{"sig":"MEQCIFANK6h6U5GxNYZ3EN4C8Hlz2vt+fHEEFVHMF3+6oJgZAiAGpx/ugfwRd5wOk65ygjnssBQx5Uy6C94vpyRj96HZKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzshACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqaeg//XY/3zpyjsk49PQGqZav6pYAVwe012XZoHJ5NbZvKKfFbjkaq\r\ngIdZzlwogCvp4iMfs60y3/+lzTAWNiecYslOc7kceO3vO8MK4uwHlmm0Dsux\r\n/Y1yIL7FyebJbm2tI6TpsjVef0+jFAaJiBizCLcK552/m7qvwtVDxHCZRLFp\r\nm9mLB5q2vwb6Yh7voPqLhQV7YygaUpAN9ghggDPvEpIdcWa30/X741ncDyMS\r\nlCLED+6uc2JybpBjE+ki0joc2ewZACcWAPMfjiH1bALymAmJo6kCCt93X6oj\r\ngbezGOnoOHxeV+7UDGZfzP1rGY4QwFVJ1jLzZ30p+GBHN4b1YZepIsO5HMj+\r\nQjAuJKz58AMjTxetOz8/tWKDa8A4MaCt6djdSnR5+mNF+wUtSYcKVxvf26So\r\nQvK4Fuu84qtyGNGJZqXLS9oXnbiCgv4vmCvE/5DRN0lt72ggbGxhfGOi7JCT\r\nToLfwcvbll1viKZzMK4OSQQV866I67cYYYamURKYdQm7AVc9FnQmxVVBexBk\r\nRRwiknnvcgjH7+tkhTBRdbjkJCsSakcbbH0DPydmngcO2Wgsu8bTbVQbeaTO\r\nUILDtJ6PXqbdJrjDHU3FLX3UAVmeunooc9K02a0Go2BFhhMuo4KEW7/TCSUb\r\nsNpEplXKQ1i7BX/HjeBtek8uC97ZlJrhuRU=\r\n=YU41\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.23073a303.0_1678457633639_0.03963710396443587","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/theme","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19e15e58a23394de010525e7319a13caa3802d88","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.51c7d4014.0.tgz","fileCount":45,"integrity":"sha512-6V44xo2x7vn8Xy88CvD7FUUKPl7geBvrnxCPDMD4+c5u32G73qsb6rg+CvBxCkiULuc87w5rsUg7z55fJvWoRQ==","signatures":[{"sig":"MEUCIQDYiosWajEiqUt6DKUo0z5GKgvz2wFQfx5G6N+0yw1OAAIgKi22tCI01PdpF+I1s3ItHvI3tBXmTojKh9+6wGw6SxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC17lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmraiw//bUDGGL5mEPUYTILqjk9Nljwdo/Ro6MSVucLesI/5Yflfad7S\r\nMFE8pDcVbs/nqhO5QeCb83RyxntGI25tJuSEdSOHVEPC0scsniV6GdfoYkcD\r\noAxh/pc9KsNylXIuq5K2NajAnifdTfmh+E5GErTEdAEZz4o/T/NLmYwKI4vr\r\nEpHOenfo/XAiT/VHY2V6hRUHStrjXThc3LT3lfDP777bCUScZ4n0/AemQw+D\r\ngHLiygWmdTGGzdF02HUgJvrB3jPg6PAhg+H1dkO+8RhhyP3xGuAQb4eSkaBE\r\nL89jvqIUItytwFDLJeKMlsJ1JHmKtUkFqxN+j+Ls8LydPsETIHcKSwVefBoh\r\nFVvPs/H7/LkCgMJTpDYvqoezw8df/Lb9xNRgwVmeSYJhxfjSxKB1Rp9GemYZ\r\nF8tv2UVzHlgQtXRFEGPsehG+X0jKVaDpeJDmH2qG31d0KJJid3b/bXQYBg4f\r\nyufF7cdIA5aX6Ov18VPvM+zh8q0uDN8sHAeWXW1fz2Jpy0T21S20k00BPS5N\r\nF0IqDRV3mCisaGl1F7+MQ62eixbxJibahqyQdG3sDf914ApA82raZeiqNHwu\r\n/HhL8SJZh/wF/3fY/IYy83TfO1/zvIzWonmwG4X3rUTLiepEfHkPS+yquTYu\r\nGB0lw2tSyUyPcvELW4c+Z1zjOyCwJz2BjrE=\r\n=94Tt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.51c7d4014.0_1678466789707_0.7604630968313217","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/theme","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d064759ae5a933ec394e4b7cccd528eabc87828","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.1175a5be0.0.tgz","fileCount":45,"integrity":"sha512-ZiAZbI1nRWm/ukcZambiD1zk9jxfN4tBqVwsPPoh2wJ7WxbYr00VYgkk5cXrNgBeOGAgGK9GaTDB2Ru5q5dMDg==","signatures":[{"sig":"MEYCIQCw1/UAQoQ2AH5ZhEI3/SYuGnd0pejPrG4HlGLERy+b7QIhALDVvCUvhyx2cj2VGP+UM5f2YOHeHgYOnn4KhKyx01zn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5dNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnXw//b6lBCicOykE/r+8DWuNlUSGUKXtxwuRrzrnnQexkWAleqdhl\r\nuWtE4B6p7oTDyXXV+MfyPp77+d5l0FQOMXusc5uDcxOGVVQZDp3pPYhPi8z8\r\nhJj3YNPtpDgTFLRIaLZio6ejkkXWven2HnNVcvdBUxEZxZ5kXmlb2imN/gTy\r\nfSioTjDxdfcVlihbPGBJI0WKVQu7SmxKOvlZw39VvzPpbQH/vkF+JfLpB1Wq\r\nUKA+lPliiM4L76losnFbch/oU4t5WxiVKHZFxuYf6uZjqpJlD18FK8KDcKOV\r\n8glwjiIQpfXIIcvygfONjc/4CoB3QATj1cKPY2RjYBDZARhL0E73bjYAS1uS\r\nHAoYbK2GT37qgGdOevx1RDTaVaGi1VUTTm3SQJdPHnav6wwTdUNt9N2ZAtQw\r\n8WMvaaQ1K5rPJHhkxxLuYvIZDDb15seYBmLEYpMh68buqcYX7z/cTjmtXbXN\r\nls7H0MNT1mNSqH8mErFgnvIqhs+7YOtLweT60Gi2JQ7ztz2jX7DG5jBXRad4\r\niRpUHeuUOORC2jL2Jj4fFngjKwLiSffbEHdnRUouvn7nIFmJR2FCdlh6vkFP\r\n7k2tZBxLzgCQstKdIdtuYcEHOC602TPUXN19myYBSPQuiWzyTT5V+cxp2hxu\r\n20QTdOwnMQMhpB3jqYNoBxj+K4Eo8ZFzrQ4=\r\n=DM7V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.1175a5be0.0_1678481229736_0.07520966567828591","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/theme","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3408005f4ee0a53dea2c43e0141e77e3d228478e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7adf3af80.0.tgz","fileCount":45,"integrity":"sha512-bD77kGu95geiYOOoVoiYBOnqoLN4uaZJu12tboltKkJ0WwmoAOGVoRZPZCiU2/54TrKGyacBewCvUDhy/ISZhQ==","signatures":[{"sig":"MEQCIA/LdgaP/RVa+8sL7As2vhABaaLI3pJJIHx2OmKzDEP/AiAaPGF+KHSULBYZ+eSF0d0CbgczPA9Rut0NzNzuf3YN/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9gxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQeBAAjfqIvA+s3zJGBXsGIbdWzZ/5NpMiLaYkk+O2gZPJ2iBS7e89\r\nCa6YYse9qRfmN4aMWfpVzQkvXgtbdnCL0VIVyy2QxleRMTe9gSPG6SAWl7Ds\r\n2NB86+0bU8ZUctHyfKor9dYiqNDgcklpEM5+ytP1ZnTnoiWPMSs1A2hxwzyD\r\n766cQzGligCkTyYSMYTUgLtKUJyAvXwUFYeKr4FabJ6TngbNGpn1nDaBUvEg\r\nx3HSWiQdeJQM8HIhYPO0ImNuKmZZ/pF8j9N8wf91ejXQWRnUC+ggR5oF7zhh\r\nAIojR9Gu0dTF4D6U+gRayUw49TlfdwEcHNjVs4cQ9toXr2ueMV28LrhJ82pS\r\nBh5P3/BDG+VtXeVp2zacxk31qQVdlMqcKQD+2T6PBzPGLYg6elrjv1UvSWh9\r\n6dXjbFJzGabYxr95auJkRCJSPWka15Q247baxEoXdaCquAfLLXcIOOaV+rlP\r\nArmdUYDo6E2IhtV1xdWI9l2UnMc2TbvUWLYBP63pRwBFbFe1j84BG3QenSz4\r\n8+L+y/Cvp8m72uNEK5Z0h4HpUZE2wquycFp1Lp/oUG0sIvBOreHQjR2trnoB\r\nBsIUap57G361RHMH9Oqt75oghCk355b3S8A1ViDpr3XACiaYbwd+KHtTZm0X\r\n6vZLUtrRCYgFYGvJ/7GVqDrGI8p8+nEpebg=\r\n=V1+6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7adf3af80.0_1678497840978_0.5566283685626892","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/theme","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.82554d770.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb8971acb79f1f58d8a955a44c86bfd0b83c91ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.82554d770.0.tgz","fileCount":45,"integrity":"sha512-imEOl3F2CdS17K4PbwdWa4/xPwzAHfqK5rE3Tfz9KJUxWfaXmNTMqRuO1GP28NjuQsMCm2pwQmjFHd+gbSYrKg==","signatures":[{"sig":"MEQCICDD02Mnj123Vazkz7n7qwfc7QgjsaU0nLEkvPc62vfJAiBL9lKaE5YNR2LADcQuurvGh7ztVFLCWCzOuVHW3Gg6YQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9sYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrIw//SnKKnyzh7KNn5/uuIxrLY0oqMm2bipsqfjNlaI6ibn+VwgsC\r\nMUUsjoE81QH2N0XuA2eemEDAyRV5p34EFvJY8CFKk/7Y5Q34Uz5njhKdbpdA\r\n6jv0hIVXrlqZr4ziJXh6vS7UH9BQ+QNrQJBrXkzgdRPsmtPiGROGNDzJ/1wl\r\n4gT1E81eXuFwjCxAB2t98S+CFYZXwWFzo+VwFfe2doiq2n5X45JWxgsVA4ea\r\nsJP1gib+6Kmf8yBhvS/+8ZayNYPjefk5/e+kcTEGpXEnhvfT912fLRexX9HT\r\nmCiXqIFOY/QPKUodfknTo+/SSjGEQ8VG4p8VzxVIJWloauYcfkx+BHvJUybV\r\nBMNUpm/lUHX79YlMBHof7r6zygKqQNmohDZ/uhSqXfXUJ7+NIgkMIwHtxTK7\r\nxX2Jcgekkgp0HAZftHvBzcreW6ge6som34KeF/Vnfn6MyRQuSy4jQEs9SxR4\r\ne46lrOGVR8OJTg4PJe1LksqiCx6nRMIwbGUX4rr4nDyJjqHAo0vfp+gpM6o0\r\n+ANZ1+ryxqYUHuhMlGfVlSV0uzzeztRLSjIUCBH1uLpI8EJ2gdY8CIkyDAHW\r\nyA9trUB8CLK/eHjFK9p9VJ7/4G2vUzoU50casvu/ss4/vem+yQRvWbIVIn/H\r\nwYQxO7Sv/zoTJ6W0Q1lg3+xN3LAdxAcaUKI=\r\n=qOo7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.82554d770.0_1678498583819_0.12107823792226657","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/theme","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bedd5fa502ddafd5fc2d092164e55adc0a453ebe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.93fc524b7.0.tgz","fileCount":45,"integrity":"sha512-answ+7QT58QB2y7FXaacmUiabvsJuFm5eYtljU6wyEl5r72Mnh1H+sXiQVbX8tTlBsZb7E8a1BvaR1XmoND0dw==","signatures":[{"sig":"MEYCIQCB8lZIaFkSpsizd5uZikdEGTgPTNmFaRAd6Vq2Om1bpAIhAIa3B1LKIqkpHpK04hrxoVblK/pjNXYbkdXrIgp2ugxN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuDMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaohAAjdKrmwFVx9yqoRp2+xK8q9shnnEDKOwaWorK5e230TTbTMMy\r\nVgsGx3D+CYetGT0ouIxMX2MARe3UASwHZ5Pq/AT0ATIby/WS9+A3Tww1n1uZ\r\nRUiazUj80ZXCCeNOVx5nwft0pGkiRcqr0JYe15egml+1pQRQRbUJyMCe07aB\r\nOxzpCc84klBAjeQPJ6FnCYpZo8R+vGlUdUHzG/KdyP/TxzJEOA5EX9pu07nO\r\nfwLCd3JzIsPMN6NRdK5iduOcBCmqNvYDQNLj7AZgw4Ozq5J0RcvgCBcFHo8l\r\n5v5EHDo/RF6FOnt98MqDwWZyVON46vOd0jJC+F8lcWDE1/DmPWcSJ7ZaeXn5\r\nEXx+tODHf+gVqyooz3ku63c+LVIdvis6CBZhpL6KBjD/T9osFfal8khTR8Tn\r\neubxCMDL/5H2G3l2VCmKcTBxo6M99/COV8xJC0Q/Qj8IkpfLg5/mAmf9/1w5\r\n70RGnqSidw5+dZKOqYK/T1nLOrzMtZnAIqgnZ5dcIN6zzZvLvy0pQyTMN3we\r\netI+PA7qzNdER94D+OFf8TV2yhjcBD3rc+eqpXeDxcgu//5BW7xZcbhLCD0h\r\nNEX15Wc02MCrh88t+aSJkRuMY+8XrrwP9iNSmRpQ4PGLepcYDPS+A6FukXnO\r\nvPiTpwh9wSkDflAbDBsQMkVYmlnA5lMTLeM=\r\n=+O3x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.93fc524b7.0_1678696652369_0.6531910734150708","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/theme","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae0310f9351b13a05bfd868ff41bbe905f488139","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.50be0fbae.0.tgz","fileCount":45,"integrity":"sha512-PMrYhFWAQNDge66/LxjvKQqB8X/dLWKc22Jxc6xEMDv8uXZIs0J2SxPndkRZKn0LwdwTs1H/uptBLVqt0U7dnA==","signatures":[{"sig":"MEUCICG27WWzBJIVuqUFsWqcV5nMpprtRZMMjVh1L0doGDJcAiEAhNmY+zkHM16glbU4+y6BjyIswO8yuwgat396DZWBl38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2CzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3mhAAgKK6yIftu+CTH5hf8HzdY58ubaNSuMzG7kL0rJFJ8iKUc/Q9\r\nFk4CV50ng4HRWeJjWxZaRCmQ1dNT6OTA7dzUHQZIEg53syax480Zs9uqd/hD\r\n3Z5tsFO/NrOT35PYOrM9VOH/JKmK3o1Qm0jR1YBwmt1n50yV+y7ETHagpQ5i\r\noonDuC3b9YwPJmauZLQo+vvezpVq2iXaDKaCXZOn98dWh09BW51FsQ0Wh2zR\r\ndpPZfYBT6QWrD7C790h53M8ew2CsaPT9Uqk4Tj+TRvQNu5txY5lNBTWuA9r+\r\nkk/MAEas7p96ToZZyXAHmNe3qhQpuHkaNnPPJmIU578suOvUnc/1HxK0hQi4\r\nA/i/0ZOICPmH722wfIQ7Qow/dlQ5IB1zrFQUvtkl7oGPjAoWpp3NKKpXkE5u\r\nyns3ozcohnB0euCasmmEUSQh0f1Oq2aoajWS5ElqtMG8vDJX/bcGXEcslr4Y\r\nRYahluX6IojpvnCoSzqCwM/xCsWrPHeyrfUh5uwqrs2fgUP7JfmsFWJLiuo1\r\n1gBmOAWakOrd3oNzz44RyECP/42/tfRLyy5KTPO9coRiNv/9wIWP1MPTcMts\r\nCpu3Mf51WMO2gGqnGFgZmHPyQ4JLW8yBoD4EFxbXtgfIJVIuRjIB7QdVzcMm\r\nCn0eq91pSaSCSIlbm8jeV4Zz9Pj5TR3ePFc=\r\n=2u4s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.50be0fbae.0_1678729395624_0.686862589523108","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/theme","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5b72cde355a29b105f471c4a41aab204931a96b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":45,"integrity":"sha512-5C5COO6qngrddRxVsV/vAc0L/GifkMhhuHSkQcq6sXsUKtmknagREEaAYlhieECIVE7y0BzvZvrjlAOWT+AMDg==","signatures":[{"sig":"MEUCIQDmOpNacInywMrcq21GO1hpVOKzZ0oxph/YOzww3sR7uwIgakk00RrDHHpUATRtC2GXT1aPSlRkviMvV/z9EfxSgfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2F6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq5A/+IjG4SY3lLIg6EMu4MO4kPDsimH0idY1/qxNQGP/qbsUlMuZG\r\nqiL7KAknMPaSFi73cXR7Ki8ygH+H6ifPE29J60JnWxsMLPrxB+UF34Jdo/Qy\r\nuUQDnQquaraZGR0xoQ/3pcnfWglLs65kKfQTARqJ7jDeEZeGxLMfga6RCIba\r\nT1H5as79GdP/A0d1Y1JBEtwHILEcPYcRZKIHAS7Qkjg6/AxpdkvpyanXMY1S\r\nZVm1760sYGocZiIJ8DIYwZvujh0EykUsUFZM5IRhmykTVheNJQnqf/DkQxzf\r\nd6zX0agHe52qU1pOK4/JWHVdWe0fbu25T6jUKVb8pobw1DdFtFaOjn/As5l9\r\nSbdFqb42LOgRKLq13HlkrEd74+JiLGbZgqVYqQAf0YYVsKL30RBLwRwdeWv7\r\nXskKz/Vu5IAf22RVbSusOWRLXiPnxv1ivveW0cbzDqzgMwRTn+zJ88PXRfFp\r\noWsd1jCMX62yPK5YAY1ZZ6SDTAYZCziJfiBO1bBrTFjtOzNGv0Evz6fbYukq\r\n6LWkLdAxt9HWCcy64xYtzN/yhMTqfXWnwySrDACTeqtarl69QpSdFQ7CV96r\r\npgNTo/f5kwR/Pznwr/GH4j34UL+4aNcmj1K7OEvIzA1mcWnXa2rhiLiKWvTT\r\npdQFf9yCnZgBnrkKlPEY8qm2n+Q1hyBsMq8=\r\n=z261\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6b5ffccd9.0_1678729593884_0.23241717549572916","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/theme","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4f3e7a1a13252326ce2f795a65304841b9410a0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.1c8013f4e.0.tgz","fileCount":45,"integrity":"sha512-LJbpQvl9mNcWDdo5zoULrG684jA6PW9hEAmiII3nth8q/IwzfpyunN6QOCQLGOC46+7cWimFz/UK9zvntshgDA==","signatures":[{"sig":"MEYCIQCJQon/IPDbj63Aqdow42lIaqex0q0IizagpaldYQLB1wIhANsdAmZpYI9ouedto/WjS0pGK9224+Ojx80OhJIIHzzT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2TWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcZQ/9H2EGRzvpb6FLku2M71B4RlXStn57wVISF427DvPfo5MzUc0M\r\n6tQ7tpJJLlKhGZsb9NWV+wA0ig7kgtPGxwvSEsIO3WLEeF1Wb0OcJhFyGBfw\r\noPoWX8/Jm6sGNHARAE3s2qGwKsePny3LLff5lruS6PBSnYvHH5s2UaJXiClS\r\nzbhvCWqw8hONO4QyMc9bcG96RnN+Og304AmM6ixJ2sNgIbg9nuwOsjbQAE8c\r\nw1TwjuvsozMeGrYd/lwC7wyrp2S1118cHs3U6H6nWtkCEVcVPXaNVtUvAt/M\r\nXBGamlFfncI64o1dKyUTJP1E9kn4LEcUVyLAGdr5RsYbhb07rcMeo2wBvVnF\r\nXGVKvZXXxLvnHdx7QQr2Fh6aI0bp/HHOrUEjPXnsTHCHymMfBYaDXdI3fzTx\r\nyIw5lcy1OSbK7sUwckYVujlcilmMnrFQXg+BbCSPdMUuScTcBx6BIW5kw9af\r\nMAam7fXB5PSHNX2Z3KUAGAmFcD68TQ+OW01zgfLC8J9h/wfzGONSflkUZP6v\r\n79yfu1Uxuj+2XBtZhePaA4gtfr6doSFQ5fyNYCP/rADYPsYAJAiFl47/DJM1\r\nUgG1ZByGzwd/+ac89i3otivZRv5FmWwdJpnxSigobh0h0TAj+kga15c4hy+H\r\nTfAledwBuwzNyxfVpNUgakb67wHlvcI4Y+4=\r\n=mBSi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.1c8013f4e.0_1678730454583_0.9457604280260519","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/theme","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.112715df5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7d2403397ad8b75a9e6e2ddc263c4e441d56de8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.112715df5.0.tgz","fileCount":45,"integrity":"sha512-+KG5ZwZMKQUtPSzLVHPmSiECTZRZArp2Z4UV8N61P6MvwFS45YlvHRgaUYDIIviNP5JaBSAGB6yUSTq4lzlcmg==","signatures":[{"sig":"MEQCIEzobMs8BF34/rw0N1AYVKoqACABmlK0svuHMJkNvG2KAiAdl/StxzjsBlbRtMYc1S+EQjbfNN9bZqe2UblhWkXFwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD22WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7yg//ftp3d+EjlYZlDmGV4nv7lJ1jpTuZFKLW0N94VXFWQVhOEDIN\r\ncf/j3g3nMDneTAjBzzI/CFmQ5CYxYi8ROsdD0nAgtpt/EZZGg6W1CXyPPLcT\r\n6WE3qwBUWhqhwU5asht/PbdKIxW1UTIgqAdi2rx0TarNrbWS3rZVq89g5UNX\r\nPJPe7fwj0UGlAPx8Oi4Gtr/LK+wQN3fGd2Ba6LZFtuYFCmgcuYEBDaBjfABG\r\nLbp185oJY6QvC+D0vopbjlME8hvoZQhbjxlm24IhYREkbicVtCxaqy3imZ7E\r\n0kFKxDvnWABhqXI6dyqrYnTQgIDktf1JJrD2qFUQ1RUV7HiHUjNb+9j1SiTd\r\ndTlv8OBYGzZT1sbUfcGroH24fDM1eiNlXb02Dk+8wwqsANgmJrze8ka7i+VI\r\n5BQL8NXDtF9E2bChLG018g4sKyi1f/XS06C6mGFGR+IQy3VPpSqZHnv+NuzF\r\nI8UmENKfWSodVLPMRQG/YvRDVMKEJKyAxW29TB5XmpyIjVsxjbaLJobprCtN\r\ndmvp+DRSEvoTKI4jq+qzHiGhmZYafgbU/DrVVT2hQ//31llCA7Xnp5S1IRVA\r\neGo+5OJY8adLDpTDpfc3+ohUiGLgL0b253pGRpqeaT/ZZTjhy8afXnDEqXPa\r\nPDUA50l6iNHOe6ep6UOLUQrvxZe317fZwGw=\r\n=Jwiu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.112715df5.0_1678732693817_0.02883614656085487","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/theme","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d250911f2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"837dfe8363659e4eba528a6781e19a4452195d62","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d250911f2.0.tgz","fileCount":45,"integrity":"sha512-wCeWoRpsQgryZGTRjH5z4XptwQaiPcvncIFAcoNOahLv+FzNoPqeGMxyztTz4ddjLDfC7k//Db8PdJy+XZPuSA==","signatures":[{"sig":"MEUCIARUAALbXYIC5j/t+PHaMMUBxbPK1nhvB37iRHbrxfRlAiEA+H5rXyL2exRHUb7U4avAVwslIlfJu+9N+BAeTCoFjCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3nZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXyw//ax7GJr6EM48U2tkRBz1UOycbUasMnmoUrIvA5AZVimvUNHGO\r\nTBaiyVOXszRa8PrP3Bhc7T78MFAJ1XbeNFLOKRCj/d4TrUi6VuEC4qhirXWO\r\n8HF953WnaP6VBiuQFUfjWYQ+piRSRd191S6LMoDNO9Qv4mWBwi7OFiUny27A\r\nAHJ8fxNAHk+cBg4LLecn2cbFRFO7259ZKwCmXxvmsrJQWwKvk8It570QRvuI\r\nmf1EB0NT2Z8HQVv5ExBnQ4Sw8nqc4bv/IF6Qj9IaXEbMxNUlxmQ7qvmFrXbu\r\nlOZSjW7BJroXr0j6WB5tQogT4wqSmsXlKdfpk2Knv2N8SQiFBbPYwZbx9/2i\r\nPpUwIwWTi5aXkT1u/OLbx/nQz3gVV6FkT665rTPwKSC/9LVRtai/i8vJRiKE\r\n4n42avmisl/a7N3seQQw6VA+UtMc31cBSltwKQahPJgypKu5PX8yL9v7Uuwy\r\nG68oX/PH7IDBIc9Bu1IcH/X08uBqd4xWjQbv1uJAsYlq7YFyOY1LYwUhM1Ov\r\n7ctgy0REHlDQUPPA+PIqHarlqoVusz6cZu2gMAEq2z99yA8+EnmCAK0750/1\r\n0c9ifgElWKq881+KgxNMGNpkeb9bcVbo+MqOuAdTgO62MvQ3cQdnDEzYU3CE\r\nDZoUYO/rS4uzm/lb/HWLG6p/nttbU7E8zuE=\r\n=Avks\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d250911f2.0_1678735833512_0.032937784828081185","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/theme","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f4a33e5e001100bcb443d0270294d596f7dcb0a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7cd925c12.0.tgz","fileCount":45,"integrity":"sha512-YvBe9eIHg3DxoA6Ps0W9mn/M1ibL7I9NVkjmeNvV3k6fMsQRd7gIGJ50wvaBuANozx6Sr87bsO7dqddOeNt3tA==","signatures":[{"sig":"MEYCIQD31V3+q00Jy5fMVBqDVzuftaqBOvOrjhWQTjgBlYQ/bAIhAL7BA49ARoQ4xhvRT3pG+eRlb6gdFmdHMtxsMz8Qtplp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3uZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1yw//Qe75Ja6tKJ1PhmKdaP6GW+bAwVFGC8irFgSPpBQOND+T2wSk\r\nLgZnqAE7aZOkByt5NSR4pn4LOroj1GiNKqeHehHCFxWNUX0ibzX78P8RgZ1g\r\nAmM5AYT3U9TECvxfCz6eVA+ZeegvXLJwkGRF/ds0inKbGyU6PPR1dzS61vh4\r\n1nGk/a/cfM3n/YNres1MrNrzo1Ow6XAm+mWVNmXR6+M/dSw7LaZOLGhodjoN\r\nYwo2PDP0x5fb4us6+J3YU7OvZK5nZrOYGl7wIhv1+xuvYYyPE7BOGGkO+4e3\r\nuQ0lHOfR4s7MmNWvQPs2imH8HMrCsAfVE8dMOSJzc8nOydEhX6iG+CCgLf1Z\r\nQsDYaUlJU1FtSp/zzkqD3slRTRs/cRz49XH7HReRGI7ACf5lFg2BbY7k/qJb\r\n7gnYVbyIOOMc8OKl/Y9siNL6oxlFZr5ktRZgRL38bW0EMz2Er45KrI6nvht6\r\nLho6VzvR6QJjndy1OGRvVLFOH2q2uvXAWYRfrL6/zT7dHO/9Ddd4BXpNV8Tp\r\nAPDj5k7PjP6iLza+MK3tTIsw1Q3eCPPHbmZRrDW398Gv4dxUcxrS6J44qh0u\r\n30rSH0cQ6IiyTPciB2AmGV9LoGmIp2f1364R5awPk3ICNitvA0QdkVqWvzX1\r\n9ehZQJqJxXnAUo3iINW+xV8PwX//oCFoXiM=\r\n=7jtb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7cd925c12.0_1678736281488_0.1932610361694933","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/theme","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1730e67c6ebd0b6b9d59d338f7ac5efb55bacc6c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b2ddacf73.0.tgz","fileCount":45,"integrity":"sha512-xlgMt6fOMGVXP3qlJpehTMiYulW70VoQJkqZemQwr4yFiLAPvhuj747qT6Yq529dpvhp7H+FgTR2dG3Ps5xCqQ==","signatures":[{"sig":"MEUCIHyrg/vuBxnNEouXmzaqJmiqdDiQT7uarKuAKvRVQQ2HAiEA0JD+BUoN2erUpj02og7DmZewV/Nny3On/2lSl4bz9qY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3yiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp14A//Uk2tNEiCe4I/SxdTFUl41yEXqAU+D1RNExeCaYjhgg5wDfcI\r\nHtyjRwxTZfUg+efQqDUBUl5EwkRK2/nq//d0+jWNFV0mQONBlfQt1l/6f8Y+\r\nU5z7nxwbvKlVn8euFQ6tesCp4MLHyJOiGvrhm0IrjI23FFfzBZqMKd5GZt8I\r\nGXtfiuwqlMmoa95zqU4Ye2dvJuuRCkeeFGoJkdYL5cytOQRltNvcOLceeFRq\r\nuJSfKEW8tZDTap+kusbVMtU78nts9uImLe9YYqebPzSFoVl/wqMChYvXIB5i\r\nCOKpPJ/Bwaat6mLYA+SN2wq/P99eIeLkvTm5hO2ipRieXBOtNCt7xU7ivjTa\r\nWOzNlgmoj18gFZO1ZRTTY3yiq6XYdVd7/+DJDNZbkERISF+thdYJBRHFu2AJ\r\noLvPfU5I81BlonQy+GQMZbE9ArhVcPVWYcU1I/1i6bMqdW/QceqU9FkPP4mA\r\npJxkXhifnNenjjHJBWRM2uyYpFVRnsJiqZJvk4eqc6Sc2CScynnILhPTn3wG\r\nPyNxlujK7a9BHXc5e5R5LYczw57orrPofnoC6olBFhYi/c9PMZLN3CIC/LfT\r\nHsx8ktuE8Sv0EicwpDnkK5A3XC7Avf8hlxd4P2NTMqzB3eEa6PlakCOPVzJj\r\nIwX9ilxd/g30FQ5krRlCt7ic520AWNPhxhA=\r\n=156t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b2ddacf73.0_1678736546350_0.18455327804912458","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/theme","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64310fd82cebb4e0dd1292712e0bcffb99ad880a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.989ae2ecc.0.tgz","fileCount":45,"integrity":"sha512-01jRh1asfBJREG5cckMBN9KyUY/u7vRmEKG7icmnAxCT5y/GutMB/b/VJq43Gs2s+a6EzAxXZt8NnTwwrDhoug==","signatures":[{"sig":"MEUCICf8WIHjf0WWiM0N+0zL8Gz0RLsq0bBklQVeD7q20dXKAiEAqwqUE+MEdixrWRx/I3WCDhuo2TZuH6KzlBMTrs5SZug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD37NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMBA//ZxzKEAG438vYb2BvrPBnPvtfZT4jnsBDpdUORx266mMlBCkl\r\nAtXNoQCBh1qAuUXJBNNfN81zGwqg/0KMKVEfcG8AcUNlneykkusDSuc4o9QY\r\nbcDF6kQLykMksO+a5x7y3F0riXgALn7MYfCy9/jZK7IMl09YmBcoF3eK4VqE\r\n3PEC4G6SBUtxdNnGsvGjM9hQ82I1j5BJOXAm5Swig+wc65Eq6aa29rytlV88\r\nyeY4OanJyr5aMk/Nmk/xIjLW8MhncuBlJpMCup9u/yzXrKWPvGE7Y0QhQLVh\r\nbFwarzASGEtEXYhdgs2hyteMstjAqj+4kWdYdhPStfIAKAR3K9VraQwLKL1A\r\n6eZmQdMrXc27C/MPUyVI9Rz5evdLJVd+uamwj1Ht8k+jziEI0t6rQAv+wlly\r\n1ODci6vtnT496d483bIABKR3Ong5wL+8aepX0uHD6s7ycSdrkSP1kFgFtPmC\r\nTxDZNEw03BcBRS5dZBTN8qIgrE2r9kr6yKF/g7rfTo5sZulIlsvlcRi2rCL3\r\nI+hHMX4m8cGYpthibIpPY8KOfesfZ/53uzg0jdYIYmg3++Ad3EHCUk3ZOaZi\r\nqLmc5gFanGmVCiLgXS4FGL3u1Vmv5DaMu+neI0Rr009ravTJv9cawn7Lz34y\r\nF6+AUFu91GtP1aHDJAdsEieke8GCU6CcvE0=\r\n=9768\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.989ae2ecc.0_1678737101334_0.18902835115250483","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/theme","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.89c66483a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f60ac63bf75bad5d9d7c1b068356a8fa653a365","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.89c66483a.0.tgz","fileCount":45,"integrity":"sha512-vhLQp29x5/cRsRqMxb8pIc/dlPPQRH40o0/bbXvBCqRbZa03H4AVJcQ9DfbvfvfWJlMySR4kA7XaJVW1ydruRg==","signatures":[{"sig":"MEUCIF2fkrKoObDssWzGP5gVZYt+tsMoiaIy4HHhSyYI1GuDAiEA4A+R17BpEAH3SWhKwCvrLmQCeQUkOshCbnSLCdY9PfQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4RhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd2Q/9HlDyBEPRFnn+JvoEeAgpmb0yIO7Pd/sRC0/avQ/TbTD3/+Pe\r\nSKqZffCVVwvdZvsxZYuXYAPZ3XQmFCM3Bqkf4yxpNtDFpUYfU+bbACNoV9db\r\nCeHKo1GFOi34mXPLgAzhHbQs1dRbFcMh9As8MvICtMQ6NdvY6Q0VA7F4YA64\r\nyRQZuYTz9KZwgMDL5o54+8zoc2C27ih1oDu6rcKnroQPsQjmg7hXRn2o9vfc\r\nOhggcMF2uugcEjenNH05MjkiRlinQ8DspNCroIHrxIjB7aPKxA+ZWV/KKpSN\r\nz2t1JsN9ThA22l+zdN4obwXcRh5M30n5osVG+i3Lot3VE8GcHUQulO3sM1jt\r\nvcVL4XBI4u38GV3xOv1qgEW3YVi3biSf+jYRzU9ITZy7LRqwlWIIG7j1xVVG\r\nHtbtgqJEHA501QjALh6S8c+wwQxE5ilv3SOpTLgwxSwU+RWd3vsM+10LNnJJ\r\nM9OQ7SLv5xpQodF6HByihQWsnt0iQic4jCdc15aTQZ2DSdBa8rxdsCznJLcO\r\nwwrXdpqmKNX9PUWO5n7mlf22ddOdC2LYzDN5XvRNOgjjHX84fKM1bNzHRgNh\r\n4Bxc9PSNjfzy8kHYakzKft8GjDZ1YmhdJ51MjTx2Y3e8n/F33n8sJwpgNHrE\r\ngGkgrN5JIRCLY/W8l6fgF2Hbm6JBsnlaDyM=\r\n=B+qW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.89c66483a.0_1678738529129_0.6684191874248879","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/theme","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd7d1cf986d29cd2fe40a61950534f39ff5f9e2a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6a85742c2.0.tgz","fileCount":45,"integrity":"sha512-RGwfUoYeW5U1gqPU3560Nz6VexXSxtok5uFGrzVvxLP5NlyC7KYQXRmVNtUyZEhNkBTN3bMOpuJXIy3M6/Cv5Q==","signatures":[{"sig":"MEUCIAsGnyYF9sadY7TBs+b/4Yz9bWzJbSlj3+foYWDgf72dAiEAv9w8WsZdEcPbZwkW1U/vecqmE4I7yWqCnvmT/5YwzSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+AEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaZBAAhdfS5AaEu2267bOkGiDwuFC1Ln+lwRydrKxbpqf2VfwC4KDq\r\nbU70au8ifSbFAS1dt27+oLK0DbAvgdiT+2q4oouhLITRSYppMtG20CpizwDk\r\nuKfqbOXuPhMsOTcJY+7bl5VmSbCQVFHlBN1pmpXfP10u49PTCcu8332tRZZr\r\nDfZiLjW8WKwHrAPgA0Do2lvFKsW5ua+keKlUtibQu3Y6Fj4oW34M9mJ/iNc3\r\naon1t5uKPE40EYOLfd4lOHllBrgWbugOkQrLqZbhJpVlV6dlLhgnncOE9n7B\r\nI6BByEM0cAwgoxzTaI3AO4X89I9Te8cJWMxFOtEVNf5ExFGOg6RAImuNkMQU\r\nilvWhyq2wQNoc/xfjDdVYhumR25y/quXNi7mivjdZY1S8CFqzGSeJE6Hjqhg\r\n+14My4Z2akT40pi3veJhWfER9EGq7RYkKlamFN1NfRPRKZ5MEH0Emqboe86l\r\nMw6gJfxKgbq2p27RdW0cMkCJgbbjVL4A9JWmzaiyp2gD9VlQBv3UwalFbbnP\r\nOiK7mSFMGvTj+yey9NLgrX4igkrLCsj/4HuTjmJTCm2dZy7nY8AGn2mOn7Vd\r\nC5S7fGrsGwWwzNwsKIGxBbBKrIICHsjdX2pdRyCmu7beTbha9ahg+M/0zRyY\r\n9QFC/HKKc3QpuCFOk3jQtfH+EChIzGD+kNY=\r\n=WyqZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6a85742c2.0_1678761988643_0.4283509823094762","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/theme","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ec894f0e8925c5be6b2c5b6d2f0ac0f44776a0a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":45,"integrity":"sha512-Izs6B1KH43OrpOF3BPlpwx7GFnyqXS1p1hNJvKFz8QxCBucdgYndxRsA5USBTk46VcKgQOhd0eH/dBF+vSsvDA==","signatures":[{"sig":"MEQCIAs/Ibf0FVVsRIDbV+ldbitZThyIL+6JelAhgqwAuhrSAiBMs80y0s6A6G8kcXqi06DlqpuhJK4wlJG48VAcJ89RNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELnVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpp9A//RNSQ7g70iel0VE1v4kkvjgzqS74vxKRZUeUZGxv+lMEerNyI\r\nxV46CWHx8vx747lOqyvkkyLzHlDlQIpZdy1R08VuSR9VTCalFGfdJH/2+OJi\r\nX3sbDIKxN9oMFqd8uNnfv8zBM3PiBBaYlMXcZyAADeZNb0nhtgS+DzQMbcMC\r\nSE96h/GUDtnwD34V9zRo7V+oNUu5h+BedPrUD7vrL6vdCE2oql7xQ8uK/GUS\r\nP/mRDpJlhHZIkCx0q5omwYl/kLnjf+DFu8bRfq7Zi5JWJZ6Pyif9zCyii64L\r\nd3l6Rp6+dbhYe6o5rkdYElrzyQCjNoQOzaIjDAo7GE8kSFxWGvDisDAzMZW1\r\nTMEDu0mxGVV4gXdZM+5nyH2K0pteAGBjEGIJUSVo/MbZUCK4pTt/zWbBQq9E\r\nAwF6c1glyz5H2/8ZQrpnAlloriHAwkPbwXc815v4UH7YiCvvKA2gDNuKOEG5\r\nGtbQdK5wG+BQeZB+Z0MAFpag0eefA7boE62Fd1QCBfZRCZr8E3lcQtNUM+h2\r\nVIc3C0KIVroc8ZDf7lqdIvrJqhTn3V8MQP8hV2Dbn0HgF9TnG/I5FjkrJjFQ\r\n/4ZaOL8jmnz3rQWm/HqwzqFUWK+84rpJUAWW81jvqIv+4qDpbAEeuXT6KaUj\r\nz8IZQdBVVZETckUk8TReX8A77uITVBxtzNo=\r\n=I7OX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.bb6cd78d5.0_1678817748781_0.6832290088728792","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/theme","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd467a2f4d0320f893c86b6d9b84b043ef964318","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.5f94aa37d.0.tgz","fileCount":45,"integrity":"sha512-AmilWJpyLpCjEvdum7OpqLOiVT/g2Nn16e0/WMpPqCnL/hLa+r6+rhwMvNRsNxdGyOwPYtmh6wqyyf68TQpM2g==","signatures":[{"sig":"MEYCIQCB/zt8MmWgi1iJ4xy6A2DtrnF7BM5W006TSDkuHkfWgQIhALC55FJqs9wXb6rXEmz/VJacW9Ao/aqISq3J8Q2t5sFE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELqiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqKw/+IRY/GkUw2LvbKP6AOyqJziZmUBhbcfUsOZGLFiUFXqsvu87j\r\ng8KuLjmBvEGsJ9nJEtUVBNegGpFdbzJZurnEsx4dflf+bfvKpFe7nuAZXjSc\r\n8qURcGMSG3QLHGficS1QBcoeOIVDxDU6suIN4CMU7JpjNeo+JtAMajXKRJLi\r\nvBUFdfpvPnE++ufKp4hnqq9MB5zjAsRkM2l1Xd5eMAI9F0ARbscjflQFAnRZ\r\n6A9ZR+lLLkjAugb5XoydXPZidPkvpHAP1PWI1NU1c32sFGN+7PFkXVtoVUiY\r\ngk+XLB7xPjlZQQPdPRAc4OuuvYkz629TeEWfQm3/xlBxCS0lUo11joKkCxks\r\nvaEs/SkMQfyLdy0M5KxTxfujjgMXiC/GU6PDWkSfsSSZbuqEAVhpw5ApBzMG\r\nzBXtMzP6zHxn7AKqJmvqVUrd5vBrehoxn4IXq8zfkwI/9TcOW6KPbkcG1c+p\r\nckECDH10hi3AjqRHAJl/5mjHURP/2TeTxu0iaCy7qbIoAOzMwsbJdAe8eE62\r\nUbmh1o7dWOgeKTG4eSIYF/XDJOyahDEGMObZIXoKyH4JTKcI0ydeHLZmTaWz\r\nfe5PwcX53fVXx+zcOnuNtzudQLtAMsqCNgGXd6itxGFo0/UaDfxIfr8l6GQ2\r\nxFjB8+9kZAgcnvCm3DlHRCarN6PL89ilVTc=\r\n=nglq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.5f94aa37d.0_1678817954446_0.5182885771429613","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/theme","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.1bd317240.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce621c71226728826389caefaf75ea0e77c7442c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.1bd317240.0.tgz","fileCount":45,"integrity":"sha512-CyUk7IxcGOvNLMkEeqfwrY8GsFIys3qcfx4QAM14YBtAd/lLRGfbxalK1sAh181VDSBH89Y8dg6pMQsBTSFYwA==","signatures":[{"sig":"MEUCIQDCZUZQWf5Nu2dAI9cuoaQ0Hz8KOvJZM6b6uv+RNHPPTAIgNXawovlYgPR5I/yfdQVJ38cJnT5K2OZW9Ola8SwLYbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELuFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiDg/+Or5rrgA8MYmLF9rW3qlCf+YTjMXikOrVGlEu33cEDrtGwltm\r\nWhaW9vnraq/QhdU8zrvNthTSb0vhDFgsv0DcBEDQ5LrsrVs4vF2fawctONmw\r\nS6doXwtjnCKwziPOXrJ823AOs72pKeHgk239Ovkk6jMDLTKB+ZwMVnQJRLkc\r\nmT4QYWhaiCxDo0vmXr5BKlSXJMuFtBSRUO3jL0XijfVBahILMA11VWm5WEZc\r\nf+hdYIdSvzgapL4iDQVyvbhle9dO2OPU3PpbxzwxMlTIuyBLkvlPxoAsUnCn\r\n3a/4LwjeWuELPjBsF8HkZfdg7PkI2DDnBckCJL3AEciviMx0k+NXaWSQt5GB\r\n5zkIB/9zAqXB7IALHqepOL8h9mZ4iPQBQYUNTeZVFYPlShI8VtsxU/apJbV3\r\ndvVpbme5mNlaZvpkvniZNaoY/GIMQId50n7RDyLNQF/rfwHhn5p0XylD+y5/\r\nlOiyWUwThwxLEQmVG6VDSkO0c8DZZI2dI/RWIh2k26M0Yg4w6TLdo1jUzQki\r\nHGtUjftbTW1lCdt6DpxwkNdtAQ+00BUgzSnQJlti1A/oOWwNLd+oKafs7iJG\r\nrYnaZd5dJBogHbwhlWdKgNlpevMIJzhR9U1Nk/n6mjOOz0ws5ec4asNciBcB\r\nwAaTjcmO9WW+KPLOPMqbp713Lqo1GlFNnWc=\r\n=5+Pm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.1bd317240.0_1678818181593_0.7723459702765494","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/theme","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d037b78e6b21d230c450aeda5764c58f1cceb49d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d441d2a2a.0.tgz","fileCount":45,"integrity":"sha512-CFssmjABofT5Ze216Q487U6k+qiaoGXXfFHrd1NDjY6ROXKGaTsE56MXxD4sW2WXn8jvVQIjGGHUfhLwSMaDpg==","signatures":[{"sig":"MEUCIQDVKIqrZMYqLWkDzTBtPeMqKXMEQ3g3UHeDUe61zB642gIgXhPj6dnLAXhM0CbDQsKRZsBcAdj7Z8BvStAg6PdyrVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELwfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmry1hAAkWuMluDw8rpog1UAQZEnjBowC4m8p1FsFaItVpsqh95e4jdl\r\nQcsTbzO7XBZN0GjSArH0/cNWLbIeF3nzEGLDMzfXNwqIYT/MDx/pHLCmMYNy\r\nUWSz7qXFKVT+e0qh/ilJ1dCuW77+lKKmh7YjQwxXLOXdt5lr874t7Rfv5ePr\r\noGEvss9jv+wXOaOyRlq/PuDKKJUOVbIMYXr6FwKHeSBNwUTNvwdnuARhDG/M\r\n4Lix46XokESrr5ajVUGGSkdwbIQmB7q4SZjEPVaW6sa9vwUj/PEJKDMaJ1HY\r\na+kuLjtFy05KLpLaGsNmx6BcC00490B4A/rPVVzPpoUOoGhnCTbq73LggRLB\r\nBtMMr1GpDZNJc3nVg3Mc5gNBFptOCwAMcepym5HoilFImaeX+GNGlGNRlbgK\r\nrVzaLfOXXuyATruhzFBlUG93o8eONBms+SumQgxZ3NwpSP2eg20tYKAuRLqH\r\nY2oNv10AuABykcQnq7ML7+xf/ubjRqpCXzWuG9EqGEk6LsFP76tvJIvDi9JE\r\n7uDD/caZnNOy7RT6YOFh06AUXvSxliVFPIyJ7fX8KxwgRGwTJs3S/2KW/liJ\r\naJEsYpgxDfeEUDBlH5B/BsdiMQ5AOHQ9/a9ZIoRTXosCclB360sGSRP5G4A+\r\nOHA/mCJfrYYO0OzhLXragelBXGNNjJGrm58=\r\n=SmEm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d441d2a2a.0_1678818335568_0.9502011474460854","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/theme","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbfcc502957e04aa7d170337f2a4ce98e23e487e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.fff4066c6.0.tgz","fileCount":45,"integrity":"sha512-iSnX0mfrcKQH++jMlwgCDxf8qaQo1NwWvXxGBXQoO1spH1bAXJfSgXVYu+QZY1gQAuOcOB5zTc0N3bepYp+fwQ==","signatures":[{"sig":"MEUCIQC6teBh9gup8RQKXFBAJo2FGl5/C9J/NZuOq1wxK5vmjwIgIpY3iNDfVxfbWavxTUoH138F8/2Ou7v1OgsdJFwb2bc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELxAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF6Q/7BZ57PRotGZMGlR4QrjVUpxtLekj+DX0deg5kuUbE2MoB0HBU\r\nhe5eoe/IVdR0Xmx7cMJWLMCBe/qtqV26E2XWzB3xTUClMBg4zOf4GraQ9wv5\r\noy66BMaNslPNeExMA1Y7mRYGP9rh9JgdG09DdoU6w90XN3Lp7lZx7LVOoETb\r\n4uAEL1p2eYkFevkayxlipRAilFV1k5hqUFYl1lohnNBpKNG74ISPw5FiCy9N\r\n3THyDOKkuB8GxfEv2PHwntsqPP264OxqDzrb4ka18rtzlwwDgYvVAruqFHEJ\r\nrk8AMmV+FsEzka5R4A+vvb1Y4lX1+E+1Mb5Jauyo9Drar92fy3RwTbBHMVXE\r\nlTvAbAo90GndTOk82TPeSbj07YtyNIvrWCwOancVtUyMXiwlZKWn/fdmRSaj\r\nNu8lolmuzBj1DVtkKvtQdPQOUieGzJxgWloDyKbYOAS6bJtG2FuN2PvVUl7H\r\n48GV9BVJo1nkaqd/HIxOhoUPG9jLdFNu0bjehWNW1n07Vk6MMnDmsZJQheZD\r\n+GOeH/8SHfcFG8qIS+Voj9CK4LoBcSILsRgeMGQhhZyVYFKgw+lzL8wzstnC\r\nA2DsLB5h78hv8ZEMcjqvnZwA/WnEdC8QGKrEJv6H2/Qnt8EstDnDK5oc61Dm\r\nXLcesPZdRAtQA+L7AYqOVVMWgKgn7ICv/X4=\r\n=jLmN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.fff4066c6.0_1678818368460_0.9088094429103386","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/theme","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.87809c710.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbde4fc7d97f97c79435a9e40e07f33bda574899","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.87809c710.0.tgz","fileCount":45,"integrity":"sha512-2mBUMi8SllGMOB17BO54COgjYSaqo04uvxxLZncHng9mG/sL2mSWUveqomQI1r3+yu6ca8m2TuGjQCVo5ls+SQ==","signatures":[{"sig":"MEUCIBAbYrG00/l0USwB32KnO5cTZb/2eDtJ/E7tSiu/O4UAAiEApg6PA4As9LphiYUR04NquLcrxKtrNGGmraodZoyG60U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMAVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmowig//f2+ysmU87ORLOcJ9SJ+w8IA0qc2hXiOVNZw3OvergJ96UDN4\r\nFi8VrWU7CxfkP+G0DshFu7AZgDPFarKJYfy/3goRAqKDj7vUJQZzNt3iHC/1\r\nm6dr8isXqGXHsyXKqNRTh3CZ+kMiJpc5tZ7HzF27YjNK9qYtyBC0ke8cNYmQ\r\n9mJktuk/ZJ+jynWdfyJ2kRBw1owZOo3hfj5WCwjy8P0z44G4fpuFb3orym3h\r\nr82VUFEynxPGH8lXn2YuQabAyFGRpxxQ7sKpt1dx9DN8yEPoIHfXbnvlb+L1\r\nZJwkvGIoUpYT1m+onoemNiv/npDOaTFVXwscXV7/4Ys3miQUap0VsAOCgop0\r\n7obZV+RT7ilX8zO39jFFcE7kKrl8pKIlivsyF0CjH6I6cv2gyZiBeah5sSae\r\nMH8peJYq2E2vMfyrHcAi3Etvrmw8BVPk95aTnwYQh1DkFhh/QGjntSPmSJwR\r\nmW8hk0UXAoMJIbeH6xz208mSHk/mA9AufZeKJN2+tlDcUmJQHl7WWSc0XoDu\r\nj9QaMsn/jCIHOC0H6RtEpyhan1tKG4hB1WR+xcLz03wcODiid+9zX2HXsJPJ\r\nRd0NCwN4w1qwo5g8xVg4WvaFUJAx6jGf2jUaPQVYCqilJI7oGb5lQQ4uwdWp\r\nlJ/2kih5pn6epf0M3JlQZMbN6A+yw4su9+w=\r\n=u7ij\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.87809c710.0_1678819349302_0.003189662553240824","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/theme","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.48d30012d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f26649337bfe8edf5b52355268c445f69d2d3a71","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.48d30012d.0.tgz","fileCount":45,"integrity":"sha512-VSUX56GUKNKwmNBwShKyrl9xR59ED/O7kimH/zXgcckgS1lDog/RdcL0zQxL2YrZqFmxd+x8DGZ3qrifdzeqDQ==","signatures":[{"sig":"MEUCIGehVcq2LPpDgr85W1BqX/x4Kpr3zeG1D/CBAhGGG713AiEAr9GrBupFFywkbVp9Aekrk/gJhd8fJU1uuBtrXFuHCpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMEbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVrg/8Cous/DSBGziLpzrTf8RLYkeWVrpBL3viNORj5/GavDc54ADy\r\nxGYci0cxf5bnEILA7nQTdQm2t5mGh9HlB1pjR6FSvke0D3UwXfGMJLpM2wpa\r\nan4U8+zJFMe+VoscvvA4I8g+x5Hy2zLAkfZhHh87RL+AtsaO5xS+Bz8CxJfc\r\nZ1oI0Z3TS14htJGfOTQ8Uq/FV+7lYVCYCqfEOB4n62lcoY4kIiaHPlveJfF3\r\nTUeafkuQbxLuKevNkof76bISBbG+lBi02nmiop+21rd9GtvGIrt7Uninjg6N\r\n2EDd54godXInIT/ZvBNgvjn+6yNsdOia0c42KrscoFegfLYbVVpEcT7n8WKV\r\nJvf76wOdp0rEl/XIkuEpgVaUQiYFPgAV91gg8AXoijTTgFs8+mf3O6P8uIyz\r\nvKBxAeb0IukIxa5D6f9/eZoa09PqQas2Op1GvW1FhjW8HyufxqMhsy7XyEGS\r\n3gZ2HDoGCKybsaG4IjXpiG+IOFzisslo9sdtofHuEkPeTeuRGdgaOm+srF1l\r\nkfDIcpTpTjM6/UL4z66NFEaDrYSl2TPC1yDtq2uLzTUW5SDTIoc7vpbHM6N7\r\nqjRmcVfMyEJQFyYqIKuIRSRTzzzS8c2u9clQTgVQgfbinrc0jlhDBUiVNI+5\r\now8MKCOh7G9RMJF4HGHZXos/qL7my7pybnc=\r\n=KYyA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.48d30012d.0_1678819610833_0.88671269293495","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/theme","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a96b526a074516e5bfc109a05cd480f585327a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.419b23cc6.0.tgz","fileCount":45,"integrity":"sha512-vzvALOUGKQdMRyWcun2L2CzMo6ZvR5upBGarHg6Velt25C6sZKeJA2YKwKSo59H2JjoQBMJOpMNlB6pskSLf+Q==","signatures":[{"sig":"MEYCIQDsH8wkSWY13t4bPevtVEW5xHez8aKu/sxpGPTZI9g6nQIhAOosBT+y/cVxohnU6nHz5w+FtNjGbDLm3ocHBFX49gET","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMOrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/8Q//SfryoTzUSKaQyHT/U23zqQ0lBNbTOpky1ndiRL7UAKyotn1O\r\nTGTaAr89ZQt6EBGvG+aJy3cR7+U/11JxSWEoj5DJ26lzC8w0AcCdoY93sjKF\r\nye74O/p2qiVKqmigVrhFKmSL7q8ne9BmwhboqrRLeOXpAxXGhexOWyjgv6I6\r\nGNprDOzwQOT4NFkc0fHYJjLVT3Rny+T1zF+zz5G+nJf6+GFPDiRT3lCyIbhj\r\nMWFAoFxzdYONFg3bVXFT5YNjIzQxUG2xbS52BOG+8KC4bOL5A/VzMAFHG+1h\r\nsoikfQ9fJlIMRw44YGKnKndbCCt6bZunir2axf4Xtkn0H7hcpmN5J52moVj4\r\nVTCIEpxPJQEXbNvSO/1FnWSdqv7ojsIckUuz9KLkERRDhGJBWfi6v9rmuzhi\r\nGWDtQIsadktc7ALUqiY32TUJQ4dR7KCC+6qTd55F7/moeCJrqfq7kELFa5QX\r\nMWequeoPAiOHpTTKf+gZ0SysD1TE6KrKYbFG0YJEB7eh+L02xed5RTlb7La4\r\n/6oOeFTBdEDHAUn9ZstK/PU/a9PeUQxYzCCDszbVnkeW9jKj/HemeQMkJEn2\r\nXF1VU0zxUah34lMfNmDmnowlQpepdgmwY1PzM8BH8jru4NILlNOyvNNQZEoi\r\nUrktY5SI4F4Wj/9ERdrB3WEPPKFG8WYsmNo=\r\n=miQF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.419b23cc6.0_1678820266967_0.7535152577946547","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/theme","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fad68cdeaba141518da6d3868996dc233567be4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.bf86521f4.0.tgz","fileCount":45,"integrity":"sha512-SntLycmwBIDKiRNGx1CppCuiukwRBkFSKIG7PxHrG09zvcF9rIhqKPwCkDKWBPuHIM1wC9TiIBBsRze7L6RJBw==","signatures":[{"sig":"MEUCIDtAq5sYnruUWAQswziiiiB9CBveim9w2ApDuzcQYGyeAiEAkZ39C2cc+oxm9dLpEKT3jiex5uv8TApTfTTAv8uVHa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP9eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryFw//ZAO9J++dX4+CPYTEcVThRBXKssmPIy5qbyZ0MDT4TCpPW8+f\r\neiQTpfQIM/Uo8B0XNVuJ7yY263meMzMYIQp8HC5SzEd7QOuOXbSD5KKVnmIB\r\nXluA+zF9SgF8nJc8nfr2cXKjsLTJ+nZyRX6Oq7ZUiRXgRlz/lufxW8QuefGz\r\nmMpL1rAvilTwfLpUGlPCfW1FGl3DrmwpKfRhYpgv9UkmAf4tqObQW9Gxbbd3\r\nn0ceY2RMmdIqenxzsFCYoc9cCrId3lPTxwCrWAL2lVJH+QS/tjrB1v0QZa4N\r\nuaMfs56j7PDQ+3dFGYeeGBwyit8bN4KsUxiFbrsMmWeS7wFA6IGS3vHoUrvV\r\nla2S7O1cbOp/JtyeblahwQtgljeK6ZlyhwTVzLWOJgs76W8Ojxj5me61QXOD\r\nOGuAavb73UK55PcPvyVzctydyDDJv0jiOhVf8P77Fx5dG8zIV34g8hZOKTnL\r\ns/DKYUeCgirg8B9DblfTynaBudg9z8tvbJ3KXQGJSDQqcfDIWBGNcd6mn4CB\r\nYnJRvKpx907SAVZFy+lGcGT0RKux9nKLQjcNPOb/aO/rXSlm4LRYiPUWciSE\r\nhZc1ph0ZqJVQuMzVyZl5Pu+2+Bu8O2rIjn67e3ccnOzWUBjTx6pg3T1iJpqf\r\n5tI8uY1lRycOHPOY4rrkA6v0ZSHEBe9+qp8=\r\n=9xGv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.bf86521f4.0_1678835550380_0.1779134151928874","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/theme","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b5430e94c9a7cf1fe7bf76609ea613e39367e0f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.11f3d280e.0.tgz","fileCount":44,"integrity":"sha512-SDc/pilXp2c99jx3/cO+BWywyFk374Ty6YjSRZDzCgiOelGCboVMm5C08toCyUGVjZQgLfMcH3VZS+l2OSQVFw==","signatures":[{"sig":"MEUCIQCD7kfVDboniSuxpyieY8cKz1Yl8UxXh+2AaCa5Yvb6nQIgElPj7WdvUzV5/IWpInNcRVyvjNR/KfNhgt+dI1RRKNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQztACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrA+A//TXOdfa7vYKW3jVvjRiE/l9Mcm3OiMN34Hxjvym6rYu3ImJXT\r\n4kmAHL3F4SFUSqPWW8v50bUpwNfU3AabPF6q8k0D2fFDq0fhSClNnVfsuMs1\r\n36CuQIQyP1OLGy9bwMV9C5Et84aH3Xh9NdFmmMAR4bptm0sVZpHi3x6FqivD\r\nrKEcRU8ih5YB9zIgFRrfCi1mG1msvT7steqftLMRxlz6WoxExDN0wzNg63MW\r\nRP/ooA4E5AMWX25/j5y5vb73R0U6pq46dKTwLHzhYB1A45vGLoUlZ0kCjdXn\r\nIwwfAuvS92WNfvUeEpQKYsJRce7qm07w/bedd9RUE0DT9ELOnNiYGj6MBNwZ\r\n+AD1piEeRlKI9jgNaPSaApqwW9j93Po0vPAn2uaffRizBZe/P0SgcYs0HVp7\r\np7m+TWgEC11sbeOIVA2StaYmxaMzvBzoWhCyq7V3nJo9LAuR9CCeEB9XZhvq\r\nVMe68/j4QobPzMR4zTYiYSAetOMcCw6s+XwF8w8XZTpBTeqcZbQxInf4csZG\r\nCa4jLGNJ/np8QsrF/Qdh81El30LJYKF/WlklUYBXpcv/aYLRJwNRrxEz3UL8\r\nU6E6DuTBo8UTxrgVpD/VtQ7st3/8jtR61svgFopB6GqXQEl6xDpILTWUaQz7\r\n/zA55Lb78kpPx3e1RXsZ3o2gnasQi14ZQN8=\r\n=pYZg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.11f3d280e.0_1678839021118_0.8571321510161272","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/theme","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b281a409a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b486f62003907e9000ca4e608d66b8f4386a9da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b281a409a.0.tgz","fileCount":44,"integrity":"sha512-YkmnaclOwemyR7XeFPqbT4nLQ+vS4vDTvQ03LfZKJXEzLzcxCOIDecOYRCPqF9Em5H5DLAcmZY+9AIBLQ58+Zw==","signatures":[{"sig":"MEUCIGpaDnUsVn4U0sR6PnnbB3c+ARQQNSAe7EJVPuuwrTvQAiEAjhPH5vvk166DEBnCgxcTguam3ZK7E732Ac2d+OIj8I4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGc/LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuGw/8DSUChpH46aNgMXC6prTWxYfgvXZhnrkJQqNYTBusD36+ywlN\r\na3cG1Pv0ySlQbsAtzW1QxPUvKTXHmb93CykbbmtTvdv+gZ0NNGwiY8XcI1eA\r\nFe1WXI6RI9OHv3TQNfaNa+u8ZGQ9fCJIdTkOQw1xMiEaYZRFFv4WjYeVcXyA\r\nnDfQwAKzloje64x1WBTDHxbu7uoq7yVjhB2pVG0jhmrZMDRQbNsCjwwJM/Dk\r\npnXH5ulAhPaM2FZDFzGjnmOV6dZEhg6AcqeQ9keEMz2Vwf0F+NxBDGDiOY+a\r\nPp1fJ+JHsLXKO7ZpnKIRECL6cXMxrz0H/YO07NzrA2jHRfXrj+c8wfbrVZp6\r\n4BmO4ZXM5qivcBvzTxxtuQq5C7Jal9bjQ422LY6i6c6EsWyp7ALPIYy6/IPQ\r\nD59JuCcjzQDI5znj6cdLitgX62phdH2EdCiX0Ys0p3b8I/M6SyiMGK74PRCG\r\nGsuq466Pr/XaMNbVtLnQFGZulfp+AY9SOel4WT0EP3XaEkMj9cg9BfwBXnTu\r\nFBf6RTfV9A++Ys/JyYJpveCbAxlTGZj/WCWl+0JneZAyF0Lae4DAxQjFHe4C\r\nxFoOugmD30dYYZkkb1hSMLhzAU/E4vZt9uUitRjWRocrhdE76TBWTnN5V9dx\r\nGzaf983sD1MXjFcnQ67Nk0Z33yiWOxkj+C8=\r\n=DPPc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b281a409a.0_1679413195071_0.9591713123278585","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/theme","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.39e473690.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"493cb02dd04233121f6ce25e18582f4ae693f1b8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.39e473690.0.tgz","fileCount":44,"integrity":"sha512-XYtb0LPlfjS2BDG8N/toZu7oYKk/OiRIYxlY/x0A8tWj67aEApY1gfd7FL9wMs9fZlrhokq6FLjMHbByKFt/YA==","signatures":[{"sig":"MEYCIQCDtYwhVqK0g/o1hWIxzWh3MBjfgy6mp/lZSvt0ymytIAIhAOTDSQWZBvPl+xU2vyqZ2pIO85Tt0lkoPxOjNC7PRoZV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe5bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrs+A/8Dgj+xWr6uax67jBv2ZQFF/+U2iWs8GPXa/N5GHOXcJbNQP57\r\n8A5UWary1Sz7hqHDqzfwKX9tAkfFoz2Z22WMIu2xa8aTFysF0YNro9x76u+w\r\nQbEPG4ef8q5l/h6GewCMyYyftM/Ng9WJdKDg2ytmskm0cgkrXHsQR8XrdYIa\r\nm9K3Pvty4jBX4Iwn4vOdR4reFjHbK678LMRVJyf21MKlaMUXvH+WQF5DOTcB\r\nYtiVZ83Ye+bPh3HRtw+E42DZx1srQQEcCPDz2sEaJOs4/VOHbgfPXoKT5rXw\r\noOCuC/3Z7yC9oOn2rDDbmQ9IdOR7HHXMriX0v+PBlOc39qIkhys3o4vZGPEp\r\ngXE3Cl9Gd3YLd/gfsmi/qYRbCT1UgIzcT1dzK3uJyKHcMouFEUWWV/mhkd3S\r\nNNnrpz8+9N6IUvrvx/xjgkvAhlC8OlW28Z6W2ALJv7K39XQbyROIZpWSTD7P\r\nt8zfbnGpfAIF4CpURKTcTLhKgdqvZJHjba7n8C8q/CyIqMAfjNWL25c8D+yk\r\ncymcQ5/bnAzjtbY554lq0rqMczRiUQUYJdg4xbKkdLSh1e+5t32yWQFWs4WS\r\nYweVJCNsRFTYmsbkQiTW3/HyyO/t7b7gYVb15bTUH006HpTLrDCXE6t2nyO4\r\ni25Ctk4jO9I7LZesdJ5D1+Jj0hLDA0ZiT00=\r\n=AJcT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.39e473690.0_1679421019160_0.9343828298873009","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/theme","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaffb8273dd2da1038d9be0282a4414e9a10ce0a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.cedffb44c.0.tgz","fileCount":44,"integrity":"sha512-+Y4y5ZIak+pMnt66PvhEUbL/lI7SPmoSDv4VC1qiSFVBnDiGiPm64TDHathfd9XkshRUjUGhcTuwS2Y3yJk7nQ==","signatures":[{"sig":"MEUCIQDkEAfYkTKuNR4dYr2L79xqR3xd5hZvsu1pUlUlM/Ek2gIgLkLOQOIgZmGPdYyuagQSSr9Z8BWUMruhdV9GbQvBmuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe/+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrirw/+ImiDfne5r8uH2/zq0bC7bnJeoRtwZKbsuotWn5LJvIg3byTP\r\nBAv7uzDpstwpqXmYp+q0st8BIwR4ronqnhXqM00Metd/JZ+0lw1rf9CThfDH\r\nK0heaYcPyozWiAfUB8jUyBB+jgk0xl3EGxKPPMhrUBWpSUy86lBvWHpUdJaM\r\nM8egER/eTv5wyovzSL/569+H1H/AnMq3YNHKcn/lvkuwf/cyDUQgyQ/y+GTX\r\nP6wjOTDN8j8nNoCzvX+O6nV7LH3W/9Cv+UTZ5eYCpLH/3q6RDNj8zf7bNjHS\r\nHvLZTiRpMfJOwMl4eKiMZ+O5YoUOQDLOrth0N0ykcfDPswKydH5EyzYy4M69\r\nBJskCQLAQTiitCgb56N5D/39oEC16F+CtFo9ZeUDAriksX71zblRNmKV/nXO\r\nigsXCFvbp1AqFDBNOSeCheEqrHl5LOtrrpq39uJY+08nLfPA9k9QcpEfv/7Y\r\ndJd8M85RUeJG/59vRnIb90UDu39zLZyornPSP4EBjMFnPB+XSSfvKJI7sXro\r\nf2g2UFhS4fO9vFx6Pk1BnU5adxSAfk30OD3tGZpqQMMO9zfwdiM4PDbgjnsq\r\nP0dMtlECBQ4nv3O9xdcAzzuXs3WeuEcKafguz2OwWpvNn/XIxOVf4f1kUaUS\r\nCtXfPbzXNHCjyBz32YHu34e+Cv2suhzc95M=\r\n=CtFq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.cedffb44c.0_1679421438306_0.29058929251141286","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/theme","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d170dbeabda296a958a724568b8489afc80da31e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.36a4cba99.0.tgz","fileCount":44,"integrity":"sha512-vSspbj+Meiw6XpAI1eECcTv3t3jSLJyHC6vdfJm5HBy+czNydicw4qxlTPZqo9RfeAX7ief7TyimB0uim2uArg==","signatures":[{"sig":"MEUCIQDKOgx8SwM5SNe5J7R14Un56+BBlemwTT9oX596Ha0wTgIgQopLyNHjNfs02zPy/Ls1xLr5hmNF349J8UkW8KHZDYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyiSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiZQ//ZcapFyVARE7826XIWWIC1uuyMqpgh0kdrRJ8VkQxNZPKYlzZ\r\nAyjuxLK0UAi2gy60YDvJf3E97E6AFiQEAmkqg8ywWv7cNkxBbj21DkUTu6K6\r\nN1N1zXNaZOZE/2tGs8ilb/eYMQ4bHs3q5HNVRIUyFTCFvp22HVRN+myiyxG8\r\nwUCSObPLz5nzmf3P2bi+A9juHODfA5J6nYX8ax3LjfmSy2kxNbTpMSVHW/jl\r\niqkAcGHY+i6o1K2poIfL+EJmAmq7XWMbGEBRPuibQaLDgUQXXGd2st2YfTZS\r\nB3pcqHAnOwClYITsjgiAp0lA72oR7RqHs0w1+ri2/iJOWsi+R+c4q9O3Aht7\r\n3hPul2c6rampSF5fM6rz/kjmiqXy7Ch1Urya04DZ0VgNYa+hMgfdzZDiNMKz\r\nHVwlypfzTEbK99AhjBiGjyp3PareGcFIVBDI+xCuHog7TNN6hVZ6kL8BkwV5\r\neZ58ufsZhk2XXoU6RbrCEkRxmu60wGZpxV/BRS2Ltgqwk6HkX92qvM2/UsVB\r\nhbCaaC5tNv4mPnF27hrMagSP3PjVxh9/HZGAOCB6s3txtbqSlpcJod2BBvEu\r\nxvFwVvb7bYVBbXcw+TYszPj2fOnPaOiYpJ4OFrFwRFX1LyMHZigM+GXZ/EXZ\r\nHRrqce4izEFeb/UHVTtxYrxmbDZ+z3zfHhM=\r\n=ZgLp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.36a4cba99.0_1680025745959_0.9180681697366975","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/theme","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6587cf5652a6f2371399dcf2306fd9a0294d674e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ed7e82ded.0.tgz","fileCount":44,"integrity":"sha512-WhVwkiznwImDquQpONinzidJokbykn5CQjIP9hzwVKjJDfM/DBQqu9MNmsoIBNEK4HkGu+aMtrb5WJgKyqFRMw==","signatures":[{"sig":"MEUCIQCM79t4brztyqpaaM/M5G4/vieADWQRlz6GQZAoHOD0ngIgENP6NZioi2vN6HuZWJ2McUngt+Bn+IESTq3VEFL8erA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI08hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1vA//YxN1xhbGseup3GRYzeWENvmjAKWQpIAOfEKP6fZ3EZfJDVAC\r\nJyrdGHK1U6FM4NXKhtT2DnjGRR9UFYuUT4VmYxQe7dCbrr92wy01d3WjE3oD\r\nj7jqu/UWk5drNkNxHiFL6NXhEFvatGTwm0x50QSSQYEl2enx4Vixussu/IUc\r\n6O4jTXVdbXVRVN4FTut4q4iB7Plwa+FmLe5wNZR9OM/9v/tr49906kpFvCpN\r\nnwlE3bDi0pC/p1u/OBhZQ/+zOaulkUQnMui3gF6RmquGzbgocbGNcfPJuHew\r\nl24Dyra/cU4YRs2JXaJzd0O9tjzVHusms9npSBscDi39UHiwreOHEN5OA2SY\r\nLlx+3miq7QoS8DZa1L7QUqSTLXB1v3/I5WuSNmlqQai/1HVCulR0kRdtJZ3w\r\nSR218W3kNEaNOLpX0HgEufmT6agz+n7jUqcBIko0DT48jX1I8PmVnacRCfgo\r\ndqSLzWBYqN1MIA2vVTfN82MhInV8OOo6IKaUfG3cTGuKshRZA5utQJDaKewn\r\nlhE/k3GpXW1NBIf85yvSut3qEQY842mdOAVk1caGtPUzdJQ4U6vJXSG6+X0d\r\ntYeV7rnVIxbfPMd3f2JJclfUOZs36L7cAEdfmnKj3czPwo+wCW1AdLaHfxYn\r\nAr1zqhah71YiXrpp/PMW+SyjAgHEbSXFgEQ=\r\n=7lyw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ed7e82ded.0_1680035616830_0.5197454430164412","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/theme","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fe0809977319a7109add186fdb0ca43aa65b29d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.55093ee1e.0.tgz","fileCount":44,"integrity":"sha512-/AkTh8wSZSVpbQxAYTHM3CurLhelhlV3MoZhZiD93kP6XzZWdCZMyKYjMJo8e5QbQWUWu3w2cRABF+FaXaCufw==","signatures":[{"sig":"MEQCICgWcL4vjZCbK6OptDyg3MuM1zvJkkNqlV6P7wl/HjwfAiBijaKhamq+Yf0wfzoOEn2KtyP2VZnhLUDtFe/nZvfwvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIdoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrmlw/+LBGV/fMZQy3oInq2fMnjSygY1BFNDOKaHxncWxQd66m3wl1J\r\nJjhmp/R6zcCGQyTbIHFFgLVQZzM1ARlWZjrkWWAJOV33zDKSAbB+p+4kq+Ih\r\nb9uw7yApKPD+D4TSj6Eyg3UN7Q+BtBHOLOdRE903H7GjNpm/UwwDUbRFnay2\r\nMZtRs57xchxOio9OA9Qw6PzZihcSqeLLWsTJ8dR8AIUeriXm6F8camVoV6nl\r\nQCIiZDKU31y5DzW1w/PJb8hTe4M9hFL62+ZJBfpZ8o3Dvpmczct3zfpydMCi\r\nAMCQvLGoz5eTMiUm3DXu/D7zNIt+mod8ds7A/A8PSDzBRzV3OENptP0HxB/8\r\n92681PwfVuGc+n63m5oU4Qx8jpWvB6ShXP13kbbr1r/37JgF6lJQACZcKvBr\r\nVVzGAitn1UNBZiT2bitPbRhAq7rcpDQALQpWYxqegULI6G7C9Op72fiPj7Lk\r\n/ItO5SoW0b8Pzs4gu7TlK5P9bv8SAL0zes/7Ap/ExYcOd3UpYQZwspdX/sIK\r\n7+g1D9rCmtsRTdKK17jdFNQ07lfVPtS2TyGfU2QOoM82a6ta/S5EtK0vZhsX\r\n6Z2sEpjYrP1pCi1O2qoJFIFgFkMFPumW15AAeC9jUzTKU2jbW226iuM2LWbd\r\nWsYEQe8fbTC6uCG4UDFmZIM2LUJ6bBSnKHc=\r\n=u5bE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.55093ee1e.0_1680115560118_0.6177268653038794","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/theme","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42c1fd971ea6f831219bacfa1da73a48add1da47","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.0c53abc81.0.tgz","fileCount":44,"integrity":"sha512-UxnPHc2lCHOFKkJLieiFYGgPkmRFBikwokPPPkwQVEz4uKgKPLZglPbIUixWLrCyp9Tb+rSC9UnWFHd+hasUhg==","signatures":[{"sig":"MEUCIQD4n+XpoWJH3iDDleQa9HffGc2PeBBWLGddhgI1ST2UtgIgQo2+U6C3FGZOXiOSTUp5zalLofYI6m+7pdQ5lHNdzpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3R/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOmhAAkaudLt5qFTpxt7tZvvQHmtY2qbsVOgidqttXvZkk/HpqDisd\r\nHNO90aq9GJhBC/v/QOBcO/dCMNAfGqGjtyTsHkKyM6OnipY8ksgYeD4Fvee3\r\nHx9/Actu5Q/nuLfZwfb3xIXug/rX1CAN/ydssJrMSSFeZ7TIB5YilH+0npcY\r\n445rSpnLkJTSwKepyFqjQRpr3bUMZBoknDDjrvs2gTB55TPVpTkSEpsSkrOE\r\n9FbY0ratQZD5UJomK9+oQLTx9qTNcDUfUL8cGVtaFz5y23rLbnWu3Dswi9g8\r\nEY9JY8RHNZudg3rOlz85dx7bEhX0uJBt4rIjGsagpmtc7u4hvCFvGsbXBr1B\r\nrqmRDZGlyuzIYjFXLWlkkvQEKp8BljkYnBciB5G2KuuFUR9GCU6qYK3r5iZN\r\nYbmeeU4PeqP2E4c+o5VOfiGnYHyj/Kvioz6ZVONbxGpPKK8+y/VD2/Y5HNMt\r\nEK4uVG7SFmywxeY93VeW7VIlW/PmytNPNDQTfUPuVxvdge41Saw1sCDp7vO0\r\nXcSjQBHnqA5Qn0g/ICZJpQ0punSnfUQA3YvvQAPpiJWVh2j2xk/jLUKP+Gkz\r\nfMOCfTdFDUqLJFGHlO9I9US280+hFj+uVXGPe7W79vQ4WOx4m62Da8fU3qma\r\nh6L2F+uKhHTFCRlcGPvs91fyYL4+wSDRz4g=\r\n=qlre\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.0c53abc81.0_1680831615034_0.7761418211476181","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/theme","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.51311e69e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c289052691e7eef8c66744d565686074db9a539","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.51311e69e.0.tgz","fileCount":44,"integrity":"sha512-ERwf5rTIk3djY4FjK1QkVC/POqF/OVqytGlwlwNeqjTTMV4TvuWRJWh/Bfuu4T1ypHj9Y8lZyzBjIITSDG2emg==","signatures":[{"sig":"MEQCIAUmYlIXp9FmOFHOrebnyiIPMKOHCyJbxVNuRdG1SZ+oAiAcCQtcfkk6KeKAQuVOXmGoefvdPTQnyXvbzSAGpq4CSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFu/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoovg/+P0ivFOz2nLZGerJoCk9+zMxBlH6PTBboq0VYcgW+6Dw/uTNf\r\nwHKTaxwLQkGKEel9vsZAvdWfAVON4fsTvLq5if5ji0DarsUBmgmxHb1gmxdZ\r\na0e8lZzDuLtWlqq90NFpy2PdOvbRxmo8cO/wxp+5+RHKR28nEVGSHweoz+uS\r\n0zCjYwMpPnXuFIWGQTOb8CHOnI6+onftI5PSS4Fld3m3GEGeVOQR1x/xnCZz\r\n/wjquBoDKx8ooUztFQwLIil61ylmPHIA3dMeY2V+2QA62CGlWTzhVD1I38Uf\r\nozlHIPvK/QSetkdISMFG3dkQ+70t9L5W6RyQevEU4dXx6BxdiXEOvJmCcdR7\r\nLI6GptDIZY2Lz741c9xKfcNJ5DJNzajf3hzBYVB5xOnyt0HY9Z9KILOsZjNa\r\nw+zjlnYl6jheID99bM+VqDjUrmqIiCiNOY94DAp9dKz/nU5eSoi6ep6ls9bE\r\njZ/8tpyiFSHKV8QX87GUzWf1JvbWs1qU2iWV4SDaRMFfpHwv65AcGwQUi+Hh\r\nt4XuTB1fCsMUPnJ3EsOQSBSi4Gi5AsWrlp4ecjps7XHKvezxr9GWIBTvPhCE\r\nTGnHVMbK1iFXOYAozrTa7AnL55mv9l6KfOlg5DUXXgdSbEtBntoIyh4FtjlC\r\nE5rDoBBGG8VFpM/ficnKrc4XwArgEcWlE7Q=\r\n=Bv3Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.51311e69e.0_1680890815063_0.13142960933539594","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/theme","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a795f5f56392b11604257a2e1e910f33187f34e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.113b1a38e.0.tgz","fileCount":44,"integrity":"sha512-ZEqJk58JeRgiFDH+oD9wnrQt1XiZp4tn0+B6iZUhpvAPB033dcNmQYbgOzHQ+8AQq36yPVV+RwCj2UlO3IIWHg==","signatures":[{"sig":"MEUCIQDIa0jRpexVLTxMMbslGUYdZt3UPWn2eAbOGKHa+yb0KQIgPXTLQn2whU8XeMo69ZW3iyyqkiuN02Di1hWhpXuV9Hc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIUyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBJBAAmHvhH1QORc8FkqdP31ykcG9IbW03MVsG0GWDWjADmB9bXtwR\r\nXAlu+IvD8iK8x4FfQwQlPiOUpEBWzkbbP+OPUpuQvR0Yp+pNflj9aXpqVCed\r\n9EwIy+9zFIfU3ckFpgjkfr3bWr9ls3cP6oB7vWBtHtOeSHJwJoi293XZsNsw\r\ne/2uZeobh5XwaBZMmFtObDhOn22yKBBb5792zRV88Ry7C//8BdUBXCiR/0SM\r\nTeGN7ZB3RDK7s4mikc1ygmDXwocLIwrW3o7T0FuhA0CFqIvYQSJkTtfg1hP/\r\n4i77zmkvi9c8KtZNddFlw1PgcWc0lGIzaUAltZiszIPxQEtyWL5SGwGwmmWh\r\nPqP1YILGI0zSRzYhEaacxJkOkcbHXJGiDDJHaCZD4ITcC52hxG9HmWI5aALs\r\n05mqQo5vVpajHLzLei+9qiYCRT6ODr+8JrIqpbmvgVS91K7cG2/h61lbnJSS\r\niCCe5s9bBdfA0qQ9qx2rZ59A1iBfM6UHW+M/Sp6Zwbom4wB9OIMXnBTXI8qv\r\nIcaa6aQqcVDUAfGdoOtMCXOJW1fLOTozN++qor6P/EppoZ3O/UqFE24lxbNO\r\noQmomYzfA8zC0AAzsq0c4RthYmkslbh0n/0vwbPiLHodIhb8KKLpFtDRpl3A\r\ncFATyd+k2Xbzs8cYzD/719XQ6CLo6O4rg6I=\r\n=a8kQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.113b1a38e.0_1681163570205_0.5717170344810076","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/theme","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ea2191426.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94e1e9ea8e1737865a766d965c834f42bff9c2f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ea2191426.0.tgz","fileCount":44,"integrity":"sha512-7c9tq2TvdCco7fBOR4RYHL7y6oZWpqrqPpgj2YMwF+KzLX6vie3WC5FcRFmdcR/iRRsC5Ul0mJi2mzk2XY7nEA==","signatures":[{"sig":"MEYCIQDpw+0R4RhG6fsMRexem2IEvohw3mRt+4CE5lthAu634wIhAIAlZdAj8mb3p4j+OeZ88UwvF6EIaQU1ysHwBwJ0SVYr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdciACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5VQ/+Po7YLv0kHACWmGGYhL4K9oC8t+DNPyg2NEYG/x6Ho2tuSXPU\r\nu9hYYg4nSY3WSuw3eviJzrPiAmYM5iZReJ9oJsdOz88deMYioxw/WvzCanmK\r\nFL0ncjbitOde7J4AbB8Hbvf05RaMHje8NQEypmpEm56V2w0R7s3euO2q8mTE\r\nMEzasXAGTpYnmwrRo0EH6CbgVeNk7ocV6XYfFPeBJ7rkgvh/UHlhyS5QAS1E\r\nYVwwjQYcne3uUePVkgeyU8ydqFTGEbo1qB//ZPZYaFz7gtEH3M8XvYxDq45V\r\nd/0LWIEmwXnDKGkKkh28Qi770OfJYmL58yg6RGyQLQ0NLwJ8Zg9gIqhAT1AR\r\nse7TG2L/OzXSfsHzudjiSAv6m6E+IYZaWbt3kbRfqv8P02BNPxh3mR9QEYH3\r\nYC/r7T9a4NetjdRm8CL7WYCBpW7Bv51DGsE37+XPxFpx1gDmjfumQm/Tx6sv\r\nlLnSmDIKn9R5ywX+/SLDhHErWR/JaOmKe7J3pPyaFDuLPGb0SIYQjcOUK+ia\r\n4oc/fDMbGi0wXtwWqhPhifKZmqbY1Uf//lCAiEgwtPWIzq8SVzujh+W/rCPG\r\nlcx7QmKB4k2xcw8B0QL+3Y6F1hpR0b6zqslDrPLMDKU2if1NiqPj924ysQ7z\r\nD7VpMHdk6k8iGUlWrE1zv+GtesRUkH8LV7M=\r\n=LgE7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ea2191426.0_1681250082225_0.9219516048418659","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/theme","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d512f4c79be92ee9d4fd7d9fc20f3cdb80629fd9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.5a5c38538.0.tgz","fileCount":44,"integrity":"sha512-8UcWVfq+JlS9VliUKqA79vlSsiJUKEQNAJ1YgpWHc/LP8vphvXYsgRjg9W91VkPN0YOCi8EqgiZI51rG569vCw==","signatures":[{"sig":"MEYCIQCj1S0+N6fKf4KLFePycBMZjLrFNBNUA6uWEJR8b2atxAIhALw0/9R2Ce73dyrGpzwfsJ4mVqy8gUOkA8QHjeHRjqv+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd9FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTvA/+KJEwm9XClO9xelymGXU1Kwp3h4Huv0dc6yWptxOJlq/sLjg+\r\njmJ9WmkEI9w9Bf+sSfTu2d4UpFf0JjK5WeQMsI9bmXGb77yNTWaePfF/NtCR\r\nuSjta1eNK+7C5pEyjGNM6D11NqQjSu1IXGGVWCwrMWq0U0piq10DAEAD5AtB\r\n2OtB45GLpJFFMtj4KNpj4SGuWB9gKgVuXeiNyCMt9mRN3Y6r7Sdm9KieTCbI\r\nQBv0okLD3a+xXu0VW+zNIqnw8yHxtO/TnSlXeDf8J76gO5o2/yhmbZZlSvh7\r\nDX8Uz72C4VQzpP7MU7p8Ug0BgxmZv5ENYfrUrERYWugikZaf2cbGWcOnF+EZ\r\nyf+9cqghIk93WvFXKCZS+FMd/lbNplEq8vh97fJkCu8kNaD6fR9NXDxLnHm4\r\nrWnjgXl6GLmTp8jdNAhlVC67sFqsVhhRnhy/To4xYmnYr91YoB6SLyga0ILV\r\nRJKwJ7S3Yw7CG3cPbqQRhVg80AmLRJ39qdjPNGB+8DSFjhTYJen0sH+kc2aR\r\nU3Sg1YBHpA/VpXltnuRhQmXfs4id7cG8Fqpjwt1q2zIWmiK6GxN8gqXaGK41\r\nWJ9VZTxfB7PpGHOFIusiw+rau9zytQ6c79IGna26sPB519lDN9YRPMIcFKsJ\r\nB6a9ZUlIGrhnNY7SznGT+KhHFpPTuRtO8s4=\r\n=tSYf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.5a5c38538.0_1681252165124_0.8224410345733799","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/theme","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe8d1ee0551beceb4486bff765f90d3c2249dda6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":44,"integrity":"sha512-noVYhnXFcHG7Qkv30SzJLbfWm8QkJNwFK3vfThrnHc1eWB0bL4VKhFTkKuXTIHARyK48j4kJOCL/AEn12VW2dA==","signatures":[{"sig":"MEUCIGQUjyU2IfG20FrhwG3/sCat6gK5tH49MVQBZEhkMZN5AiEA8SmN6xiMmLD2kECeyV02UpRmgLaMqesdhffHYW0oLyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNecsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq19A//V+IkFIf7ePk7LjY7BwLCMWnyl0FFo7dFzWdIR3TuwdrtVhFq\r\nog+rnI98oN8m5HykhuVbN728cwKHiOQMTHDkjXUpz8xCt1Tx0gbQHYB69osT\r\nCM4IlQeraXnh/FIeDNvM8ZcNCXfC70ShXzguPQ+HDMVYMtc5arQGW4ZbUks7\r\njp86Xk224b4A6bYatru/5k2PE41JVTpKG4WnImWe8UWKMVfju5iIczI0hftW\r\nY4tYz0WNIJHW0wHUCpmy422h9e48vmUkXcxH01s6VGoGOn9ejzCSirl0giNB\r\ngXNtvBWyPB5r2hOfevAM8fiWl1qwAQAo3DK1frptH5NoHlRKiCPWQZnDMGF7\r\nVa5yIX/nUYRhh9/P9IzgPpAnfF8O/gv3n9kRrYwSOsJhl9jfUz5/R7RPwGzY\r\nIf+3sIQdJRiyNSx3j27Etoii2CjjklzDruIOlD+dVFzMo/BLaD9gk7okjtfq\r\nBolzjPNXV1bowfatwY3OAd4gM4YT9sH8VSa6uD2+XhsyJ1x/qc5O8+LKjVlX\r\nQrKNmmJ7RJr52BECt6Z+EH1939FFOIis8iX3zJeTW9ga2epP1Lk1QPBrNDBv\r\nUrav6x2xrCkXIp8YE+FkbdU+r6ax7MDvxj34/eoHY9yjHz6HJ5NIU3oHmFZh\r\n6+LLnol8Wb24mDJktRNRkbJ/V007w5OYLo0=\r\n=Le82\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.e4b5ea7eb.0_1681254188092_0.39256885163606414","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/theme","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"589aa491df6c1beffe4908b680bbf09dd5e10926","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a094dd9c1.0.tgz","fileCount":44,"integrity":"sha512-zFy5hRmDeK97wVN6nrLh/qjZzG/KAv7mj93tzsbveqGa1cZwDqO3Krs+kyDpzrInEfWgdHnvfSNIbWq+M5cNTA==","signatures":[{"sig":"MEQCIAF4OFPZozyRpRew/jTiIWBFg9+Z+1V9vnDrfhuRyo5OAiAJncLuzOzKKE/louqLRicB6seo0TrphZcxxK1SKnrbYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdaZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1eQ//ZCl6hlJvj8WcD0YA8XMwj/ntbs/d25IAhZCQlh59O0Y87ogV\r\nFJKGnzwdNzP6sAbP8VVfAw+rgDG6WOAjBYHyXMKusAys8rcmKfrM1k1aQ3gu\r\nN7kKqXINSdlKEuPzn4Ga+OE/vNdeuivpoYOEyEs5wk/t3K4pLs7WL9dDfWTm\r\nmgXVtCNCBryM44iYD21DJvjVyGAbqoo7DOsYrvks26SeN/wHTmGeyv3VGxRP\r\nsPYimf8fKkijPW+JvqFtbRPtVrBiwK9yECeqyinurEes2FslkUXyqwIAOGLy\r\nnlYI8Xq5QfHeK4siDZEVKAqslTffiY4wnaDvcmLDJSrWluCyktW8hQRkVc9K\r\n4+lG8DRfZcxiS6DYqgTX3V6RANKqEJ7/82bvFHX7bvDC912GNEM5W9Fiyks+\r\nvL48XbTpn/yMg4BFaqxO8BRP/J9c474jhnSL04kv6EeDRjm6t/RMrpdNO49d\r\n7vRwBtHJA4cJDL3+ikXPplHbiK8ZQR3ctUdQhjaXYKYJK5BmBqWgQbeEliVG\r\nykMWHgW60+WVTTc26UcxVAC9wDR0KLlOYBJB8DtslIRdGIShmNAhoygnZXy+\r\n6d4CWPgoSIp3Evh7aAmjxreScCVrVneyM8pZXnUZfPUXVnyjNTh5P6kVVS1I\r\nugQm5NRLXKwFGh4NUpMGOcQ5wuchozGh7Jo=\r\n=7HPE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a094dd9c1.0_1681512089687_0.001626811586181942","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/theme","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.f771b091c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16da05eb23f06c8cf45ddf552309c76426d7b8d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.f771b091c.0.tgz","fileCount":44,"integrity":"sha512-vySyzGCy12O3vOFT1QG+HYnAX3uuBen6okViYPojLt78pw80eKkPj75Q3+tzepE8C6Vx/VtyNmwvjohnfrAFJA==","signatures":[{"sig":"MEUCIF2tlslgeT/GoUqsoNCGW2l0ALWtaC8vE6gW73AfzkBIAiEA1Srw0wUNG5hQdYW/66yCQudq4UU4yA4y3IlwflwKyzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWeaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqByA/+MhsmjzIZmXcEqwik/0AdrEIUAYg606Q4ty6l+E91GjCSFz7n\r\nNjYq4Fu0q20BiggewHaetZoubsInjEGWiI/pGUwp4S4TOs5+mttOMfuWyelx\r\nyTVt1C+frSIuQUKlf77n9TuhGy9uQY28koFpLYuiBWZ/tKeKTj3YYIyR7+Hl\r\nEXAsqQNhnizO3xRsg1jFt4KyMcslgH7nO8ubIRTVg2DF2gibrWzFmzRg1SOv\r\nmyS+cb/NXAayDlgc8reiMh9H67CfwExmLlVSWNMGDl8LWNMbCGNR0NBWvXeN\r\n6/pARnUQj8ULqe5iROK5lO1BRSjFsEErSyblMz1bLWfTkof0y9+ptOlB3//T\r\n06hLkNwEh6HqD49jn+tRQ2HZzH1WJzAmgXNXDsTyxlViir0hcf8e0aKYOHzX\r\nHlgwvGI4r5IlKV8rB2OLvESxB8g4eGNIm26cO+mvc9rgHIWQ3yvSOOhhcyxh\r\nfhCex5DwqKq/n8OLcHtnwsqEw9Y2PHmaqjmdLEBaFQAxiJ3GOXvoM/Vw3cTp\r\ndKOaPl0kF4HsCRsVFY/2Ezm/MSAtbLHaRLVtLi7QwnBy8Aw1XYjJy6gXzbul\r\nAAI8mBp4ViHAD9073z9Mjvmv9PszS0zzpx/nRVlca9uipx+dF9CsEJvPTPsL\r\njVIFxjVWAW9H5qv/iEfdhPsvTr7cR2AZ/40=\r\n=A+iy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.f771b091c.0_1681745818128_0.45536974709082423","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/theme","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a5217d4e206a19144e400fa61b8662f417a298d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.79b1b612b.0.tgz","fileCount":44,"integrity":"sha512-R+FhD4tr1bex1vVcgRxP3FbKpiFHI99JH3+k8plo8c7SAoOeFdKmevQQCyVuAn0KnHbRmh/EdG2mfqE6MourIA==","signatures":[{"sig":"MEYCIQDeFv/vjsEAnmw5xSvSREghKvsWHaqVdN2OKCXIqlsMswIhAPsooNJ+16kAMJAMUweBnMakYIeYqP5YcSO9oYkdS+re","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHuVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQDQ/+NBJ4Ul4yupOMKe7toUAv+wQp2YqRHhj9a3qIhnT3kqSuNRhX\r\nqRcobzVg86P/w+/vNXBKdeBBFcKQsQXAAUXLaNUj+06o1r4bdIOAy+vJcmYv\r\nZFOlgNDvP97AxbH+7jvaPwIfID6SURvMaMXravSKV3tihi4gIRBt6dXI0OWw\r\nEfme/32Yh/mM55FalaI1cOnb0omu2NDO6jIF5AIN17Yt1mimB0ot1PNXvhzc\r\nXxgdPwdy8yyUKQZ+6KdtRhlNXB7p2FmIEx2kJy8xmlHElzNKj9kD0s+S2/ps\r\nNUt4xASQQH1meYy2CDjLcQXqxUaeqNYe34oIoQxcqlg3Cpv4aPlvUwEKepQP\r\nPqj094OnHDp3e918eu4mieS8EgPhM08Bvoo3GRzvQNUL8/tz1HaIOrSJhSA+\r\nkM3Co00ua00HCUUEoTX6ZLiOCVqfREwEO3ZmNb5KSEKQ2Y9Z7QA/xCJMfnCx\r\naBfBSJwjNk0s5WmSONGL5XXPbL+bBc/dcZK3p3fKpOV+DycDvD9TW/EZhexw\r\nj+j663S8WsUOsMZWhM4Up5t6aeQc4LPJ4K5x8AXg4xkvErF6uDyfBbdvHJJ6\r\n2EcVA+xiwUaBXJVyRcPExkrD87rWgzg7uzZhhn7XAjzKsvFi1DZXZqAxbbnL\r\nios1Yq6WSJ5a6CZ4RcztIcJqgEFv4v3aW9Q=\r\n=Pek0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.79b1b612b.0_1681947541242_0.47229833229463747","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/theme","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65f4109e25d7e9b2d8b07fca9b26e86f4134c349","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6f50071e5.0.tgz","fileCount":44,"integrity":"sha512-uTvfN03uxga0GeNoT4mT8isA6d7RsnJey6kfElnpbJ/GzDHRYvcPZcIUafpnpZVV5FHa3KrzmzOWATBEJKq/vw==","signatures":[{"sig":"MEQCIEU4j6AmVWlD5t3sT3b1iT/lMXNz7Oz6wgnZLIPGW2C9AiBDT99ycLOPT7v9JANGBPiX5phtmV5g/DGxcIr41BUavQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX2cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpbxAAoW0YBVxeXXQnT8pg9ocPWkWpndnBSVSC2Zt4k+nGDA3S8adD\r\nMVwYlfyjv3Q6nK+WB5rDV1vbqpV1ect/DXxPqnBrujZNgailam4Lziu3r7c/\r\n1L0zsPHMZwmtg2Zh2bjCz+iKy2r293rDqlR6pE+sC+M1nbtOZqd1Yt8+rFkc\r\nPW2hdfiVmHnNDgKqPlDVfGsG53S0e2YW+CyqwqVDVk1/IF1ygwK92Aj0J+pD\r\nnknrvSkSKQAzAZ1pDmHKO9PPhQ64yYXM2sIhGVwiQyGXPq+10Dgg4pf5rZN5\r\nwuu7rK/zbqAsQXdfFrGIohaieULskxgwWMVnnvVR8+5DxNegTIcRpJqoMa16\r\n4seauD+mrHoa2XGWxZSKnpO+ZERsLDAolo6YReezwuLoD3O2JSyr4S6ppiVs\r\nb7Z/dfEeBNatPQKfKfT4tCcHtG8idxAofC+fH2hpY9IUXhLpgbO+cEArUxFZ\r\nEPum2jHgV/rpY99QY5G/jRPDKV2ezsVFXW2M7YmbtmcoV6cBQpeihwU7KSfJ\r\n1ZEj8VmLxVyhrcTghzVeWQ/0W0n6+AqybH/APfFI31cGTEnkpSB/lHdTSeHc\r\n+9USua7gqewcQ8jJDNu+MXQp/KypwE8Y68PU+vMFUDMYcCpm6TG+ZlrOXcIc\r\nxwHVjaPNohytzRE+/uGXUg5rct5+lQJHcJ4=\r\n=UEuU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6f50071e5.0_1682013596079_0.5295919805209259","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/theme","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ef754381c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2384ab34beb6774a6e390b22b92f7d7660b84746","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ef754381c.0.tgz","fileCount":44,"integrity":"sha512-MCV8e7W4xr4w+vJHy0Yayb7PQMF1yg2VmZJPDWGnWSQ6csZu0L+js31KBdhrGSPtmy41Mh1JdJz0YPY018rkyg==","signatures":[{"sig":"MEUCIDtfxTsf579siSsPaaiESJVKkmFOD+9l+N34+2yWW8TaAiEArsoe7nQGMZit7r9Y+JGOv2A17qa8MsFlavynCFrFwxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRut3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOAA/8Cul6sGyRmS4n2wyIFXnBygFQ0GPsDB24/2mwibCLNhpIBvDd\r\n/TpAdAlvF1hKfIddoC81p/L0EBUYhS6fjFd2wJjiGUmC1SGSdzwFFAStwRd9\r\nitOfcwn9DZIrgcvk9Si+I+MiFs16E58ixfINCZkcUn+oDOQU1GfLtQkXQ6HV\r\nm8TG0hYj64NqA+9MhJ03yyHUQtlKNL/LuoWstOjqKih3+EVndzf5WlI/1+Dd\r\nYXrDIL0YdgdG1KSHyO0YkjTA9uVrwE3GdLdr/6lQWoi0P+VGMecMNNAmU8Ev\r\nYqzHpqEpafXJ358qVVsnsK13S38tOgC2tUn7CM48JfQdEKGvErBcYv3+ERDm\r\nvB3PKhROnFCfbmQEcDcQwEMQyKCxuYnwXXf/VuRpcswSAdhHnzXg8rArY4Qi\r\nZgVrnmXbBPb6Qba2r1J2GGsn68Fz4J5MIcCxK2NUY25iHI5Kgkmkf+LQJ0q8\r\nRChcs3JWrtO9Ev2vUEsbsqkfZDY99+MEGaISv0GUbdnXXVoc+klnV9TOG4xS\r\nyI7pTtLdeywbNygPutuA5LAUF/DUm1wV8xQGOvEtSyB+znbyOfWng1vmLnXo\r\nLR0RZ43S5ombJ73eJwa1McpUmdZs9btsDkANMo/FBejAhfvY+ZfK7O273iWA\r\nQHrN/kImjKIwa7cSkk9fg+9cVCmUPxk5Ixo=\r\n=yRfv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ef754381c.0_1682369398961_0.4731705757599107","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/theme","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be9274f6b4d86995791cbb6b960b1447428314d3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.69ebf61ea.0.tgz","fileCount":44,"integrity":"sha512-d+w7Hia/hQXzI17y1HCcta0z5IjCoiB0dIR2GyQNSJDb4ZJGAXei0VhCOuGnJg30Mjs5n6wMRR0gD0La7Du/jg==","signatures":[{"sig":"MEUCIQDtIb44ECxK2mdyKqhMz0G34xQWx1C8gkoQglSIZBC48gIgfmHYxLHKFG3YBqOyuU8cJbUCRywr4BfUPfSzOPltnyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq7JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpaeg/+MOniZSmWvHYd7Y2zuhHUNnD8gc7y1c5odgvW58TXOXGxz/QV\r\nEc47EUhVKba/9HIp9uW0sx+R/rVJjDUpdfGxqebMBYhZ8Lxc7IDuHqckc8rc\r\nFOKvaMzMdRcr88Us9KHUI089GcBk90PfUtK3U3ITiuAMWb8+1DCC8RI8gEpg\r\ntgGeXMzVi+6pxMPpfySEtfcrtS80KfvVTQGyzLoqS56/py8etXboagorSvAW\r\nNNPneP+ITrk5pgcmrPb8wYLii5/EFKscFBLVjWBYZgOv19k/4YpRQevzBI5G\r\nnLEvT6ABRWo9A86UHetCEkTBA6PQElukSQ2l3jCtG79EYNtYwTk5SAuzLswv\r\nYCTdCkXO6wBbxNkECV3FWADAB3+4Crq1EQ/jIcfSHhG0TkNCRlDcbaOjEpW1\r\ndDSrpY9aPC72dkkMqc176YC2tpkj8TU/PM+BZCUqboTIZCykvLjan6OxLZ41\r\nzk8/IJycV8sH9jK/yRIBkd+MlRxPVgjre43l2cgMhNdWp9HxwPBMu3cHjZpk\r\n+r0hqt5UHXTkLY+8RDywnxue5GgJ6D0ivr2sQRuCau9+iEgsDGwRFlX3jE6v\r\nXjrWleXAPVO11yEwe27evQopjOdX9aPD5AoEnKtcrpEtdwYU/p8tuAD51+/v\r\n1YQXrunMbhy39MFMTPC9gFwROgCVBzTI/LY=\r\n=3zr4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.69ebf61ea.0_1682616009208_0.3753862395632954","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/theme","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b90be86de.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9439e9cd39c6b7e3d7bf7a982834bdae0192cea9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b90be86de.0.tgz","fileCount":44,"integrity":"sha512-QtcvrNn8fM81a27uCju55umcOrmPl4vnf1j9VC7q/zkn1HogB9ir5sRUrc+DEJThN0dIv8AyIAgO7ac7XVOQjQ==","signatures":[{"sig":"MEYCIQDqZKlztOtZb2dJANfz6Ku75RN3dzn56yJu1THUPOOorQIhALEmkqI4fM02znpbGUR0bDDjMC1sSg8l3rS9WjabVnnd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGLYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGug/7BFodmHsS6Qeh3paCl1d+LJEw6F8TrBVj36HFW64ar177HXI5\r\nZNBXlHn4VW+QdQ+mfWmbqbPPqEejNT6Zxz+yJMrAmcXOMqeVBydFjDiMuWSM\r\nymLgSZTKNHl4wDOS3sACmoivbD/UPUtxzYptx7b651d2PjHZsFk5AKVMcLrO\r\nAQ3oB2Lt5ZUnxEJn1uVpO3Goc4QA1SIPrF6PwUA8OuAfdfq9VgeO4FfRGRun\r\ndeHOkZ8U3crkx1D95EDWxCFpXz/5OfD8oxIfZycjXBL4Gs9QKCqBXpTOddK/\r\nGDDQ1rpciTehYFBz25l1i9cPIjMRwlaG+Ac0QmUFB5OOZYBOdn8r5VLSyPF+\r\n3lZ3AlOV2rqIjDjiTnDt5tn4pjCsdNMao+78lt3SgmDpsM5DH+Rz3AuEkNmM\r\nzT7Uv//M5HD9HpKt6+9v48gE365GLz7+VF+GXwkm++LFf2JJJD2nsXBzfQGB\r\nGMViYsCPcFfywSEb21Z4bLb/Ck32kBAZ0FL+Ndwq+Sg86VNGwuSzHKXSfFLl\r\njtgMTDt8eBrvfdylPTlFf5DEzLCMFguxoqydW6rUCpy90thDfuDb2xtDE6Mj\r\nSdlOaVEjs+iGAxD/ibTZRldhqX7cBm4ASsD6GVAf1fidyadgX/6GvDwNfhnV\r\nOoM8m7U2TZKJvZnO9FFBFiUATcrIPx9ay6w=\r\n=ZgCq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b90be86de.0_1682727640390_0.22009834144650542","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/theme","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37fdac4e46307f21ac8994a933c1096878c56f5a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.51f9c0c28.0.tgz","fileCount":44,"integrity":"sha512-E9W/SM3YAsz4qfYuNZby9bq4TvrgPEjsDitj842FmlTmHXZIoQqizvnX6mtzGq+aPmlSF+nDG+uSJTg37kVQWA==","signatures":[{"sig":"MEUCIBdkfqztZQhMzvqjUgZS3+Af/rJ8vYzIPzCDy9vYDTPHAiEA3WQV9H4yrEPdwCWAtoKFMh8kZl7b32BeU+s6YUkRRaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGUjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMiQ//e7knPAmnl+j8FZP+VQvw1VCHW1r7jFNoQkaCTl6+ok8uCLpM\r\npYyRnlXLBKbKXf8YkJNvJ3I31Jw6Zl5mHEH83vKwJTS04heOxhjcJpcU8b6g\r\nlkO/LiRpWZE9xj5SfpOI8NjOd8XTSqcuEs4ysKId6OHRoUfjO3/2TgSpcW+5\r\nA+30WT5rgLyrnztK5AVB33dQqIJNbnb4m0HQTjLV8fKjhRIk18QHJDzex2Ac\r\nf+NLVv9pv8A+OTTsKfrIfv9NFow2B8hU454/Y8f47UVenmel1Sjsg+RYUniq\r\nb55KP57Y+VsBAbhIzS4RskCwSrpyQ4nuHP5EWJUlsmbpbNTan1DliEy9SNk0\r\n2VeGvw2UNyKN1tBYXd0jlYu69zQmtRTzcfAbyPnhDl1iN8utm2L5P/wIrojL\r\nQXGthBkDgTAWedRkUMPWwgq5GqP7TPBEHd1ziv/pnuaAKobzorN/65D9SCTk\r\nadQYAaM70SKTTEsd0+vxU18LRWfLfDP1+k39GSv8YxvApNZZje5+EyTtqkNj\r\njCh7Gp3AW96em8iv3cvYvQEVSKJ9S7FvG2+IDf4F0Y8mTCuijkcGxKZTCZZS\r\nnFctP0TyLq/wlRchcuj0gMYAQjFZLMDbmGzqb4g4hrdTWaackS8cmPNeVftF\r\n9QrOkuLDifjvgpQajEhdOamzw2ZU2KYMM50=\r\n=rDbP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.51f9c0c28.0_1682728226812_0.09163601061067972","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/theme","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.4e840d685.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"594b12cd0cdd75d7d9fcdce656fd676eb9ea9339","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.4e840d685.0.tgz","fileCount":44,"integrity":"sha512-yH6CQtP5lPTR63JiASRlAJ+Q1TEEFncSk6iX3dWcGM3eq7a9VJB/KoMfO1UeyEYuZfSTzHaQbhYLCy83FwMkKQ==","signatures":[{"sig":"MEQCIEd61wPAF1KyOmOjKxSWik7KH1hZP9H1wwose/7muRULAiBr1+LHPxq+m33LgwzGWqhuMWnfT2R4yDRtKjgCtD10tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.4e840d685.0_1683041546686_0.6532819960303204","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/theme","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff209cdbbdf732843e3b1cd55a8d826691e156e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.10b8563e4.0.tgz","fileCount":44,"integrity":"sha512-A13xM4eDoPGisOs6Kd2nkS01OzmDklEz2Ug95GApq+fke2MrhYs1J5sSHJz2um0TYnELQs5Bb87rvR8Nr6r+Sw==","signatures":[{"sig":"MEYCIQDosi8Ies7yDFCM6x83lj3YsK2LSvKLOLT+klV5/qDTpwIhAInGkZcvpgLoOLh3XzQ/ncw9YgAuF1nSgLVPltImvP97","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ+JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpkmw/9E8aS2JyeAawsdRfbi4RNhAYkpS4qKUkV4JI4XFx9bevSPmIy\r\ntHwtT8jpuKNC4Cr3H4ITkl2L/Qc4DIWzQE2XH9XBX+DqXcah4QYoav6fK80y\r\n8qEec/kfmUX9QQZjkCnmkSs6GWbyYWwAH4r5F7ViAQ1e6aOjnyNrc8fPoaQb\r\nT2dLbeE2hEpcaCFRrDn6ht9Lk5PDB/ASYn3VpxTSzrgtnzSAcP7VxqH4W+Pv\r\n2hNYSxzrmrbOknu+lYy8e8JztPXJj49J9eFFEXVDnHPF6mmo/Fsny5JcRjBy\r\nTE+vE3XmRw/42DJNcHwTb5vleijPctfe0Qag0Ygbte7fcBY/xG2DwVVIV9lt\r\nAZJ1bUUUO7iMqqBvZxI/g1/MzTGJaOh6XuqTI/fghujVFAKB0it9DS2xKb2+\r\nZsn0HC5+NtfweX7hIGESwyQ7RcTE5p+aG2g/2/QGNQH+hg8k8xgafu8iZQcl\r\nmERNH80XrmvIt7dOxLX/jQVJLGinar4/Pzoo6xX2FU9ErTiuDIhOXtzLVQyI\r\n4i5LRxPhkDRQL3XRLnPAZflZPu4WRt8sUCfcdKkrjYY+kD2PV/+0tSxmYvoL\r\nAqtnJ/wCvesmsyHH7ZCqiBL+zAcyFyiwk1zjKQK5mzS8vUgibhFwH1sEmwph\r\nzQYL18cpQlnq/ULnZcT0zcR/Brpqf+laF7k=\r\n=VUHI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.10b8563e4.0_1683070856812_0.260626158411966","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/theme","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dde43218b8a76fff4d5843b1f00833be09299fa3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.736b7fda4.0.tgz","fileCount":44,"integrity":"sha512-mfQt2KWNEmlzHHOkUEpDVDpHCwEuxn85uNnCLCEeYwAPWmaDbRfwDdq0c6htXcABIEZvlWJWXRr9KYx6tCq3gg==","signatures":[{"sig":"MEQCIALXYPtrAA3h5S7p4pVKl717+NRFilpN2ykQj+HepKuWAiBLlfzENjfQuTIqCypreUEligereyBKgFvEcLO/5B7qfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnjoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZMg//UWG2kKWKYyzdldz76fVTYurS0lHPc7xV2C1wYdS4nCC9zwdn\r\nEBRImB3ovhpGkEbzpV3zprU6SNn0t+1sPOLAohZf/dRtNmur+VsXsWtXSo3J\r\neKMMJgddvupm+qDIdfSSUEgzBNZDamoxR7eEeDxCVCuv4XPL6E+xTXzST7il\r\niuOqpj/3aj4PzDZcv1mRZsghLSO+AqRFJybGWW/0tokLMpijUzzKZukqtAFO\r\nWJVbUhdayuxMMjefQ3/IEq5ypDPVul4+hGZl4k/bBkBa7SC7SwuDmqTJxU+h\r\nITEn7AGwKiDAO1jsv4lXzgN9d5jOR4WFdCW78rBtlok58ityRcF/A07gQFDs\r\n2S020DhfC4N3rbNEqOF5UvCCO4POWcmH+FtikHJeK5acRXOVxfpn+aeWJLj0\r\njpKWaKtRu0Jm5dXBU+vDGpsaiXQcD+QoboWLF1H3xIQkE7SdVHdwv1JxgOwR\r\nBeWPhOcIPVu/LdPm4W+TjFESIq8FPFJplfRJk3VVrE6z34bgD9lT2tTNjMN4\r\nCqkF/Jwhzd+JTkyNbIvU3tqD9oZbLlj49RzhQDi0kSMUKAWU79ZWj9a3f+yn\r\nW/CK3mWJkBD0lfvOGX/NyP0xQNO7knWO3CpNXHFTrH7SE+VrrKdBFEjiMOR+\r\nX/PWtIMhbrvumrpofc9lUJFXihuWKvQzzt0=\r\n=XXVn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.736b7fda4.0_1683126504259_0.09420476760424079","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/theme","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49cde444a4cd122674bb20bf6e00c93ea797a249","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.0e533c5a1.0.tgz","fileCount":44,"integrity":"sha512-qFl8vJEHbzY5io9+Qa4rpKgkrzZH0TxHCyDP4C+NrI3GZKGaxXuftFziFq0E09sc04rfjtKeqXqS/TaK9pJ3+Q==","signatures":[{"sig":"MEUCIQDarQ8mRr4s4AD9LiVdE5fd6VyuMnhvLQmoWgRRX4DUVgIgOtm3oxkRMM+RWX9XwEL04MgnM0THd33bQFXoovNZeBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.0e533c5a1.0_1683305714857_0.20476200725900462","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/theme","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fe88d9069a76f77dcdb0c99ec12ac9a8533346c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.5f01c15a2.0.tgz","fileCount":44,"integrity":"sha512-mWuvycvfgj1EufZ/nyqRuNzSc+pmioQ9uJaWthnglf5OYSNtQ7U7RcmkU/wcNoF1Ik5V+TXd2bmJozKtlHhRtw==","signatures":[{"sig":"MEQCIF8n9gfBXm64ZDDztZf86hqLsD+AsnmgRJz+N318WQaYAiBXoYkNE/h/WOeWRG+okpWSNndoyUQJx9JCTbfrIkpOLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.5f01c15a2.0_1683307520757_0.907477343903005","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/theme","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78a46a20659feafced26e0a4c326f4464e1a777d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.3b5b55e31.0.tgz","fileCount":44,"integrity":"sha512-0v0gtYG7i3JaleFbkP2SOzzD1x4y4IOcbgJanZzi9SkWf/gsVXwbxLID1eUSFIj3+jjqRBl1h2REQ5JL1FEmPg==","signatures":[{"sig":"MEQCIGr0fe6hdNxvLJq8CjwGtBSwDRUmdjYRePjkaP7me+rhAiA5/mNMIAHTzBWjdZBERK7hFSyREMjMDrM1aKZUVak0sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.3b5b55e31.0_1683311875329_0.7762924760222312","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/theme","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d0788120f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"215aa7011a5c885df3254d984e539d428da96127","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d0788120f.0.tgz","fileCount":44,"integrity":"sha512-Rj7Xtt+in1x59atb64SzD84XiEgHsdnPUXALt8jHGwAklPf3VMItBgLps2Xiczz1RI9dISkJR1lw3e4nA7u59w==","signatures":[{"sig":"MEQCIAuTFgRZkdFrKydfhHDg7r+TrPi0TKYEeLsfBvmHDp/tAiAve1+IPnRvDG0cZjUpk5xQK2cDvcx6Xkte0pk3/eFnGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d0788120f.0_1683620524722_0.9921534646614656","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/theme","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1662298fe1a6d73724fd6a3023ffc92d555b537","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.f52358dd0.0.tgz","fileCount":44,"integrity":"sha512-SXaoARsuDMFaRgczp+UImgJQ8ZIQOQo3le0cGHmUUOz+MC6j75uV0wIV2emC0/DafU/5PIobxbxmXhOb6FXDqA==","signatures":[{"sig":"MEUCIC/sN4rn9SfAnPyHpYl2HM7tGh2c7LP+E1hlpk2MY5WCAiEAu/NTnjyGOJbP/VRerhUR/cZ6lrnboXGsI/pkFOsPHs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.f52358dd0.0_1683901762613_0.010654196574038766","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/theme","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03936193264b727af2746c3048e370021ba24797","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":44,"integrity":"sha512-DYQ25gZjUoi31coFMvOjpkxMzydZL0tljk2D72cfPD5VioIm8yuQ52077eYbPHhCTvRUsqwIImC8CJwynDJIeA==","signatures":[{"sig":"MEUCIBv3LLNPXDa9AGu4+ASSA9xRfQMRwhW3g7E3UdrRSB+dAiEA9Q/bs7pJd30KImllPpebcWvdRACdh3Hds18l/M6Iylc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d3c3fbaa3.0_1683914364610_0.14527351280003198","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/theme","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cfdfd3e47b38d923e2e3c5bc3719dad2beaa359","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.576d3d2c8.0.tgz","fileCount":44,"integrity":"sha512-wD3N8+2uqyRc9K1q3Q5YvTKgbecSFQuJGQeQFsHKNsshuqm0lQgserWs5ECHJ4NKihAceR4y+9K6tFlutnd2UQ==","signatures":[{"sig":"MEQCICRMGM9vQ7m22pASjIc7sU/7DK3fIDVzFnfyxHXsW532AiACbttkgNB20ou8ctrBc+YFTVGjD2uEkmW/TOCWldTbWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.576d3d2c8.0_1684202342461_0.5188286792055337","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/theme","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd6b01b1625416ccaecde200f4004f5e63884904","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.19bb36a46.0.tgz","fileCount":44,"integrity":"sha512-6WwIkmrR6/p/eec1SiOlvxIoPiSwQbeSXizQkwBMwgYKrYt7+QkE0ug37r036a7L070KJa7M3U2z8PiG+wS5Kw==","signatures":[{"sig":"MEUCIHBSNJRHTTMmlwMtEry/2/tizygjpQkPaZ/WBzscaq1SAiEA3++v3T7mTBQpmxeKQd6u0+BCtArhBBmyPf9/Q6RINd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.19bb36a46.0_1684266782938_0.21644466152743358","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/theme","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d2fe2bb636d61be2e81715c1300aab742c1c8fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":44,"integrity":"sha512-SKfc8M4mobEhUL3iPpHTJ/anJlxP6JO6On9sn9LQHGedixUhbZ3znByOylXlAq8+Ofd4rwULiEsY/QWaOmS2uA==","signatures":[{"sig":"MEUCIBSdhfDN1YhnMtttN8Aivk3xIY/ciyFjZKpod/xbVOa0AiEAzLXDsA6rUO44ehY3ueD0RhdAUB841jxwV+GFiVv+67Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.aa5ac7fe5.0_1684776265020_0.2539356255273868","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/theme","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"008128fee1c31929fc7723fb27a89e5fbc5cce24","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.90291f2e2.0.tgz","fileCount":44,"integrity":"sha512-rDSZ0bPoJothI8nRPQWB4Cyu7DTmc8qIuvFm3OOD4uI/2n+yIFqktS6X+6YF82LeKt4uMTZE+Ce/l51bb8UJGA==","signatures":[{"sig":"MEYCIQCb4zxbkP9kPb31oS4t1O6ljx2f77ZF2XTKj8fRZBi3HQIhAP/yj6uGl3aWiH8u7l4d27IjPV9ythHwHsKtcX/hJt+T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.90291f2e2.0_1684863699947_0.8689797947901508","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/theme","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.446734f27.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bcf08c8d158cd0ef5728ee858d087eae9bf9617","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.446734f27.0.tgz","fileCount":44,"integrity":"sha512-mQypMBaR4+ihEivnsXwEbxKnmWrzzutOiWeQ5/eOpBEyqItEN1t2nhy18CcDD4y/otwbCgE8UBZgl1k1nMzmTg==","signatures":[{"sig":"MEUCIQCKAHbzT7jqKuIf6lMiI5bj4ROdP1oOTgmpPDNhc4mSGgIgaZbf8VYAK5VTkLJTEafgkv73hOO8ntfh/p6zbJe/ci4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.446734f27.0_1685483231758_0.4225325450526074","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/theme","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.19de312d8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6f6456b37f8124458482fcdc1f10b01ef79e36d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.19de312d8.0.tgz","fileCount":44,"integrity":"sha512-6WPxlNH8zlozMzOQiqnKevLynnsY9vdzRx17jAwg/oQL1+AanRCemXTKajW5bQNRz4iAk4F32+w+0OjCaXDCbQ==","signatures":[{"sig":"MEQCIE6EVIpu3UcaBC+K0PmyUa/iMeBA9num20iqw8TlTuRXAiBFKwbPbxwOlnAKKZe80snZuQB7s240TvdCMtAUEgj1rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.19de312d8.0_1686071823074_0.15612991598839954","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/theme","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6081d829b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8852712ab34f3e81fb63305be4d63e82359f5de2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6081d829b.0.tgz","fileCount":44,"integrity":"sha512-8H+0xePZ5FTOUR7uZ+4DqaRTcv5nyZ5Zy6vd+cFfeWhyidyaQxTSILN8kcUGRm7/ZkGxMfMyrEISQ2ytRqpycw==","signatures":[{"sig":"MEQCIEaiUII2ndihGIEKIgduMtbxOdgMj+a9lNh9/p+s88H+AiBuv5j48dqyZgQixjPr9QTfi1aKroYEwxc3sIu5qY/LAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248464},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6081d829b.0_1686100383011_0.5073366175340766","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/theme","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3449da7a374c1f096691562cc66b6f0cd967a52","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b26c34a68.0.tgz","fileCount":44,"integrity":"sha512-TRk1e6qNdWY2h3S+D5pSypuCP18QhHeRY0GWFhrHBDaUoasrIFD+fv07Qltd6w9+OjdFRhgG9C0Z3DgWgQv4zA==","signatures":[{"sig":"MEQCIHxQp8FiKERe4ivf2xwTqiNifpZMpQz+X4oCtnDhXonuAiAeJTa8EqBLt60MzuPVyZwATn4dFWYFYDpr5c96qR6L5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248335},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b26c34a68.0_1686168965943_0.3787825719179754","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/theme","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.4fe911371.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86403ed15d540cb5f923e54d614a6d95e67c9f15","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.4fe911371.0.tgz","fileCount":44,"integrity":"sha512-YEys59ixvAmoyHNnEb2pmZMJPKLwWaCoEJNyEjBJdBgGWHm461QdEhNUF+GaMzT1bHQOLckBgUleYSHpD+lywQ==","signatures":[{"sig":"MEQCIA1BFGXboCtWRajGyzBi15c8vAzLEun+j5XTlmHnHCoMAiAIGokxFAkdNSGUe16tsvmnm/I4kof//oq8HUgI/yawgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":246563},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.4fe911371.0_1686179091842_0.8799361533386394","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/theme","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21d880ac1946d022513e565f223fbba066e663f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a9ff9866f.0.tgz","fileCount":44,"integrity":"sha512-uoPsAFf7UvPY0dsuFXH9TglOLryYjtgvws7oPvewS9Duml1Haz2bYW1i66uEydXlfR8lFsUc8fHoew3TWLlDIA==","signatures":[{"sig":"MEQCIFWClejXwYqca7KIGZG02tjwXTkNaHBeIIz0vBxILInOAiBS9kPSa2u0QQuUNlWf/Qrdoe3pG4/pa6REF36sc++JVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":246563},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a9ff9866f.0_1686656235431_0.061330488240869396","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/theme","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b994146f6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85ac9a1336c8849f0c9ca1d5218f969ae58f8738","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b994146f6.0.tgz","fileCount":44,"integrity":"sha512-5tsZ92dAeUcZ9g9CrIkqX/GYc0M5DIfsydtI1PAidaBzr1Uokuh4rTZVQZBv7gyglF0yDua59lkb0I6wI9vxXg==","signatures":[{"sig":"MEQCIFxNgceaRe/1iMY0Hem8Zuy1LKoqHafnp5wgZNFQm9kKAiBUW7tT3/T6Y6kgetyUXyDFwEOhnTbPloIMAeF5ZLzFvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":246563},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b994146f6.0_1686776551043_0.9335670323194643","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/theme","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2c15f5f7ecd7780b54a4d6d1c169770ca04d4d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":44,"integrity":"sha512-sfPOR1NjYspsiUF/DJMFFg6AQKOrGsZe6C6Ph0jMaMJEbQ1hpfZ1I8ZthcKiScFHfY37YTtNnJfYFqsJ7mGScQ==","signatures":[{"sig":"MEQCIE0h0doopENVpd8p/5ftBj3fNP+Zq4QinzR6SgUFPZSQAiBmMq9o5lJrkym2KGEfHnot/r2sTqpD+tn+qMK85Y3s9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":246563},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.1fb4b1a06.0_1687892159723_0.3263372561540707","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/theme","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79712194649e61590cf95a49c014e8124f98c5b9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c64a2776e.0.tgz","fileCount":44,"integrity":"sha512-C+jlQM0sVRfPTuXVyOL7Xrj8BA/XdRh5AOzksErGAQBNOjWGMJ5/IlyWNMZNK3YLyr3h5g1Z2KkMYwatJIjOyA==","signatures":[{"sig":"MEYCIQCKx2Vi7X+0otn6ve/YfnQpHIm9NQhPvO55hGgULJ7RbwIhAKqIsYhA6jRAusnnftB2yDzAyc3eBnayhwcPWLRIFRMk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":246563},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c64a2776e.0_1687896925547_0.8011626163157084","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/theme","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9d652fad6c841d33f5dedc6f5aed355d914223d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":44,"integrity":"sha512-JolVJZM8Bvi5FkMRErQsMFDksjWsFFT5ffOR8gYD0hMW2uYXhl/ZP95lPwH3TZv4Zoi+x/nk8bRVcNhUaAT+JQ==","signatures":[{"sig":"MEUCIARzzpXQduJsoGOiEI93VHDUhJ9iinG+hr6ivlaVPjnmAiEA+CFq9W1yfVh5hwA4L1EBiGYzMPCs5cd+faic2YO/4LM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":246563},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.b05d9eb7c.0_1688055760212_0.23728311316669348","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/theme","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d99701135c91125d3b8ce1a1ef6a44f9e1a4c6e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.2a9697dc5.0.tgz","fileCount":45,"integrity":"sha512-d72FUOwHhcX8H6Gvvw596vUKKnQ32DLSx3aWjwNwp9P+hH/LUYSNn2tv8F8mMlA/skkdx0pkbioQ7LwKx12UZQ==","signatures":[{"sig":"MEUCICG9iwpnDXy39y1M1P35CL7fXpPWI9etdZTJIhKncwDVAiEAhFdkypNlkw3mOZy2XllDBNgLtxeUAVFGpRbGFFT/pv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247193},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.2a9697dc5.0_1688163176095_0.4247267308170959","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/theme","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"394fd7beaa42a11ef0c296ae41dc7dab9bd971f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.0c52adeab.0.tgz","fileCount":45,"integrity":"sha512-0zUlRiZDywi7Q4YTUKYmUFPBTpg4D+RhxGGc6fuZvIKvYK09DDPYy5jwzIYPzq8ApvdXW9LJnJNseJOVAfLhKw==","signatures":[{"sig":"MEUCIQDzjmbzInyUWVjCBtQoMB0Lsz9k9KBL7Td5oH1KtcqiLQIgY4MUBY7s+0OcjoFzp06a8mrAN7tjAHyUcqJ6Y5kaGPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247193},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.0c52adeab.0_1688574279702_0.4992089408590632","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/theme","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.83355c322.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35779130b9ca823737d95c46b47d92462f67b1e1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.83355c322.0.tgz","fileCount":45,"integrity":"sha512-Doskj4MtWczHRGzJscXD18WR4vPJ3clfZSlV/AhtE6pxnlyGjZd2pNSw/2fR1Ys06XwbQGMb47exylpumB/tzw==","signatures":[{"sig":"MEUCIFNd/V4tOKDTcoVo69kbrS14CCo1+GoqyNnd4wqlH1t+AiEA8OPG10+6CJOIrs7ta5Ts2MLMXdFAL7k3WcEGnjgkXC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247193},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.83355c322.0_1689001446189_0.4471297517900674","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/theme","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32e8571f6b323cafb3f2f6104c06e40f2d7f37e3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":45,"integrity":"sha512-CpUwXGE0dbhxQ45Hu9r9wbJtO/MAlv5ER4tBHA9tp/K+SU+lDgurBE2touFMg5INmdfVNtdumxb0nPPLaNQcUg==","signatures":[{"sig":"MEUCID6GQPe4PXfwgcnIhWySPWPYLAIYZB6KSsRc8kPlzKd8AiEAkSTM+s8Dw6rGR4wd6DjmRnuuRQPeb2WgHOFhkDdGFTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247193},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.bc9ae6c9c.0_1691097528460_0.5266451902641565","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/theme","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fbd163d5461cc57d5e574ed20fda307c24423fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.3c44cd956.0.tgz","fileCount":45,"integrity":"sha512-i3poiBMFJXpnBmeRgjLG5cCbMZX2Nx30L36+bUxXgnyhu6pcCy4tECaaEGYt9PZh0VuwpQ+JG51YLGSvP6nDKw==","signatures":[{"sig":"MEUCIQD+IHdCxkg81sNARVhXVJswOyBSK+bFa4cxYK1y9HNE6QIgMN8eaLZCrlY2Y0H3XlojwCDStsI0s0Ww3nXxeJxU/Mo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247193},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.3c44cd956.0_1691430363644_0.7439161928126545","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/theme","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.02702296e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34a4398432919fc79bb685b9061c295fe7365390","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.02702296e.0.tgz","fileCount":45,"integrity":"sha512-onFY6tZTMF3coYsjchekGmIb7J2KZYWhnWHzZUo+oIIp28NGNqGxF4+gqLeCrsREhuNsJzz2Uk2DgAOsUYdKbQ==","signatures":[{"sig":"MEQCIF4g175PQO/EEKRW41YBBtzDG7WBXK++Gp6zzIP84ox2AiAD6yZIh83tL3jlv7k8wgP5vdkWoTj8EnH1qxFcuyqekw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247193},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.02702296e.0_1692965029709_0.8340655443779454","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/theme","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.872b65832.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b687bbdabca429e854b0bd447a1a489d0b1bc48","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.872b65832.0.tgz","fileCount":45,"integrity":"sha512-b5jf8E2mj8E36GA+IRpmMVnN2+PPI3okYwzMvLQHjLLWFYyFkK0YXu9GDlMJSG6dC/9l9GWkR+1ckt8n9xmkBg==","signatures":[{"sig":"MEUCIQDhcJqiS6oUSrQK/G/WfbJkUAmrZxRNe1GBejaeIbTeYgIgLmV/dir8DbE9duWvsezB84GFDNHlXzjIYFjMDGbA95Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.872b65832.0_1693397508546_0.05192093468243386","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/theme","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb0d46f7882c53985ebbace7b722980b0089f37f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.89b2e4122.0.tgz","fileCount":45,"integrity":"sha512-d0YI9tC4w5o/HayyevzU8r9lU0qvKzGISOEDHuPHvyyeVfL9hAbkXZzjGftIWSynTu9dPucUdKQkEpX4InPA9A==","signatures":[{"sig":"MEQCIDig7ahRo0b9LR9D4/qjmvMlUpW9m+fICoYZ/qi8e2q8AiAbeXFfLVCIF2fhcU21hUpcQxbu0ylPnhzv0R546CUR+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.89b2e4122.0_1693497933123_0.04767963011084597","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/theme","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cc9c118a5abab3dd209adaf3627076b085e888d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7a3942e7a.0.tgz","fileCount":45,"integrity":"sha512-j0yQi7KgVrKDQRQbjXIa5sVktZ6tSaBLfFIef8M3dLsyOvGamQWHEoizPm4NuInGP8l7qxQs7IYGW+anhNKsIw==","signatures":[{"sig":"MEYCIQDQGzHCB8vEjaycPeXe7ELhvh37r7VQa5fp0UxMewXDqwIhANXk4HcE+UkzkrKCgXFXbR+1Tk5ef+G7wB6GVGeGAbmu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7a3942e7a.0_1693507096373_0.3260738181490481","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/theme","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.54feb3020.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"315961be1837f92ea6dc7ef1175f050a2f0e1399","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.54feb3020.0.tgz","fileCount":45,"integrity":"sha512-Ami7+58WcDy4NLDtTAL0XWF5Zc1BRGVdQVpS88dOXDTiAVyMu4S2YCskmS0H0ot1vZBVPr89PS9SXPkc7kTHIA==","signatures":[{"sig":"MEQCID+gI/CJMcw2kZhVa6DR5Z0k9CskO3E/I1rGiutiZZDlAiAlSVBooYVWEOkYy5VHTnsZftnBwMubZaDDeYuhNELURw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.54feb3020.0_1694466228540_0.16964448691087575","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/theme","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ac51d9a3e0f45c642e333540431cdedda4dcb41","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":45,"integrity":"sha512-8GUpz8BnmRsAmSHmnwrvegG0GNyk3XTayofOa4j+lrhGoHa6UAdQwCmn99YusMkU2FS4Sy6Jkilm9c/EII0hTQ==","signatures":[{"sig":"MEYCIQD0hU+OpH7lUJ0RTxMuD6nDmzfVVzfbbpq0IXrdXK4uuAIhAMWAIY75YMObPHNPkZsLS7Jocmfh8d2YpkmGW4GorVcW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.6cda3ce8d.0_1694483031691_0.16212827149204645","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/theme","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.205b20b36.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dc34af7fc932f244fbe54bf48641a56e072c9b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.205b20b36.0.tgz","fileCount":45,"integrity":"sha512-mt1lm9UbU4FQU6wLzC4pgns+75bLvl5aodCkoKpRqW8uAv2+6sfyi3M0Bq8Ix/K576XH2/Y4yCu/cysNGyhyHw==","signatures":[{"sig":"MEUCIQDX3g9AXRlsNDFQ44IDhVEQm8IERjWylfwAjLBMFntxwwIgc76fe1lrKABbTZU3uFzH/4yl678XnYUIpQ4NVr+dW08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.205b20b36.0_1694625300152_0.28449561897275744","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/theme","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.22bf82024.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c2bc86e688268329ff814f0b9bed7112a55539e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.22bf82024.0.tgz","fileCount":45,"integrity":"sha512-/uiyh2Fn9VFwXtRHlBUXnFBjVsPDGmQvJfTIOh2tdU6FY/yCDAcI2NjqPTOGUQMnZ6PjSuTxjJSX4cQwhwiY1w==","signatures":[{"sig":"MEUCIQCinv1VIhYs1FTcm2bY5bkgqAnsluBDCPE1feXUEDgX/gIgZHetnis8RIps6l00+Dm13ataVUb8Iw472mK+1xqfIsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.22bf82024.0_1695028249377_0.5193184813197669","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/theme","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a246a4439.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02d6f1ba7a7d6948d25b5f328f0381eb414fd081","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a246a4439.0.tgz","fileCount":45,"integrity":"sha512-HWxC5Nhz8JZKTLTVmAsNxIGB3Kzr53+YFMg327S8/XuEDmI0RFHFvtwM9rADmyrHFBmUaVhV4iELyxFdi67c9w==","signatures":[{"sig":"MEUCICMqPkCY8DsRkUjSsYDipk4G0pB//cYSWivoFlFQmruyAiEApx2yDY5xZCZMuzz5lZtBNKfdfk+L2hWCDewjFwJ6LWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a246a4439.0_1695059069508_0.7464621224470873","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/theme","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d153db62b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"170fa1a44ce434b2c69485eabcf8a5212dcb112e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d153db62b.0.tgz","fileCount":45,"integrity":"sha512-tcfUF03LPkArqPg7u25VYSxHmVnE+faIBPsd2k+EF897F2+zTBNyWW0cUQ5ozrniZuCfrzdiPd+mMWIqScUgdw==","signatures":[{"sig":"MEUCIFG/QomU0MAS7yxikxSGOFFJuiKYicpPwJwogwwJ9/qnAiEAwAflRZsCqn38kE5QUkkbbzKPC2rLyk/mU3Rgr5PbH+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d153db62b.0_1695150774612_0.39165683686477015","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/theme","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f756e9590e1040f7a69b869b99f8730ade09b5c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.2528c1c3b.0.tgz","fileCount":45,"integrity":"sha512-OlOY5YD2VETsuzzD6KMkWOgaN7xTSDnYkG/u/e8iN9KWB5rWZDp0laHyF3cKkyy4yU8+reLYZR0BDjR2kQ3JSw==","signatures":[{"sig":"MEUCIFWknWE1tBzrcLO0CVp+iH4Xh9rxUSUcTcRKyGzIfX+gAiEAyUSGMrfJ5MQICeQDyGSZtq3z3lvMU+HE/e0HWS9PMGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.2528c1c3b.0_1695233109413_0.10020248721431613","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/theme","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70ae1ef715acff6662a09181b6c7ccaab64c81f1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.1728a6dcf.0.tgz","fileCount":45,"integrity":"sha512-5VeSkioeCcnF3Bj3guNFv6fkUOyBIwI4IVeW1m2ZZF8uAUHW4OMDuL6yZ5yy9JMi3T7VJIs1oWgCurxvyRz7ow==","signatures":[{"sig":"MEUCIQDhI7DzL0qn0oj3jO2mAd1GqUM21+I3CcAZo8VK77JlOgIgKk8HtQzrYydiVusTjBQowJo4ScAvrscnN3HM+tPYvoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.1728a6dcf.0_1695691312193_0.9414057011100054","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/theme","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2807bf9ba502193a5a7e888963d52735b574ffce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.ebb636f3d.0.tgz","fileCount":45,"integrity":"sha512-rw7QaiD8kP5UvNF6OOkbJItsGm0RHtY5V3S3NkfVdMa1DuCpo6d+e5fTEn0zoXaJ9pETiCaSto5QZMXge8JeKA==","signatures":[{"sig":"MEYCIQD1CWuRKgjoLmx3S4+Em1M3RxKjT0mdTgFbaCsS1nCo/gIhAKXcQr5m69Zmr1HcTbv9e2/slaiIK6i4XuPxwUYjOzMJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.ebb636f3d.0_1696016602735_0.433638428839058","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/theme","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4267ccd592a466b883cb9ca29e29dec1d7f9edc3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":45,"integrity":"sha512-u5tvBM7JQclO+mFcmPw8BRDJzq2WQK1ktWVUyl4f3DBTCvLEoOkom93MlJtdcda+eKGxGK/ZLutPJ3+czkIoVQ==","signatures":[{"sig":"MEUCIQDB3waBgQTQmlcJDkipc0ACQughTGSMXymJYlDqhmhu6wIgMVKVxtVwALca1AlXqisLtwsNAyMGoL7C10CKx2sYvU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c0d21ecc9.0_1696880143239_0.09836470483401372","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/theme","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.127a44b28.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bf263d275794546fcafc10662f22161401a315c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.127a44b28.0.tgz","fileCount":45,"integrity":"sha512-36xznbH+Vo7gl28iokJpRb1+Nvgc9BhC1lZ3asiPjph0k87FnORMzvUsCl0yBLR3oRCSinGxa8zppuMTLSuArw==","signatures":[{"sig":"MEUCIQDmnfNL1T8eJLF21LlGJIbyx82WWcQeiGEn/2asQ6/0wQIgAV6xpMy6g60Xs2GhfPXZJVCOfmtABhN7gX9tq5HuzLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.127a44b28.0_1697140721425_0.8801699995366039","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/theme","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.0ad128337.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fef46c17270d0564846d016b9e62eafc7c7db39","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.0ad128337.0.tgz","fileCount":45,"integrity":"sha512-Rd2jIfEyckTCOZj7C3cOtEe3vktDVvMS2UAEi0c9sc7NR4TvgMxBwXFw12SapQQ9dNte/Clv8Xz1X/EQG+0kzg==","signatures":[{"sig":"MEUCICxM0rRzhw8smNJ+w26a7w/xi4pbv6BijNuh+FHpPUjTAiEA1hgkjPejnug9pbcwWQyCgscqzP1KDz0U/KGRC6iL05E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.0ad128337.0_1697741438591_0.27082197777354766","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/theme","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.9cec94097.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c98bea89c95205f3a7a1ec0f67fd51b139a07b3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.9cec94097.0.tgz","fileCount":45,"integrity":"sha512-5ulNkUPwwkYuyS6Hvv3K+PDQTpB8Q8Z1oT9zianrwu0UXiuEamL8FWmCBuGmQWuYjKe2n3P2vfE44/SSbKMaUw==","signatures":[{"sig":"MEUCIQC1S5Oyj5Ob7ceuhLchPa0vI0p3jgvMMximLioSJ4gi7gIgefqHRPc5/lBLY1wRrwpd/86gYsCN1JpAyin35WnGKqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.9cec94097.0_1697756896476_0.27699390073000374","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/theme","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae374513de41dc29d38ce98f7582637cca59659b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":45,"integrity":"sha512-2SNRA1YsL2zt0Sd5AJm8eATdBSJqmaA6Vde9zmxZ/wUzYG27yggrz6QRgR9IFWPhywqCCD/PazjtOWC3zjuY3w==","signatures":[{"sig":"MEUCIQDXFSurLdLdSPIFcukxAa6wGflZONt0bEIGw2EHJntKigIgbiJB9X2rs0Ct6ehjnm3KpN/LSwX5/bHtaq5lOYuamqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c51a0bbcc.0_1700081879319_0.9492575213433767","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/theme","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21e7758002016f2717c55c9472c710c81fcf4722","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.d76666ad4.0.tgz","fileCount":45,"integrity":"sha512-w+7I6bFsFtmrFDgIByrVOPtzPcAdSG6kXWLsBa7mT+JRlccAlUeoxPeUUdLyVZSN0zVnqCYUibXOdF+JVjRciA==","signatures":[{"sig":"MEUCIB4kGLQjk0b2O/F8mm+RHYjQN8hG8tjl1JhEN1QpN7tgAiEAsctB4/Il7mDdj2Bg9LH8JwZykaMCnsqfH17wq9vP4rE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.d76666ad4.0_1701123144405_0.4181426522977181","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/theme","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11611de391d72e591e3edbaa4f2dd6c4cb01ced9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.8656bf0e0.0.tgz","fileCount":45,"integrity":"sha512-T7hHBagb5j2q1Etm9s1/hMEzteu8Ql3EjL/BL6xrH6SsMZL1zD6t+sXrUJ6brMbEYS94y4FWhZvUbBy5J+k0uw==","signatures":[{"sig":"MEYCIQD6D22h39cWD/VbbDoBCRCoKBYxRvSUFyIMjQ0N/uGODQIhAMghRHVa9vgo3KTkY+tQbJKqG7oj4KmQV0KhAutYUpee","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.8656bf0e0.0_1702415873776_0.09672916298686962","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/theme","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7523997eb51a21bffd598aa84fd1e76b7a0bb980","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.7f224ddd4.0.tgz","fileCount":45,"integrity":"sha512-hs45hJoE9yVnoVOcsN1jklyOa51U4lzWsEnQEuJTPOk2+0HqCQ0yv/q0InpSnm2i69fNSyZC60+8HADZGF8ugQ==","signatures":[{"sig":"MEUCIQCYw80+55M5XIirMCPb0vktkwB3V1Yqbb9vUwWPnDscUQIgR9JFkG4/rNAavWI4qm/57XdC1WLWpV9qnOP+epOSzW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.7f224ddd4.0_1703743701803_0.8037241447784638","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/theme","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19fe48041bbdea6466867f537ae4daa0a4318742","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":45,"integrity":"sha512-1ww6ilBezclnDgBNgW4CtW6rFBij5fndU1hju6q1euN3tFGpWzHywyj2xxKanlSJk15BcBgrIsd2pkBNXqcnQQ==","signatures":[{"sig":"MEYCIQDcBeR78cO4C6ecHemF1ITnxhKz3hJ5RQxA57wlIo3CGwIhAMz33xNXz8zTtRji+K4w4pYkq0/I/DsyWMdjryOVYeXn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.a0b8a90c0.0_1707333523690_0.30549337079680505","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/theme","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"701613c92db7be3963b9b4c92e9a04282385ab7f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.e50b478eb.0.tgz","fileCount":45,"integrity":"sha512-Y/Xt4hjmr+bockOtRb+eQKn0GHs98MpeBIkAmxdo6h/7/PbHgXYj5hNy6PftM7lCO9Es+Ctf1cTsXnHVoDUuIQ==","signatures":[{"sig":"MEUCIQC/FsUPhAx8i1jadDdsmeERbE07pCWRkIVmauKqnkv/4wIgK4vHy+lXPp6UhNF1RckYJNnbWVPvLA0FJYYYQYowtBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.e50b478eb.0_1707415630337_0.20393339060067572","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/theme","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4774655eb21cec0e27f5d4ccc1bc38020e3b5ba","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.c43b3438b.0.tgz","fileCount":45,"integrity":"sha512-zzPcinOx9bAbM47Uoh0cRXGR9wwQ4WxFNeeuOx87IErgxI0NlXvIWncBA6xjbaZ7jCMua0gPsPmc1jX+ZBxk6A==","signatures":[{"sig":"MEQCIGUIR7GNm0lLanCS3vdRFCanKyHj+ETeUoc0HSSbBa5+AiAyyYj1nCvUAjO7wGXQuySeiyfXVL8Umno8mEMu5A1dWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.c43b3438b.0_1708719404328_0.5506964271905501","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/theme","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.819498d8c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3836ebe40b5b86224dbaa13987d48ff80852133f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.819498d8c.0.tgz","fileCount":45,"integrity":"sha512-blwF5MhQiPZ1dJ096qQEgDvjOOGr2N4wQojTmuB3R9bzAnTjQu8GDsXdD4jkSCnOudSVXM8DRhQ14PyfYL5MbQ==","signatures":[{"sig":"MEQCIDaj8QzwdohKP0WXsHRpBpdnLgsJGmCja1cMEKbRajhpAiA7Jqo3Gmht3vzjtFW9BGz9WbKXlhQsTzIplop/hZOVdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.819498d8c.0_1710515631069_0.9901075847504295","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/theme","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.453a6248a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f59fb630cf53d7d6e1e88118ce91ff604a58158a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.453a6248a.0.tgz","fileCount":45,"integrity":"sha512-g4kq86TDy1NHHN6m8RHS6DRtWO+udJNiDhJMijRcAY2m2DlGQIMzPCjkjMGEx7bFr/iLDZHBZMkMJJG+h5JbJw==","signatures":[{"sig":"MEUCIQCxWIOp7+g089sWvSXHPLAB6xljEIMW2WWONRlq2jnpugIgOwK0bUOeVstGMWtZdljirQ/2GjrfxZDiG2Vzut59Sdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247354},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.453a6248a.0_1711386766891_0.25578113372387845","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/theme","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcd31bd3ecf4b7d95e3d4842b36cb7aadb21c227","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.68edc03c6.0.tgz","fileCount":45,"integrity":"sha512-XpXVYY4g+DtMH5d/7X6/RcDbjo4yI8q3s3YLNa9WauZzba0iEGvhg1SLLQq18Bwd/2iNL2VYnN7j+1uBYiZ/bw==","signatures":[{"sig":"MEQCIH61fiwAr4+admrn6jEM9QL0AqXsI2FhZEt4UchPoUO5AiBM49NvYN8C4cWakoso51awL1a/54ScSjTAlXyyV2KSDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247535},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.68edc03c6.0_1712603087418_0.9533087692507538","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/theme","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86aec00a961b368b4c8f61fe3d7977ae4cbbf2be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.5bebc0064.0.tgz","fileCount":45,"integrity":"sha512-+b34LfyyB7dXhKtIlOQ45QHe8Wu3pT0s75ZQB9P5Eja9Jg/dkc2XstkR+kPzQI2ou0Uos6RSA12wn8+MJOHBWw==","signatures":[{"sig":"MEQCIEDt7w3/w1fchOEa83g/TprRv1KVtXn25Rql7txr8akSAiAipsuV/GwJxVPnqC/NP6cinXRxLSYyMpypRgfGEXXtDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247535},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.5bebc0064.0_1712871545118_0.4503247183551784","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/theme","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.311f29a60.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc11fb9434b28b12dac0b5babb10e2ffcfb03456","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.311f29a60.0.tgz","fileCount":45,"integrity":"sha512-+bvaKKQqdP/BH7MChHjawGCusK0Zwuh25wSjGsZ4Lb65if2Rh1SVUHXbfQIQo9w4uDbUj8zyRfYynb/LsO0iQw==","signatures":[{"sig":"MEUCICCEdRlcatt6OzKGbZ/ND3VJKnHkkAuFcQeicjDZRe94AiEAl2tEtk8bj78pTQfVYDe/CcNRuyxqD4vdOaAu7IpVvJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247535},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.311f29a60.0_1713895120600_0.16455644672739278","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/theme","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.65c10a622.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c9e539389848d2ed4d3e91e3addd469cfaff6bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.65c10a622.0.tgz","fileCount":45,"integrity":"sha512-T2GiC1KUKHaU1fbFnMSlsw/koQ31PnnOgocpBK2QIC1HN6fE/Q99VcYJAyDnDAq6GD7nG6hwEN+k27fHL+AGXg==","signatures":[{"sig":"MEQCIDg/rzV/RpC6GqV6BpS/g/jU6X1FH3F2mejyM1mNervpAiBu7NDC7kJEPvWk8ZAlbaPn/bQb03Ecv27AzL7REBvKkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247535},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.65c10a622.0_1714070864105_0.42159781204640545","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/theme","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"647a15876074eadd2a0779b27e1be94607591aba","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":45,"integrity":"sha512-eqt71Wukt63WLHsJywKLMBKWm3AuC33vgdl3oweq36ENXIK6FtOxZvS7D2t4k+bn3AaLZtjsZ+oWCqPvxK8ZAg==","signatures":[{"sig":"MEUCIEzpWUZeL0Xbuwde/flaQk6123+W1QE6UR69GrQknQDRAiEAiAbAAQXH2TbCqY/7QhiHNLndmCzth/5nCXBBAhPOTzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247535},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.4b35cb7d0.0_1714651313198_0.9348372246564698","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/theme","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f55bfc491c743515a62c5bc5853ed6776902c38","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.f80ac92b0.0.tgz","fileCount":45,"integrity":"sha512-KOCUcefXG1MCpAAsRPFOMJGn6L6pbthn1fV80UTQ8fnEthNOL5pQwqM387O91QUWyncJz6J1EKEp3v7OGJ+L0g==","signatures":[{"sig":"MEQCIBZ3GNCqwJ4dqiV8DIFePNKMQp+4Twf0CPfJ+06eEm1+AiBLK/p61QfdOze04xRgklVyS2uBjjiuX458p3Ul4FgM8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247127},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.f80ac92b0.0_1714651938922_0.35494903297055136","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/theme","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8a016f5946ef996467333ebd4e778941a9b282b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.2f5b899bc.0.tgz","fileCount":45,"integrity":"sha512-qkqMnhL9hUobbo9GBSK8vNGK/N15TB9uCssrPVfGWMG2eY1PLigDLn9C2JHYq4K/pv+XP2XXIjJeukghTS13TA==","signatures":[{"sig":"MEMCIBXAdMpcnf0RCHerievmMIenGWJW+Za1N4XBKrtXXveBAh8+3w1h2epLmaNP1sZHxOMtbnfDJ2r08OTOB1GXjOHk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247127},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.2f5b899bc.0_1716213228215_0.12725326918517288","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/theme","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","theme"],"license":"MIT","_id":"@material/theme@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6fa9e6e7db5006811c0451648afa6bdf169cfdf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.cfec83c74.0.tgz","fileCount":45,"integrity":"sha512-Ltu5kF9dYatc2AV/e/MWXVDBAVUjA1Jp20RAg10YEPeU5GafOixPmdxY54bSmzeMAbVSb6+ml4D3uuG4dvtCjQ==","signatures":[{"sig":"MEUCIQDeBIMnR3JJTh32gTlJcJSI8czqCarg4x9dy1VlekAdAQIgVYgQIILGaoVrudn2ih/ZE5Vm1EyHExg33XxjggogLks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":247127},"readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-theme"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web theming system","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/theme_15.0.0-canary.cfec83c74.0_1716231355593_0.7476165387206415","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/theme","description":"The Material Components for the web theming system","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","theme"],"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-theme"},"sideEffects":false,"dependencies":{"@material/feature-targeting":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"<!--docs:\ntitle: \"Theme\"\nlayout: detail\nsection: components\nexcerpt: \"Color theming for MDC Web components.\"\niconId: theme\npath: /catalog/theme/\n-->\n\n# Theme\n\nThe Material Design color system can be used to create a color scheme that reflects your brand or style.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-theming\">Material Design guidelines: Color</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/theme\n```\n\n## Usage\n\n### Color Scheme\n\nYou can define the theme color variables before importing any MDC Web components:\n\n```scss\n@use \"@material/theme\" with (\n  $primary: #fcb8ab,\n  $secondary: #feeae6,\n  $on-primary: #442b2d,\n  $on-secondary: #442b2d,\n);\n@use \"@material/button/mdc-button\";\n```\n\nWe suggest you follow the Web Content Accessibility Guidelines 2.0 when picking the values for on-primary, on-secondary, etc. These values should be accessible on top of the corresponding value, e.g. primary and secondary.\n\nhttps://www.w3.org/TR/WCAG20\n\n### Advanced customization\n\nColor scheme will only get you 80% of the way to a well-designed app. Inevitably there will be some components that do not work \"out of the box\". To fix problems with accessibility and design, we suggest you use our Sass mixins, such as `button.filled-accessible()`. For more information, consult the documentation for each component.\n\n### Text styles\n\nThe text styles (referred to as `<TEXT_STYLE>` below) used in the color system:\n\nText style | Description\n--- | ---\n`primary` | Used for most text (e.g., `text-primary-on-light`)\n`secondary` | Used for text which is lower in the visual hierarchy (e.g., `text-secondary-on-light`)\n`hint` | Used for text hints, such as those in text fields and labels (e.g., `text-hint-on-light`)\n`disabled` | Used for text in disabled components and content (e.g., `text-disabled-on-light`)\n`icon` | Used for icons (e.g., `text-icon-on-light`)\n\nHere are the example usages of `primary` text style:\n\n  * CSS Custom property: `--mdc-theme-text-primary-on-light`\n  * Class name: `mdc-theme--text-primary-on-light`\n  * Property name used in Sass: `text-primary-on-light`\n\n### Non-Sass customization\n\nOnly a very limited number of Material Design color customization features are supported for non-Sass clients. They are a set of CSS custom properties, and a set of CSS classes.\n\n#### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-theme-primary` | The theme primary color\n`--mdc-theme-secondary` | The theme secondary color\n`--mdc-theme-background` | The theme background color\n`--mdc-theme-surface` | The theme surface color\n`--mdc-theme-on-primary` | Text color on top of a primary background\n`--mdc-theme-on-secondary` | Text color on top of a secondary background\n`--mdc-theme-on-surface` | Text color on top of a surface background\n`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`--mdc-theme-text-<TEXT_STYLE>-on-dark` | Text color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n#### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-theme--primary` | Sets the text color to the theme primary color\n`mdc-theme--secondary` | Sets the text color to the theme secondary color\n`mdc-theme--background` | Sets the background color to the theme background color\n`mdc-theme--surface` | Sets the surface color to the theme surface color\n`mdc-theme--on-primary` | Sets the text color to the theme on-primary color\n`mdc-theme--on-secondary` | Sets the text color to the theme on-secondary color\n`mdc-theme--on-surface` | Sets the text color to the theme on-surface color\n`mdc-theme--primary-bg` | Sets the background color to the theme primary color\n`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color\n`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background. Please see [Text styles section](#text-styles).\n`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background. Please see [Text styles section](#text-styles).\n\n### Sass Mixins, Variables, and Functions\n\nMixin | Description\n--- | ---\n`property($property, $value, $gss, $important)` | Applies a dynamic value to the specified property. The value may be a standard CSS value, a custom property Map, or a Material theme key.\n\n#### Material theme keys with `theme.property()`\n\nMaterial theme key names below can be used as the `$value` argument for the `theme.property()` mixin. Some keys are dynamic, and change context depending on other key values. Keys may also translate to custom properties for dynamic runtime theming.\n\nKey Name | Description\n--- | ---\n`primary` | The theme primary color\n`secondary` | The theme secondary color\n`background` | The theme background color\n`surface` | The theme surface color\n`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background. Please see [Text styles section](#text-styles).\n`text-<TEXT_STYLE>-on-dark` | TEXT_STYLE on top of a dark background. Please see [Text styles section](#text-styles).\n`on-primary` | A text/iconography color that is usable on top of primary color\n`on-secondary` | A text/iconography color that is usable on top of secondary color\n`on-surface` | A text/iconography color that is usable on top of surface color\n\n#### Custom properties with `theme.property()`\n\nThe `theme.property()` mixin also accepts a custom property Map for the `$value` argument. The map must contain a `varname` key with the name of the custom property, and an optional `fallback` key with the value of the custom property.\n\nUse the `@material/theme/custom-properties` module to create custom property Maps.\n\nFor example, the following Sass...\n\n```scss\n@use \"@material/theme\";\n@use \"@material/theme/custom-properties\";\n\n.foo {\n  @include theme.property(color, custom-properties.create(--foo-color, red));\n}\n```\n\n...will produce the following CSS...\n\n```\n.foo {\n  color: red;\n  color: var(--foo-color, red);\n}\n```\n\nThe above output CSS will apply the `fallback` field's value for all supported browsers (including IE11) while allowing for CSS custom property use as a progressive enhancement. Browsers like IE11 that do not support CSS custom properties will apply the `color: red;` and ignore the `color: var(--foo-color, red);`. This argument type is intended for clients who need custom color application outside of the existing theme properties.\n\n#### `theme.luminance($color)`\n\nCalculates the luminance value (0 - 1) of a given color.\n\n```scss\n@debug theme.luminance(#9c27b0); // 0.11654\n```\n\n#### `theme.contrast($back, $front)`\n\nCalculates the contrast ratio between two colors.\n\n```scss\n@debug theme.contrast(#9c27b0, #000); // 3.33071\n```\n\n#### `theme.tone($color)`\n\nDetermines whether the given color is \"light\" or \"dark\".\n\nIf the input color is a string literal equal to `\"light\"` or `\"dark\"`, it will be returned verbatim.\n\n```scss\n@debug theme.tone(#9c27b0); // dark\n@debug theme.tone(light);   // light\n```\n\n#### `theme.contrast-tone($color)`\n\nDetermines whether to use light or dark text on top of a given color.\n\n```scss\n@debug theme.contrast-tone(#9c27b0); // light\n```\n\n#### `theme.accessible-ink-color($fill-color, $text-style: primary)`\n\nReturns an accessible ink color that has sufficient contrast against the given fill color.\n\nParams:\n\n- `$fill-color`: Supports the same values as `theme.prop-value`\n- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$text-colors`)\n\n> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.\n\n```scss\n@debug theme.accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)\n@debug theme.accessible-ink-color(blue);      // white              (text-primary-on-dark)\n```\n#### `theme.text-emphasis($emphasis)`\n\nReturns opacity value for given emphasis.\n\nParams:\n\n- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.\n\n```scss\n@debug theme.text-emphasis(high); // .87\n@debug theme.text-emphasis(disabled); // .38\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/theme@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-z82H4pY0MYvw5d/srP4wITJ+EyyZulJXoqxGK40Zajb911Oqp+vVkxprmou/SMwuJovmZQGpsXYpbQYc+OsZ8g==","shasum":"654dacec042460abc6e75102e255a14c9a97b2c2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/theme/-/theme-15.0.0-canary.423edc3dc.0.tgz","fileCount":45,"unpackedSize":247127,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkF2FgAtRBKETAjyNSuKmadmxkJqlpZndFOnqkYAn9bAIhALwK1E1NN5P5ukGf9zHZlYWEKYdRbCYfQRDLZntVh/GK"}]},"_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/theme_15.0.0-canary.423edc3dc.0_1719425494465_0.5042286943829568"},"_hasShrinkwrap":false}},"name":"@material/theme","time":{"created":"2016-12-15T17:51:44.408Z","modified":"2024-06-26T18:11:35.092Z","0.1.0":"2016-12-15T17:51:44.408Z","0.1.1":"2017-01-23T16:49:47.083Z","0.1.2":"2017-02-21T17:27:43.892Z","0.1.3":"2017-04-03T15:28:14.185Z","0.1.4":"2017-04-18T14:51:31.400Z","0.1.5":"2017-05-15T16:26:17.393Z","0.1.6":"2017-07-24T15:49:31.312Z","0.1.7":"2017-08-07T20:48:35.386Z","0.2.0":"2017-08-21T17:28:08.357Z","0.3.0":"2017-09-05T20:16:20.403Z","0.3.1":"2017-09-18T18:36:00.389Z","0.4.0":"2017-10-02T21:11:57.158Z","0.24.0":"2017-10-30T19:11:39.293Z","0.25.0":"2017-11-13T20:02:40.379Z","0.27.0":"2017-12-11T19:35:46.093Z","0.28.0":"2018-01-08T18:55:20.346Z","0.29.0":"2018-01-22T18:31:04.041Z","0.30.0":"2018-02-05T22:03:06.521Z","0.33.0":"2018-03-19T16:40:12.254Z","0.34.0":"2018-04-02T21:52:10.357Z","0.35.0":"2018-04-23T22:40:54.675Z","0.38.0":"2018-07-30T17:06:05.190Z","0.39.0":"2018-08-27T17:40:04.928Z","0.39.1":"2018-08-31T21:36:00.654Z","0.40.0":"2018-09-24T20:00:30.806Z","0.40.1":"2018-10-08T20:53:57.518Z","0.41.0":"2018-10-29T20:21:38.042Z","0.43.0":"2019-01-07T19:48:46.669Z","1.0.0-0":"2019-02-27T23:59:08.778Z","1.0.0-1":"2019-03-04T23:33:02.163Z","1.0.0":"2019-03-06T21:07:46.248Z","1.1.0":"2019-03-26T19:25:35.506Z","3.0.0-alpha.0":"2019-06-12T04:06:33.197Z","3.0.0-alpha.1":"2019-06-12T19:01:57.299Z","3.0.0":"2019-06-25T22:27:47.851Z","3.1.0-alpha.0":"2019-07-16T13:28:55.598Z","3.1.0":"2019-07-22T22:02:23.938Z","4.0.0-alpha.0":"2019-08-07T21:09:08.170Z","4.0.0-canary.0":"2019-09-05T04:37:40.608Z","4.0.0-canary.1":"2019-09-09T20:20:29.092Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:22.791Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:05.079Z","4.0.0-canary.905884690.0":"2019-09-16T23:47:55.766Z","4.0.0-canary.199534d61.0":"2019-09-27T18:57:34.800Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:02.508Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:20.618Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:23.771Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:12.368Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:08:19.414Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:01.274Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:10:27.393Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:34:54.453Z","4.0.0-canary.01628efa.0":"2019-10-29T00:02:45.640Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:56:27.377Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:58:37.090Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:17.577Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:28:55.223Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:00:54.824Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:10:31.468Z","4.0.0":"2019-11-02T18:11:32.594Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:25.355Z","5.0.0-canary.58500806e.0":"2019-11-08T15:35:27.819Z","5.0.0-canary.66299b646.0":"2019-11-08T20:33:27.997Z","5.0.0-canary.821871e04.0":"2019-11-08T21:27:58.048Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:06:58.555Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:10.780Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:37:28.142Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:58:15.060Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:30:35.196Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:05:41.202Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:32:34.492Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:16.617Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:06.429Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:09:30.977Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:17.265Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:10:28.031Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:54:35.475Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:16:31.987Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:07.165Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:17:45.098Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:18:54.666Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:19:51.077Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:54:43.323Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:22:24.912Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:58:53.883Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:55:40.655Z","5.0.0-canary.50f110a6c.0":"2019-12-10T16:59:21.127Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:04.138Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:00.882Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:00.515Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:09:28.181Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:36:28.329Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:09:26.498Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:03.436Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:19.823Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:16:27.511Z","5.0.0-canary.391674a26.0":"2019-12-18T19:16:40.861Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:34:33.831Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:19:52.185Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:23:42.638Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:49:28.203Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:24:28.722Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:00.944Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:26:52.272Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:23:55.501Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:09:24.585Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:26:29.527Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:47:19.749Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:49:41.713Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:22.927Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:45:17.323Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:02:45.816Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:53:47.821Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:05.820Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:05.176Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:06.132Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:36:44.248Z","5.0.0-canary.7be9e4a04.0":"2020-01-06T17:04:05.133Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:25:57.103Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:11.253Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T14:59:14.421Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:15:21.587Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:09:43.381Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:12.721Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:14:56.353Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:25:40.425Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:21.842Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:16:46.099Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:00.117Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:20:36.685Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:21:54.485Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:56:25.481Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:27:24.077Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:14.378Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:09:58.164Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:10:24.897Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:21:39.549Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:42:20.168Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:57:40.303Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:15:53.226Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:22:54.530Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:39:39.787Z","5.0.0-canary.1eb032637.0":"2020-01-08T22:59:39.034Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:00:28.214Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:09:48.962Z","5.0.0-canary.aab102017.0":"2020-01-10T00:11:58.149Z","5.0.0-canary.426913342.0":"2020-01-10T01:43:51.615Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:24:57.113Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:56:25.753Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:26:17.699Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:18:27.204Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:31:24.768Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:13:06.910Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:03.341Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:52:19.692Z","5.0.0-canary.60354c577.0":"2020-01-14T22:45:37.133Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:38:12.114Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:42:43.730Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:09:53.740Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:47:07.476Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:47:20.817Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:00.260Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:23:30.963Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:46:39.380Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:06:33.147Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:36:21.607Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T00:59:51.189Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:16:39.865Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:20:24.893Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:35:36.795Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:30:23.496Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:39:19.243Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:06.571Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:49:15.848Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:36:59.705Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:45:25.463Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:44:28.207Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:21:50.469Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:54:52.334Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:57:10.843Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:16:30.877Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:06.372Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:12:02.643Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:54:53.294Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:54:52.241Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:47:12.315Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:20:23.564Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:45:22.859Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:31:49.289Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:55:10.803Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:23:50.409Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:28:59.162Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:42:56.023Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:48:28.417Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:09:06.379Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:55:09.252Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:40.465Z","5.0.0-canary.45985457b.0":"2020-01-29T23:32:21.766Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:36:43.229Z","5.0.0-canary.181486643.0":"2020-01-30T20:55:28.967Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:22:45.657Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:02:36.011Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:09:38.374Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:19.417Z","5.0.0-canary.535398572.0":"2020-02-03T18:10:52.365Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:03:21.499Z","5.0.0-canary.1eb29491c.0":"2020-02-04T20:59:57.005Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:02:16.728Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:32:40.245Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:29:22.960Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:20:49.921Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:54:59.626Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:58:50.429Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:48:05.495Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:24:14.895Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:10:55.790Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:42:56.921Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:42:39.871Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:48:32.002Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:50:58.339Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:43:11.605Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:05:43.207Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:23:00.151Z","5.0.0":"2020-02-14T00:08:25.568Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:47:33.035Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:04.956Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:04.144Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:15:35.428Z","6.0.0-canary.765caef18.0":"2020-02-21T17:32:28.805Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:03.973Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:57:31.494Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:18.836Z","5.1.0":"2020-02-25T21:37:20.373Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:08.211Z","6.0.0-canary.781434a92.0":"2020-02-25T23:27:29.669Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:00.781Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:11:31.174Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:09:07.113Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:07.820Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:43:35.122Z","6.0.0-canary.98b843417.0":"2020-03-05T18:30:28.044Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:21:47.817Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:45:56.806Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:21:21.303Z","6.0.0-canary.9ebee4ceb.0":"2020-03-09T21:13:14.584Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:01:54.355Z","6.0.0-canary.a731fd0a4.0":"2020-03-10T20:31:47.582Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:35:50.451Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:57:37.494Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:04:55.460Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:32:43.152Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:01.355Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:37:28.824Z","6.0.0-canary.bec065920.0":"2020-03-12T20:19:41.549Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:20:08.790Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:00:46.942Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:47:28.447Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:14.999Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:35:24.709Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:01.875Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:58:34.534Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:14:37.691Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:42:56.511Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:46:38.048Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:17:53.173Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:04:20.733Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:55:54.701Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:04.199Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:55:47.840Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:55:25.914Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:08:59.244Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:13:16.081Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:03:28.306Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:09.707Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:35:36.361Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:09.272Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:02.347Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:29:28.389Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:46:42.626Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:22:07.796Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:02.309Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:30:33.554Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:15.046Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:33:27.983Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:05:33.614Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:09:57.833Z","6.0.0-canary.c02642273.0":"2020-04-15T16:16:54.010Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:42:55.706Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:22.264Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:15.623Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:18:41.627Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:53:53.383Z","6.0.0-canary.ca61b656f.0":"2020-04-16T19:59:36.244Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:32:34.009Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:40:38.670Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:02:32.621Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:08.564Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:17:22.877Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:57:55.448Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:55:24.588Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:19:49.020Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:14:25.712Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:17:57.677Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:41:33.200Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:06:45.586Z","7.0.0-canary.8540808be.0":"2020-04-23T17:25:28.656Z","6.0.0":"2020-04-23T17:25:58.365Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:45:13.118Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:20:43.434Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:05:38.480Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:18:26.915Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:43:33.335Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:31:42.071Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:06:18.745Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:04.684Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:43:28.993Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:03.980Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:27:22.629Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:32:13.033Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:41:53.010Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:25:21.379Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:07.534Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:35:25.110Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:09.798Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:18:36.139Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:30:36.738Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:33:20.649Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:58:29.651Z","7.0.0-canary.09f591967.0":"2020-05-05T21:03:47.140Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:00.797Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:06:43.234Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:54:39.696Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:16.389Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:02.678Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:37:57.953Z","7.0.0-canary.119e21426.0":"2020-05-08T20:21:57.020Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:06:45.915Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:07.038Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:12:30.455Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:28:23.924Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:31:55.504Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:26:45.281Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:24:38.346Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:17:36.769Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:46:44.428Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:42:18.320Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:50:59.633Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:10.823Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:43:33.482Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:17:33.745Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:20.499Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:08:47.594Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:37:39.023Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:35:58.385Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:00.061Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:02:21.449Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:12:01.321Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:40:44.391Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:01:37.177Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:14:08.350Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:17:38.798Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:19:27.869Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:11.480Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:15.348Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:28:31.409Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:31:13.773Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:32:39.540Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:47:35.824Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:20:33.783Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T20:59:12.714Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:03:23.569Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:11.882Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:31:31.358Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:32:24.953Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:45:55.920Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:44:50.002Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:06:55.592Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:10.853Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:34:19.964Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:09.361Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:54:29.169Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:58:51.545Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:15:51.829Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:20:20.135Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:29:30.412Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:37:44.660Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:36:24.036Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:50:51.547Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:54:46.202Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:49:50.791Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:14:37.434Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:04:33.933Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:11.675Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:03.414Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:43:22.423Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:48:35.789Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:48:23.662Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:25:28.640Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:13.057Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:02.733Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:51:48.308Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:03.083Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:02:23.394Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:03.257Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:08:33.147Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:11:49.097Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:13:22.751Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:13:52.449Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:06.487Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:43:47.747Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:41:18.146Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:56:16.136Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:53:28.251Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:25:47.898Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:15:59.221Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:39:07.324Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:45:28.888Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:07:43.058Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:30:14.599Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:48:49.722Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:20:34.668Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:15:14.294Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:03:39.361Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:15:49.523Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:20:51.231Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:27:14.791Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:47:39.314Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:09:56.981Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:19:25.782Z","7.0.0-canary.10b505785.0":"2020-06-19T20:20:51.930Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:37:03.116Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:39:19.984Z","7.0.0-canary.c20727498.0":"2020-06-19T20:42:13.481Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:58:58.232Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:01:11.659Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:02:21.946Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:27:21.774Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:29:26.276Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:30:47.005Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:33:30.615Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:23:04.893Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:13:53.374Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:16:06.493Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:24:45.376Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:52:46.333Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:56:51.750Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:28:49.600Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:27:26.659Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:32:48.534Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:39:22.875Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:47:29.146Z","7.0.0-canary.080965f39.0":"2020-06-23T15:17:00.585Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T15:59:25.077Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:24:12.398Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:47:22.874Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T18:59:50.292Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:02:27.761Z","7.0.0":"2020-06-23T19:10:09.294Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:11:01.644Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:40:09.891Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:55:26.479Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:31:06.073Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:55:43.326Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:52:43.358Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:38:09.329Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:00:32.261Z","8.0.0-canary.38197b443.0":"2020-06-25T21:21:59.226Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:38:10.779Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:16:11.015Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:47:42.269Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:23:01.861Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:14:46.626Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:29:54.042Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:51:10.822Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:04:50.296Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:13:46.370Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:46:22.791Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:55:32.307Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:26:36.629Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:38:21.046Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:40:36.999Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:47:21.806Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:15:15.097Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:43:30.081Z","8.0.0-canary.d850de590.0":"2020-07-09T18:04:54.013Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:34:44.236Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:35:23.323Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:51:12.905Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:07.402Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:11:42.978Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:42:08.981Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:06:37.559Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:33:43.485Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:19:24.218Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:09:52.046Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:12:31.208Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:14:27.443Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:33:36.861Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:08:48.679Z","8.0.0-canary.01db89053.0":"2020-07-16T16:38:29.376Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:19:27.477Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:55:05.186Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:49:34.609Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:46:35.446Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:22:41.473Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:33:04.386Z","8.0.0-canary.12a109680.0":"2020-07-22T23:02:55.538Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:52:20.331Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:48:57.596Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:45:14.520Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:46:52.526Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:58:05.210Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T20:58:58.723Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:23:08.180Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:23:21.166Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:43:06.318Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:10:12.962Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:56:20.778Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:12:31.470Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:05:50.222Z","8.0.0-canary.75553837c.0":"2020-07-27T15:11:45.885Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:37:19.705Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:46:29.050Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:58:35.777Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:31:44.637Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:07:57.063Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:50:29.720Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:57:28.200Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:57:40.692Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:53:31.224Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:49:42.762Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:38:38.212Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:51:36.940Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:15:21.866Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:35:48.483Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:48:38.553Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:20:00.992Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:34:24.841Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:38:10.317Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:14:08.173Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:24:39.569Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:00:48.648Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:09:42.052Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:14:44.981Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:27:01.102Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:09:40.758Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:20:57.631Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:45:36.047Z","8.0.0-canary.005e86a9b.0":"2020-07-30T17:59:13.834Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:07:59.300Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:19:44.960Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:30:42.128Z","8.0.0-canary.f041a48c9.0":"2020-07-30T22:58:48.133Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:49:49.903Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:22:26.523Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:50:10.989Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:52:56.425Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:53:07.765Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:53:33.348Z","8.0.0-canary.72258f898.0":"2020-08-04T01:16:45.867Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:47:34.028Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:23:37.581Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:48:11.052Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:53:12.676Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:19:03.600Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:38:49.476Z","8.0.0-canary.08090126b.0":"2020-08-06T19:32:02.968Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:49:21.516Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:26:03.898Z","8.0.0-canary.96a640534.0":"2020-08-06T22:40:53.453Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:50:44.769Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:19:44.651Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:47:51.642Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:51:56.547Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:30:10.282Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:01:04.727Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:07:31.830Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:03:29.306Z","8.0.0-canary.760873445.0":"2020-08-12T21:42:36.494Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:52:34.275Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:00:00.774Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:28:02.744Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:11:41.033Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:28:20.029Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:49:03.651Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:16:40.154Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:50:14.145Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:15:36.738Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:28:48.279Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:21:53.771Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:37:47.528Z","8.0.0-canary.000d64815.0":"2020-08-17T17:03:37.588Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:31:09.827Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:36:07.513Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:41:16.361Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:23:17.553Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:20:17.505Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:32:18.907Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:36:49.150Z","8.0.0-canary.546277d32.0":"2020-08-20T16:42:19.577Z","8.0.0-canary.da72839f4.0":"2020-08-20T17:59:12.713Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:17:44.982Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:14:30.943Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:57:05.914Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:05:40.508Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:51:58.558Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:28:12.569Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:11:08.872Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T19:59:43.389Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:40:06.387Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:03:11.472Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:55:44.849Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:48:38.254Z","8.0.0-canary.911014711.0":"2020-08-27T16:07:19.886Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:53:52.457Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:54:10.502Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:55:17.579Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:12:06.515Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:15:20.826Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:09:50.015Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:49:01.653Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:54:52.321Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:09:33.021Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T22:59:32.551Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:32:03.196Z","8.0.0-canary.40d8e4726.0":"2020-09-14T23:27:53.973Z","8.0.0-canary.c25d70a31.0":"2020-09-15T02:28:00.321Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:53:37.490Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:51:10.490Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:57:49.945Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:25:01.722Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:42:17.139Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:09:53.238Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:17:17.204Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:42:29.701Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:13:30.504Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:45:32.240Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:31:35.626Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:34:32.113Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:50:35.812Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:23:40.888Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:53:24.175Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:09:26.533Z","8.0.0-canary.d71622574.0":"2020-10-09T16:30:56.235Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:53:12.627Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:45:44.187Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:56:08.458Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:15:07.026Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:16:49.200Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:03:37.012Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:07:25.224Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:50:54.206Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:30:33.357Z","8.0.0-canary.596e98424.0":"2020-10-28T16:02:51.808Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:11:21.329Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:44:16.895Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:12:01.046Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:40:34.544Z","8.0.0-canary.c61db90a5.0":"2020-10-28T18:58:57.177Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:31:47.113Z","8.0.0-canary.5511c5254.0":"2020-10-30T17:59:33.137Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:04:08.510Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:58:20.847Z","8.0.0":"2020-11-02T22:58:41.978Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:20:38.391Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:27:08.321Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:36:30.884Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:08:05.992Z","9.0.0-canary.419e03572.0":"2020-11-04T01:32:25.277Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:45:22.103Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:04:41.768Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:55:52.619Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:15:23.337Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:44:03.127Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:19:58.129Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:49:17.531Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:45:00.946Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:16:37.986Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:24:18.436Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:26:29.121Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:57:14.746Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:43:03.256Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:34:17.144Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:25:24.081Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:51:37.228Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:54:28.705Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:17:43.847Z","9.0.0-canary.a41527604.0":"2020-11-19T19:59:18.468Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:54:53.377Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:46:42.959Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:08:04.711Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:14:56.449Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:30:16.715Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:32:02.827Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:39:41.094Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:50:46.456Z","9.0.0-canary.fd22355f7.0":"2020-11-30T22:58:52.776Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:55:49.781Z","9.0.0-canary.977585650.0":"2020-12-02T14:41:14.921Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:48:51.950Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:06:48.895Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:15:44.333Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:21:40.838Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:28:59.323Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:40:49.586Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:57:29.513Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:00:36.238Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:43:59.923Z","9.0.0-canary.832668d33.0":"2020-12-04T18:05:11.986Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:28:20.746Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:41:10.017Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:48:46.901Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:00:43.514Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:12:27.493Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:27:35.451Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:31:30.054Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:44:37.652Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:04:35.653Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:10:17.733Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:48:58.824Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:07:07.067Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:43:11.154Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:27:12.138Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:04:41.016Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:06:13.021Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:01:08.699Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:26:49.484Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:06:44.394Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:41:15.472Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:04:16.855Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:44:57.627Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:07:48.513Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:47:19.141Z","9.0.0":"2020-12-29T19:45:17.551Z","10.0.0-canary.555aecce5.0":"2020-12-29T19:45:26.633Z","10.0.0-canary.776c18681.0":"2020-12-30T00:39:27.187Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:11:05.686Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:45:47.157Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:03:37.101Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:09:00.546Z","10.0.0-canary.365c69360.0":"2021-01-05T17:47:29.509Z","10.0.0-canary.700a8261a.0":"2021-01-05T20:59:45.435Z","10.0.0-canary.766981c15.0":"2021-01-05T22:39:26.075Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:49:18.754Z","10.0.0-canary.968735356.0":"2021-01-06T15:49:57.385Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:43:24.427Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:25:27.206Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:33:26.814Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:19:07.643Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:50:47.682Z","10.0.0-canary.089de519c.0":"2021-01-08T22:19:57.578Z","10.0.0-canary.163119837.0":"2021-01-08T23:44:25.054Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:23:22.373Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:11:24.764Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:54:14.020Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:06:04.170Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:09:32.733Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:33:13.187Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:25:50.239Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:53:05.254Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:18:20.982Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:07:15.640Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:54:03.327Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:08:47.366Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:03:59.830Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:55:33.859Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:51:23.489Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:50:41.186Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:34:35.511Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:22:47.371Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:09:08.619Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:44:15.530Z","10.0.0-canary.623af861e.0":"2021-01-26T03:44:31.792Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:31:55.836Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:45:02.921Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:03:13.612Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:26:27.248Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:19:12.846Z","10.0.0-canary.994873795.0":"2021-01-27T14:50:14.204Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:01:17.138Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:31:27.821Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:02:43.399Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:02:38.182Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:13:50.635Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:19:37.737Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:48:13.864Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:41:49.034Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:17:48.730Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:33:10.255Z","10.0.0-canary.05f249666.0":"2021-02-04T17:49:19.057Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:42:19.044Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:33:53.065Z","10.0.0-canary.8271f00f7.0":"2021-02-04T22:59:50.134Z","10.0.0-canary.533092a90.0":"2021-02-05T03:46:00.275Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:16:30.753Z","10.0.0":"2021-02-05T16:17:52.429Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:41:11.197Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:30:53.235Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:04:05.720Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:02:22.447Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:33:12.069Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:16:21.288Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T17:59:22.999Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:40:31.568Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:51:44.744Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:16:00.804Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:05:49.758Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:41:05.184Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:29:58.643Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:58:31.362Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:29:54.925Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:10:54.621Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:15:19.718Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:08:44.687Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:24:05.362Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:57:17.828Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:43:47.602Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:34:11.643Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:04:08.474Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:36:44.879Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:22:15.273Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:41:43.323Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:26:44.074Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:36:06.455Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:12:19.911Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:35:37.952Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:44:46.940Z","11.0.0-canary.3201cae47.0":"2021-02-19T22:59:44.395Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:48:31.262Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:44:59.909Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:29:43.862Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:12:41.916Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:31:54.316Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:33:06.570Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:33:46.695Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:49:43.521Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:14:36.435Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:46:47.126Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:21:27.718Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:36:20.690Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:06:25.271Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:37:58.462Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:52:17.307Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:19:58.809Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:30:46.021Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:23:18.189Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:41:26.383Z","11.0.0-canary.0a0b10f22.0":"2021-03-03T23:59:49.011Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:39:06.565Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:48:27.429Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:44:23.307Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:38:54.416Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:43:17.058Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:26:35.628Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:51:27.538Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:56:07.069Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:24:06.699Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:48:56.957Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:01:43.107Z","11.0.0-canary.81911b707.0":"2021-03-11T18:22:12.209Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:35:46.512Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:00:28.659Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:07:43.206Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:32:00.618Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:39:24.349Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:43:17.849Z","11.0.0-canary.73a227194.0":"2021-03-12T00:22:48.418Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:01:40.881Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:33:50.368Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:19:05.515Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:46:46.001Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:11:11.890Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:38:29.446Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:40:17.937Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:00:37.993Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:58:28.400Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:18:48.251Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:16:08.091Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:43:01.883Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:16:46.617Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:36:42.993Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:49:54.856Z","11.0.0-canary.cbc57c600.0":"2021-03-19T00:58:41.946Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:10:54.361Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:32:45.147Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:42:52.144Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:04:01.768Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:36:37.682Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:06:33.551Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:01:47.413Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:52:42.584Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:03:34.791Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:28:28.880Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:15:13.003Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:31:17.041Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:54:24.538Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:56:18.259Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:47:29.159Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:19:57.304Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:32:42.145Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:10:43.831Z","11.0.0-canary.24609b822.0":"2021-03-31T20:56:12.484Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:04:04.081Z","11.0.0-canary.94937c78c.0":"2021-04-01T20:59:46.730Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:46:22.076Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:23:04.979Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:04:03.139Z","11.0.0-canary.a4009b80a.0":"2021-04-05T21:59:31.471Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:41:16.892Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:43:34.988Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:52:58.184Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:56:54.826Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:34:48.318Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:37:43.521Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:34:33.880Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:10:07.010Z","11.0.0-canary.24255c408.0":"2021-04-09T20:11:20.861Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:52:46.083Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:14:43.238Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:42:30.943Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:02:12.949Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:03:10.922Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:30:20.914Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:45:19.249Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:53:27.770Z","11.0.0":"2021-04-15T22:57:30.733Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:44:07.781Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:46:04.599Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:40:32.497Z","12.0.0-canary.b52196498.0":"2021-04-19T19:57:06.320Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:07:42.221Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:56:16.775Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:37:03.699Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:48:39.920Z","12.0.0-canary.cad489689.0":"2021-04-22T16:48:33.740Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:33:37.323Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:12:08.764Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:42:21.842Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:48:40.693Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:08:47.393Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:19:01.976Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:57:50.216Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:35:24.445Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:56:45.698Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:45:11.030Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:06:41.922Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:11:59.875Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:47:07.803Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:52:45.124Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:43:55.553Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:48:28.495Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:42:14.772Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:16:57.049Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:22:35.856Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:01:03.668Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:36:58.120Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:21:33.262Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:52:39.085Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:21:46.051Z","12.0.0-canary.33148231f.0":"2021-05-03T19:38:03.805Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:45:08.112Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:40:53.395Z","12.0.0-canary.de997644b.0":"2021-05-04T17:27:28.259Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:54:11.427Z","12.0.0-canary.be999eb08.0":"2021-05-04T17:59:26.880Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:09:33.273Z","12.0.0-canary.718c90178.0":"2021-05-04T19:26:52.951Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:29:40.098Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:33:01.949Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:48:48.727Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:57:19.759Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:02:16.456Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:05:46.604Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:20:53.556Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:15:32.601Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:26:25.335Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T20:59:14.564Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:40:10.745Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:38:27.387Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:29:10.304Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:55:28.493Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:28:30.695Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:42:27.574Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:42:06.312Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:17:54.378Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:22:47.114Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:44:47.317Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:56:00.447Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:08:11.746Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:23:56.540Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:57:51.106Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:57:32.358Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:16:33.830Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:21:51.919Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:18:55.989Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:22:25.703Z","12.0.0-canary.33a954852.0":"2021-05-13T15:06:52.995Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:30:10.013Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:07:06.169Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:12:57.973Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:39:56.622Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:53:07.547Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:12:25.487Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:27:35.046Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:56:05.391Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:50:12.221Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:17:52.086Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:04:55.772Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:13:37.510Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:34:41.367Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:04:05.813Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:44:53.926Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:53:37.606Z","12.0.0-canary.464a00286.0":"2021-06-03T14:44:58.680Z","12.0.0-canary.474de7878.0":"2021-06-03T15:13:33.415Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:45:39.196Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:13:26.618Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:41:00.948Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:47:32.446Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:21:28.897Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:40:04.886Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:05:10.717Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:06:14.686Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:35:08.352Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:35:01.124Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:05:03.049Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:45:43.502Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:38:24.782Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:17:21.124Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:21:10.087Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:29:26.341Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:02:47.884Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:49:59.914Z","12.0.0-canary.271fff902.0":"2021-06-15T22:50:22.405Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:05:22.915Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:04:37.141Z","12.0.0-canary.940550232.0":"2021-06-17T19:39:20.900Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:23:41.580Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:10:56.268Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:39:39.578Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:35:59.819Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:11:12.702Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:23:48.512Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:26:41.230Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:14:05.343Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:51:43.852Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:40:06.548Z","12.0.0-canary.796811db7.0":"2021-07-01T00:02:37.408Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:05:41.293Z","12.0.0-canary.435866d32.0":"2021-07-02T18:20:29.217Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-02T23:59:16.940Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:08:26.061Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:02:49.216Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:03:28.816Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:24:40.919Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:50:26.358Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:48:28.074Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:08:24.082Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:43:28.474Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:53:11.348Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:49:41.868Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:21:31.814Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:47:17.058Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:07:20.294Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:21:09.226Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:41:33.257Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:06:20.250Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:57:08.336Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:58:19.339Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:13:12.573Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:42:24.660Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:41:11.707Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:07:58.613Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:56:06.795Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:04:46.356Z","12.0.0-canary.791311bba.0":"2021-07-20T22:06:47.772Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:35:14.579Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:49:07.906Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:05:42.657Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:37:38.046Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:11:32.513Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:31:32.461Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:55:05.615Z","12.0.0-canary.22f390c43.0":"2021-07-27T18:59:09.902Z","12.0.0":"2021-07-27T19:49:08.724Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:50:41.896Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:17:27.742Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:25:03.180Z","13.0.0-canary.28656298a.0":"2021-07-29T18:12:23.826Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:34:38.997Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:04:11.514Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:32:43.427Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:22:39.365Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:13:12.143Z","13.0.0-canary.a80c8b2c2.0":"2021-08-04T23:59:04.037Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:55:38.078Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:41:33.245Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:17:24.236Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:49:14.843Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:14:09.127Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:06:41.517Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:16:36.286Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:16:36.247Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:20:51.513Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:40:05.506Z","13.0.0-canary.f4241a42a.0":"2021-08-11T16:58:46.522Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:28:08.162Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:54:38.391Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:44:34.286Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:47:51.087Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:07:27.758Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:21:06.851Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:53:33.329Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:13:25.702Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:22:42.574Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:01:32.261Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:16:57.584Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:47:54.932Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:31:39.736Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:25:58.823Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:19:45.114Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:43:35.362Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:25:59.362Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:27:48.844Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:16:27.592Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:27:15.194Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:47:43.422Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:17:30.365Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:32:36.826Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:53:11.571Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T21:58:42.841Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:37:23.034Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:05:05.299Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:08:16.738Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:43:41.286Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:53:41.995Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:10:32.825Z","13.0.0-canary.611db508e.0":"2021-09-02T03:14:16.486Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:37:03.277Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:44:07.493Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:45:46.483Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:29:16.802Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:30:42.421Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:31:12.211Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:42:13.388Z","13.0.0-canary.72464476c.0":"2021-09-07T15:33:29.135Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:32:43.486Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:42:31.638Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:34:51.084Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:00:17.764Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:09:37.622Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:24:38.536Z","13.0.0-canary.864798678.0":"2021-09-09T18:36:05.241Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:20:48.266Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:02:58.077Z","13.0.0-canary.08398f880.0":"2021-09-13T23:33:39.233Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:49:35.364Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:11:32.963Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T21:58:20.654Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:16:38.502Z","13.0.0-canary.80a583365.0":"2021-09-17T20:35:06.951Z","13.0.0-canary.83900936a.0":"2021-09-17T23:23:41.135Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:35:19.436Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:46:52.528Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:37:04.587Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:11:13.574Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:57:14.727Z","13.0.0-canary.65084baff.0":"2021-09-23T21:24:45.541Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:41:01.703Z","13.0.0":"2021-09-24T19:45:11.728Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:45:56.484Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:10:23.064Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:28:36.559Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:42:19.016Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:56:12.841Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:30:35.388Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:27:49.959Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:46:15.566Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:21:23.472Z","14.0.0-canary.261f2db59.0":"2021-10-20T16:58:58.988Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:21:12.703Z","14.0.0-canary.348665978.0":"2021-10-21T14:49:57.321Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:11:30.240Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:52:07.377Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:00:55.295Z","14.0.0-canary.a986df922.0":"2021-10-29T21:34:24.247Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:05:15.803Z","14.0.0-canary.468392606.0":"2021-11-11T19:39:28.309Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:50:12.286Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:56:08.535Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:57:47.424Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:23:41.759Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:35:47.390Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:29:10.137Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:13:10.626Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:39:36.991Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:49:09.929Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:15:31.006Z","14.0.0-canary.554c71829.0":"2021-11-16T16:18:24.884Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:23:18.121Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T18:58:27.039Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:24:10.249Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:38:15.558Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:34:20.260Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:03:39.468Z","14.0.0-canary.93134d453.0":"2021-11-23T15:37:59.788Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:31:24.452Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:36:32.371Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:49:49.405Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:55:14.734Z","14.0.0-canary.17a072535.0":"2021-12-02T18:04:25.188Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:43:28.143Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:05:33.620Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:24:28.616Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:28:24.948Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:54:07.983Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:39:00.597Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:12:06.026Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:08:53.945Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:31:32.686Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:44:54.708Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:13:18.882Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:00:02.970Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:53:18.150Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:32:07.032Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:48:38.161Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:41:30.897Z","14.0.0-canary.390220e42.0":"2022-01-17T16:45:10.313Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:51:55.951Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:16:32.364Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:53:33.324Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:02:31.920Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:30:47.409Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:12:16.531Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:36:15.321Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:40:36.595Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:49:03.021Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:21:50.708Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:56:19.330Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:45:38.954Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:52:43.952Z","14.0.0-canary.96ea061c1.0":"2022-02-09T18:58:25.104Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:05:42.706Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:28:35.235Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:48:07.017Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:15:38.744Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:03:26.829Z","14.0.0-canary.868793776.0":"2022-02-22T19:34:35.803Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:45:31.053Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:32:28.179Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:26:48.796Z","14.0.0-canary.6505e61c5.0":"2022-03-03T19:59:37.407Z","14.0.0-canary.16c166154.0":"2022-03-08T23:21:41.813Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:27:44.926Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:28:57.345Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:49:27.464Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:02:58.246Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:17:14.041Z","14.0.0-canary.32b391398.0":"2022-03-17T17:58:32.217Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:38:33.797Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:51:21.823Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:43:25.727Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:50:02.473Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:17:56.211Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:39:19.246Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:03:57.547Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:34:17.622Z","14.0.0-canary.344d52823.0":"2022-03-29T18:42:36.457Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:32:14.997Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:13:32.297Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:23:31.967Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:22:44.870Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:04:56.619Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:47:00.319Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:10:32.952Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:01:11.343Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:44:36.006Z","14.0.0":"2022-04-28T16:55:08.767Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:56:16.064Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:13:58.575Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:30:48.827Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:55:22.282Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:57:41.354Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:23:45.995Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:39:39.084Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:17:47.908Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:43:31.304Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:26:04.134Z","15.0.0-canary.05930a453.0":"2022-05-13T18:46:48.372Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:00:23.232Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:31:59.884Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:02:05.681Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:20:58.911Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:56:55.727Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:38:54.213Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:20:13.487Z","15.0.0-canary.df47894db.0":"2022-06-13T17:07:54.311Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:29:11.455Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:56:50.965Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:21:53.694Z","15.0.0-canary.764de225d.0":"2022-06-29T16:26:29.974Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:27:50.923Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:54:26.649Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:53:49.950Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:50:31.587Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:30:29.629Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:02:04.834Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:30:51.644Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:38:06.445Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:38:35.948Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:36:26.190Z","15.0.0-canary.88db01990.0":"2022-07-12T11:39:24.019Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:28:19.042Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:34:25.186Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:04:41.796Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:07:38.007Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:48:49.080Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:42:38.267Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:00:20.554Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:04:26.984Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:23:32.302Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:46:09.055Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:19:14.928Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:28:37.261Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:21:19.425Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:39:28.731Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:56:37.522Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:08:30.096Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:04:02.949Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:44:59.468Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:12:48.797Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:40:06.178Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:20:04.538Z","15.0.0-canary.10196647d.0":"2022-08-03T21:53:12.777Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:42:14.557Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:19:48.337Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:45:21.716Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:00:42.836Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:05:01.451Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:43:50.562Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:20:20.832Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:17:42.937Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:19:14.746Z","15.0.0-canary.4299717da.0":"2022-09-07T16:15:06.146Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:18:12.425Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:03:22.759Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:02:17.866Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:38:36.603Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:54:18.808Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:17:07.188Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:19:29.083Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:35:17.299Z","15.0.0-canary.9f17ff2cb.0":"2022-09-21T18:07:40.548Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:23:48.310Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:47:07.607Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:07:26.420Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:55:47.572Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:57:00.516Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:44:16.241Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:30:37.098Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:56:43.854Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:55:29.054Z","15.0.0-canary.db414b864.0":"2022-09-28T14:51:55.927Z","15.0.0-canary.c0462d134.0":"2022-09-28T17:51:27.473Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:06:10.436Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:55:02.513Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:30:32.953Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:13:13.404Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:20:29.033Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:17:32.803Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:18:30.690Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:03:05.172Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:14:12.440Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:50:14.917Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:36:51.525Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:54:22.740Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:05:09.397Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:07:09.692Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:37:19.335Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:48:14.040Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:01:36.929Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:57:43.794Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:20:04.288Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:40:44.298Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:50:32.507Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:13:12.067Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:50:50.535Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:17:04.650Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:55:31.534Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:21:38.920Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:56:21.286Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:39:42.548Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:41:33.697Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:22:32.969Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:41:54.165Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:12:39.128Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:16:26.798Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:36:14.230Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:10:55.555Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:55:59.413Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:05:02.964Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:18:27.207Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:58:24.599Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:44:16.857Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:29:32.219Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:14:20.141Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:31:37.773Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:48:25.455Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:55:34.472Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:36:05.150Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:09:55.282Z","15.0.0-canary.909b48215.0":"2022-11-03T04:06:58.744Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:18:14.872Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:58:14.692Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:56:15.055Z","15.0.0-canary.215506426.0":"2022-11-05T01:05:12.417Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:03:17.031Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:23:49.410Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:12:40.595Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:26:47.056Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:55:50.443Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:16:49.653Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:34:47.537Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:52:27.176Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:02:03.534Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:05:11.620Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:34:51.962Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:35:40.213Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:11:02.364Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:44:30.826Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:57:39.495Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:26:13.748Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:27:29.199Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:01:06.915Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:29:03.583Z","15.0.0-canary.b01136063.0":"2022-11-16T00:14:52.907Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:12:19.659Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:14:19.282Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:16:38.297Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:40:26.215Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:55:10.302Z","15.0.0-canary.7c73f6134.0":"2022-11-16T19:58:40.290Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:04:10.994Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:57:57.879Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:08:09.117Z","15.0.0-canary.bb7751002.0":"2022-11-16T23:59:17.599Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:00:21.528Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:54:25.635Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:03:53.437Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:20:14.261Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:15:18.501Z","15.0.0-canary.697fbdebd.0":"2022-11-18T16:59:46.717Z","15.0.0-canary.d58410453.0":"2022-11-18T19:24:08.010Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:44:27.292Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:52:56.025Z","15.0.0-canary.96f472604.0":"2022-11-21T12:51:51.689Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:01:34.388Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:53:10.688Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T18:59:43.684Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:30:09.296Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:15:38.625Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:38:31.773Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:55:56.411Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:14:35.209Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:12:55.754Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:46:32.640Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:10:46.541Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:33:02.527Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:47:55.721Z","15.0.0-canary.65c411674.0":"2022-11-29T17:37:24.505Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:13:22.437Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:06:05.464Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:28:10.416Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:53:42.731Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:23:12.818Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:00:59.021Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:00:11.902Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:05:58.282Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:25:40.106Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:41:45.846Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:24:51.461Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:51:11.337Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:02:02.620Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:40:31.368Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:43:23.082Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:30:00.335Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:45:27.609Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:01:16.363Z","15.0.0-canary.817002c29.0":"2022-12-13T21:53:07.756Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:27:58.250Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:18:03.955Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:43:59.279Z","15.0.0-canary.34767110.0":"2022-12-14T17:22:45.870Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:24:43.084Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:07:46.740Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:26:17.519Z","15.0.0-canary.604264203.0":"2022-12-21T21:40:03.375Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:24:20.804Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:11:27.255Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:04:12.162Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:02:54.810Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:50:47.631Z","15.0.0-canary.16abb41ed.0":"2022-12-28T19:37:40.759Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:01:21.917Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:40:13.402Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:05:05.178Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:46:58.016Z","15.0.0-canary.af490a848.0":"2023-01-03T15:56:05.592Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:37:52.668Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:12:26.778Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:31:43.233Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:16:47.823Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:36:17.715Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:34:56.783Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:02:05.561Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:08:37.313Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:20:44.416Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:15:24.276Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:42:13.926Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:23:12.880Z","15.0.0-canary.f476fdece.0":"2023-01-10T16:13:46.394Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:27:12.008Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:10:47.876Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:17:43.393Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:16:30.362Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:11:39.841Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:53:22.587Z","15.0.0-canary.202823f54.0":"2023-01-11T21:34:57.529Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:54:46.341Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:35:25.928Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:23:41.546Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:48:28.544Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:38:25.421Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:28:57.750Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:34:04.499Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:26:04.716Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:42:50.965Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:29:07.326Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:43:18.764Z","15.0.0-canary.15b221540.0":"2023-02-01T17:51:34.784Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:21:23.819Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:57:28.290Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:33:12.206Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:36:43.406Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:08:07.824Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:13:45.083Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:23:11.749Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:08:36.453Z","15.0.0-canary.de38de758.0":"2023-02-09T15:41:27.446Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:02:04.630Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:49:05.323Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:56:50.701Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:33:03.127Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:18:19.693Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:40:23.202Z","15.0.0-canary.901c83e77.0":"2023-02-27T18:05:08.645Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:34:41.921Z","15.0.0-canary.f32339937.0":"2023-03-06T15:14:39.470Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:26:34.248Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:40:54.494Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:41:59.944Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:25:32.373Z","15.0.0-canary.274610c77.0":"2023-03-09T14:57:39.846Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:51:44.401Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:17:13.216Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:44:06.653Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:46:24.207Z","15.0.0-canary.de5224633.0":"2023-03-09T23:54:53.687Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:07:00.596Z","15.0.0-canary.23073a303.0":"2023-03-10T14:13:53.770Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:46:29.934Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:47:09.864Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:24:01.266Z","15.0.0-canary.82554d770.0":"2023-03-11T01:36:24.032Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:37:32.594Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:43:15.774Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:46:34.045Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:00:54.782Z","15.0.0-canary.112715df5.0":"2023-03-13T18:38:14.023Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:30:33.702Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:38:01.733Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:42:26.527Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:51:41.542Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:15:29.357Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:46:28.837Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:15:49.081Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:19:14.598Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:23:01.810Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:25:35.771Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:26:08.645Z","15.0.0-canary.87809c710.0":"2023-03-14T18:42:29.532Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:46:51.064Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:57:47.187Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:12:30.585Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:10:21.278Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:39:55.292Z","15.0.0-canary.39e473690.0":"2023-03-21T17:50:19.288Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:57:18.499Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:49:06.208Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:33:37.065Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:46:00.347Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:40:15.224Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:06:55.403Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:52:50.382Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:54:42.425Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:29:25.334Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:03:08.352Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:41:29.918Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:36:58.354Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:39:01.421Z","15.0.0-canary.6f50071e5.0":"2023-04-20T17:59:56.252Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:49:59.202Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:20:09.460Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:20:40.582Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:30:26.980Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:32:26.847Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:40:57.031Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:08:24.467Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:55:15.084Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:25:20.950Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:37:55.522Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:22:04.901Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:29:22.787Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T17:59:24.841Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T01:59:02.672Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:53:03.195Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:24:25.164Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:41:40.158Z","15.0.0-canary.446734f27.0":"2023-05-30T21:47:11.988Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:17:03.241Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:13:03.254Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:16:06.182Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:04:52.066Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:37:15.665Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:02:31.272Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:55:59.988Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:15:25.742Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:22:40.495Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:12:56.299Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:24:39.928Z","15.0.0-canary.83355c322.0":"2023-07-10T15:04:06.446Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:18:48.664Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:46:03.991Z","15.0.0-canary.02702296e.0":"2023-08-25T12:03:49.884Z","15.0.0-canary.872b65832.0":"2023-08-30T12:11:48.811Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:05:33.462Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:38:16.593Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:03:48.815Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:43:52.101Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:15:00.352Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:10:49.554Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:44:29.764Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:12:54.825Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:05:09.712Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:21:52.404Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:43:23.094Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:35:43.470Z","15.0.0-canary.127a44b28.0":"2023-10-12T19:58:41.632Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:50:38.799Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:08:16.777Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:57:59.598Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:12:24.672Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:17:53.956Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:08:22.027Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:18:43.842Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:07:10.586Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:16:44.564Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:13:51.241Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:12:47.097Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:04:47.560Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:39:05.299Z","15.0.0-canary.311f29a60.0":"2024-04-23T17:58:40.846Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:47:44.293Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:01:53.349Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:12:19.118Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:53:48.435Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:55:55.792Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:11:34.742Z"},"readmeFilename":"","homepage":"https://github.com/material-components/material-components-web#readme"}